很多項(xiàng)目中都包含了短信驗(yàn)證流程的設(shè)計(jì)，為什么要進(jìn)行驗(yàn)證？

近期在做功能型項(xiàng)目的時(shí)候，發(fā)現(xiàn)好幾個(gè)項(xiàng)目都包含短信驗(yàn)證流程的設(shè)計(jì)。

在設(shè)計(jì)中磕磕碰碰，遇到一些可以深挖的設(shè)計(jì)要點(diǎn)，本文將給大家講講在設(shè)計(jì)移動(dòng)端短信驗(yàn)證流程中的一些思考。

一、為什么要進(jìn)行驗(yàn)證

在開(kāi)始設(shè)計(jì)之前，我們先弄清驗(yàn)證場(chǎng)景的存在意義。

在人機(jī)交互的場(chǎng)景下，由于溝通主體差異（一方是人，一方是機(jī)器），導(dǎo)致需要對(duì)傳輸信息進(jìn)行正確性判斷，這個(gè)時(shí)候信息驗(yàn)證的訴求應(yīng)運(yùn)而生。而驗(yàn)證手段有很多種，短信驗(yàn)證作為通信驗(yàn)證的其中一種形式，因其可低成本實(shí)現(xiàn)及低認(rèn)知負(fù)擔(dān)的特性，目前廣泛應(yīng)用于移動(dòng)端界面上的驗(yàn)證場(chǎng)景。

驗(yàn)證所存在的需求場(chǎng)景，就類似于人之間打招呼的場(chǎng)景。

首先打招呼前，需要讓機(jī)器明白即將作出一系列指令的主體，即要打招呼的是“人”而不是“機(jī)器”，所以其驗(yàn)證目的之一是：對(duì)操作者是否為人的身份驗(yàn)證。

當(dāng)機(jī)器知道了這就是要打招呼的對(duì)象后，為了滿足整個(gè)行為的順利完成，得需要讓機(jī)器知道“你”是否有打招呼的意愿，即驗(yàn)證目的之二是：對(duì)操作者是否本人意愿操作的驗(yàn)證。

所有的驗(yàn)證實(shí)質(zhì)都是在滿足以上的目的。

二、流程可視化設(shè)計(jì)思路

由于短信驗(yàn)證流程是比較常規(guī)固化的基礎(chǔ)流程，在設(shè)計(jì)思路上為由抽象場(chǎng)景得出任務(wù)流程，再由任務(wù)流程具象交互界面的思路。其中具象交互界面的思路會(huì)拆分為考慮“展現(xiàn)形式”以及“頁(yè)面元素”，以更好地優(yōu)化體驗(yàn)操作。

三、場(chǎng)景與流程

場(chǎng)景洞察

目前短信驗(yàn)證的場(chǎng)景大部分存在于賬號(hào)登錄/注冊(cè)場(chǎng)景，修改個(gè)人重要信息場(chǎng)景等。

對(duì)于這些場(chǎng)景，我們需要洞察的要點(diǎn)主要為：

1. 場(chǎng)景觸發(fā)——觸發(fā)這個(gè)場(chǎng)景的需求原因是什么？
2. 場(chǎng)景目的——這個(gè)需求實(shí)際是為了解決什么問(wèn)題？
3. 場(chǎng)景任務(wù)——解決這個(gè)問(wèn)題用戶需要執(zhí)行的任務(wù)是什么？

基于任務(wù)的得出，即可以得到用戶實(shí)際操作的一系列行為觸點(diǎn)，下面需要基于這些行為梳理流程。

流程梳理

流程梳理主要借助泳道圖的方式，以流程時(shí)間節(jié)奏以及參與角色作為橫豎維度劃分，梳理如下：

（由于本文主要討論前臺(tái)頁(yè)面設(shè)計(jì)，其中對(duì)后臺(tái)及第三方短信平臺(tái)的行為沒(méi)有作細(xì)致展開(kāi)。）

