如何設(shè)計(jì)一個(gè) App 的注冊(cè)登錄流程?
移動(dòng)設(shè)備發(fā)力之前的登錄方式很簡單:用戶名/郵箱+密碼+確認(rèn)密碼,所有的用戶登錄注冊(cè)都是圍繞著郵箱來做。隨著移動(dòng)設(shè)備和社交網(wǎng)絡(luò)的普及,郵箱不再是唯一,漸漸的出現(xiàn)了微博,QQ,微信等第三方登錄方式,手機(jī)號(hào)的變更頻率低,便于收集數(shù)據(jù)進(jìn)行推廣等優(yōu)點(diǎn)讓手機(jī)號(hào)成為各大APP的登錄注冊(cè)首選。
下面先讓我們總結(jié)一下各大APP的注冊(cè)登錄方式:
1.短信快捷方式登錄
百度外賣一類的APP產(chǎn)品側(cè)重于快速方便的讓用戶下單,他們的登錄注冊(cè)流程提供了短信快捷登錄的方式,用戶通過輸入手機(jī)號(hào),收到驗(yàn)證碼并自動(dòng)填寫直接登錄到APP我的信息頁面,極大的提高了下單的速度。用這種方式的還有京東,美團(tuán),貓眼等追求用戶快速下單促成交易的產(chǎn)品。
2.社交賬號(hào)注冊(cè)登錄
花瓣必須通過微博等賬號(hào)注冊(cè),不提供郵箱注冊(cè),第一次注冊(cè)/登錄后必須提交郵箱 。
社交賬號(hào)登錄簡化了登錄注冊(cè)流程,體驗(yàn)有所提升,更便于獲取社交網(wǎng)絡(luò)的熟人關(guān)系鏈,有利于后期推廣。但多帳號(hào)的社交帳號(hào)容易造成后臺(tái)賬號(hào)混亂,僵尸賬號(hào)長存,當(dāng)?shù)谌缴缃毁~號(hào)采取收緊措施的時(shí)候會(huì)有致命性的打擊。例如:脈脈當(dāng)年用微博賬號(hào)登錄,后來新浪封鎖了脈脈用微博登錄的api,脈脈無奈只好建立自己的賬號(hào)體系。此外大多數(shù)社交賬號(hào)登錄網(wǎng)站或者app,會(huì)在后臺(tái)不經(jīng)允許的關(guān)注了他們的官方微博或者自動(dòng)在QQ空間發(fā)布心情,真是糟糕的體驗(yàn)!
3.騰訊QQ的分步式注冊(cè):
騰訊的分布式注冊(cè)目前是體驗(yàn)最好且效仿最多的登陸注冊(cè)方式(不得不說企鵝做的用戶體驗(yàn)還是國內(nèi)棒棒的,還有就是網(wǎng)易的體驗(yàn)不錯(cuò)哦)
4.新浪微博的注冊(cè)
新浪的注冊(cè)流程雖然普通,但是如果作為一個(gè)忘記注冊(cè)過的用戶,如果先輸入密碼在去驗(yàn)證是否注冊(cè)過造成了二次重復(fù)輸入,體驗(yàn)不是很好哦。
5.emoji的合并登錄方式:
emoji討巧的把登錄和注冊(cè)方式合二為一,當(dāng)檢測到用戶注冊(cè)過則直接登錄,如過沒注冊(cè)過彈出對(duì)話框提示注冊(cè)并確認(rèn)完成。但一個(gè)按鈕同時(shí)體現(xiàn)兩個(gè)功能,容易讓用戶造成混淆。
以上屬于我們比較常見的登錄注冊(cè)流程,目前尚沒有適合所有APP的登錄注冊(cè)方式,交互設(shè)計(jì)在設(shè)計(jì)登錄注冊(cè)流程時(shí)需要根據(jù)每個(gè)產(chǎn)品的功能特點(diǎn)來設(shè)計(jì)登錄注冊(cè)流程。
下面結(jié)合我做過的案例來分解一下我是如何設(shè)計(jì)注冊(cè)登錄流程的:
1.明確目標(biāo):
注冊(cè)的目的是讓用戶擁有與設(shè)備無關(guān)的唯一識(shí)別的ID,防止用戶因?yàn)樽?cè)流程繁瑣而流失,增強(qiáng)用戶體驗(yàn)。信息補(bǔ)全是為了收集用戶資料,便于后期精準(zhǔn)推廣。
2.明確產(chǎn)品定位:
產(chǎn)品定位:一款類似家校通的產(chǎn)品,家長通過學(xué)生代碼綁定孩子的賬號(hào)從而了解孩子在校學(xué)習(xí)狀況的產(chǎn)品。
3.了解元素組成:
根據(jù)產(chǎn)品定位元素組成包括:手機(jī)號(hào),郵箱,密碼,昵稱,性別,城市,社交帳號(hào)等。
思考一:
因?yàn)榧议L必須綁定孩子的學(xué)生代碼才可觀看孩子信息,所以擁有一定的強(qiáng)制性和特別性(只有有學(xué)生代碼的家長才可以用),所以“先嘗后買”(先用產(chǎn)品有興趣在注冊(cè))不適用,因此快捷登錄方式也被pass。
思考二:
社交注冊(cè)顯而易見的好處是:快,安全,無需驗(yàn)證,可信度高,記憶成本低。但產(chǎn)品用戶多為學(xué)生家長,況且社交賬號(hào)容易造成后臺(tái)帳號(hào)混亂。雖然提供個(gè)人資料綁定社交帳號(hào)統(tǒng)一ID可以一定程度上解決帳號(hào)混亂問題,但考慮到實(shí)現(xiàn)效果,外加其他平臺(tái)無法完全自己掌握的帳號(hào)體系,社交賬號(hào)最大的優(yōu)點(diǎn)獲取熟人關(guān)系鏈也對(duì)該產(chǎn)品無任何幫助的前提下直接pass。
思考三:
郵箱注冊(cè)需要首先進(jìn)行驗(yàn)證,填寫郵箱再去換一個(gè)應(yīng)用或者打開電腦去驗(yàn)證郵箱簡直是反人類,況且該產(chǎn)品目前只有手機(jī)端無網(wǎng)頁端,所以不能用郵箱直接登錄,所以去掉了郵箱注冊(cè)。
思考四:
為了更快速的登錄注冊(cè)進(jìn)入產(chǎn)品,我們把信息資料補(bǔ)全的部分放到了個(gè)人資料的編輯里面,登錄和注冊(cè)我們只保留手機(jī)號(hào)和密碼選項(xiàng)。
通過上面的思考我排除了快捷登陸,社交登錄,郵箱注冊(cè),信息補(bǔ)全元素,剩下了手機(jī)和密碼兩個(gè)最主要元素。
下面要解決的問題:
- 滿足新用戶快速注冊(cè)
- 滿足老用戶忘記密碼
- 滿足已注冊(cè)用戶忘記注冊(cè)過而重新注冊(cè)
- 頁面跳轉(zhuǎn)越短越好
- 單一頁面任務(wù)不超過三
稿件一:
總結(jié):以上問題都可以解決,但不太符合用戶習(xí)慣,本著我們新產(chǎn)品沒有龐大的用戶去改變用戶習(xí)慣的魄力,雖保留了這一方案但目前并不適用于大眾產(chǎn)品。
稿件二:
以上登錄界面暫無優(yōu)化空間,但注冊(cè)界面涉及到三個(gè)小問題
- 首先需要驗(yàn)證手機(jī)號(hào)
- 填寫密碼最好一步
- 驗(yàn)證碼錯(cuò)誤或者重新發(fā)送最好不要增加額外交互
我先看了新浪的注冊(cè)方式,如果第一次注冊(cè)忘記了已經(jīng)注冊(cè)的情況下造成了輸入密碼的多余操作,總結(jié)而言就是我首先不知道我是否注冊(cè)過就輸入了密碼,等提示已經(jīng)注冊(cè)的時(shí)候我輸入密碼的操作就是多余的。如下圖:
這種情況下我要返回上一層登錄或者找回密碼,體驗(yàn)非常不好。
其次我看了時(shí)光記賬的注冊(cè)頁面:
首先時(shí)光記賬的注冊(cè)界面單一頁面超過了三個(gè)任務(wù):手機(jī)號(hào),發(fā)送驗(yàn)證,填寫密碼,點(diǎn)擊注冊(cè)按鈕。其次單一頁面的任務(wù)太多加上輸入鍵盤會(huì)導(dǎo)致頁面擁擠甚至遮擋下方輸入框,綜合會(huì)導(dǎo)致用戶因注冊(cè)流程復(fù)雜二流失。
稿件三:
這樣的單頁任務(wù)不超過三步,但點(diǎn)擊獲取驗(yàn)證碼的時(shí)候后臺(tái)做了兩部操作,第一驗(yàn)證是否注冊(cè)過,如果沒有則發(fā)送驗(yàn)證碼,如果有則提示注冊(cè)過。(但獲取驗(yàn)證碼的按鈕容易讓用戶造成心里預(yù)期與結(jié)果不服,按常理應(yīng)該是獲取驗(yàn)證碼啊,怎么會(huì)提示已經(jīng)注冊(cè)呢。)
注冊(cè)界面2我為了減少單頁任務(wù),減少輸入負(fù)擔(dān),設(shè)置了密碼明文按鈕,既可以減少重復(fù)輸入密碼的負(fù)擔(dān),又可以通過密碼明文開關(guān)確認(rèn)密碼正確與否。綜合考慮稿件三是比較好的注冊(cè)方式,但單頁任務(wù)仍然有待優(yōu)化的空間。
稿件四:
以上注冊(cè)流程特意為單頁的多任務(wù)做了優(yōu)化,但是我發(fā)現(xiàn)如果接收驗(yàn)證碼失敗或者輸出了驗(yàn)證碼需要重新輸入的話需要返回上層界面,造成了額外交互。于是我再加以改進(jìn)有了稿件五。
稿件五:
在稿件四的基礎(chǔ)上增加了發(fā)送手機(jī)號(hào)的提示和單一頁面五附加交互的基礎(chǔ)上的重新發(fā)送驗(yàn)證碼功能。至此,整個(gè)登錄注冊(cè)流程的問題相應(yīng)都得到解決。最后不得不反推回了騰訊的登錄注冊(cè)方式。
本文來源:微信公眾號(hào)Payshare
水
第一個(gè)頁面只出現(xiàn)一個(gè)手機(jī)號(hào)碼輸入框,系統(tǒng)判斷如是注冊(cè)用戶跳轉(zhuǎn)到第二個(gè)頁面輸入輸入密碼,如未注冊(cè)跳轉(zhuǎn)到注冊(cè)頁面輸入短信驗(yàn)證碼,設(shè)置密碼等,這樣的弊端是跳出率會(huì)有所增加,好處是頁面信息簡介,誤導(dǎo)用戶幾率較少!
有異常情況,用戶輸錯(cuò)了手機(jī)號(hào)。
專門注冊(cè)了來回復(fù)你的,最終定稿這個(gè)方案體驗(yàn)是在是太坑,跳轉(zhuǎn)太頻繁,不能有一次輸錯(cuò)。密碼居然沒有確認(rèn)密碼,后期忘記密碼的用戶一定很多
雖然是舊墳了 如果是以手機(jī)驗(yàn)證碼為核心的注冊(cè) 忘記密碼其實(shí)不是很重要吧
表示不同意見
一.驗(yàn)證碼驗(yàn)證需要和密碼設(shè)置放在同一頁,不然會(huì)出現(xiàn)問題。因?yàn)轵?yàn)證碼通過而密碼還有輸入時(shí),注冊(cè)終端,則下次注冊(cè)時(shí)會(huì)提示已注冊(cè)。因?yàn)樽?cè)手機(jī)號(hào)時(shí),以通過驗(yàn)證碼為判斷。
二.一個(gè)頁面同時(shí)輸入電話、驗(yàn)證、密碼是可以的,因?yàn)榭梢宰層脩魷p少對(duì)未來注冊(cè)過程的擔(dān)心。
第一點(diǎn)的可以這么理解么:如果用戶只是輸入驗(yàn)證碼驗(yàn)證成功后,沒有設(shè)置密碼就退了出來,下次再注冊(cè)時(shí)會(huì)提示已注冊(cè)?
??
還是贊成第一稿
我就想說,到了發(fā)送驗(yàn)證碼那一步,發(fā)現(xiàn)手機(jī)號(hào)填錯(cuò)了怎么回去?我就經(jīng)常干這事兒 ??
吐槽一下”人人都是產(chǎn)品經(jīng)理”的注冊(cè):
1 web端一堆注冊(cè)項(xiàng), 最要命是還必須重新上傳圖片, 在公司使用,無法上傳附件的醉了
2 APP端, 沒有登錄, 不能評(píng)論~~
??
??
??
??
用第5稿的話,如果手機(jī)輸入錯(cuò)誤,還得返回上一步輸入
真是夠折騰,有些許違背用戶使用習(xí)慣了
最后的第四和第五稿,已經(jīng)把驗(yàn)證是否已注冊(cè)忽略掉了么?
【下一步】
剛剛體驗(yàn)了一下QQ和微信的注冊(cè),對(duì)于已注冊(cè),要輸入了驗(yàn)證碼再點(diǎn)擊【下一步】才會(huì)提示已注冊(cè)。
QQ和微信在這里還做了一個(gè)處理,就是直接提示可登錄,而且無需再重新輸入驗(yàn)證碼,從用戶的操作上來看,與通過手機(jī)+驗(yàn)證碼登錄時(shí)一致的。感覺這里還是可以說明一下的。
?? ? ? ?? ?? ?? ?? ?? ?? ??