APP注冊設計二三事:關于APP注冊的14點總結

7 評論 11252 瀏覽 119 收藏 12 分鐘

對APP注冊做了一個系統的小總結。

一、分步注冊

1、分步注冊適合移動端設計

移動端屏幕小,加上彈出鍵盤,假設將多個輸入項放在一個頁面,會給用戶造成擁擠感,然而分步注冊則可較好的解決該問題。

2、分步注冊可減少用戶點擊輸入框的次數

幾乎所有的注冊關鍵步驟中都有:輸入手機號、獲取驗證碼、設定密碼這3個步驟。在一個頁面中時,需要手動逐項呼出鍵盤來填寫。若遵循分步注冊,分成3個頁面的話,進入每個頁面都會自動置入焦點并彈出鍵盤,將減少用戶手動點擊輸入框的次數。

3、分步注冊在一定程度上可提高轉化率

依據桌面調研,多數分步注冊APP平均為5步左右,多數非分步注冊APP平均為8步左右。并且Facebook曾針對分步注冊與非分步注冊做過A/B Test,其結論指出分步注冊的轉化率遠高于非分步注冊。由此可見,非分步注冊強行減少注冊頁面,不如適當拉長戰線,給用戶輕負荷的操作,讓用戶在不知不覺中完成注冊流程。

二、彈出相對應的輸入鍵盤

  • 點開郵箱輸入框,彈出帶有@的英文輸入鍵盤。
  • 點開手機號輸入框,彈出九宮格數字輸入鍵盤。
  • 點開密碼輸入框,彈出英文輸入鍵盤。

這是很小的細節,雖然用戶可能不知道哪里不對,但是他能體會到好不好用。一個APP注意了這點,那用戶就會覺得這個APP好用。而另一個APP沒有做到這點,無論點擊哪個輸入框彈出的都是九宮格中文輸入鍵盤,用戶就會覺得這個APP不太好用。

三、對手機號碼進行3 4 4的分布

這個規則不僅適用于手機號碼,包括銀行賬號、轉賬金額等等。這是因為人的短期記憶是有限的,即一次只能記住有限的東西,如果強制記住很長的東西,短期記憶就很容易出錯。所以將數字以4或者3為單位分組,有利于用戶閱讀、編輯、校對手機號碼。

四、登錄時增加一鍵清空icon

在登錄的時候偶爾會出現輸入錯誤,如果沒有這個清除的icon,用戶只能按鍵盤中的清除按鈕,需要一直按住直到輸入框為空。

五、清晰的錯誤反饋

實時數據驗證實時驗證可以立刻通知用戶數據的正確性。這種方法允許用戶糾正錯誤,而無需等待他們點擊提交按鈕才能看到錯誤。當用戶輸入錯誤信息時,最好利用臨時框的形式提示用戶。而不是不做反應讓用戶自己去猜到底是怎么回事。

臨時框也有兩種形式,一種是下圖左側的對話框形式,這需要用戶點擊確認才能進行下一步操作。一種是toast的形式,彈出一兩秒后自動消失。第一種形式相當于強制中斷了用戶的操作,用戶需要點擊確認才能回到原來的操作流程。而toast則起到了提示的效果,并且沒有打擾到用戶。

下圖右側的airbnb,在用戶輸錯密碼時,不光有底部的臨時框提示,還將整個登錄頁面的背景色油綠色變為醒目的橙色,這種設計在提示用戶的前提下,還做到了賞心悅目。

發生錯誤時,提醒方式,“請輸入正確的XXX”,而不是提示“輸入XXX有誤”,更好的引導,把握用戶心理,用戶在注冊表格的時候更加有信心;

六、避免使用隱私警察協議確認的復選框

而不是復選框,使用帶有關于接受條款和政策的鏈接的文本。

七、名稱按鈕正確

不是使用一般的提交標簽,表單按鈕應該準確描述用戶正在執行的任務——創建帳戶或登錄等。

八、禁用該按鈕,直到所有必需的輸入已完成

當input為空時,關聯按鈕為disabled的狀態,這是采用了防錯的原則:如當使用條件沒有滿足時,常常通過使功能失效來表示(一般按鈕會變為灰色無法點擊),以避免誤按,這是在提交之前的視覺驗證輸入的另一種方式。

九、正確使用主按鈕和輔助按鈕