前臺(tái)頁(yè)面的設(shè)計(jì)，我們主要關(guān)注“用戶”和“前臺(tái)客戶端”兩條豎軸的內(nèi)容。

1. 用戶豎軸

由此可見(jiàn)用戶主要的行為分為四步：

1. 輸入手機(jī)號(hào)；
2. 獲取驗(yàn)證碼；
3. 輸入驗(yàn)證碼；
4. 提交。

這四個(gè)行為決定了頁(yè)面的功能呈現(xiàn)。

2. 前臺(tái)客戶端豎軸

主要決定了一些需要在前臺(tái)展示的基礎(chǔ)狀態(tài)，梳理如下：

其中，流程和狀態(tài)的梳理只需一次性復(fù)盤(pán)，后續(xù)的類似短信驗(yàn)證場(chǎng)景都可以快速地查看復(fù)用；但對(duì)于頁(yè)面細(xì)節(jié)的展示，還是需要根據(jù)實(shí)際項(xiàng)目場(chǎng)景來(lái)分析，所以下面將詳細(xì)介紹對(duì)于“展現(xiàn)形式”和“頁(yè)面元素”的思考。

四、展現(xiàn)形式的選擇

頁(yè)面形式or彈窗形式

首先，先了解兩種形式的特性：

1. 頁(yè)面形式

特點(diǎn)：內(nèi)容承載范圍足夠大，信息承載能力強(qiáng)；體量重、給人感覺(jué)穩(wěn)定性更高；一般一頁(yè)只展示輸入驗(yàn)證的功能，無(wú)其他內(nèi)容干擾。

2. 彈窗形式

特點(diǎn)：多為模態(tài)彈窗；輕量化、響應(yīng)快；可以不中斷用戶的當(dāng)前核心操作，令用戶聚焦中心更集中以盡快完成驗(yàn)證進(jìn)入下一步任務(wù)。

了解特性后，我們還需要明確的問(wèn)題是：短信驗(yàn)證最終的展現(xiàn)形式，并不是由驗(yàn)證流程決定，而是以其所存在的任務(wù)場(chǎng)景來(lái)定。因?yàn)轵?yàn)證行為一般不會(huì)單獨(dú)存在，肯定會(huì)有前后任務(wù)場(chǎng)景的觸發(fā)，以更好地服務(wù)于場(chǎng)景目的的達(dá)成。

舉個(gè)栗子說(shuō)明：

某用戶換了新手機(jī)號(hào)碼后，為了在京東上更好地獲得訂單支付的短信提醒，需要修改綁定手機(jī)號(hào)的信息，因此需要利用新手機(jī)號(hào)短信驗(yàn)證的手段達(dá)到目的。

代入場(chǎng)景洞察分析要點(diǎn)來(lái)看：

為了滿足“重新綁定手機(jī)號(hào)”任務(wù)的執(zhí)行完整性與正確性，短信驗(yàn)證的操作步驟需要介入用戶輸入操作場(chǎng)景，它應(yīng)跟手機(jī)號(hào)輸入信息共同考慮。

在場(chǎng)景基礎(chǔ)上結(jié)合用戶訴求，可發(fā)現(xiàn)：

1. 當(dāng)用戶需要重新綁定手機(jī)號(hào)的時(shí)候，肯定需要在產(chǎn)品中有一個(gè)穩(wěn)定可找到的入口。因?yàn)檫@個(gè)需求場(chǎng)景不是一次性的，可能會(huì)產(chǎn)生多次，且修改手機(jī)號(hào)的信息相對(duì)為個(gè)人的重要信息，用戶會(huì)更嚴(yán)謹(jǐn)?shù)貙?duì)待這個(gè)修改需求。由于該場(chǎng)景任務(wù)存在的必要性，該訴求的關(guān)鍵詞是：穩(wěn)定性。
2. 當(dāng)在做短信驗(yàn)證的時(shí)候，用戶希望能更聚焦，直接地完成，認(rèn)知上來(lái)講因?yàn)橹挥行薷倪@一件事情，不應(yīng)該被其他東西所打擾。基此的關(guān)鍵詞是：無(wú)干擾。

