設計心得:如何提高驗證方式的可用性

3 評論 12798 瀏覽 42 收藏 15 分鐘

驗證碼的作用是什么呢?它有哪些類別?怎樣平衡用戶體驗和用戶帳號信息、敏感信息安全性之間的關系呢?本人做過一點通行證相關的交互設計工作,現在整理一下和大家分享,并和大家探討如何提高驗證方式的可用性。

相信大家在進行“登錄”、“注冊”或是敏感信息操作時經常會被要求輸入驗證碼,有些驗證碼很難識別,用戶輸入體驗不是很好。下圖是大家一直熱議的12306網站的驗證方式,故意的文字扭曲和低分辨率圖像是為了防機器人刷票,但是,機器識別麻煩的,人同樣也麻煩,人識別簡單的,機器也容易破解,打個不太恰當的比喻,這就像癌癥化療,消滅癌細胞的同時也損害健康細胞。

1

12306的圖文驗證式驗證碼

驗證碼的類型

第一類:簡單的數字、數字加字母、加減乘除

這類圖片驗證碼用途廣泛,在web網頁端和各種智能終端用來防止機器人軟件惡意注冊、暴力登錄、短信防刷等用途。

2

常見的數字字母組合的驗證碼

(1)分析

它的優點在于圖庫豐富,可較好的防止爬蟲遍歷,缺點是需要用戶手動收入,尤其是在移動端鍵盤較小、環境較復雜的使用場景,隨著圖片驗證碼的變形程度加大,用戶的輸入正確率降低。

(2)交互可用性

為了提高用戶的輸入效率,經量降低用戶的厭煩情緒,交互規則可以采用“圖片驗證碼實時校驗”和“輸入錯誤后自動刷新圖片”兩種方式。前一種方式是給用戶實時操作反饋,讓用戶“知錯就改”,避免用戶“千辛萬苦”輸入完成后再提示錯誤,造成用戶的挫折感;后一種方式是用戶在輸入錯誤時不用手動點擊圖片刷新而是圖片自動刷新,盡量減少用戶操作步驟,同時給予用戶積極引導,用戶看到圖片已經刷新了,就會比較愿意再試一次。

第二類:圖文/標驗證式、拖動驗證式等

上文介紹的目前廣泛使用的圖片驗證碼,最早的靈感可能來自卡內基梅隆大學(本人最想讀卻讀不起的大學~)的路易斯·馮·安(Luis von Ahn)在2002年設計的扭曲的英文字符驗證碼。但之后,慢慢出現了圖文/標驗證式、拖動驗證式等“五花八門”的驗證方式。

3

拖動驗證式驗證碼

4

圖文驗證式驗證碼

(1)分析

這類驗證碼在移動端和網頁端都有所使用,因為控件需要較大的放置空間,所以網頁端使用更多一些。圖文/標驗證式、拖動驗證式驗證碼的優點是不需要用戶鍵盤輸入,而且形式新穎,有一點“游戲”的味道,用戶可能會有想要“玩一玩”的心理。

但是,就像上文提到的12306案例,一些知識性和常識性的問題有些用戶可能并不知道,因此無法選擇;另外,對于一些中老年用戶或是較少使用電腦和智能終端的用戶,這種稍顯“新穎”的驗證方式讓他們“不知所措”產生恐慌。技術方面,我們可能感覺第二類驗證方式比第一類簡單的字母數字組合更復雜,因此會更加安全,其實,用戶覺得越來越難并不代表機器越來越難破解。

(2)交互可用性

目前趨勢是這類驗證方式被越來越多的運用,但是建議盡量用在大屏幕的手機、平板設備和電腦上,如果在小屏幕手機上使用這種驗證方式,會占用較大的屏幕空間,感覺控件過“重”。有些產品的交互規則定為開始隱藏,隨條件觸發這種驗證方式,觸發彈出時往往會遮蓋其他控件或引起“跳屏”。其實,在小屏幕上用手指點擊和拖動滑塊不一定比鍵盤輸入的成本低。

第三類:綜合型

前兩種對比可知,第一種較“輕”,第二種較“重”,而且各有優缺點,那么用戶必須二選其一嗎?其實,在安全性和綜合體驗的動態平衡中,設計師和工程師一直不斷努力研究可用性更好的驗證方式,于是產生了一種“綜合型”的驗證方式。

55

綜合型驗證方式

(1)分析

這種方式簡單來說就是通過分析用戶進行相應操作時的行為來判斷訪問者是人還是機器。這種方式的原理基礎是人和機器在操作時,二者的環境、動作、頻率和邏輯等是不同的。反映在交互上就是通過拆分步驟的方式進行多步驗證。

(2)交互可用性

這種驗證方式的優點在于,對于低風險環境,用戶可以單步驟驗證通過,可用性良好;對于高風險的環境,則根據風險情況觸發第一類或第二類驗證方式。這種“區別對待”的驗證方式是將“麻煩事”由用戶方推給了技術方,從而大大提升了可用性。但是,這種方式需要依靠強大的技術力量支持,并且攻擊者即便不能正面突破,也可以故意觸發二次驗證的方式進行破解。

以上探討了一些驗證碼的現實情況,但這些大都屬于傳統的驗證思路。傳統的驗證方式難逃“認”和“識”兩個理解維度,就像開篇化療的比喻一樣,通過犧牲可用性和體驗來降低機器的破解率,最終的效果是“傷敵一千自損八百”。同時,傳統的驗證思路建立在一個假設的基礎上:人比機器的“認”、“識”能力強。但這個認知“鴻溝”隨著光學字符識別技術(Optical Character Recognition,OCR)、機器學習等技術的發展而慢慢填平甚至“權利反轉”。

