超完整登入註冊流程UX分析

Ariel Chang
6 min readJun 28, 2018

幾乎每個app都會有登入註冊流程,所以登入註冊流程要是有人能做成公版就好了,這樣的想法出現之後,我自己就做了相關的研究想把它變成公版!那在這邊我依舊僅針對UX去做研究,UI的部分我就不賣弄了畢竟網路上能人太多了 哈哈!(儘管登入註冊流程看起來大同小異,但還是必須根據產品特性、產品受眾、行銷策略等等因素作修改調整)

登入流程種類

首先登入流程我將它分為兩種:

  1. 有些APP必須要先登入才能使用app(airbnb、LINE)。
  2. 有些即使不登入也能使用APP,但是如果要用APP內的特定功能還是必須得登入(agoda、uberEats)。

那這兩個流程的差別在於進到主頁面的順序。好的,不囉說上圖!

先登入?先註冊?

以下我用兩個同性質的APP做研究,並且感謝我的追劇同好配合進行定性研究!

使用者在登入成功後將帳號登出的機率是很低的,所以要看到登入畫面幾乎只有在第一次使用APP的時候; 但還是有部分類別的APP會基於資訊安全將使用者帳號強制登出,e.g.財經類APP。

那麼這邊KKTV使用的是”註冊頁面”,LiTV使用的是”登入頁面”;在這會特別強調登入及註冊頁面並帶情境說明; 這兩款APP屬於不用登入也可以使用部分功能的APP,但是操作特定動作時,跳出了需要登入才能繼續,(LiTV)點擊登入/註冊按鈕後跳出登入頁面,但是我尚未註冊所以我還要點擊註冊案鈕去註冊完後才能繼續使用。(KKTV)擊登入/註冊按鈕後跳出註冊頁面,註冊之後即可使用。

LiTV 與 KKTV比較(2019新增)

在這個情境中可以感覺到一開始出現登入頁面是很多餘的吧!但是如果今天情況不是第一次登入,而是登出過要再次登入,那麼跳出登入頁面的流程就會相對較順。但上面也說了登出在登入的情況是極少見的! 不過也不排除android用戶到設定頁面清快取,導致APP登出需重新登入。

那要改善像LiTV這樣的流程,方法就是加上第三方登入。

第三方登入是可以加快註冊登入的流程,對使用者來說可以省去key資料的時間就是棒!

好了,進入正題(?)下面這是根據定性研究過後設計的流程

這邊我採用是先進入註冊頁面而非登入頁面,為了加快註冊流程採用了第三方登入(facebook登入)並且也能官方註冊,另外考慮到使用者可能已經有帳號了在下方加了"登入"選項。基本上這是一個非常簡單的登入流程,現在常用的註冊方式還有電話號碼,但是電話號碼還必須考慮到簡訊的問題,然後用了電話號碼註冊還得再另外去驗證,總之就是各種複雜所以這篇就不寫了。另外第三方登入比較常見的有facebook以及google帳號,在大陸方面則是微信最為常見。

不只是文案

UX其實還包含UX文案,像是在登入頁面點擊登入按鈕後,如果使用者key入資料錯誤或是格式不符所要呈現出來的文字,或是需要使用者輸入的地方的預設文字。

這邊推薦一篇文章是由國外的大師寫的 UX Writing: How to do it like Google with this powerful checklist

那總結就是以下幾點

  1. user first
  2. clear
  3. concise
  4. useful
  5. on brand

上面台新APP是一個非常好的負面例子!首先可以看到他的輸入框採用紅色是想要與他們的企業色一致,但紅色卻也有著警告的意味,因此在這邊他紅色用得不好!接著"身分證字號"、"使用者代號"以及"使用者密碼"他輸入框的預設文字僅寫著"請輸入"(??)使用者怎麼知道要輸入什麼!我分別將原本"請輸入"更改為"請輸入身分證字號"、"請輸入手機號碼"、"請輸入6-12英數混和字元"。

台新輸入框與其他APP輸入框的錯誤狀態相似(2019新增)

那UX文案除了上述5點這部分還包含出現的時機,所謂的時機指的就是當使用者key 完資料後,是要在按下按鈕後才出現錯誤訊息還是在按下按鈕前就顯示錯誤訊息;以下用zeplin及google作為例子說明。

zeplin在輸入完信箱後,立即出現錯誤訊息提示(2019新增)
google在資料送出後,出現錯誤訊息提示(2019新增)

當需要使用者輸入的資訊量多的時候(如nike帳號),傾向在使用者key完資料後如果有錯誤”立即”顯示錯誤訊息(如zeplin);試想,今天終於好不容易填完一推資料卻在送出資料時告知帳號已被使用等錯誤訊息,想必體驗肯定很不好吧。

(2019新增截圖)

寫到這邊要先告一段落了(愧對標題XD),真的要強調一下寫文章好累人!絕對不是我懶惰!!!(看看別人寫的哪來的自信用超完整當標題阿XD)但還是希望這篇如果有人看到可以跟我討論,看看我的登入流程有沒有問題或是有更好的方案。

時至2019年終於有看倌來留言,因次燃起我的寫作魂!覺得應該將文章更加完善;在此篇文章中有新增圖片來佐證我的論述,希望能讓各位更佳容易理解!

參考來源:

--

--

Ariel Chang

UI Designer and Movie lover. I enjoy creating digital design and enrich the lives of others. Behance:https://www.behance.net/4a09018758d2