可見(jiàn)：結(jié)合前面梳理的形式特性，重新綁定手機(jī)號(hào)的場(chǎng)景任務(wù)更適合利用頁(yè)面形式來(lái)展現(xiàn)。

那么，對(duì)于彈窗形式，因?yàn)槠漭p量快速響應(yīng)，大部分會(huì)適用于一些不好被打斷的場(chǎng)景任務(wù)。比如在某個(gè)一次性的H5活動(dòng)頁(yè)中，用戶需要通過(guò)以短信驗(yàn)證手段，登錄賬號(hào)來(lái)領(lǐng)取抽獎(jiǎng)獎(jiǎng)品。

這個(gè)場(chǎng)景下選擇彈窗形式，讓用戶有一種就差這一小步我就能馬上領(lǐng)到獎(jiǎng)品的意識(shí)。若是頁(yè)面形式的，則會(huì)讓用戶感覺(jué)該驗(yàn)證步驟形式太重，擔(dān)心是否領(lǐng)取步驟會(huì)很長(zhǎng)或是否有成功領(lǐng)到獎(jiǎng)品。

由于以上僅舉例頁(yè)面形式的場(chǎng)景，這里再給大家總結(jié)一下要點(diǎn)：

分步驗(yàn)證or不分步驗(yàn)證

由于短信驗(yàn)證流程也算表單設(shè)計(jì)的其中一種，在做表單設(shè)計(jì)時(shí)有一個(gè)體驗(yàn)建議是：一個(gè)頁(yè)面最好只做一件事情。

回顧上面總結(jié)的“用戶”豎軸，用戶的四個(gè)行為組成的任務(wù)為：

輸入手機(jī)號(hào)→獲取驗(yàn)證碼→輸入驗(yàn)證碼→提交

這里實(shí)際是要確定兩件事情：手機(jī)號(hào)信息和驗(yàn)證碼信息。在體驗(yàn)過(guò)不同競(jìng)品后的感觸是：一步兩步其實(shí)對(duì)于實(shí)際操作負(fù)擔(dān)并沒(méi)有那么嚴(yán)重。因?yàn)槲乙恍闹幌胫禳c(diǎn)完成這個(gè)短信驗(yàn)證流程，從而登陸首頁(yè)或者成功修改信息。而分步驗(yàn)證的目的則正好是為了達(dá)到高效專一。所以從體驗(yàn)設(shè)計(jì)來(lái)講分步會(huì)比不分步更優(yōu)。

但分步驗(yàn)證也會(huì)存在逆向操作成本增加的問(wèn)題：

如果用戶臨時(shí)發(fā)現(xiàn)手機(jī)號(hào)碼填錯(cuò)且已進(jìn)入輸入驗(yàn)證碼步驟，分布操作則需要用戶先點(diǎn)擊“返回”按鈕，清空手機(jī)號(hào)輸入欄再重新填寫(xiě)。此處增加了一步點(diǎn)擊“返回”操作的成本。不分布操作由于都在當(dāng)前頁(yè)面展示，則沒(méi)有這一步的成本。

但最終基于優(yōu)先為高頻場(chǎng)景考慮來(lái)講，上面問(wèn)題的考慮優(yōu)先級(jí)較低，設(shè)計(jì)師需要明確這個(gè)風(fēng)險(xiǎn)，但不影響我們挑選體驗(yàn)更好的解決方案。

五、頁(yè)面元素的優(yōu)化

驗(yàn)證碼輸入——分?jǐn)?shù)字框or不分?jǐn)?shù)字框

關(guān)于這個(gè)設(shè)計(jì)點(diǎn)，其實(shí)優(yōu)劣是比較明顯的，因?yàn)榉謹(jǐn)?shù)字框的優(yōu)勢(shì)是：

