創業公司新產品的注冊登錄如何設計

4 評論 14822 瀏覽 196 收藏 9 分鐘

之前看了很多人在聊產品的用戶注冊登錄模塊,要么講解的太粗糙,要么不全面,現在作者將自己在系統性的研究下新產品的注冊登錄設計,分享給大家。

本文中以下的內容講解主要為新產品的注冊登錄,并且側重于PC端的產品設計。不說廢話了,直接說正經事。

一、用戶注冊

下面是用戶注冊的業務流程圖,注冊的方式分為手機號、郵箱號兩種方式注冊。

chuangye1

注冊的流程其實很簡單,用戶只需要填寫手機號或郵箱號、設置密碼并填寫驗證碼即可完成注冊任務,在此免去那些繁瑣的信息填寫項。很多人試圖通過在注冊流程中采集用戶信息,殊不知大部分的用戶是沒有耐心一個個完善信息的,只會徒增注冊門檻,讓用戶望而卻步。

注冊信息填完完畢后,點擊注冊按鈕完成注冊,如果以上3個信息中有一項沒有填寫或填寫錯誤均不能完成注冊,系統會進行錯誤提示,這個時候用戶辛苦了半天,卻發現不能注冊,心中難免有些許惱火,甚至會造成潛在用戶的流失直接放棄了注冊。所以我們是不是該思考下,用戶輸入的每一個信息盡量提前做出判斷,如果用戶輸入錯誤第一時間告知用戶,并告訴用戶錯在哪里,并在產品設計細節上避免用戶犯錯。我這里的思路是當用戶輸入完一項信息后,輸入焦點切換至下一行時,此時系統對上一行的輸入信息作出判斷檢測,并反饋用戶錯誤結果。

對于注冊信息的填寫系統如何進行判斷,每一項信息判斷后,系統給出的反饋提示內容是什么?下面的架構圖詳細進行了說明。

chuangye2

手機號碼填寫錯誤的情況及相關提示語

  • 號碼為空,提示:請輸入手機號
  • 號碼已被注冊,提示:賬號已被注冊
  • 號碼錯誤,提示:請輸入正確的手機號碼
  • 郵箱號填寫錯誤的情況及相關提示語
  • 賬號為空,提示:請輸入郵箱賬號
  • 賬號已被注冊,提示:賬號已被注冊
  • 郵箱號錯誤,提示:請輸入正確的郵箱賬號,如example@163.com
  • 密碼填寫錯誤的情況及相關提示語
  • 密碼為空,提示:請設置密碼
  • 密碼錯誤,提示:請輸入6~16位的字母或數字
  • 短信驗證碼錯誤的情況及相關提示語
  • 驗證碼為空,提示:請填寫驗證碼
  • 驗證碼錯誤,提示:請輸入正確的驗證碼
  • 驗證碼過期,提示:驗證碼已過期,請重新獲取
  • 圖片驗證碼錯誤的情況及相關提示語
  • 驗證碼為空,提示:請填寫驗證碼
  • 驗證碼錯誤,提示:請輸入爭取的驗證碼
  • 驗證碼過期,提示:驗證碼已過期,請刷新重新獲取

補充說明:圖片碼和短信碼的有效期為5分鐘,短信碼的獲取間隔為1分鐘,圖片碼支持隨時刷新切換;短信碼每個賬號每天最多獲取5次,圖片碼不做限制(根據系統性能及相關費用預算靈活調整,使用第三方短信碼下發畢竟是收費的)
設計思路總結:新產品的注冊流程應盡可能的簡單直接,去掉任何影響用戶注冊的干擾信息,防止用戶跳出流程,在這個頁面中只有一個任務,就是引導幫助用戶快速完成注冊,所以界面中只需要讓用戶輸入賬號、密碼即可,密碼也無需重復確認輸入。當用戶每輸入結束一個信息時,如果出現問題,在第一時間告訴用戶錯誤結果,不提倡所有的信息判斷都通過注冊按鈕來觸發,這樣會挑戰用戶的耐心。

二、用戶登錄

在登錄模塊的設計上,考慮到各種用戶場景環境,盡可能的提供多種登錄方式方便用戶隨時登錄。PC端的登錄設計了賬號登錄、短信碼登錄、二維碼登錄和第三方登錄四種登錄方式。二維碼登錄需要配合手機端使用,實現多終端的互動。因此在手機端中是沒有二維碼登錄的。同樣登錄過程中用戶輸入的信息,系統都會在點擊登錄按鈕前做出判斷并反饋提示。下圖為PC端的登錄流程圖:

chuangye3

下面我們在來仔細看下登錄界面中的產品信息,以及相應的信息規則。

chuangye4

賬號登錄方式相關錯誤信息的提示語

  • 賬號為空,提示:請輸入賬號
  • 賬號錯誤,提示:賬號不存在,請重新輸入
  • 密碼為空,提示:請輸入密碼
  • 密碼錯誤,提示:密碼與賬戶名不匹配,請檢查密碼
  • 短信碼登錄相關錯誤信息的提示語
  • 號碼為空,提示:請輸入手機號碼
  • 號碼錯誤,提示:請輸入正確的11位手機號碼
  • 短信碼為空,提示:請填寫驗證碼
  • 短信碼錯誤,提示:請輸入正確的驗證碼
  • 短信碼過期,提示:驗證碼已過期,請重新獲取

二維碼登錄相關信息提示(PC端)

  • 手機端未登錄的情況下,利用手機掃碼,手機端跳轉至登錄界面,PC端提示:登錄失敗
  • 手機端已登錄,掃碼失敗的情況下,PC端提示:登錄失敗,刷新二維碼;手機端提示:掃碼失敗,重新掃描
  • 手機端登錄已登錄,掃碼成功,PC端提示:登錄成功,手機端確認登錄,登錄成功
  • 第三方登錄的相關信息呈現,首先系統檢測本地是否已登錄賬號:
  • 本地未登錄,輸入賬號密碼并授權進行登錄
  • 本地已登錄,直接授權登錄

設計思路總結:登錄流程的設計中應充分考慮到用戶的各類場景與環境,給用戶提供更多的登錄方式,怎么方便怎么來。同時還要綜合考慮賬號的安全因素,比如這里當用戶連續3次輸錯密碼時候,增加驗證碼流程。

 

作者:努力拼搏的80后

來源:簡書

鏈接:http://www.jianshu.com/p/106db5b9f87c

本文由 @努力拼搏的80后 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 每一步完成都提示,需要建立在前端判斷得了的基礎之上嗎?否則要一直向后端提交?

    來自廣東 回復
  2. 非常有價值,比一些長篇大論對我的幫助更大。

    來自北京 回復
  3. 有點觀點上的不同,我認為注冊不是要在第一時間告訴用戶出現了什么問題,而是簡化流程防止問題的出現。舉個例子。如果在沒有輸入電話號碼/郵箱時,則禁用(灰掉)登陸按鈕。彈窗或者土司提示對用戶體驗不是很好。

    來自四川 回復
  4. 很詳盡,雖然講的是很簡單的登錄注冊,但是能把里面的每一條都說的很清楚,感謝作者分享,學習一個,謝謝~~

    來自北京 回復