一文講明短信驗證流程的設計要點
很多項目中都包含了短信驗證流程的設計,為什么要進行驗證?
近期在做功能型項目的時候,發(fā)現好幾個項目都包含短信驗證流程的設計。
在設計中磕磕碰碰,遇到一些可以深挖的設計要點,本文將給大家講講在設計移動端短信驗證流程中的一些思考。
一、為什么要進行驗證
在開始設計之前,我們先弄清驗證場景的存在意義。
在人機交互的場景下,由于溝通主體差異(一方是人,一方是機器),導致需要對傳輸信息進行正確性判斷,這個時候信息驗證的訴求應運而生。而驗證手段有很多種,短信驗證作為通信驗證的其中一種形式,因其可低成本實現及低認知負擔的特性,目前廣泛應用于移動端界面上的驗證場景。
驗證所存在的需求場景,就類似于人之間打招呼的場景。
首先打招呼前,需要讓機器明白即將作出一系列指令的主體,即要打招呼的是“人”而不是“機器”,所以其驗證目的之一是:對操作者是否為人的身份驗證。
當機器知道了這就是要打招呼的對象后,為了滿足整個行為的順利完成,得需要讓機器知道“你”是否有打招呼的意愿,即驗證目的之二是:對操作者是否本人意愿操作的驗證。
所有的驗證實質都是在滿足以上的目的。
二、流程可視化設計思路
由于短信驗證流程是比較常規(guī)固化的基礎流程,在設計思路上為由抽象場景得出任務流程,再由任務流程具象交互界面的思路。其中具象交互界面的思路會拆分為考慮“展現形式”以及“頁面元素”,以更好地優(yōu)化體驗操作。
三、場景與流程
場景洞察
目前短信驗證的場景大部分存在于賬號登錄/注冊場景,修改個人重要信息場景等。
對于這些場景,我們需要洞察的要點主要為:
- 場景觸發(fā)——觸發(fā)這個場景的需求原因是什么?
- 場景目的——這個需求實際是為了解決什么問題?
- 場景任務——解決這個問題用戶需要執(zhí)行的任務是什么?
基于任務的得出,即可以得到用戶實際操作的一系列行為觸點,下面需要基于這些行為梳理流程。
流程梳理
流程梳理主要借助泳道圖的方式,以流程時間節(jié)奏以及參與角色作為橫豎維度劃分,梳理如下:
(由于本文主要討論前臺頁面設計,其中對后臺及第三方短信平臺的行為沒有作細致展開。)
前臺頁面的設計,我們主要關注“用戶”和“前臺客戶端”兩條豎軸的內容。
1. 用戶豎軸
由此可見用戶主要的行為分為四步:
- 輸入手機號;
- 獲取驗證碼;
- 輸入驗證碼;
- 提交。
這四個行為決定了頁面的功能呈現。
2. 前臺客戶端豎軸
主要決定了一些需要在前臺展示的基礎狀態(tài),梳理如下:
其中,流程和狀態(tài)的梳理只需一次性復盤,后續(xù)的類似短信驗證場景都可以快速地查看復用;但對于頁面細節(jié)的展示,還是需要根據實際項目場景來分析,所以下面將詳細介紹對于“展現形式”和“頁面元素”的思考。
四、展現形式的選擇
頁面形式or彈窗形式
首先,先了解兩種形式的特性:
1. 頁面形式
特點:內容承載范圍足夠大,信息承載能力強;體量重、給人感覺穩(wěn)定性更高;一般一頁只展示輸入驗證的功能,無其他內容干擾。
2. 彈窗形式
特點:多為模態(tài)彈窗;輕量化、響應快;可以不中斷用戶的當前核心操作,令用戶聚焦中心更集中以盡快完成驗證進入下一步任務。
了解特性后,我們還需要明確的問題是:短信驗證最終的展現形式,并不是由驗證流程決定,而是以其所存在的任務場景來定。因為驗證行為一般不會單獨存在,肯定會有前后任務場景的觸發(fā),以更好地服務于場景目的的達成。
舉個栗子說明:
某用戶換了新手機號碼后,為了在京東上更好地獲得訂單支付的短信提醒,需要修改綁定手機號的信息,因此需要利用新手機號短信驗證的手段達到目的。
代入場景洞察分析要點來看:
為了滿足“重新綁定手機號”任務的執(zhí)行完整性與正確性,短信驗證的操作步驟需要介入用戶輸入操作場景,它應跟手機號輸入信息共同考慮。
在場景基礎上結合用戶訴求,可發(fā)現:
- 當用戶需要重新綁定手機號的時候,肯定需要在產品中有一個穩(wěn)定可找到的入口。因為這個需求場景不是一次性的,可能會產生多次,且修改手機號的信息相對為個人的重要信息,用戶會更嚴謹地對待這個修改需求。由于該場景任務存在的必要性,該訴求的關鍵詞是:穩(wěn)定性。
- 當在做短信驗證的時候,用戶希望能更聚焦,直接地完成,認知上來講因為只有修改這一件事情,不應該被其他東西所打擾?;说年P鍵詞是:無干擾。
可見:結合前面梳理的形式特性,重新綁定手機號的場景任務更適合利用頁面形式來展現。
那么,對于彈窗形式,因為其輕量快速響應,大部分會適用于一些不好被打斷的場景任務。比如在某個一次性的H5活動頁中,用戶需要通過以短信驗證手段,登錄賬號來領取抽獎獎品。
這個場景下選擇彈窗形式,讓用戶有一種就差這一小步我就能馬上領到獎品的意識。若是頁面形式的,則會讓用戶感覺該驗證步驟形式太重,擔心是否領取步驟會很長或是否有成功領到獎品。
由于以上僅舉例頁面形式的場景,這里再給大家總結一下要點:
分步驗證or不分步驗證
由于短信驗證流程也算表單設計的其中一種,在做表單設計時有一個體驗建議是:一個頁面最好只做一件事情。
回顧上面總結的“用戶”豎軸,用戶的四個行為組成的任務為:
輸入手機號→獲取驗證碼→輸入驗證碼→提交
這里實際是要確定兩件事情:手機號信息和驗證碼信息。在體驗過不同競品后的感觸是:一步兩步其實對于實際操作負擔并沒有那么嚴重。因為我一心只想著快點完成這個短信驗證流程,從而登陸首頁或者成功修改信息。而分步驗證的目的則正好是為了達到高效專一。所以從體驗設計來講分步會比不分步更優(yōu)。
但分步驗證也會存在逆向操作成本增加的問題:
如果用戶臨時發(fā)現手機號碼填錯且已進入輸入驗證碼步驟,分布操作則需要用戶先點擊“返回”按鈕,清空手機號輸入欄再重新填寫。此處增加了一步點擊“返回”操作的成本。不分布操作由于都在當前頁面展示,則沒有這一步的成本。
但最終基于優(yōu)先為高頻場景考慮來講,上面問題的考慮優(yōu)先級較低,設計師需要明確這個風險,但不影響我們挑選體驗更好的解決方案。
五、頁面元素的優(yōu)化
驗證碼輸入——分數字框or不分數字框
關于這個設計點,其實優(yōu)劣是比較明顯的,因為分數字框的優(yōu)勢是:
- 能預知即將輸入的驗證碼有多少位,提供了記憶預期;
- 輸入出錯概率降低。
這些優(yōu)勢都能更好地保障流程的完整性與正確性,所以分數字框是更優(yōu)的方式。
但從體驗了安卓系統下的短信驗證輸入后發(fā)現,分數字位會導致一個功能問題是:
在安卓下進行短信驗證碼復制操作時,大部分場景只能復制到第一個數字框中。但該問題應該可以從前端優(yōu)化中得到解決,保證用戶復制操作的一步到位,不需要返回手動輸入的困境。
行動按鈕保留or去除
頁面中存在兩種行動按鈕:
- 獲取驗證碼(下文簡稱“獲取”)
- 提交(或者登錄/注冊,基于場景功能命名)前面也有提及用戶短信驗證的行為一共有四步,那么是否存在少于四步的操作?答案是有的。
我們可以對該兩個行動按鈕作即時信息對錯的判斷校驗,令頁面能在輸入信息后,自動前往下一個步驟,最多可以減少的是“獲取”和“提交”兩步。
但是這兩個按鈕是否都應該去除呢?再細致考慮發(fā)現:
1. 去掉“獲取”按鈕會令用戶缺少信息檢查的緩沖時間,用戶首次使用時對自動跳轉需要一定的反應時間,可能導致信息沒檢查就自動跳入下一步,增加了出錯概率。在“獲取”步驟下,設置按鈕能提醒用戶更加謹慎地去對待這個操作,也令用戶有多一個步驟的時間再次確認是否繼續(xù)往下驗證。
所以對于“獲取”按鈕來講,為了更好地保證短信驗證流程正常完成,還是需要留給用戶檢查的時間,保留“獲取”操作行動按鈕。
2. 對于提交按鈕來講,由于目前大部分用戶都會使用短信上的快速復制粘貼(安卓端)或鍵盤識別驗證碼一鍵輸入(iOS端)的功能,可以將驗證碼輸入的出錯概率大大減少。
基于這種前提下,提交按鈕則可以去除,令驗證碼結果檢驗正確時則自動跳入下一步驟。
六、優(yōu)化實例
經過這些設計點的探(jiu)索(jie)后,以彈窗形式為例總結了一個基礎短信驗證流程的模板,可供大家后續(xù)對于實際需求場景,在此基礎下進行優(yōu)化參考。
以上則是在設計過程中沉淀對短信驗證流程設計思考,如有疏漏歡迎大家留言討論!
作者:Saiko,公眾號:未知素設計
本文由 @小坑 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
邏輯清楚,閱讀通順,干貨不少,太棒了
寫的很詳細,考慮的太細了
做驗證不難,做好做細就不太容易了