從可用到易用的一次思考|手機獲取驗證碼那點體驗
我們做用戶體驗的不能將系統過失/產品過失遷就于我們的用戶。因為用戶永遠不會錯,用戶也沒有必要為產品和過失負責。我們要做的就是窮盡我們解決問題的能力幫助用戶獲得最佳的使用操作,并能帶來一絲的驚喜。
問題根源
最近在做公司某個PC端項目時涉及到企業要獲得權限必須進行一次資格認證。而在這個過程中,其中要緊的一步是進行手機號的驗證。但是,最近公司網站頻繁被黑,考慮到用戶手機號會受到騷擾,同時短信平臺也會增加無謂的流量壓力。因此凡是涉及到用戶進行手機號碼驗證的地方,都額外增加了輸入隨機驗證碼的步驟。
圖1 登錄輸入驗證碼
流程分析
從邏輯上來講這個操作并不復雜,對照隨機驗證碼內的字符輸入即可,如果看不清楚,點擊換一張(刷新)即可。而且放到整個操作流程上來說也只是多一步操作而已。
圖2?任務流程分析
用戶操作行為分析
看似只是增加了一個簡單的輸入驗證碼的步驟,但是實際上進行用戶行為分解時其實是復雜了很多。其中微動作的分析下可以發現:
圖3?用戶操作流程分析
- 企業用戶在平臺上的上一步操作中點擊提交下一步,來到手機驗證這一步時,手機號是不用再次輸入的,因為這個必須而且是必要的從用戶中心獲取;
- 實際上輸入隨即驗證碼是這個頁面操作的第一步,但是這個步驟中因為驗證碼規則安全性的考慮,采用字母+數字組合的方式。殊不知在鍵盤上數字區域和字母區域相距較遠,操作切換過程花費時間會比較長。(用戶目標是企業用戶,臺式機占大部分);
- 另外獲取手機驗證碼時用戶行為需要從鍵盤上切換到鼠標上從而獲取手機驗證;
- 輸入手機驗證碼是6位數字,又需要切換到鼠標。
明確問題
看似簡單增加一個驗證碼,實際上在第2步操作以及切換到第3步操作的過程上給用戶操作帶來不必要的繁瑣和時間冗長。
雖然添加隨機驗證碼有這樣的缺點,但是其簡單的邏輯以及被帶壞的用戶操作習慣造成我們在設計上的思維定勢。誤以為這就是最合理的解決方案,雖然不是最佳的,但是確實最穩妥,最沒有爭議的而且對于技術實施來說也相對容易。
那么還有沒有更好的操作方式,或許在看到上述表述,你的心里已經有了更好的解決方案。但是不要著急,因為我也找到了一種比較合理的方法。慢慢看來,是不是和你的一樣。
分析問題
解決一個問題之前首先要做的是這個問題的來源是什么。
我在前面講到了這個問題的來源是因為平臺頻繁被黑,無法判斷獲取手機驗證碼的是來自于真實的用戶還是程序下的黑客們。
那這樣做的目的又是為了什么呢?
- 為了讓我們的系統認定這個操作是人為的;
- 為了防止黑客惡意獲取對短信平臺造成影響;
- 為了保護用戶信息的安全;
- 為了提高用戶操作效率(優化的最重要目的)。
產品案例分析
知道問題是什么以及要做什么了,那么我們看看有什么好的可以借鑒的操作方式么。
首先想到的是某付寶,我們來看看這個據說是互聯網信息安全最厲害的公司是怎么做的。
圖4 拖動滑塊驗證方式(1)
這個一滑到底的操作方式想必很多人都用過。其延伸的操作方式有:
圖5 拖動滑塊驗證方式(2)
這個是比較有趣味的解決方式,利用大家熟知的拼圖方式(建立簡單的認知模型)結合卡通形象做一個趣味性的驗證方式。
圖6 拖動滑塊驗證方式(6)
除了卡通形象外,另外像人人網登錄驗證時,用戶拖動滑塊到指定位置并且成功后提示用戶拖動滑塊的時間并做了一個百分數的排名,轉移用戶的對因安全驗證而增加的滑動驗證的抱怨,增加趣味性并且通過排名激勵用戶下次對使用滑塊的期待。這種方式也是極為不錯的。
方案設計
結合當前比較流行的滑動驗證的方式,首先我先做了一個流程上的優化分析。
- 原始流程中輸入隨機驗證碼-獲取手機驗證碼-輸入手機驗證碼,對應著動作操作為鍵盤輸入-鼠標點擊-鍵盤輸入;
- 優化流程為拖動滑塊獲取驗證碼-輸入驗證碼,對應著動作操作為鼠標拖動-鍵盤輸入。
流程上優化方案確定后,接著進行原型頁面設計,如下圖:
圖7 設計優化方案
優化方案提出后,經過產品評審和技術評審討論,這個方案從開發邏輯上來說相對于隨機驗證碼方式復雜了許多,因為這里需要前端去控制滑塊的移動,移動位置數據的隨機規則會比驗證碼隨機生成的規則不同。雖然在一定程度上增加開發周期,但是能夠滿足產品安全策略并且提供一個良好的用戶體驗。所以方案評審通過,并且進入開發。
總結
- 這個方案能夠實施推進的前提條件是手機號碼必須要先輸入正確;
- 簡單的交互,能夠滿足可用性,但是還不夠易用性;
- 用戶體驗也是可以迭代的,綜合考慮開發成本、上線時間等因素,用戶體驗在版本迭代中慢慢提升;
- 當產品處在功能快速迭代的時候,產品的用戶體驗會在上線時間緊迫的壓縮下損失一部分,但是對于細節的體驗要保持持續的關注。
作者:Nick Chen,微信號:Chen_YonWei,從事某互聯網行業,3年交互設計,擅長場景分析和產品品牌分析。曾主導過智能硬件,Web后臺管理等多端的用戶體驗工作。偶爾做做平面設計和3D建模設計。
本文由Nick Chen原創 發布于人人都是產品經理。未經許可,禁止轉載。
果然遇到了這種實現的網站,輸入完驗證碼后,自動獲取手機號碼。不用切換輸入框,不用挪動鼠標。也不用切換鍵盤http://www.onethingcloud.cn/html/login.html?jumpurl=http%3A%2F%2Fwww.onethingcloud.cn%2Fsite%2Findex.html
很神奇,我已經下意識要去自動切換到下一項了
要盡可能的提高用戶體驗,同時保證安全性,非常關鍵的一點是了解黑客的破解原理,對癥下藥。也就是說驗證碼設計中哪些因素與破解難度息息相關,不然你如何才能確保此驗證碼的安全性就一定優于另一種?以下是我能想到的可能的因素:
1、哪些操作時可以將人與機器區分開來的?如拖動滑塊到指定位置即可認定為認為操作
2、字母數字等多字符組合是否比單純的數字組合更安全?多字符是否比少量字符更安全?漢字、算術計算等是否比隨機字符的破解難度更高?
3、3次以內就能破解的概率大嗎?如果非常非常小,完全可以在登錄時密碼輸入錯誤3次后才要求輸入驗證碼
另,個人認為比較簡單的提高驗證碼體驗的方法:
1、如果多字符比少量更安全,字母數字組合比單純數字更安全,建議通過增加字符長度而非使用數字字母混合的方式提高安全性,這樣可減少用戶切換輸入法的操作
2、發送手機驗證碼時,請以驗證碼開發,對于很多手機,可以從短信摘要中就看到驗證碼,而不需要點開短信查看
小小提醒:圖4拖動滑塊驗證方式(1)是某寶的注冊,不是某付寶的注冊哦~
復制粘貼
??
樓主說的不錯,但是。。其實驗證碼破解才是硬傷吶。。做起來都好做,既要保證用戶體驗,又要有好的效果,除非阿里系的滑塊,別的效果都挺差,試用過或者購買過很多服務。。感覺都是坑。。
“驗證碼破解才是硬傷”這句話的意思是驗證碼被破解才是硬傷不?滑塊是前端表現形式,后端隨機規則是核心。
嗯,其實我理解驗證碼只是風控采集信息 以及 限制某些低級批量行為的