最近在做關(guān)于驗(yàn)證碼的項(xiàng)目的時(shí)候，從交互的角度梳理了產(chǎn)品各個(gè)平臺(tái)驗(yàn)證碼的應(yīng)用場(chǎng)景。在一個(gè)產(chǎn)品中，會(huì)有多個(gè)設(shè)計(jì)師分工協(xié)作，也會(huì)由不同的設(shè)計(jì)師做設(shè)計(jì)迭代，驗(yàn)證碼這個(gè)“不起眼”的存在很可能會(huì)被忽略，導(dǎo)致它在每個(gè)場(chǎng)景的顯示邏輯不盡相同。下面，我們就來(lái)聊一聊不同應(yīng)用場(chǎng)景下的驗(yàn)證碼。
網(wǎng)上一查驗(yàn)證碼，出來(lái)的相關(guān)詞都是“反人類”，尤其是“反人類”的新高度12306的驗(yàn)證碼。?
圖1 12306驗(yàn)證碼
驗(yàn)證碼的存在如此反用戶體驗(yàn)，為什么還是不能缺少的呢？簡(jiǎn)而言之，就是為了證明你是個(gè)人而不是機(jī)器，我們所知的許多網(wǎng)絡(luò)惡意攻擊都是機(jī)器惡意刷導(dǎo)致的，為了安全就必須設(shè)個(gè)門檻將機(jī)器拒之門外。驗(yàn)證碼通過(guò)人可以識(shí)別而機(jī)器無(wú)法識(shí)別這樣的邏輯來(lái)設(shè)計(jì)，無(wú)論它以什么形式出現(xiàn)，都是個(gè)必要的門檻。下面總結(jié)一下驗(yàn)證碼在產(chǎn)品中出現(xiàn)的場(chǎng)景和交互流程。
一、注冊(cè)
我們通常見(jiàn)到它的場(chǎng)景是注冊(cè)登錄場(chǎng)景，注冊(cè)時(shí)會(huì)出現(xiàn)在一般注冊(cè)流程里。
大多數(shù)網(wǎng)站注冊(cè)頁(yè)面選擇一頁(yè)填寫完所有信息，一鍵提交注冊(cè)完成。在綁定手機(jī)號(hào)不在主流程內(nèi)時(shí)，驗(yàn)證碼多數(shù)情況出現(xiàn)在最后一步填寫內(nèi)容。這在老式的論壇很常見(jiàn)。
圖2 某游戲開(kāi)發(fā)者論壇注冊(cè)頁(yè)
當(dāng)綁定手機(jī)號(hào)在注冊(cè)流程里時(shí)，下面一定會(huì)跟隨短信驗(yàn)證環(huán)節(jié)。這個(gè)時(shí)候圖形驗(yàn)證碼和短信驗(yàn)證同時(shí)存在的設(shè)計(jì)就有幾種情況了。
首先可以確定的是圖形驗(yàn)證和短信驗(yàn)證之間有邏輯相關(guān)性。他們之間的相關(guān)性一般體現(xiàn)在三種設(shè)計(jì)上。
A 在同頁(yè)面顯示。圖形驗(yàn)證碼放置在手機(jī)驗(yàn)證碼之前，獲取手機(jī)驗(yàn)證碼需要正確驗(yàn)證圖形驗(yàn)證碼才可觸發(fā)。?
圖3 京東網(wǎng)站注冊(cè)頁(yè)
B 在不同頁(yè)面顯示。這種情況發(fā)生在注冊(cè)本身就是分頁(yè)分步驟進(jìn)行的。如下圖：
圖4
圖形驗(yàn)證會(huì)跟在輸入用戶名之后，一般在第一步出現(xiàn)。在點(diǎn)擊下一步后會(huì)到達(dá)短信驗(yàn)證界面。從用戶體驗(yàn)上來(lái)講，運(yùn)用分步設(shè)計(jì)引導(dǎo)性更強(qiáng)，一般用在需要輸入多種信息的時(shí)候，用戶會(huì)有比較清晰的邏輯，并且對(duì)何時(shí)完成有一個(gè)預(yù)判。這個(gè)時(shí)候，圖形驗(yàn)證的結(jié)果就影響了用戶能否順利進(jìn)入下一步短信驗(yàn)證。
C 彈窗式圖形驗(yàn)證。這種交互邏輯是用戶輸入合規(guī)手機(jī)號(hào)時(shí)，點(diǎn)擊獲取短信驗(yàn)證碼，會(huì)彈出圖形驗(yàn)證請(qǐng)求，驗(yàn)證成功后彈窗消失，系統(tǒng)給用戶發(fā)出驗(yàn)證短信。在這個(gè)邏輯里，圖形驗(yàn)證就作為發(fā)送短信的觸發(fā)條件。
圖形驗(yàn)證作為短信驗(yàn)證的觸發(fā)點(diǎn)的設(shè)計(jì)是符合邏輯的。因?yàn)楸旧眚?yàn)證“一個(gè)人是人”和“這個(gè)人是你”是有承接關(guān)系的。如果不先驗(yàn)證我是人，驗(yàn)證我是我又有什么用呢？另外圖形驗(yàn)證總是被詬病是不明真相的群眾在看到它時(shí)，并沒(méi)有發(fā)現(xiàn)它的出現(xiàn)和其他信息有什么內(nèi)在聯(lián)系，覺(jué)得沒(méi)用而累贅。而一旦變成了短信觸發(fā)時(shí)，用戶就會(huì)認(rèn)為它是有作用的。
二、登錄
圖形驗(yàn)證碼在登錄時(shí)有兩種出現(xiàn)情況。一種是一開(kāi)始就存在，作為順利登錄的必要填寫內(nèi)容。然而這種情況對(duì)用戶不太友好，因?yàn)橛脩舯旧韺?duì)于登錄的預(yù)期并不包含輸入驗(yàn)證碼這一環(huán)節(jié)，多了這樣一個(gè)“門檻”，尤其是驗(yàn)證碼過(guò)于難識(shí)別時(shí)，就會(huì)給用戶造成不好的體驗(yàn)。
另一種情況就是大部分產(chǎn)品采用的設(shè)計(jì)，在用戶輸入用戶名或登錄密碼錯(cuò)誤超過(guò)設(shè)定次數(shù)時(shí)，驗(yàn)證碼出現(xiàn)。這種設(shè)計(jì)的內(nèi)在邏輯是用戶輸入錯(cuò)誤多次很有可能是機(jī)器人在試數(shù)字，所以出現(xiàn)圖形驗(yàn)證來(lái)?yè)醯魴C(jī)器的攻擊。這種邏輯就很容易讓用戶理解。
圖5 豆瓣登錄輸錯(cuò)密碼后需要輸驗(yàn)證碼
三、重置密碼
用戶在登錄頁(yè)面時(shí)會(huì)有“忘記密碼”的入口（或者“無(wú)法登錄？”）。重設(shè)密碼流程里也需要輸入驗(yàn)證碼。首先會(huì)要求輸入已注冊(cè)用戶郵箱或手機(jī)號(hào)并驗(yàn)證圖片驗(yàn)證碼，之后才能進(jìn)入找回流程。這里驗(yàn)證圖形驗(yàn)證碼也可視作后續(xù)步驟的觸發(fā)，二者存在關(guān)聯(lián)性。
?
圖6 微博找回密碼
結(jié)論：
梳理圖形驗(yàn)證碼的交互場(chǎng)景，是為了在設(shè)計(jì)時(shí)能做出充分考慮，而不是隨意放置。
設(shè)計(jì)不統(tǒng)一最大的問(wèn)題是不符合用戶心理預(yù)期。圖形驗(yàn)證碼其實(shí)并不像綁定手機(jī)的短信驗(yàn)證那么具有連貫性，它可以單獨(dú)存在也可以上下關(guān)聯(lián)，但無(wú)論何種設(shè)計(jì)都應(yīng)該一致。如果同一個(gè)頁(yè)面上驗(yàn)證碼有時(shí)出現(xiàn)，有時(shí)不出現(xiàn)，會(huì)讓經(jīng)常使用產(chǎn)品的用戶沒(méi)有一個(gè)統(tǒng)一的體驗(yàn)。這種小的困擾能避免還是要避免的。
圖7 設(shè)計(jì)不統(tǒng)一
整個(gè)產(chǎn)品的交互應(yīng)該是具有統(tǒng)一性的，包括頁(yè)面跳轉(zhuǎn)細(xì)節(jié)。除了樣式選擇外，驗(yàn)證碼的顯示邏輯當(dāng)然也需要統(tǒng)一。到底和短信驗(yàn)證碼是怎樣的邏輯關(guān)系，這個(gè)邏輯需要從始至終。許多設(shè)計(jì)師容易忽略這一點(diǎn)，驗(yàn)證碼出現(xiàn)的時(shí)機(jī)千奇百怪，這樣同樣會(huì)給用戶造成一定困擾。
Via:?dianrong
