2206
12
1
2017-01-06 10:30:39
2017-01-06
A 君注：在應(yīng)用市場(chǎng)繁花綻放的現(xiàn)在，一款 app 獲取新用戶越來(lái)越困難,，成本越來(lái)越高,。好不容易通過(guò)推廣吸引了新人,，用戶還很可能因?yàn)樽?cè)麻煩而離開,。
AppSo今天這篇文章,，為你分享線上注冊(cè)環(huán)節(jié)設(shè)計(jì)的 10 個(gè)原則,，助你更好地留住用戶,。
雖說(shuō)線上注冊(cè)處處可見，但就設(shè)計(jì)而言,，它也是其中一個(gè)棘手部分,。要保證你的注冊(cè)頁(yè)面設(shè)計(jì)不會(huì)給用戶帶來(lái)麻煩，你需要采納以下幾點(diǎn)建議,，來(lái)關(guān)于更好地設(shè)計(jì)線上注冊(cè)流程,。
你需要多長(zhǎng)時(shí)間才能發(fā)現(xiàn)下圖中「登錄（Sign In）」和「注冊(cè)（Sign Up）」的區(qū)別？
不推薦示范：同時(shí)使用「登錄（Sign In）」和「注冊(cè)（Sign Up）」
很多 app 的英語(yǔ)界面常用「Sign In」和「Sign Up」來(lái)表示「登錄」和「注冊(cè)」,。但「登錄（Sign In）」和「注冊(cè)（Sign Up）」挨得太近,，當(dāng)這兩個(gè)按鈕看起來(lái)太相似，并且都用同一個(gè)動(dòng)詞時(shí),，用戶很容易產(chǎn)生困惑,。
用戶可能會(huì)點(diǎn)擊其中一個(gè)按鈕，而不是本應(yīng)點(diǎn)擊的另一個(gè),，這樣就會(huì)打擊他們的積極性,，因?yàn)橛脩羰欠高@類錯(cuò)誤最多的一類群體。
為什么會(huì)這樣呢,？因?yàn)?span style="box-sizing: border- box; font-weight: 700;">用戶快速掃過(guò)屏幕,，理所當(dāng)然地認(rèn)為第一個(gè)映入眼簾的「行為號(hào)召」即是正確的選擇。即便用戶不犯這個(gè)錯(cuò)誤,，他們也將花額外時(shí)間來(lái)區(qū)分這兩個(gè)選項(xiàng),。
不應(yīng)該讓用戶停頓去思考他們應(yīng)該點(diǎn)擊哪個(gè)按鈕。若你想為用戶登錄提供較好的用戶體驗(yàn),，就應(yīng)避免同時(shí)使用容易混淆的詞語(yǔ),，而應(yīng)在按鈕標(biāo)簽上使用不同的動(dòng)詞,，這樣就能讓用戶很簡(jiǎn)單地區(qū)別這兩個(gè)按鈕。
推薦示范：「登錄（Login）」和「注冊(cè)（Register）」這兩個(gè)詞就更清晰明了,。
同時(shí),，為了使得上述區(qū)別更加明顯，還可以在按鈕上設(shè)計(jì)不同（顏色和風(fēng)格）的視覺呈現(xiàn)：
圖片來(lái)源：ThinkWithGoogle
注冊(cè)新用戶時(shí),，盡可能讓用戶填寫最少的信息,。在注冊(cè)過(guò)程中需要用戶填寫的項(xiàng)目越少，用戶放棄注冊(cè)的可能性就越低,。需要考慮哪些信息是必不可少的：
1）對(duì)所有線上注冊(cè)來(lái)說(shuō),，移除「確認(rèn)密碼」和「確認(rèn)郵箱地址」這兩個(gè)選項(xiàng)有益無(wú)害?？隙ㄓ衅渌姆椒▉?lái)解決打字錯(cuò)誤的問(wèn)題（詳情請(qǐng)參考第 4 點(diǎn)）,。
2）從用戶體驗(yàn)角度來(lái)看，線上注冊(cè)最好不設(shè)置選填項(xiàng)目,。如果某信息是非必需的，那就不必浪費(fèi)用戶的時(shí)間來(lái)填寫,，你可以在后續(xù)項(xiàng)目增設(shè)其他問(wèn)題,。如果一定要設(shè)置選填項(xiàng)目，務(wù)必清晰地向用戶強(qiáng)調(diào)該選項(xiàng)是選填項(xiàng)目,。
上圖中「你多大了」這個(gè)表單問(wèn)題清晰地標(biāo)注為選填項(xiàng)目
很多網(wǎng)站和 app 的注冊(cè)和登錄框基本使用了同樣數(shù)量的填寫項(xiàng)目（如電子郵箱/用戶名和密碼）,，并且注冊(cè)和登錄分兩欄緊挨在一起呈現(xiàn)：
不推薦示范：注冊(cè)和登錄兩欄緊挨一起
然而，清晰明了地區(qū)分開注冊(cè)和登錄,、最大程度地降低用戶不小心通過(guò)注冊(cè)表登錄的可能性非常重要,。
例如： Twitter 的登錄和注冊(cè)框不僅區(qū)別明顯，其也加入了「行為號(hào)召（CTA）」按鈕和適當(dāng)?shù)膸椭脩衾斫獾奈淖郑ㄈ纾盒聛?lái)到 Twitter ,？注冊(cè)）,。
推薦示范：Twitter 的登錄和注冊(cè)框
登錄和注冊(cè)過(guò)程中一個(gè)常見的問(wèn)題就是密碼輸入錯(cuò)誤。這很容易出錯(cuò),，因?yàn)槊艽a選項(xiàng)通常隱藏顯示（當(dāng)然是因?yàn)榘踩珕?wèn)題）,。就打字而言，沒人能做到完美,，人們經(jīng)常會(huì)打錯(cuò)字,，在手機(jī)上尤其如此。
很多注冊(cè)表單在設(shè)置密碼時(shí)要求確認(rèn)密碼,，從而防止打字錯(cuò)誤,。
不推薦示范：用戶密碼項(xiàng)設(shè)置「密碼」和「確認(rèn)密碼」兩個(gè)選項(xiàng)
雖說(shuō)確認(rèn)密碼選項(xiàng)看起來(lái)有道理，但實(shí)際上并沒有解決問(wèn)題,。用戶輸入密碼時(shí)看不到輸入內(nèi)容,，這會(huì)導(dǎo)致更多的錯(cuò)誤,。這樣，他們會(huì)更沒把握,，因?yàn)樗麄兛赡軙?huì)在（兩個(gè)輸入欄）重復(fù)犯錯(cuò),。
不要讓用戶再次填寫同一個(gè)選項(xiàng)！設(shè)置「顯示密碼」選項(xiàng)是防止用戶輸錯(cuò)密碼的適宜方式,。可以在密碼選項(xiàng)附近加一個(gè)復(fù)選框,，當(dāng)用戶勾選的時(shí)候，頁(yè)面會(huì)顯示已隱藏的輸入信息,。
推薦示范：「顯示密碼」項(xiàng)作為復(fù)選框選項(xiàng)
或者,，也可以使用圖標(biāo)按鈕。用戶點(diǎn)擊按鈕時(shí),，頁(yè)面的眼睛圖標(biāo)上顯示一條斜線,，即可顯示隱藏的內(nèi)容。
推薦示范：「顯示密碼」項(xiàng)作為圖標(biāo)按鈕
你應(yīng)該清楚地解釋說(shuō)明表單選項(xiàng)填寫錯(cuò)誤,。若某選項(xiàng)未正確填寫,，不僅要讓用戶知道其填寫有誤，還要讓用戶知道哪個(gè)選項(xiàng)填寫有誤,，并說(shuō)明正確填寫該項(xiàng)的方式,。
出于安全考慮，密碼長(zhǎng)度必須在 6-10 個(gè)字符,，并且包含至少一個(gè)大寫字母,、一個(gè)數(shù)字和一個(gè)符號(hào)。
這是標(biāo)準(zhǔn)的密碼設(shè)置要求,，但要求用戶考慮所有選項(xiàng)填寫要求,，并不是解釋這個(gè)問(wèn)題的恰當(dāng)方式?？梢詤⒖?Mailchimp,，其通過(guò)「密碼強(qiáng)度」視覺提示，顯示用戶完成該選項(xiàng)的進(jìn)展,。
密碼設(shè)置仍須輸入「一個(gè)特殊字符」,、「一個(gè)數(shù)字」，并且必須輸入 8 位數(shù),。
實(shí)時(shí)數(shù)據(jù)驗(yàn)證可以直接告知用戶其所提供數(shù)據(jù)是否正確,。這個(gè)方法可以使用戶快速糾正錯(cuò)誤，不必在點(diǎn)擊提交按鈕后才知道錯(cuò)誤,。
然而,，表格數(shù)據(jù)驗(yàn)證不僅僅要告訴用戶錯(cuò)誤選項(xiàng)，同時(shí)，還應(yīng)該告訴用戶哪些是對(duì)的,。這會(huì)讓用戶更加有把握去繼續(xù)完成注冊(cè),。
圖片來(lái)源：form-ux-tips
實(shí)時(shí)驗(yàn)證對(duì)用戶不太有把握的答案特別有用，比如選擇一個(gè)未被注冊(cè)的用戶名,，或者設(shè)置高強(qiáng)度密碼時(shí),。
Twitter 就是個(gè)典型的例子。下圖中的 Twitter 注冊(cè)界面上,，你可以看到該注冊(cè)表單提醒我該郵箱地址已被注冊(cè),，并給我提供了其他的選擇（比如登錄或者是找回密碼）。
如果要求用戶在注冊(cè)過(guò)程中設(shè)置用戶名,，你很有可能會(huì)遇到以下問(wèn)題：
由于用戶名必須未被注冊(cè)才行，用戶可能需要幾分鐘才能想得到合適的用戶名,，畢竟其想好的用戶名可能已被其他用戶注冊(cè),。
用戶可能會(huì)注冊(cè)一個(gè)全新的用戶名，但可能在不久后就忘記了,。
網(wǎng)站或者 app 界面應(yīng)該允許用戶通過(guò)郵箱地址或手機(jī)號(hào)碼登錄：
推薦示范：注冊(cè)過(guò)程中可以用電話號(hào)碼或郵箱地址來(lái)代替用戶名
如果可以讓用戶通過(guò)第三方賬號(hào)（比如 Facebook, Google 或 Twitter ）登錄,，為什么還要強(qiáng)制要求用戶重新設(shè)置一套登錄信息呢？這可以減少注冊(cè)麻煩,。
和常規(guī)的郵箱地址注冊(cè)相比,，其有如下利弊：
利：不必要求用戶通過(guò)填寫注冊(cè)表單來(lái)設(shè)置另一套用戶名/密碼，并且去驗(yàn)證郵箱地址,。因此，用戶 10 秒鐘就能完成注冊(cè),，而不再需要 10 分鐘,。更為重要的是，用戶也不用再去記憶新的用戶名/密碼,。
弊：由于用戶信息自動(dòng)加載,，會(huì)出現(xiàn)涉及用戶隱私的顧慮，并不是每個(gè)人都愿意共享其個(gè)人信息,。鑒于此,，應(yīng)該同時(shí)保留原有登錄方式供用戶選擇。
推薦示范：通過(guò) Facebook/Google+/Twitter 登錄或選擇原有登錄方式
注冊(cè)還會(huì)涉及的問(wèn)題是要求用戶在注冊(cè)后立即登錄,。這個(gè)額外要求通常都會(huì)讓用戶不爽,。
不推薦示范：要求用戶激活賬戶后立即登錄
應(yīng)該通過(guò)改良設(shè)計(jì)，在用戶注冊(cè)后立即保持其登錄狀態(tài),，除非是因?yàn)榘踩珕?wèn)題所致,，比如銀行 app 或者網(wǎng)站。
非常重要的是，若用戶忘記其密碼（這也不是不可能）,，可通過(guò)登錄過(guò)程來(lái)恰當(dāng)處理,。
不要使用戶重置密碼過(guò)程太麻煩，否則用戶會(huì)放棄你的服務(wù),。在登錄框中一定要有清晰的提示「忘記密碼,？」的鏈接，該鏈接要始終可見（而不是在輸錯(cuò)密碼后才可見）,。
推薦示范：Mailchimp 登錄框有「忘記密碼,？」鏈接
Janrain 的調(diào)查顯示，過(guò)早強(qiáng)制用戶注冊(cè),，可導(dǎo)致超過(guò) 85% 的用戶放棄該產(chǎn)品,。
除非有其他形式的直接回報(bào)（比如打車），不然一開始就要求用戶提供個(gè)人信息,，用戶很可能會(huì)放棄使用 app/網(wǎng)頁(yè)服務(wù),。尤其如果你是品牌辨識(shí)度低的服務(wù)供應(yīng)商，那要解決的問(wèn)題就更多了,。
圖片來(lái)源： ThinkWithGoogle
讓用戶能直接使用其中某些功能,，總比什么都用不了要好。因此,，建議采用「先試后買」策略,。這可以讓新用戶有機(jī)會(huì)體驗(yàn)到你的產(chǎn)品，讓他有興趣注冊(cè),。若知道是什么產(chǎn)品,、產(chǎn)品體驗(yàn)如何，人們將更愿意去注冊(cè)并提供個(gè)人真實(shí)信息,。
當(dāng)然先試后買模式不是說(shuō)不能要求用戶創(chuàng)建賬號(hào),，只是在用戶體驗(yàn)到產(chǎn)品價(jià)值后再要求其創(chuàng)建賬號(hào)。
比如,，YouTube 在用戶感興趣的前提下,，允許新用戶瀏覽盡可能多的頁(yè)面內(nèi)容，其目的就在于吸引用戶注冊(cè),，從而能讓用戶使用評(píng)論功能或者上傳其個(gè)人視頻,。
當(dāng)你把注冊(cè)相關(guān)的障礙全部清除后，你會(huì)得到巨大的注冊(cè)量,，但這并不意味著你就擁有了巨大的用戶群體,。培育出用戶群體是一系列努力的成果，而設(shè)計(jì)高效的注冊(cè)流程只不過(guò)是朝著該方向邁進(jìn)的第一步罷了,。
謝謝,！
作者 | Nick Babich
軟件工程師，關(guān)注 UI 和 UX 。
譯者 | Jorri
本文譯自 How to Craft Effective Registration,，已獲原作者授權(quán)翻譯,。
原文鏈接 http://babich.biz/how-to-craft-effective-registration/
