向手機發送驗證碼來對手機號進行驗證這個流程是直接在一個界面內完成比較合適還是分開成2個界面完成呢?

業務前提是這樣的:需要驗證用戶手機號,驗證方式是用戶輸入發送給他的驗證碼。

常見場景:註冊、用戶激活、密碼找回等

補充幾個案例:


一個頁面可以完成的事情,為什麼要放兩個頁面,less is more.


先來抒發一番,自從Amy拉我進知乎,就沒有貢獻過任何東西,倏然間來個微信,amy來邀請了,於是正兒八經來寫點文字。

從問題看,這是一個簡單的需求:輸入手機號碼,獲取驗證碼,輸入驗證碼,通過驗證。

需求簡單,流程簡單,設計看起來也很簡單。但是,不容置疑的是,這是一個相當大眾和廣泛的需求,這個需求在很多產品上是一個基本的前提,不要因為這個需求簡單,就輕視起來。也許,你嚴肅對待一個複雜的需求,設計得很好,很漂亮,但它在4、5級頁面,有多少人看到呢?相反,驗證手機號碼這個頁面卻是人人都看得見,摸得著的,所以,這是我們重視的基本原因。

啊啊,好像說了好多題外話。。。

其實,我想說的是,這個需求其實不簡單:

1、輸入手機號碼,驗證前後是否可以修改,立即修改?

2、驗證碼如果沒收到怎麼辦?

3、驗證碼多久過期,過期怎麼辦?

4、如何重新發送驗證碼,間隔多久可以發送?

5、能否使用其他方式獲取驗證碼,例如語音獲取?

6、一般需要手機驗證的產品或業務不僅僅只是一個手機號碼的欄位,它跟其他輸入框欄位的關係如何,驗證碼輸入之後其他欄位能否修改?

這裡面邏輯多了去,不同的邏輯需要不同的展現形式。

我們看一下現有的一些例子:

安裝數字證書

快捷支付

招商銀行

支付寶境外支付頁面

淘寶註冊

財付通手機註冊好吧,不再舉例了,從這些例子可以看出:

1、涉及到資金及身份驗證的業務才需要手機號碼的驗證,這對於國內是這樣,但是國外,例如app store,paypal,ebay等就沒有,也可能是國外公司難以驗證。

2、大多數是在一個頁面完成,少數使用彈層。

3、其實之前也有設計過在兩個頁面去分步實施的,例如財付通的開通一點通流程,但現在都改過來了。

4、其實以上設計都不算完美,目前有更優化的設計在進行中。

5、對於手機端的。。。不好意思,我還要向大家學習哦。


我個人覺得應該分為2個步驟,原因如下:

1.發送驗證碼和輸入驗證碼是2個步驟,為什麼要放在一起?

2.如果,我是指如果,如果後期有新的元素添加進來,怎麼辦?


分兩步。但由後台來判斷呈現給用戶一步還是兩步。page1---輸入手機號,page2---輸入驗證碼(並能重新獲取驗證碼)。

第一種情況,從上一頁面緩存來的手機號正確,發送驗證碼並直接進入page2。

第二種情況,如果上頁不能緩存手機號(如更改聯繫方式時),進入page1----》page2。


一個頁面也有他的弊端,

這麼多輸入項,一項錯誤,就需要返回,噁心的時候,很多時候,一旦錯誤返回,前面填的內容都沒了。


在移動客戶端上應該是分兩個步驟,因為界面放不下這麼多內容,而且輸入+按鈕+輸入+按鈕這樣的方式界面上看起來不好看。

空間的問題看下圖。 如果還有輸入驗證碼和確認的按鈕,那麼就基本要被鍵盤擋住了。

輸入手機號碼,點擊確定之後自動切換到下一個輸入驗證碼的界面,對用戶來說更加有引導性,而且也不增加額外的操作,功能還更加專註。


這個我真的很想說話。

很多移動端項目的註冊登錄環節都接手了。

拿註冊來說

手機號、驗證碼、密碼在一個頁面上的做過,拆成2個頁面先驗證手機號再輸入密碼的也做過。3個步驟做成3個頁面的也做過。

覺得從用戶體驗的角度來講,3個頁面使用更順暢、干擾最少、頁面更乾淨。

從安全和開發角度來講,1個或2個頁面執行起來更簡單,因為一起判斷3個欄位就oK了。在我前一個項目中,技術總監偏向1個頁面,但對我造成了很大的困擾,因為我們不光要考慮用戶體驗流暢性,更要考慮各種極端情況。

如果一個頁面有3個輸入框,那麼每個輸入框的改變都形成了一個新的組合。我們對於每種組合會出現的情況都需要做出相應的提示。(但是往往現實中,每人會輸入了手機號,又改了手機號,再輸入原來手機號接收到的驗證碼)

今天又開始做註冊了,我的新技術總監告訴我,如果用3個頁面來註冊,安卓系統存在黑客直接將中間校驗驗證碼的環節去掉,只輸入手機號並設置密碼完成註冊。我不知道技術上有沒有辦法避免這種問題出現。如果有,總比犧牲用戶體驗要好。

但是作為用戶,對於在一個頁面輸入手機號和驗證碼,我並不陌生,並不會因為多了一個按鈕或者一個輸入框,對接下來要輸入驗證碼茫然。如果技術告訴我,真的沒有辦法避免上面可能出現的問題。我也會考慮修改我的設計

綜上。。。。如果你的技術能夠避免這過程中可能存在的安全隱患。個人還是偏向分開實現。

ps:請配合數據統計,以校驗你的決定。。


1.手機:分步驟比較好。因為手機輸入不方便,屏幕面積小,如果頁面複雜容易導致用戶流失。

2.PC:單頁比較好。因為顯示器屏幕大,容易組織內容,用戶可以使用鍵盤與滑鼠快速完成操作。

技術開發成本:單頁比分步驟更容易開發


不是很懂手機應用,我在想能不能這樣做。

不一定非要驗證碼。

在需要驗證的時候發送一條簡訊到該手機,通過應用本身去取發送簡訊的號碼進而驗證,也不要用戶再去看簡訊那麼麻煩!


建議的做法:

1.先去自動獲取接收到的驗證碼,這樣就省了用戶輸入的麻煩。

2.給驗證簡訊後面加上提示內容如「這是XXX註冊驗證簡訊....」一類的,如果被其它軟體攔截則還有機會放行。

3.仍未讀到再顯示第二個窗口,讓用戶輸出剛才收到的簡訊內容。個人認為最好不放在一個窗口是因為簡訊的接收一般是其它軟體進行的,到時候可能會有一個退出你的軟體界面的過程,不要讓用戶看完簡訊再次進你的軟體後又看到那個手機號輸入框(如果框裡面還是空的就更2了)。


被人害才這樣被人投訴微信


謝謝


為愛傷


溝意


微信屏蔽了怎麼辦


看我駕駛證有沒扣分?


分頁阅读: 1 2