為了讓你註冊賬號,你知道設計師有多努力嗎? #004

俊鐵導讀:

在應用市場繁花綻放的現在,一款 app 獲取新用戶越來越困難,成本越來越高。好不容易通過推廣吸引了新人,用戶還很可能因為註冊麻煩而離開。今天這篇文章,為你分享線上註冊環節設計的 10 個原則,助你更好地留住用戶。

雖說線上註冊處處可見,但就設計而言,它也是其中一個棘手部分。要保證你的註冊頁面設計不會給用戶帶來麻煩,你需要採納以下幾點建議,來關於更好地設計線上註冊流程。

1. 不要讓用戶停頓去思考要點擊哪個按鈕

你需要多長時間才能發現下圖中「登錄(Sign In)」和「註冊(Sign Up)」的區別?

不推薦示範:同時使用「登錄(Sign In)」和「註冊(Sign Up)」

很多 app 的英語界面常用「Sign In」和「Sign Up」來表示「登錄」和「註冊」。但「登錄(Sign In)」和「註冊(Sign Up)」挨得太近,當這兩個按鈕看起來太相似,並且都用同一個動詞時,用戶很容易產生困惑

用戶可能會點擊其中一個按鈕,而不是本應點擊的另一個,這樣就會打擊他們的積極性,因為用戶是犯這類錯誤最多的一類群體。

為什麼會這樣呢?因為用戶快速掃過屏幕,理所當然地認為第一個映入眼帘的「行為號召」即是正確的選擇。即便用戶不犯這個錯誤,他們也將花額外時間來區分這兩個選項

不應該讓用戶停頓去思考他們應該點擊哪個按鈕。若你想為用戶登錄提供較好的用戶體驗,就應避免同時使用容易混淆的詞語,而應在按鈕標籤上使用不同的動詞,這樣就能讓用戶很簡單地區別這兩個按鈕。

推薦示範:「登錄(Login)」和「註冊(Register)」這兩個詞就更清晰明了。

同時,為了使得上述區別更加明顯,還可以在按鈕上設計不同(顏色和風格)的視覺呈現

圖片來源:ThinkWithGoogle

2. 儘可能減少註冊表單選項

註冊新用戶時,儘可能讓用戶填寫最少的信息。在註冊過程中需要用戶填寫的項目越少,用戶放棄註冊的可能性就越低。需要考慮哪些信息是必不可少的:

1)對所有線上註冊來說,移除「確認密碼」和「確認郵箱地址」這兩個選項有益無害。肯定有其他的方法來解決打字錯誤的問題(詳情請參考第 4 點)。

2)從用戶體驗角度來看,線上註冊最好不設置選填項目。如果某信息是非必需的,那就不必浪費用戶的時間來填寫,你可以在後續項目增設其他問題。如果一定要設置選填項目,務必清晰地向用戶強調該選項是選填項目。

上圖中「你多大了?」這個表單問題清晰地標註為選填項目

3. 區分開登錄和註冊

很多網站和 app 的註冊和登錄框基本使用了同樣數量的填寫項目(如電子郵箱/用戶名和密碼),並且註冊和登錄分兩欄緊挨在一起呈現:

不推薦示範:註冊和登錄兩欄緊挨一起

然而,清晰明了地區分開註冊和登錄、最大程度地降低用戶不小心通過註冊表登錄的可能性非常重要

例如: Twitter 的登錄和註冊框不僅區別明顯,其也加入了「行為號召(CTA)」按鈕和適當的幫助用戶理解的文字(如:新來到 Twitter ?註冊)。

推薦示範:Twitter 的登錄和註冊框

4. 讓用戶能看到密碼

登錄和註冊過程中一個常見的問題就是密碼輸入錯誤。這很容易出錯,因為密碼選項通常隱藏顯示(當然是因為安全問題)。就打字而言,沒人能做到完美,人們經常會打錯字,在手機上尤其如此。

很多註冊表單在設置密碼時要求確認密碼,從而防止打字錯誤。

不推薦示範:用戶密碼項設置「密碼」和「確認密碼」兩個選項

雖說確認密碼選項看起來有道理,但實際上並沒有解決問題。用戶輸入密碼時看不到輸入內容,這會導致更多的錯誤。這樣,他們會更沒把握,因為他們可能會在(兩個輸入欄)重複犯錯。

不要讓用戶再次填寫同一個選項!設置「顯示密碼」選項是防止用戶輸錯密碼的適宜方式。可以在密碼選項附近加一個複選框,當用戶勾選的時候,頁面會顯示已隱藏的輸入信息

推薦示範:「顯示密碼」項作為複選框選項

或者,也可以使用圖標按鈕。用戶點擊按鈕時,頁面的眼睛圖標上顯示一條斜線,即可顯示隱藏的內容。

推薦示範:「顯示密碼」項作為圖標按鈕

5. 提供指導

你應該清楚地解釋說明表單選項填寫錯誤。若某選項未正確填寫,不僅要讓用戶知道其填寫有誤,還要讓用戶知道哪個選項填寫有誤,並說明正確填寫該項的方式。

1)用戶友好型及描述性錯誤信息

出於安全考慮,密碼長度必須在 6-10 個字元,並且包含至少一個大寫字母、一個數字和一個符號。

