很多項目中都包含了短信驗證流程的設計，為什麼要進行驗證？

近期在做功能型項目的時候，發現好幾個項目都包含短信驗證流程的設計。

在設計中磕磕碰碰，遇到一些可以深挖的設計要點，本文将給大家講講在設計移動端短信驗證流程中的一些思考。

一、為什麼要進行驗證

在開始設計之前，我們先弄清驗證場景的存在意義。

在人機交互的場景下，由于溝通主體差異（一方是人，一方是機器），導緻需要對傳輸信息進行正确性判斷，這個時候信息驗證的訴求應運而生。而驗證手段有很多種，短信驗證作為通信驗證的其中一種形式，因其可低成本實現及低認知負擔的特性，目前廣泛應用于移動端界面上的驗證場景。

驗證所存在的需求場景，就類似于人之間打招呼的場景。

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

當機器知道了這就是要打招呼的對象後，為了滿足整個行為的順利完成，得需要讓機器知道“你”是否有打招呼的意願，即驗證目的之二是：對操作者是否本人意願操作的驗證。

所有的驗證實質都是在滿足以上的目的。

二、流程可視化設計思路

由于短信驗證流程是比較常規固化的基礎流程，在設計思路上為由抽象場景得出任務流程，再由任務流程具象交互界面的思路。其中具象交互界面的思路會拆分為考慮“展現形式”以及“頁面元素”，以更好地優化體驗操作。

三、場景與流程

場景洞察

目前短信驗證的場景大部分存在于賬号登錄/注冊場景，修改個人重要信息場景等。

對于這些場景，我們需要洞察的要點主要為：

1. 場景觸發——觸發這個場景的需求原因是什麼？
2. 場景目的——這個需求實際是為了解決什麼問題？
3. 場景任務——解決這個問題用戶需要執行的任務是什麼？

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

流程梳理

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

（由于本文主要讨論前台頁面設計，其中對後台及第三方短信平台的行為沒有作細緻展開。）

前台頁面的設計，我們主要關注“用戶”和“前台客戶端”兩條豎軸的内容。

1. 用戶豎軸

由此可見用戶主要的行為分為四步：

1. 輸入手機号；
2. 獲取驗證碼；
3. 輸入驗證碼；
4. 提交。

這四個行為決定了頁面的功能呈現。

2. 前台客戶端豎軸

主要決定了一些需要在前台展示的基礎狀态，梳理如下：

其中，流程和狀态的梳理隻需一次性複盤，後續的類似短信驗證場景都可以快速地查看複用；但對于頁面細節的展示，還是需要根據實際項目場景來分析，所以下面将詳細介紹對于“展現形式”和“頁面元素”的思考。

四、展現形式的選擇

頁面形式or彈窗形式

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

1. 頁面形式

特點：内容承載範圍足夠大，信息承載能力強；體量重、給人感覺穩定性更高；一般一頁隻展示輸入驗證的功能，無其他内容幹擾。

2. 彈窗形式

特點：多為模态彈窗；輕量化、響應快；可以不中斷用戶的當前核心操作，令用戶聚焦中心更集中以盡快完成驗證進入下一步任務。

了解特性後，我們還需要明确的問題是：短信驗證最終的展現形式，并不是由驗證流程決定，而是以其所存在的任務場景來定。因為驗證行為一般不會單獨存在，肯定會有前後任務場景的觸發，以更好地服務于場景目的的達成。

舉個栗子說明：

某用戶換了新手機号碼後，為了在京東上更好地獲得訂單支付的短信提醒，需要修改綁定手機号的信息，因此需要利用新手機号短信驗證的手段達到目的。

代入場景洞察分析要點來看：

為了滿足“重新綁定手機号”任務的執行完整性與正确性，短信驗證的操作步驟需要介入用戶輸入操作場景，它應跟手機号輸入信息共同考慮。

在場景基礎上結合用戶訴求，可發現：

1. 當用戶需要重新綁定手機号的時候，肯定需要在産品中有一個穩定可找到的入口。因為這個需求場景不是一次性的，可能會産生多次，且修改手機号的信息相對為個人的重要信息，用戶會更嚴謹地對待這個修改需求。由于該場景任務存在的必要性，該訴求的關鍵詞是：穩定性。
2. 當在做短信驗證的時候，用戶希望能更聚焦，直接地完成，認知上來講因為隻有修改這一件事情，不應該被其他東西所打擾。基此的關鍵詞是：無幹擾。

