跳到主要內容區
圖像驗證碼,與如何讓它更好的3個設計思路
設計概念

圖像驗證碼,與如何讓它更好的3個設計思路

為何視障者難以通過驗證?從實務出發,重新設計圖像驗證的可能性。

更新日期:2022/09/09

發布日期:2022/09/09

作者:Sam

圖像驗證碼,與如何讓它更好的 3 個設計思路

在數位服務中,為了防止惡意程式或機器人攻擊,我們常常會遇到需要輸入驗證碼的環節。然而,傳統圖像驗證碼或是拼圖驗證碼,因為其對身體能力的要求,因而會使部分使用者無法完成操作。

圖像驗證碼的無障礙困境

圖片驗證碼通常包含兩個部分:一張寫有文字的圖片以及輸入格。在使用者訪談中,視覺障礙者 W 提到的驗證碼便是屬於此類:

扭曲且帶有干擾線的英數字圖像驗證碼

另一款包含背景雜訊與重疊文字的圖像驗證碼

這類傳統驗證碼需要良好的視覺識別能力。如果文字扭曲過於嚴重、干擾線太多,對於低視能者、高齡者或認知障礙者來說,都會形成極高的阻礙。

拼圖驗證碼

還有一種類型的圖片驗證碼,操作方式是讓使用者透過拼圖來完成一張圖。

線上商城拼圖驗證畫面:線上商城的驗證環節使用「向右滑動完成拼圖」,將一塊拼圖使用滑軌使其跟圖片中的缺口對齊。

日本銀行拼圖驗證畫面:日本銀行使用的驗證是將兩塊拼圖拼進具有拼圖缺口的圖片中。

這類型能夠使驗證環節不憑依語言能力,即便看不懂提示語言,大致也能從圖片樣貌判斷需要完成的任務。

CAUTION

拼圖驗證碼同樣會造成視覺障礙者完全無法使用之外,通常也因為會需要滑鼠,無法使用鍵盤操作,因而使只使用鍵盤的使用者無法操作。除此之外,也因為必須先準確識別拼圖與缺口,把圖片準確對準缺口,對操作的精度要求很高,因此手眼協調能力,手的穩定性也會被有所要求。

讓驗證環節更好的 3 個設計思路

為了同時兼顧資安防護與無障礙體驗,設計師與工程團隊在規劃產品時,可以從以下三個思路來尋找替代方案:

思路一:尋找更無障礙的驗證碼服務

如果必須使用人機驗證測試,應優先選擇提供多重感官通道(Multi-modal)的成熟服務。

Google reCAPTCHA 驗證界面:Google 提供的 reCAPTCHA。一般雖然是「選擇包含自行車的方塊」的圖像辨識,但是可以點選「改答語音版本驗證測試」選擇不同驗證方式。

透過引入支持多種驗證形式的系統,能確保當使用者無法通過視覺挑戰時,仍有其他管道可以順利完成驗證。

思路二:提供不同途徑的驗證碼(例如語音)

在架構設計上,為主體驗證機制提供替代路徑(Alternative access pathway)。例如在圖像驗證碼旁,直接整合語音播放功能。

證券登入網頁的語音驗證切換畫面

切換至語音驗證後顯示按此播放驗證碼的功能介面

TIP

當使用者點選「切換至語音驗證」後,系統會提供語音播放驗證碼的功能。這種設計能直接幫助視覺障礙者或閱讀障礙者繞過視覺限制。

思路三:使用新興技術如生物認證、多要素認證(MFA)

許多新興技術除了能夠提供傳統方法外不同的解決思路。上述傳統的驗證類雖然可能可以抵禦部分機器的攻擊,終究無法抵禦人為或甚至是更高程度的機器攻擊(如使用了 OCR 技術等)。因此,現在有些新的解決方案或技術能夠提供不論是體驗上或資安上更好的選擇。

  • 生物認證:例如現在在手機上都有搭載生物辨識系統(指紋辨識或臉部辨識)。生物認證能夠更有效地確認這是本人在操作,能提供更高的安全性以及更便利的使用體驗。
  • 多要素認證(MFA):要求使用使用者的其他裝置(如簡訊驗證碼、認證 App 提示)來驗證,避免在單一網頁介面上進行高難度的圖形操作。

IMPORTANT

作為設計師,除了知道現有的驗證碼存在許多問題,也需要跟工程團隊更密切地討論還存在怎麼樣的技術可能性。

希望這篇文章能帶給你一些啟發,之後我們也會分享更多從無障礙設計角度的設計探討文章。

參考資料

  • Gmail 搜尋關鍵字:"圖像驗證碼,與如何讓它更好的 3 個設計思路"
本文作者

本文作者

Sam

社科出身的產品設計師,關心包容性設計相關議題。喜歡探索社會、人與設計的交互關係。在日本奮鬥中💪