如何設計一個 App 的注冊登錄流程?

21 評論 135930 瀏覽 333 收藏 12 分鐘

移動設備發力之前的登錄方式很簡單:用戶名/郵箱+密碼+確認密碼,所有的用戶登錄注冊都是圍繞著郵箱來做。隨著移動設備和社交網絡的普及,郵箱不再是唯一,漸漸的出現了微博,QQ,微信等第三方登錄方式,手機號的變更頻率低,便于收集數據進行推廣等優點讓手機號成為各大APP的登錄注冊首選。

下面先讓我們總結一下各大APP的注冊登錄方式:

1.短信快捷方式登錄

百度外賣一類的APP產品側重于快速方便的讓用戶下單,他們的登錄注冊流程提供了短信快捷登錄的方式,用戶通過輸入手機號,收到驗證碼并自動填寫直接登錄到APP我的信息頁面,極大的提高了下單的速度。用這種方式的還有京東,美團,貓眼等追求用戶快速下單促成交易的產品。

QQ圖片20150915153313

2.社交賬號注冊登錄

花瓣必須通過微博等賬號注冊,不提供郵箱注冊,第一次注冊/登錄后必須提交郵箱 。

社交賬號登錄簡化了登錄注冊流程,體驗有所提升,更便于獲取社交網絡的熟人關系鏈,有利于后期推廣。但多帳號的社交帳號容易造成后臺賬號混亂,僵尸賬號長存,當第三方社交賬號采取收緊措施的時候會有致命性的打擊。例如:脈脈當年用微博賬號登錄,后來新浪封鎖了脈脈用微博登錄的api,脈脈無奈只好建立自己的賬號體系。此外大多數社交賬號登錄網站或者app,會在后臺不經允許的關注了他們的官方微博或者自動在QQ空間發布心情,真是糟糕的體驗!
QQ圖片20150915153318

3.騰訊QQ的分步式注冊:

騰訊的分布式注冊目前是體驗最好且效仿最多的登陸注冊方式(不得不說企鵝做的用戶體驗還是國內棒棒的,還有就是網易的體驗不錯哦)

3

4.新浪微博的注冊

新浪的注冊流程雖然普通,但是如果作為一個忘記注冊過的用戶,如果先輸入密碼在去驗證是否注冊過造成了二次重復輸入,體驗不是很好哦。

4

5.emoji的合并登錄方式:

emoji討巧的把登錄和注冊方式合二為一,當檢測到用戶注冊過則直接登錄,如過沒注冊過彈出對話框提示注冊并確認完成。但一個按鈕同時體現兩個功能,容易讓用戶造成混淆。

5

以上屬于我們比較常見的登錄注冊流程,目前尚沒有適合所有APP的登錄注冊方式,交互設計在設計登錄注冊流程時需要根據每個產品的功能特點來設計登錄注冊流程。

下面結合我做過的案例來分解一下我是如何設計注冊登錄流程的:

1.明確目標:

注冊的目的是讓用戶擁有與設備無關的唯一識別的ID,防止用戶因為注冊流程繁瑣而流失,增強用戶體驗。信息補全是為了收集用戶資料,便于后期精準推廣。

2.明確產品定位:

產品定位:一款類似家校通的產品,家長通過學生代碼綁定孩子的賬號從而了解孩子在校學習狀況的產品。

3.了解元素組成:

根據產品定位元素組成包括:手機號,郵箱,密碼,昵稱,性別,城市,社交帳號等。

思考一:

因為家長必須綁定孩子的學生代碼才可觀看孩子信息,所以擁有一定的強制性和特別性(只有有學生代碼的家長才可以用),所以“先嘗后買”(先用產品有興趣在注冊)不適用,因此快捷登錄方式也被pass。

思考二:

社交注冊顯而易見的好處是:快,安全,無需驗證,可信度高,記憶成本低。但產品用戶多為學生家長,況且社交賬號容易造成后臺帳號混亂。雖然提供個人資料綁定社交帳號統一ID可以一定程度上解決帳號混亂問題,但考慮到實現效果,外加其他平臺無法完全自己掌握的帳號體系,社交賬號最大的優點獲取熟人關系鏈也對該產品無任何幫助的前提下直接pass。

思考三:

郵箱注冊需要首先進行驗證,填寫郵箱再去換一個應用或者打開電腦去驗證郵箱簡直是反人類,況且該產品目前只有手機端無網頁端,所以不能用郵箱直接登錄,所以去掉了郵箱注冊。

思考四:

為了更快速的登錄注冊進入產品,我們把信息資料補全的部分放到了個人資料的編輯里面,登錄和注冊我們只保留手機號和密碼選項。

通過上面的思考我排除了快捷登陸,社交登錄,郵箱注冊,信息補全元素,剩下了手機和密碼兩個最主要元素。

下面要解決的問題:

  1. 滿足新用戶快速注冊
  2. 滿足老用戶忘記密碼
  3. 滿足已注冊用戶忘記注冊過而重新注冊
  4. 頁面跳轉越短越好
  5. 單一頁面任務不超過三

稿件一:

6

640.webp (2)

總結:以上問題都可以解決,但不太符合用戶習慣,本著我們新產品沒有龐大的用戶去改變用戶習慣的魄力,雖保留了這一方案但目前并不適用于大眾產品。