可見：結合前面梳理的形式特性，重新綁定手機号的場景任務更适合利用頁面形式來展現。

那麼，對于彈窗形式，因為其輕量快速響應，大部分會适用于一些不好被打斷的場景任務。比如在某個一次性的H5活動頁中，用戶需要通過以短信驗證手段，登錄賬号來領取抽獎獎品。

這個場景下選擇彈窗形式，讓用戶有一種就差這一小步我就能馬上領到獎品的意識。若是頁面形式的，則會讓用戶感覺該驗證步驟形式太重，擔心是否領取步驟會很長或是否有成功領到獎品。

由于以上僅舉例頁面形式的場景，這裡再給大家總結一下要點：

分步驗證or不分步驗證

由于短信驗證流程也算表單設計的其中一種，在做表單設計時有一個體驗建議是：一個頁面最好隻做一件事情。

回顧上面總結的“用戶”豎軸，用戶的四個行為組成的任務為：

輸入手機号→獲取驗證碼→輸入驗證碼→提交

這裡實際是要确定兩件事情：手機号信息和驗證碼信息。在體驗過不同競品後的感觸是：一步兩步其實對于實際操作負擔并沒有那麼嚴重。因為我一心隻想着快點完成這個短信驗證流程，從而登陸首頁或者成功修改信息。而分步驗證的目的則正好是為了達到高效專一。所以從體驗設計來講分步會比不分步更優。

但分步驗證也會存在逆向操作成本增加的問題：

如果用戶臨時發現手機号碼填錯且已進入輸入驗證碼步驟，分布操作則需要用戶先點擊“返回”按鈕，清空手機号輸入欄再重新填寫。此處增加了一步點擊“返回”操作的成本。不分布操作由于都在當前頁面展示，則沒有這一步的成本。

但最終基于優先為高頻場景考慮來講，上面問題的考慮優先級較低，設計師需要明确這個風險，但不影響我們挑選體驗更好的解決方案。

五、頁面元素的優化

驗證碼輸入——分數字框or不分數字框

關于這個設計點，其實優劣是比較明顯的，因為分數字框的優勢是：

1. 能預知即将輸入的驗證碼有多少位，提供了記憶預期；
2. 輸入出錯概率降低。

這些優勢都能更好地保障流程的完整性與正确性，所以分數字框是更優的方式。

但從體驗了安卓系統下的短信驗證輸入後發現，分數字位會導緻一個功能問題是：

在安卓下進行短信驗證碼複制操作時，大部分場景隻能複制到第一個數字框中。但該問題應該可以從前端優化中得到解決，保證用戶複制操作的一步到位，不需要返回手動輸入的困境。

行動按鈕保留or去除

頁面中存在兩種行動按鈕：

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

我們可以對該兩個行動按鈕作即時信息對錯的判斷校驗，令頁面能在輸入信息後，自動前往下一個步驟，最多可以減少的是“獲取”和“提交”兩步。

但是這兩個按鈕是否都應該去除呢？再細緻考慮發現：

1. 去掉“獲取”按鈕會令用戶缺少信息檢查的緩沖時間，用戶首次使用時對自動跳轉需要一定的反應時間，可能導緻信息沒檢查就自動跳入下一步，增加了出錯概率。在“獲取”步驟下，設置按鈕能提醒用戶更加謹慎地去對待這個操作，也令用戶有多一個步驟的時間再次确認是否繼續往下驗證。

所以對于“獲取”按鈕來講，為了更好地保證短信驗證流程正常完成，還是需要留給用戶檢查的時間，保留“獲取”操作行動按鈕。

2. 對于提交按鈕來講，由于目前大部分用戶都會使用短信上的快速複制粘貼（安卓端）或鍵盤識别驗證碼一鍵輸入（iOS端）的功能，可以将驗證碼輸入的出錯概率大大減少。

基于這種前提下，提交按鈕則可以去除，令驗證碼結果檢驗正确時則自動跳入下一步驟。

六、優化實例

經過這些設計點的探(jiu)索(jie)後，以彈窗形式為例總結了一個基礎短信驗證流程的模闆，可供大家後續對于實際需求場景，在此基礎下進行優化參考。

以上則是在設計過程中沉澱對短信驗證流程設計思考，如有疏漏歡迎大家留言讨論！

作者：Saiko，公衆号：未知素設計

本文由 @小坑 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部