這是標準的密碼設置要求,但要求用戶考慮所有選項填寫要求,並不是解釋這個問題的恰當方式。可以參考 Mailchimp,其通過「密碼強度」視覺提示,顯示用戶完成該選項的進展

密碼設置仍須輸入「一個特殊字元」、「一個數字」,並且必須輸入 8 位數。

2)實時數據驗證

實時數據驗證可以直接告知用戶其所提供數據是否正確。這個方法可以使用戶快速糾正錯誤,不必在點擊提交按鈕後才知道錯誤。

然而,表格數據驗證不僅僅要告訴用戶錯誤選項,同時,還應該告訴用戶哪些是對的。這會讓用戶更加有把握去繼續完成註冊。

圖片來源:form-ux-tips

實時驗證對用戶不太有把握的答案特別有用,比如選擇一個未被註冊的用戶名,或者設置高強度密碼時。

Twitter 就是個典型的例子。下圖中的 Twitter 註冊界面上,你可以看到該註冊表單提醒我該郵箱地址已被註冊,並給我提供了其他的選擇(比如登錄或者是找回密碼)。

6. 使用郵箱地址或手機號碼,而不是用戶名

如果要求用戶在註冊過程中設置用戶名,你很有可能會遇到以下問題:

  • 由於用戶名必須未被註冊才行,用戶可能需要幾分鐘才能想得到合適的用戶名,畢竟其想好的用戶名可能已被其他用戶註冊。
  • 用戶可能會註冊一個全新的用戶名,但可能在不久後就忘記了

網站或者 app 界面應該允許用戶通過郵箱地址或手機號碼登錄

推薦示範:註冊過程中可以用電話號碼或郵箱地址來代替用戶名

7. 允許用戶通過第三方賬號登錄

如果可以讓用戶通過第三方賬號(比如 Facebook, Google 或 Twitter )登錄,為什麼還要強制要求用戶重新設置一套登錄信息呢?這可以減少註冊麻煩。

和常規的郵箱地址註冊相比,其有如下利弊:

  • :不必要求用戶通過填寫註冊表單來設置另一套用戶名/密碼,並且去驗證郵箱地址。因此,用戶 10 秒鐘就能完成註冊,而不再需要 10 分鐘。更為重要的是,用戶也不用再去記憶新的用戶名/密碼。
  • :由於用戶信息自動載入,會出現涉及用戶隱私的顧慮,並不是每個人都願意共享其個人信息。鑒於此,應該同時保留原有登錄方式供用戶選擇。

推薦示範:通過 Facebook/Google+/Twitter 登錄或選擇原有登錄方式

8. 在註冊後保持用戶登錄狀態

註冊還會涉及的問題是要求用戶在註冊後立即登錄。這個額外要求通常都會讓用戶不爽。

不推薦示範:要求用戶激活賬戶後立即登錄

應該通過改良設計,在用戶註冊後立即保持其登錄狀態,除非是因為安全問題所致,比如銀行 app 或者網站。

9. 找回密碼輕而易舉

非常重要的是,若用戶忘記其密碼(這也不是不可能),可通過登錄過程來恰當處理。

不要使用戶重置密碼過程太麻煩,否則用戶會放棄你的服務。在登錄框中一定要有清晰的提示「忘記密碼?」的鏈接,該鏈接要始終可見(而不是在輸錯密碼後才可見)。

推薦示範:Mailchimp 登錄框有「忘記密碼?」

10. 採用「先試後買」策略

Janrain 的調查顯示,過早強制用戶註冊,可導致超過 85% 的用戶放棄該產品。

除非有其他形式的直接回報(比如打車),不然一開始就要求用戶提供個人信息,用戶很可能會放棄使用 app/網頁服務。尤其如果你是品牌辨識度低的服務供應商,那要解決的問題就更多了。

圖片來源: ThinkWithGoogle

讓用戶能直接使用其中某些功能,總比什麼都用不了要好。因此,建議採用「先試後買」策略。這可以讓新用戶有機會體驗到你的產品,讓他有興趣註冊。若知道是什麼產品、產品體驗如何,人們將更願意去註冊並提供個人真實信息。

當然先試後買模式不是說不能要求用戶創建賬號,只是在用戶體驗到產品價值後再要求其創建賬號

比如,YouTube 在用戶感興趣的前提下,允許新用戶瀏覽儘可能多的頁面內容,其目的就在於吸引用戶註冊,從而能讓用戶使用評論功能或者上傳其個人視頻。

結束語

當你把註冊相關的障礙全部清除後,你會得到巨大的註冊量,但這並不意味著你就擁有了巨大的用戶群體。培育出用戶群體是一系列努力的成果,而設計高效的註冊流程只不過是朝著該方向邁進的第一步罷了。

作者 | Nick Babich 軟體工程師,關注 UI 和 UX 。

譯者 | 俊鐵

題圖 | Pexels

本文譯自 How to Craft Effective Registration,已獲原作者授權翻譯。

本文首發於愛范兒。商業轉載請聯繫獲得授權,非商業轉載請註明出處。

推薦閱讀:

探探和 LinkedIn 都在用的卡片設計,怎樣才給你好的體驗? #016
設密碼搞得這麼反人類,想用機關槍突突設計師 #035
史上最差勁的音量設計?明明超有創意啊?? #026

TAG:按鈕 | 登錄註冊 | 設計 |