稿件二:

8以上登錄界面暫無優化空間,但注冊界面涉及到三個小問題

  1. 首先需要驗證手機號
  2. 填寫密碼最好一步
  3. 驗證碼錯誤或者重新發送最好不要增加額外交互

我先看了新浪的注冊方式,如果第一次注冊忘記了已經注冊的情況下造成了輸入密碼的多余操作,總結而言就是我首先不知道我是否注冊過就輸入了密碼,等提示已經注冊的時候我輸入密碼的操作就是多余的。如下圖:

9

這種情況下我要返回上一層登錄或者找回密碼,體驗非常不好。

其次我看了時光記賬的注冊頁面:

10

首先時光記賬的注冊界面單一頁面超過了三個任務:手機號,發送驗證,填寫密碼,點擊注冊按鈕。其次單一頁面的任務太多加上輸入鍵盤會導致頁面擁擠甚至遮擋下方輸入框,綜合會導致用戶因注冊流程復雜二流失。

稿件三:

11

22

這樣的單頁任務不超過三步,但點擊獲取驗證碼的時候后臺做了兩部操作,第一驗證是否注冊過,如果沒有則發送驗證碼,如果有則提示注冊過。(但獲取驗證碼的按鈕容易讓用戶造成心里預期與結果不服,按常理應該是獲取驗證碼啊,怎么會提示已經注冊呢。)

注冊界面2我為了減少單頁任務,減少輸入負擔,設置了密碼明文按鈕,既可以減少重復輸入密碼的負擔,又可以通過密碼明文開關確認密碼正確與否。綜合考慮稿件三是比較好的注冊方式,但單頁任務仍然有待優化的空間。

稿件四:

1

2

640.webp

以上注冊流程特意為單頁的多任務做了優化,但是我發現如果接收驗證碼失敗或者輸出了驗證碼需要重新輸入的話需要返回上層界面,造成了額外交互。于是我再加以改進有了稿件五。

稿件五:

11111

22222

33333

在稿件四的基礎上增加了發送手機號的提示和單一頁面五附加交互的基礎上的重新發送驗證碼功能。至此,整個登錄注冊流程的問題相應都得到解決。最后不得不反推回了騰訊的登錄注冊方式。

本文來源:微信公眾號Payshare

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 來自北京 回復
  2. 第一個頁面只出現一個手機號碼輸入框,系統判斷如是注冊用戶跳轉到第二個頁面輸入輸入密碼,如未注冊跳轉到注冊頁面輸入短信驗證碼,設置密碼等,這樣的弊端是跳出率會有所增加,好處是頁面信息簡介,誤導用戶幾率較少!

    來自上海 回復
    1. 有異常情況,用戶輸錯了手機號。

      來自北京 回復
  3. 專門注冊了來回復你的,最終定稿這個方案體驗是在是太坑,跳轉太頻繁,不能有一次輸錯。密碼居然沒有確認密碼,后期忘記密碼的用戶一定很多

    來自四川 回復
    1. 雖然是舊墳了 如果是以手機驗證碼為核心的注冊 忘記密碼其實不是很重要吧

      來自廣東 回復
  4. 表示不同意見
    一.驗證碼驗證需要和密碼設置放在同一頁,不然會出現問題。因為驗證碼通過而密碼還有輸入時,注冊終端,則下次注冊時會提示已注冊。因為注冊手機號時,以通過驗證碼為判斷。
    二.一個頁面同時輸入電話、驗證、密碼是可以的,因為可以讓用戶減少對未來注冊過程的擔心。

    來自四川 回復
    1. 第一點的可以這么理解么:如果用戶只是輸入驗證碼驗證成功后,沒有設置密碼就退了出來,下次再注冊時會提示已注冊?

      來自本機地址 回復
  5. ??

    來自北京 回復
  6. 還是贊成第一稿

    來自北京 回復
  7. 我就想說,到了發送驗證碼那一步,發現手機號填錯了怎么回去?我就經常干這事兒 ??

    來自北京 回復
  8. 吐槽一下”人人都是產品經理”的注冊:
    1 web端一堆注冊項, 最要命是還必須重新上傳圖片, 在公司使用,無法上傳附件的醉了
    2 APP端, 沒有登錄, 不能評論~~

    來自北京 回復
    1. ??

      來自陜西 回復
    2. ??

      來自北京 回復
  9. ??

    來自湖北 回復
  10. ??

    來自浙江 回復
  11. 用第5稿的話,如果手機輸入錯誤,還得返回上一步輸入

    來自浙江 回復
  12. 真是夠折騰,有些許違背用戶使用習慣了

    來自江蘇 回復
  13. 最后的第四和第五稿,已經把驗證是否已注冊忽略掉了么?

    來自浙江 回復
    1. 【下一步】

      來自浙江 回復
    2. 剛剛體驗了一下QQ和微信的注冊,對于已注冊,要輸入了驗證碼再點擊【下一步】才會提示已注冊。
      QQ和微信在這里還做了一個處理,就是直接提示可登錄,而且無需再重新輸入驗證碼,從用戶的操作上來看,與通過手機+驗證碼登錄時一致的。感覺這里還是可以說明一下的。

      來自浙江 回復
  14. ?? ? ? ?? ?? ?? ?? ?? ?? ??

    來自安徽 回復