Website authentication flow example

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

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


帳號申請

SNAGHTML8e8b84

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


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

SNAGHTML8f27a4

很逗趣的英文提示。


申請完成

SNAGHTML71bb3c

提示會收到 Email 且需要啟動


帳號啟動

寄送帳號啟動的 email

SNAGHTML706fb1

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


點擊啟動連結進入的畫面

image


辨識是否是機器人

image


辨識完成後

image


寄送 Welcome email

image


登入主頁面

SNAGHTML8fdbe1

  1. 忘記帳號
  2. 忘記密碼
  3. 顯示密碼
  4. 記住登入狀態
  5. 登入
  6. 申請新帳號
  7. 無法登入時的線上說明頁
  8. 進入升級說明頁


帳號輸入錯誤

image


密碼輸入錯誤

SNAGHTML77fdd5


第一次進入系統

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

SNAGHTML7abe4d



登出頁面 See ya later

image

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


忘記密碼

SNAGHTML7ed1f1


輸入不存在的帳號

image


驗證帳號存在

SNAGHTML801e95

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


寄送 email 重新設定密碼

SNAGHTML837448

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


點擊後完成的畫面

image


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

SNAGHTML913602


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

image



忘記帳號

image


輸入不存在的 Email

SNAGHTML851f58


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

SNAGHTML8586ad


寄送 email 通知相關資訊

SNAGHTML91bda1