如果你有兩個按鈕——主要和次要的,你應該在視覺上區分它們以減少潛在的錯誤。更重要的是,主按鈕應該看起來更加的明顯。

十、確保界面切換時,數據被保留

需要前端將用戶已輸入的數據保留,在「登錄」與「注冊」切換時,自動將兩種界面匹配的數據轉填。

且用戶注冊賬戶后,讓其保持登錄狀態,常見問題是用戶注冊賬戶后,又要求用戶立刻登錄。這個額外的步驟讓用戶感到很困惑;

十一、瀏覽視線

第一版視覺線:寫手機號-看一眼驗證碼輸入框-點擊驗證碼按鈕-回來輸入驗證碼-點擊注冊。在這個過程中,驗證碼輸入框被2次閱讀;

第二版視覺線:輸入手機號-點擊驗證碼-輸入驗證碼-點擊注冊,但是從手機號到驗證碼跳了一行,思路會突然斷一下,再著一按鈕直接沖在最前嗎有點突兀;

第三版視覺線:將驗證碼按鈕上移到輸入手機一行,這樣在用戶輸完手機號碼時,看到驗證碼很自然就會點擊,然后輸入完成操作。保證視覺線與思路線保持一致。

十二、及時反饋

在用戶每次操作過程中,都需要能給予用戶正確引導,幫助用戶進行抉擇和判斷的反饋設計,做到『操作時有反饋』,且需要做到反饋及時準確,幫助用戶建立信心和對資金的掌控感。在交互設計中,有『正反饋』和『負反饋』之分。

所謂正反饋,就是指用戶行為獲得成功后給予用戶的反饋,比如用戶充值成功后,通知用戶充值成功。

所謂負反饋,指用戶行為出現問題時出現,比如投資金額小于最低可投金額,或者密碼不正確等等。雖然負反饋在產品交互設計中對于警示用戶不該做的行為或者是該行為會導致不良后果的可能時起到了不可或缺的作用。但是顯然更多的時候人們不愿意收到負反饋,任何用戶在得到負反饋的時候都會感到沮喪,因此盡量減少通過特定的反饋頁面來進行負反饋。

對于正反饋,我們一般采用跳轉反饋頁面或者采用Dialog這種相對重的反饋方式來處理,而對于負反饋,我們一般采用Toast這種輕量化的反饋來弱化。

十三、安全注冊

1、讓用戶感覺注冊對我來說代價很小,人畜無害

時間:大多數注冊流程能夠在一個頁面中完成–輸入手機、輸入驗證碼、填寫密碼、點擊下一步。此類注冊流程可以通過告知用戶注冊當前處于注冊流程的哪一步來緩解用戶對未知的焦慮。

建立向導,讓用戶對注冊流程一目了然,用戶自己以主宰者的姿態掌控整個注冊

2、讓用戶知道注冊很安全,不用擔心

在注冊中以友好的方式告知用戶隱私會得到尊重,會讓注冊流程開啟的更加容易。在這方面,國外的產品做的相對比國內好一些,可能是因為國外更加注重保護隱私。在注冊中讓用戶打消顧慮,Twitter和tinder是兩個很好的榜樣。

tinder使用Facebook賬戶登錄,這里強調tinder不會向Facebook發布任何內容,打消用戶的顧慮。因為用戶可能不太想讓好友知道自己使用了一個交(yue)友(pao)軟件

十四、其它

  • 在輸入框中,提示你所需要輸入內容;
  • 能夠自動判斷手機(帳號)的格式,在輸入11位數字之后無法再輸入;
  • 60秒重發,且所收到的驗證碼固定時間內有效(在未驗證前,且后臺沒有退出)。如果操作頻繁,將提示“已超出限制次數”;
  • 讓用戶密碼可視化:使用“顯示密碼”復選框方式去預防用戶輸入錯誤密碼;
  • 當圖形驗證碼正確時,自動發送短信驗證碼,減少用戶點擊次數。

 

本文由 @二O一七 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 最好的登錄是第三方一鍵登錄 哈哈

    來自江蘇 回復
  2. 寫的很詳細,對交互入門很有用。不過,第六點沒有看懂。

    來自北京 回復
  3. 第六條什么意思?

    來自北京 回復
  4. 敲黑板做筆記了!

    回復
  5. 贊 很受用

    來自北京 回復
  6. 不錯,收藏了

    來自廣東 回復
    1. 看了很多大牛的文章,最后整理出來的,謝謝。

      來自陜西 回復