1. 能預(yù)知即將輸入的驗(yàn)證碼有多少位，提供了記憶預(yù)期；
2. 輸入出錯(cuò)概率降低。

這些優(yōu)勢(shì)都能更好地保障流程的完整性與正確性，所以分?jǐn)?shù)字框是更優(yōu)的方式。

但從體驗(yàn)了安卓系統(tǒng)下的短信驗(yàn)證輸入后發(fā)現(xiàn)，分?jǐn)?shù)字位會(huì)導(dǎo)致一個(gè)功能問(wèn)題是：

在安卓下進(jìn)行短信驗(yàn)證碼復(fù)制操作時(shí)，大部分場(chǎng)景只能復(fù)制到第一個(gè)數(shù)字框中。但該問(wèn)題應(yīng)該可以從前端優(yōu)化中得到解決，保證用戶復(fù)制操作的一步到位，不需要返回手動(dòng)輸入的困境。

行動(dòng)按鈕保留or去除

頁(yè)面中存在兩種行動(dòng)按鈕：

1. 獲取驗(yàn)證碼（下文簡(jiǎn)稱“獲取”）
2. 提交（或者登錄/注冊(cè)，基于場(chǎng)景功能命名）前面也有提及用戶短信驗(yàn)證的行為一共有四步，那么是否存在少于四步的操作？答案是有的。

我們可以對(duì)該兩個(gè)行動(dòng)按鈕作即時(shí)信息對(duì)錯(cuò)的判斷校驗(yàn)，令頁(yè)面能在輸入信息后，自動(dòng)前往下一個(gè)步驟，最多可以減少的是“獲取”和“提交”兩步。

但是這兩個(gè)按鈕是否都應(yīng)該去除呢？再細(xì)致考慮發(fā)現(xiàn)：

1. 去掉“獲取”按鈕會(huì)令用戶缺少信息檢查的緩沖時(shí)間，用戶首次使用時(shí)對(duì)自動(dòng)跳轉(zhuǎn)需要一定的反應(yīng)時(shí)間，可能導(dǎo)致信息沒(méi)檢查就自動(dòng)跳入下一步，增加了出錯(cuò)概率。在“獲取”步驟下，設(shè)置按鈕能提醒用戶更加謹(jǐn)慎地去對(duì)待這個(gè)操作，也令用戶有多一個(gè)步驟的時(shí)間再次確認(rèn)是否繼續(xù)往下驗(yàn)證。

所以對(duì)于“獲取”按鈕來(lái)講，為了更好地保證短信驗(yàn)證流程正常完成，還是需要留給用戶檢查的時(shí)間，保留“獲取”操作行動(dòng)按鈕。

2. 對(duì)于提交按鈕來(lái)講，由于目前大部分用戶都會(huì)使用短信上的快速?gòu)?fù)制粘貼（安卓端）或鍵盤(pán)識(shí)別驗(yàn)證碼一鍵輸入（iOS端）的功能，可以將驗(yàn)證碼輸入的出錯(cuò)概率大大減少。

基于這種前提下，提交按鈕則可以去除，令驗(yàn)證碼結(jié)果檢驗(yàn)正確時(shí)則自動(dòng)跳入下一步驟。

六、優(yōu)化實(shí)例

經(jīng)過(guò)這些設(shè)計(jì)點(diǎn)的探(jiu)索(jie)后，以彈窗形式為例總結(jié)了一個(gè)基礎(chǔ)短信驗(yàn)證流程的模板，可供大家后續(xù)對(duì)于實(shí)際需求場(chǎng)景，在此基礎(chǔ)下進(jìn)行優(yōu)化參考。

以上則是在設(shè)計(jì)過(guò)程中沉淀對(duì)短信驗(yàn)證流程設(shè)計(jì)思考，如有疏漏歡迎大家留言討論！

作者：Saiko，公眾號(hào)：未知素設(shè)計(jì)

本文由 @小坑 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。