聊一聊不同應用場景下的驗證碼

5 評論 15384 瀏覽 81 收藏 9 分鐘

最近在做關于驗證碼的項目的時候,從交互的角度梳理了產品各個平臺驗證碼的應用場景。在一個產品中,會有多個設計師分工協作,不同的設計師做設計迭代。由于驗證碼在整體設計中太容易被忽略,它在每個場景的顯示邏輯可能不盡相同。下面,我們就來聊一聊不同應用場景下的驗證碼。

說到驗證碼,我們一定會想到12306!12306是驗證碼網紅屆的鼻祖扛把子,可以說12306讓驗證碼成為全民娛樂(tu cao)的一種方式。

既然大家覺得驗證碼是種糟糕的用戶體驗,為什么我們在設計過程中還是不能缺少它的存在呢?

(戲談驗證碼)

簡而言之,驗證碼的存在是為了驗證注冊的用戶是計算機還是人,許多網絡惡意攻擊都是惡意的機器程序所導致,驗證碼能夠有效的防止惡意破解密碼、刷票、論壇灌水,防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

驗證碼通過人可以識別而機器無法識別這樣的邏輯來設計,無論它以什么形式出現,設置驗證碼機制都是個必要的門檻。下面總結一下驗證碼在產品中出現的場景和交互流程。

1、注冊

我們通常見到驗證碼是在注冊登錄場景,注冊時出現在注冊流程里。

過去,大多數的網站注冊頁面往往選擇一頁填寫完所有信息,在主流程中不需要綁定手機號,一鍵即可提交注冊。這種注冊方式在老式的論壇很常見。

(某游戲開發者論壇注冊頁)

當綁定手機號在注冊流程里時,下面一定會跟隨短信驗證環節。這個時候圖形驗證碼和短信驗證同時存在的設計就有幾種情況了。

首先可以確定的是圖形驗證和短信驗證之間有邏輯相關性,他們之間的相關性一般體現在如下三種設計中:

(1)同頁面顯示

圖形驗證碼放置在手機驗證碼之前,通過圖形驗證碼后才可觸發手機驗證碼的獲取。

(京東注冊頁)

(2)不同頁面顯示

這種情況發生在注冊本身就是分頁分步驟進行的,如下圖:

圖形驗證會跟在輸入用戶名之后,一般在第一步出現,在點擊下一步后會到達短信驗證界面。從用戶體驗上來講,運用分步設計引導性更強,一般用在需要輸入多種信息的時候,用戶會有比較清晰的邏輯,并且對何時完成有一個預判。這個時候,圖形驗證的結果就影響了用戶能否順利進入下一步短信驗證。

(3)彈窗式圖形驗證

這種交互邏輯是用戶輸入合規手機號時,點擊獲取短信驗證碼,會彈出圖形驗證請求,驗證成功后彈窗消失,系統給用戶發出驗證短信。在這個邏輯里,圖形驗證就作為發送短信的觸發條件。

圖形驗證作為短信驗證的觸發點的設計是符合邏輯的。

在圍觀群眾看到圖形驗證的時候,他們不能了解到這種驗證方式與其他信息是否存在內在聯系,認為圖形驗證對于注冊過程來說是一種累贅,但是我們在圖形驗證之后加入短信觸發的功能,它就成為一種既有實際功效而同時具有簡便操作的東西了。

2、登錄

圖形驗證碼在登錄時有兩種出現情況:

一種是用戶第一次登陸的時候就存在,作為順利登錄的必要填寫內容。但是這種情況對用戶體驗而言不太友好,用戶本身對于登錄的預期并不包含輸入驗證碼這一環節。把圖形驗證碼加到登陸頁面上,這相當于多了這樣一個“門檻”,如果驗證碼很難識別,用戶會趁早的拋棄你的應用,尋求更好體驗的平臺。

另一種情況是目前大部分產品采用的設計,在用戶輸入用戶名或登錄密碼錯誤超過設定次數時,圖形驗證碼出現。這種設計的內在邏輯是用戶輸入錯誤多次,我們會判斷是否是機器人在測試數字密碼,這時候我們就用圖形驗證來擋掉機器的攻擊。

(登錄)

3、重置密碼

用戶在登錄頁面時會有“忘記密碼”的入口,在重設密碼流程里也需要輸入驗證碼。

首先重置流程里要求輸入已注冊用戶郵箱或手機號并驗證圖片驗證碼,之后在進入找回流程。這里圖形驗證碼可視作后續步驟的觸發,二者存在順序關聯性。

(重置密碼)

4、結論

梳理圖形驗證碼的交互場景,是為了在設計時能做出充分考慮,而不是隨意放置。

設計不統一最大的問題是不符合用戶心理預期。圖形驗證碼其實并不像綁定手機的短信驗證那么具有連貫性,它可以單獨存在也可以上下關聯,但無論何種設計都應該一致。如果同一個頁面上驗證碼有時出現,有時不出現,會讓經常使用產品的用戶沒有一個統一的體驗。這種小的困擾能避免還是要避免的。

(設計不統一)

整個產品的交互應該是具有統一性的,包括頁面跳轉細節。除了樣式選擇外,驗證碼的顯示邏輯當然也需要統一。到底和短信驗證碼是怎樣的邏輯關系,這個邏輯需要從始至終。許多設計師容易忽略這一點,驗證碼出現的時機千奇百怪,這樣同樣會給用戶造成一定困擾。

 

作者:Fino(點融黑幫),UX部門交互設計師一枚。

本文由@點融黑幫(ID:DianrongMafia)原創發布于人人都是產品經理,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問下在找回密碼時,圖形驗證碼的存在是否必要?手機驗證碼本身不能保證系統性能和數據安全嗎?

    來自江蘇 回復
    1. 傳統驗證碼體驗太渣,破解成本很低,隨時會面臨風險的,可以試試體驗更加友好的同盾智能驗證

      來自浙江 回復
  2. 為什么要加驗證碼呢?小編給解釋下唄!

    來自北京 回復
    1. 驗證碼本身對用戶來說是個非常糟糕的存在,但是之所以要加,是對系統性能(識別機器/真實用戶)、用戶數據安全(判斷當前登錄用戶是否是用戶本人,而非用戶親戚、朋友或其他別有用心的人)等多方面的妥協。

      來自廣東 回復
    2. 最重要的是防止機器跑程序,盜刷企業的短信和郵箱流量!

      來自北京 回復