酷播亮新聞
最棒的知識補給站

APP註冊設計二三事:關於APP註冊的14點總結

專為互聯網人打造的365天成長計劃,500門視頻課程隨便看,構建你的產品、運營知識體系。 查看詳情

對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註冊設計二三事:關於APP註冊的14點總結