第四類:利用個體特殊性

我們看待驗證碼問題的視野和理解應該突破傳統的限制而找到其他的解決方式,解決方法不僅僅依靠技術的進步,還要分析人和機器的深層次區別。目前比較好的案例是一些電商網站將用戶的購買數據作為安全驗證的素材或是面部識別等高排他性的安全驗證方式,這就是突破了“認”、“識”的表象來思考人和機器的本質問題。

6

(1)分析

隨著驗證碼攻防戰的不斷進行,人們對安全驗證的理解不斷加深,隨著指紋識別、面部識別等技術的發展,誕生了一系列高排他性的安全驗證手段。同時,根據特定的產品和平臺特性,合理的運用用戶行為數據,可以設計出一些相對安全有效的安全驗證方式。

(2)交互可用性

利用個體特殊性進行的安全驗證不需要在認知表層對用戶進行強攔截;同時,手機驗證碼識別、指紋識別和面部識別等快速認證方式用戶路徑短、效率高;其他利用用戶信息進行的驗證方式也為用戶提供了更多的選擇,雖然并不是所有產品和平臺都可以輕松獲取到用戶的高價值信息。

總結:目前為止還沒有完美的安全驗證措施

略顯悲觀地說,目前還沒有絕對安全的密碼和安全驗證手段,將賭注完全押在驗證碼上并不保險。我們應該怎樣在盡量保證可用性和綜合體驗的前提下盡量保證帳號安全呢?答案就是:打造綜合帳號安全體系。

1. 要善于和工程師溝通,他們會讓我們的交互邏輯更嚴謹

交互設計師考慮可用性的問題往往只是站在用戶使用的維度,其實可用性優劣也體現在技術邏輯和工程師的代碼呈現方面。例如,技術方面我們要考慮到驗證碼的容災,那么在交互方面我們可能就要設計幾種不同的驗證方式,這樣在一種方式被攻陷后可以馬上換用另外一種驗證方式;再比如,我們可以在技術上采用驗證碼自動降級功能,根據輸入情況逐級降低用戶的輸入門檻,這同樣也反映出設計方面積極考慮用戶可用性的問題。

2. 綜合考慮同屏驗證和跨屏驗證的不同使用場景,設計相應方案

目前的情況來看,跨屏驗證比同屏驗證安全性要高。手機上/下行的驗證方式是目前比較安全和用戶接受度較高的跨屏驗證方式(當然還有登錄保護、二維碼掃描等其他好的方式),但也要考慮到手機不在身邊或者號碼不可用等情況,還要考慮控制短信下發量等情況,所以一般還要配合圖片驗證碼等同屏驗證方式,這時候就要考慮同屏跨屏方式的取舍和配合的不同交互方式了。

3. 深入了解驗證碼和安全驗證的意義,不只是停留在方式的選擇層面

驗證碼的全稱是“全自動區分計算機和人類的公開圖靈測試”(Completely?Automated?Public?Turing test totell?Computers and?Humans?Apart,簡稱CAPTCHA)。自從艾倫·麥席森·圖靈(AlanMathison Turing)1950年的論文《計算機器與智能》提出“圖靈測試”開始,驗證碼問題便不再“單純”,呈現在用戶眼前的“看似簡單的”驗證碼的背后是復雜的技術和設計的動態取舍平衡。

4. 設計師解決驗證碼問題的方式并不是要“一頭扎進”驗證碼里

遇到安全驗證流程設計時,設計師自然的想到努力將驗證流程本身做到“極致”,追求步驟盡量少、可用性盡量好等目標。這樣做并沒有錯,但驗證碼終究是被動的“防守”策略,我們要在交互上尋找主動的方式來提高帳號安全性。提高帳號安全性常見的方法就是適當的時候(比如用戶進行敏感操作時)引導用戶綁定安全手機、密保郵箱或是進行實名認證或是定期引導用戶修改密碼等,這些設置可以方便用戶在發生安全風險的時候及時補救、盡量降低用戶帳號風險。想要引導用戶完成這些轉化并不容易,探討這些轉化問題又需要另開新題,暫不贅述,在此想表達的核心思想是,設計師要跳出驗證碼的單一維度。

最后要說明的是,驗證碼不是一個功能性需求,它的作用通俗的來講就是要將人和機器區分開,驗證碼“攻防戰”仍然是一個持續的議題,設計師和工程師都要不斷探索,在設計的過程中時刻注意動態平衡安全性和用戶體驗的天平。

 

作者:何巖,網易用戶中心交互設計師,正在修煉將復雜邏輯轉化為友好體驗的神奇魔法,經常“騷擾”產品、視覺和開發同事。喜歡有氧運動和新鮮的空氣,不玩游戲的奇怪男生,因為人丑所以一直想把字寫好,歐楷滿月水平,歡迎賜教。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 一文讀懂了驗證碼。

    回復
    1. 哈哈 太好了,也不枉設計師用心總結。何巖是網易通行證的設計師,在注冊登錄方面的有大量的實戰經驗。

      來自浙江 回復
    2. 對我很有用,哈哈。曾經也一直在糾結要哪種形式驗證碼,看完文章知道了。

      來自廣東 回復