關于注冊登錄的設計原則之二:讓注冊過程更加輕松

2 評論 5852 瀏覽 11 收藏 10 分鐘

“心理學和經濟學理論認為們追尋在投入最少的情況下使收益最大化。提高投入與收入的比例能夠激發人們為止付出更多的行動?!薄狟.J.Fogg

下面的策略主要側重于提高“投入與收益”的比率,使注冊的過程更加輕松。如果注冊的過程使人感覺快捷簡單,用戶會更加愿意去嘗試,即便他們有時不確定你的產品(網站)會帶給他們什么好處。

 

1. 簡化初始注冊

簡化初始注冊頁面僅僅包含最少的必須信息。通常會跟隨一個設置向導。

 

用于…

  • 避免雍長(即便是一個全能的、可以使用戶在一頁中完成任何事情)的初始表單使用戶產生畏懼感,打擊用戶嘗試新產品的信心。
  • 制造一種繼續前進的慣性,一旦他們(指用戶)完成了第一步,他們便會更加愿意為之后的步驟付出更多的耐心與行動。

補充

  • 如果一個用戶已經確定要注冊(是用你的產品、具有剛性需求),那么他更希望快速完成注冊(獲得可以使用你的網站或產品的權利),直接跳轉并設置自己的信息頁面。

設計原則…

  • 不要問需要用戶思考(猶豫)的問題(例如,“取一個昵稱”),不然就沒有簡化注冊的意義了。
  • 使用對其排列、長度相等的表格項來減少視覺干擾,可能的話使用相同的字體。
  • 盡量保證這個頁面的信息在3~6項(比如,郵箱、用戶名和密碼)。
  • 思考一些更加簡單得信息表達方式、操作方式、理解(例如,是否可以用“年齡:**”代替“出生日期:****年**月**日”)

Xanga的注冊頁面只需要用戶填寫用戶名(登錄名)、密碼

電子郵件地址、驗證碼和生日。所有項目整齊排列在一個區塊中。

這個初始表格非常緊湊能夠一眼就可以把所有的信息瀏覽完畢。

E11

E21

E3

2. 整合初始注冊

整合初始注冊頁面包含所有創建一個用戶檔案的所有重要信息。通常在完成后用戶會被跳轉到他們的首頁,在那里會有新手引導。

用于…

  • 使用戶快速進入網站(產品)的核心功能體驗。
  • 幫助已經決定要使用你的網站(產品)的用戶快速上手。
  • 立刻為用戶提供定制信息

補充

  • 沒有告知用戶教會得到什么回報的情況下索取過多的信息,會打擊用戶的信心與耐心,甚至會招來質疑
  • 過長的初始表單增加了用戶的投入從而會給用戶最初進入你的產品帶來障礙

設計原則…

  • ?告知用戶為什么你要問索取用戶信息的原因(他們為此(把個人信息告訴你)能得到什么?)。
  • 如果某個問題在后期可以(或不可以)再次被修改,應該給予暗示,從而減少選擇(例如,在填寫昵稱的旁邊標注“您可以隨時修改此項”)。
  • 明確的表示出哪些項目是必填的,那些是暫時可以跳過的。
  • 內容區塊劃分,可能的話將必填項和可選項分開。

linkedin1

Linked In 為了能很快的幫助用戶建立“聯系網”,在注冊頁設置了很多

項,但是設計整齊干凈??蛇x項被清晰地標識出來。由于這些信息的

目的不言而喻,因此也沒有必要做過多的說明。

E4

3.設置向導

向導用來指引用戶完成設置,通常是三步式,且每一步是一個任務。

用于…

  • 避免用戶喪失信心、無從下手。
  • 使用戶的注意力集中在一個任務上。
  • 與用戶溝通每一步的目的和價值。
  • 為每一步配備充分的資源。像上傳照片到帳戶的操作肯能需要更多的空間。

補充

  • 保持設計的簡潔,因此用多個頁面問簡單、低效的問題,也許不如用一個步驟明確的表格來做會有效得多。

設計原則…

  • 使用進度條或任務清單來告知用戶當下的狀態:他們現在所處的步驟和他們將要做的。
  • 告知用戶哪些步驟可跳過并給予入口。
  • 如果整個設置過程或操作設置是可選的,用一個可取消的浮層呈現。
  • 整個過程使用統一(固定)的視覺呈現形式,包括標題、設置步驟、排版。每一步的滾動輪換形式也應當統一。

setup

雖然ShareThis的設置頁面提供相當豐富的的選項,但其視覺呈現十分

簡潔整體。進入賬戶信息作為最后一步能夠一直抓住用戶的注意力。

E5

(可忽略步驟舉例)

E6

E7

E8

E9

4.輸入項注釋與錯誤提示

當每項輸入項得熱焦點的時,顯示該項的信息,并在失去焦點的時候進行驗證(不要再用戶點擊完成按鈕的時候在做這些事)。

用于…

  • 提供能夠被使用的內容的幫助信息。
  • 詳細的解釋可以說明每一個必要的信息的原因
  • 提示進程
  • 避免用戶遭遇輸入不符規定的信息造成的錯誤而帶來的挫敗感,以及面對錯誤信息、重新輸入密碼、驗證碼和修改錯誤信息的沮喪。

補充

  • 在用戶填寫完整個頁面之前,某些錯誤提示(例如,未填寫的空白、分段輸入的生日信息)也許沒有意義。
  • 多數情況下,在完成最后一項的時候,用戶不會自覺地將焦點移開(從而激活驗證)
  • 頁面錯誤驗證作為條目錯誤驗證的補充,而不能被替代。

設計原則…

  • 當一個輸入項得到焦點,立即在預留的區域顯示提示信息。當失焦的時候,顯示確認信息,提示這條信息的是正確或者是錯誤。
  • 用極具區分度與辨識性的圖標代表不同的信息類型:解釋、確認正確、錯誤。
  • 當用戶完成整個頁面并點擊完成按鈕后,驗證整個頁面,并在表單的上部顯示信息,指引用戶到每一個仍存在錯誤的項目。

Digg

Digg的輸入項說明、正確提示和錯誤提示簡潔、一致、系統。錯誤提示和

解釋信息使用有好、清晰地語言說明。頁面驗證檢查各個區域的錯誤來補

充輸入項驗證(例如,出生日期的問題)。

E10

 

(待續~)

來源:搜狗UED

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 內容很不錯很實用,贊一個。不過,作者很匆忙么,打字手誤好多好多貫穿始終啊,連開頭引用的那句都打錯了呀。

    來自北京 回復
  2. 說的很棒,學習很多!

    來自北京 回復