重新設計 Pinkoi 註冊登入頁
非官方設計，純粹自我練習
版權說明：文章首圖最左側螢幕「Pinkoi LOGO」及「小女孩開箱圖」圖片版權為 Pinkoi 所有，其餘 icon 和插圖皆為自行繪製。
在撰寫上一篇文章〈為使用者設計一個體貼的註冊登入頁〉的時候，觀察到 Pinkoi 的手機版註冊登入流程有一些可以處理得更好的環節，所以決定重新設計它，純粹是想自我練習，無任何合作關係（如果 Pinkoi 願意跟我合作那就真的太好了XDD）
在正文開始之前，想先舉一個實際案例〈Dcard Lab：透過量化研究提升 500% 的註冊表現〉Dcard 原先的註冊流程繁瑣，需填答高達 11 個欄位，總耗時約莫 30 分鐘。經過大幅精簡到 2 個欄位（信箱和密碼）以後，縮減到 3 分鐘，會員增加數也因此提升 500%。
文中提到「至於原先註冊流程需填寫的其他內容，則被拆解成幾個部分，在使用者需要啟用相應功能時才提醒他們填寫，而這個拆解過程也大幅提升使用者對填寫資料的接受度。」
總之，別忘記註冊登入流程的原則：簡易快速。
以下先列出在各個頁面我看到的問題：
１註冊登入頁｜沒辦法一次看到所有的登入方式
除了用傳統的電子信箱登入以外，Pinkoi 也提供四種社交帳號登入，然而使用者必須透過左右滑動才能看到全部的登入方式。這樣的排版雖然可以節省畫面空間，但也會讓部分選項隱藏，稍不留意會以為只有 Facebook 和微博兩種選項。
〈Obvious Always Wins〉一文提到使用者不太會點擊隱藏在漢堡選單 (toggle menu) 或者輪播 (carousel) 裡的按鈕或連結，比較適切的做法是用tab bar 或 segmented control 展示出所有的選項。
作者也說 “Out of Sight, Out of Mind” 手機螢幕和電腦相比很小，有時候會為了畫面的簡潔把部分功能放置在不可視區域，但如此一來也犧牲了和使用者直接互動的機會，這時候資訊的取捨就相當重要：哪些重點要留在畫面裡？
２註冊頁｜密碼條件用警告對話框 (Alert Sheet) 交代
在 Pinkoi 的註冊頁面，若設定的密碼不符條件，會跳出警告對話框 (Alert Sheet)，但⋯⋯等等「限英文大小寫或數字、不含標點符號與空格、總長度至少六碼以上」這麼多條件，按下「確定」後就消失了！（底下還有神秘的 error code）難道註冊帳號還要考驗記憶啊！
〈UI 對話框的設計大有學問，看設計師如何思考〉一文提到「對話框是在使用者進行操作時強行介入的一種『模式』。在 app 中盡量不要使用警告框。」密碼設定相關條件可以直接列在下方，清晰明瞭也減少出錯的可能。
３註冊頁｜註冊完成後沒有確認頁面 (Confirmation Page)
在填寫完 Pinkoi 的註冊表單以後，必須到信箱查收認證信才算是註冊完成，然而點擊「註冊」按鈕以後會直接回到註冊登入的主畫面，使用者無從得知還有「查收認證信」這個步驟。
〈5 Essential UX Rules for Dialog Design〉一文提到 “When a process is finished, remember to display a notification message (or visual feedback).” 當一個流程結束時，記得用對話框的形式通知使用者，或者是視覺回饋。
Medium 的註冊表單完成後，點擊 “Create account” 會進到 “Check your inbox” 的確認頁面，向使用者說明下一步應該要到信箱查收認證信。
４登入頁和註冊頁的 input、button 樣式沒有統一
上方的 navigation bar、中間的 input 和 button、下方的文案文字大小，兩個頁面都沒有統一的樣式。更奇怪的是，登入頁的文案「登入遇到問題？」後緊接著「註冊新帳號」讓使用者容易產生混淆。
重新設計以後
註冊登入頁
- 註冊登入頁面加入品牌要素（LOGO 和核心價值）
- 將所有的註冊登入方式在一個畫面中清楚陳列
最左側螢幕「Pinkoi LOGO」及「小女孩開箱圖」圖片版權為 Pinkoi 所有，其餘 icon 和插圖皆為自行繪製。
註冊頁
- 密碼設定條件列在 input 下方
- 點擊眼睛 icon 可以顯示／隱藏密碼
- 註冊成功後進到「查收認證信」的確認頁面
登入頁
- input 和 button 樣式跟註冊頁統一
tab bar
- 為了練習畫 icon 重新設計 tab bar。
・網格參考自 Google Material Design Icons
・Illustrator 像素相關設定和眼睛畫法參考自 How to Create 10 Common Icons最後再對比一下新舊頁面
對於本文有任何建議、回饋、想法，歡迎在底下留言！也可以透過我的 Facebook 聯繫我 🙌🏻
