最近在做關(guān)于驗(yàn)證碼項(xiàng)目的時(shí)候，從交互的角度梳理了各個(gè)平臺(tái)驗(yàn)證碼的應(yīng)用場(chǎng)景，今天總結(jié)一下驗(yàn)證碼在產(chǎn)品中出現(xiàn)的場(chǎng)景和交互流程。
歡迎關(guān)注點(diǎn)融設(shè)計(jì)中心DDC微信公眾號(hào)(微信ID：DR_DDC)
在一個(gè)產(chǎn)品中，會(huì)有多個(gè)設(shè)計(jì)師分工協(xié)作，也會(huì)由不同的設(shè)計(jì)師做設(shè)計(jì)迭代，驗(yàn)證碼這個(gè)“不起眼”的存在很可能會(huì)被忽略，導(dǎo)致它在每個(gè)場(chǎng)景的顯示邏輯不盡相同。下面，我們就來聊一聊不同應(yīng)用場(chǎng)景下的驗(yàn)證碼。
網(wǎng)上一查驗(yàn)證碼，出來的相關(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)證碼通過人可以識(shí)別而機(jī)器無法識(shí)別這樣的邏輯來設(shè)計(jì)，無論它以什么形式出現(xiàn)，都是個(gè)必要的門檻。
一、注冊(cè)
我們通常見到它的場(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)容。這在老式的論壇很常見。
△ 圖2 某游戲開發(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)行的。如下圖：
圖形驗(yàn)證會(huì)跟在輸入用戶名之后，一般在第一步出現(xiàn)。在點(diǎn)擊下一步后會(huì)到達(dá)短信驗(yàn)證界面。從用戶體驗(yàn)上來講，運(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í)，并沒有發(fā)現(xiàn)它的出現(xiàn)和其他信息有什么內(nèi)在聯(lián)系，覺得沒用而累贅。而一旦變成了短信觸發(fā)時(shí)，用戶就會(huì)認(rèn)為它是有作用的。
二、登錄
圖形驗(yàn)證碼在登錄時(shí)有兩種出現(xiàn)情況。一種是一開始就存在，作為順利登錄的必要填寫內(nèi)容。然而這種情況對(duì)用戶不太友好，因?yàn)橛脩舯旧韺?duì)于登錄的預(yù)期并不包含輸入驗(yàn)證碼這一環(huán)節(jié)，多了這樣一個(gè)“門檻”，尤其是驗(yàn)證碼過于難識(shí)別時(shí)，就會(huì)給用戶造成不好的體驗(yàn)。
另一種情況就是大部分產(chǎn)品采用的設(shè)計(jì)，在用戶輸入用戶名或登錄密碼錯(cuò)誤超過設(shè)定次數(shù)時(shí)，驗(yàn)證碼出現(xiàn)。這種設(shè)計(jì)的內(nèi)在邏輯是用戶輸入錯(cuò)誤多次很有可能是機(jī)器人在試數(shù)字，所以出現(xiàn)圖形驗(yàn)證來?yè)醯魴C(jī)器的攻擊。這種邏輯就很容易讓用戶理解。
△ 圖5 豆瓣登錄輸錯(cuò)密碼后需要輸驗(yàn)證碼
三、重置密碼
用戶在登錄頁(yè)面時(shí)會(huì)有“忘記密碼”的入口(或者“無法登錄?”)。重設(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)一最大的問題是不符合用戶心理預(yù)期。圖形驗(yàn)證碼其實(shí)并不像綁定手機(jī)的短信驗(yàn)證那么具有連貫性，它可以單獨(dú)存在也可以上下關(guān)聯(lián)，但無論何種設(shè)計(jì)都應(yīng)該一致。如果同一個(gè)頁(yè)面上驗(yàn)證碼有時(shí)出現(xiàn)，有時(shí)不出現(xiàn)，會(huì)讓經(jīng)常使用產(chǎn)品的用戶沒有一個(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ì)給用戶造成一定困擾。
