為使用者設計一個體貼的註冊登入頁
為了能夠讓使用者順利使用我們提供的服務，有時候必需先請使用者註冊一個新帳號，或者是登入現有帳號。然而這個看似簡單的環節，卻有可能產生以下問題：
- 註冊流程會耗費使用者一定的時間
- 設計不良、過於複雜的表單會讓使用者難以理解
- 使用者不敢／不願意填入某些隱私資訊（信用卡號、地址等）
針對上述問題，我們可以這樣做：
- 讓使用者能夠透過社群帳號登入 → 略過填寫表單、加快註冊流程
- 保持表單長度簡短，或者拆解成不同步驟 → 提升使用者填寫表單的意願
- 思考欄位的必要性 → 信用卡資訊是否可以留待註冊成功後再填寫
共通原則：盡可能的讓註冊登入流程簡易快速。
設計一個體貼的註冊登入頁
註冊登入頁的本質即是「表單」，而表單是產品和使用者溝通的方式之一。為了讓使用者可以順利填寫表單完成註冊登入，每個細節都不能放過。
延伸閱讀：表單不單純—深究button&input&form多種註冊登入方式選擇
Medium 可以透過社群帳號或者傳統的電子信箱註冊登入。多數使用者為求快速便利會使用現有的社群平台帳號註冊登入，略過填寫表單的步驟。但也有人會顧及隱私，選擇用電子信箱另外創建新的帳號。提供多種管道讓使用者選擇他們想要的註冊登入方式。
繁瑣的註冊流程就拆解它
MailChimp 在手機上的註冊流程共有 11 個欄位需要填寫，MailChimp 將它們依相同性質劃分為 6 個步驟，每個步驟不超過 3 個輸入框。這裡也有幾個細節可以注意：
- 上方的進度條 → 讓使用者知道離註冊成功還有多久
- 主標題和副標題 → 向使用者說明為何他們需要填寫以下資訊
- 繽紛的色彩應用 → 讓使用者不感到疲倦厭煩
完成註冊對使用者的好處
使用者在意的是，當他註冊成功，他會得到什麼樣的服務？與其直接在畫面放上「註冊」和「登入」的按鈕，不如先用吸睛的圖片和動人的文案來說服使用者開始註冊並享受產品提供的服務。
Spotify 的註冊登入頁用影片作為背景，並用四段文案說明 Spotify 的產品特點以及使用者可以獲得的服務內容，以此激勵使用者建立帳戶。
MailChimp 則是在註冊登入頁以前，用三個獨立版面介紹他們的服務。使用者條款／隱私權政策
記得在註冊頁「註冊」按鈕下方放上使用者條款和隱私權政策的相關內容，並用超連結樣式表示（雖然不會有人看？）Dropbox 比較特別，按下「建立帳戶」按鈕後跳出 Action Sheet，點擊「我同意」才能順利完成註冊。
無法順利登入時，提供協助
在「登入」按鈕旁邊放上「無法順利登入？」或「忘記密碼？」連結，提供相關協助，確保使用者可以解決目前的問題。
密碼的處理
由於密碼本身的複雜性，在設計上更要注意。
顯示和隱藏密碼
顯示／隱藏密碼可以讓使用者確認現在正在輸入的資訊是否正確。
特別需求
密碼設置若有特殊需求，如：同時存在大小寫、最少需有幾個字元、英數字混合，一定要加註說明。
點擊到密碼輸入框 (input field) 時，下方出現條件「至少要有 8 個字元」，若不符條件，輸入框會變成錯誤狀態 (error state)，並出現錯誤訊息。
錯誤訊息的文案要包含：為什麼錯誤？（例：這個密碼太短了）以及該如何修正？（例：至少要有 8 個字元）密碼強度
Dropbox 把密碼依安全程度分為四個階級（弱／普通／不錯／很好），這個功能在設計上其實非必要，但可以讓使用者感到安心，畢竟 Dropbox 是線上資料存儲服務，密碼需要更高的安全性。
註冊登入剛好是 DailyUI 第一天的題目，若有人正在挑戰，可以回頭檢視自己的設計，如果你還沒開始，希望這篇文有帶給你一些幫助！
對於本文有任何建議、回饋、想法，歡迎在底下留言！也可以透過我的 Facebook 聯繫我 🙌🏻
參考文章：
How to Design Great UX for Sign Up Form
Designing UX Login Form and Process
