Website authentication flow example

以 mailchimp.com 為例，來看一個網站從使用者註冊、啟動、登入、忘記密碼/帳號等這些常見的功能，還有哪些細節可以注意。

以下這些功能幾乎每個網站都有做，但很少做到讓人操作起來這麼流暢的!!

帳號申請

若不需要申請，則可以回到登入頁
當滑鼠停佇後，才顯示輸入格式、規則的提示
可以顯示密碼
輸入密碼通過規則後，顏色會變淡
符合表單規則後，才可以點擊

欲申請的使用者名稱已被搶走囉

很逗趣的英文提示。

申請完成

提示會收到 Email 且需要啟動

帳號啟動

寄送帳號啟動的 email

Email 中提示帳號與一顆很明顯的連結按鈕。

點擊啟動連結進入的畫面

辨識是否是機器人

辨識完成後

寄送 Welcome email

登入主頁面

忘記帳號
忘記密碼
顯示密碼
記住登入狀態
登入
申請新帳號
無法登入時的線上說明頁
進入升級說明頁

帳號輸入錯誤

密碼輸入錯誤

第一次進入系統

其他需要填寫資訊還蠻多的，還好沒放在申請頁面上，應該會嚇跑大部份的人。

登出頁面 See ya later

網址很特別 See ya later (http://mailchimp.com/see-ya-later/)

忘記密碼

輸入不存在的帳號

驗證帳號存在

會提示將 Email 寄送到哪個帳號，Email 帳號部分將英數字以 * 取代，若是本人，應該可以看得出來寄送到哪個 Email 信箱。

寄送 email 重新設定密碼

很明顯的帳號與重設密碼的連結按鈕。

點擊後完成的畫面

寄送 email 通知已重新設定新的密碼

回上一頁，會出現提示訊息

忘記帳號

輸入不存在的 Email

很明確告知寄送到那個 email 信箱

寄送 email 通知相關資訊