UI/UX|註冊登入流程.超完整的深入教學(上)

H.Ching
H.Ching
Sep 15, 2019 · 10 min read

在研究登入與註冊流程的 UI/UX 過程中,發現大部分文章都只探討流程設計(例如:應該分多步驟、用圖片增加吸引力、可以加社群登入…等等)以及一些細節上的設計,但是關於「登入優先還是註冊優先?」的主題卻幾乎沒有人寫,所以今天想針對這個題目做一下討論。

本篇重點:判斷產品要使用哪一種登入流程的時候,最重要的原則當然就是判斷「使用者現在想要登入還是註冊?」並以多數人的需求為重,去設計適當的流程。

以下將分為四種登入流程介紹:1. 登入、註冊並重.2. 登入為主.3. 註冊為主.4. 登入與註冊合體。小心文長,請耐心服用。


1:登入、註冊並重
這類型的產品會在首頁或起始畫面用兩個獨立的按鈕給用戶選擇:登入或註冊(創建帳號)。

許多網頁的 header 同時有登入與註冊兩個按鈕

幾乎所有的一般性產品都可以用這個方式,這是最保守、最安全的作法,既不需要預測使用者目的,也幾乎不需要做任何 UX 上的判斷。在 UI 的表現上,會讓兩個按鈕的位階是平等的。如果設計師特別希望做出位階區分,則通常會以「註冊」為主要的 CTA(Call to Action)。

註冊與登入並重的 app 畫面(Slack / Pinterest / Trello / Starbucks)

兩種按鈕都顯示的優點和缺點是同一個:它是一種折衷的作法,不偏重新或舊任何一種使用者,你可以說它不選擇犧牲新舊使用者任何一方的使用體驗,也可以說它兩者都選擇犧牲退讓以求得最保守的中間值。應用在 app 上,任何使用者都必須先選擇想要執行的動作,才能開始執行,是一個徒增使用步驟的方式。

因此我們還是要問:什麼樣的產品真正適合這種登入流程?

A. 使用者需要註冊與登入的可能性相當的時候

試想你的產品是一個美食平台,撰寫食記、餐廳評論的人也許偏好用網頁,想發佈簡評、上傳相片的人可能偏好用 app。這時候無論是網頁或 app 都有相同機率遇到新或舊使用者,那麼註冊與登入並重就會是個不錯的選擇。

B. 使用者每隔一段時間才會開啟的產品

大部分產品為了安全性會有定期自動登出的機制,當你的產品不是一個使用者會頻繁使用的產品,使用者就有很大的機率必須常常重新登入。這時候我們很難判斷造訪的未登入使用者是「被登出」的,還是「新用戶」,這時候就可以使用登入與註冊並重的方式。


2:登入為主、註冊為輔
主畫面或唯一的 CTA 是登入,並在登入畫面某處另有選項可以註冊帳號。

NETFLIX 的 header 並沒有註冊的選項
以登入為主的 app 畫面(FB / IG / Gmail / 國泰網銀)

對於已經有帳號、打開 app 就是要登入的舊使用者來說,當然是一開始就跑出登入畫面最方便。這是個將便利性導向舊用戶的設計,預設舊用戶比新用戶多的產品就會用這個流程。

那麼,什麼樣的產品適合這種登入流程呢?

A. 基本上使用者 99% 機率有帳號的產品

以 Facebook 為例,絕大多數的人帳號都是從網頁上註冊的,會下載 app 的用戶基本上都是已經有帳號的用戶。Gmail 也是同樣的道理,基本上 99% 會下載 Gmail app 的用戶都早就已經有帳號了!這些用戶下載 app 的原因都只是為了能夠更快速、方便地使用這個產品而已,所以自然不需要將「註冊」擺為重點。

B. 基於安全性原因必須經常為使用者做登出動作的產品

基本上和金流交易有關的產品,或是因為安全性原因,在短時間內就會將用戶登出的產品,都會要求使用者每次使用都必須登入。這個時候如果 UI/UX 設計師叫用戶選擇要登入還是註冊,那不是要氣死用戶了嗎?通常這類的產品也會配合指紋、臉部辨識,或是簡易密碼,讓用戶登入過程更加輕鬆。
而網路銀行的 app,用戶通常需要在開戶的時候透過銀行現場辦理網路銀行開通的作業,因此你當然也不需要在網銀的 app 看到註冊的選項。


3:註冊為主、登入為輔

以註冊為主要 CTA 的產品,在註冊畫面某處另有選項可以登入帳號。

Instagram 登入畫面以註冊為主,下方有選項可以登入

這一類的登入流程基本上就是預設大部分用戶都是要註冊的,對於要登入的使用者來說是特別麻煩的一種設計,但是對於那些對產品有興趣、有意願註冊成為使用者的用戶來說,能夠以較少的步驟與看似更為簡易的流程,增加註冊意願。

以註冊為主的 app 畫面(Behance / Dropbox / Medium / Soundhound)

什麼樣的產品適合這種登入流程?

A. 就算沒有帳號也可以做很多事情的產品

在 Apple 推出的 Human Interface Guidelines(簡稱 HIG)中,很清楚地列出一項(針對 app 的)原則:延遲登入/註冊

Delay sign-in as long as possible. People often abandon apps when they’re forced to sign in before doing anything useful. Give them a chance to fall in love with your app before making a commitment to it.

延遲註冊是一個好的策略,如果你的產品可以先讓沒有帳號的用戶逛逛、看看,再請用戶註冊,用戶的意願必定會上升。
舉例來說,Soundhound(上圖右)是一款辨識音樂的 app,使用者要用來查現在聽到的是什麼歌、這首歌的歌詞等等,都是不需要帳號就能進行的。但是如果用戶想要保存查詢歷史、連接 Spotify 或 Apple Music、連結不同裝置的話,就需要註冊帳號才能使用了。

B. 基本上不會幫用戶登出的產品

像是網頁版的 facebook 和 Instagram,除非用戶手動登出,否則基本上很少會幫用戶進行登出的機制。而這兩個網頁也是屬於不登入就幾乎看不到內容的,因此用戶也不會在非登入狀態下觀看,所以他們的入口頁面就完全以註冊為重。
比較特別的是,上一段我們有討論到 FB和 IG 的 app,作法和網頁相反,是以登入為重。透過兩者的比較就可以明白 FB 的策略就是將網頁作為註冊的最大入口,而 app 就是給已經有帳號的用戶下載使用的了。
至於 IG 的策略就頗令人疑惑了,因為 IG 不管是註冊或使用都以 app 為主,用戶登入以後也幾乎不會被登出,所以我反而會建議 IG 的 app 登入流程改為以註冊為主呢~


4:登入與註冊合體

用戶填完帳號以後,如果是既有使用者,則進入登入流程(填寫密碼);如果此帳號不存在,就進入註冊流程的設計。

Dcard 的登入流程為登入、註冊合體,所以所有的按鈕都寫「註冊 / 登入」

這類型的登入流程比較少見,評價也比較兩極,使用上非常依賴用戶資質與天賦,最大的困難是如何讓用戶馬上明白「不管我要登入或註冊都是在這個畫面」這件事情。

另外一個缺點就是如果帳號打錯字,或是不小心記錯填成自己的另外一支 email,就會直接進入註冊流程。由於系統無法判斷用戶是打錯還是想要註冊新的帳號,所以無法針對這個部分做出警語,對於不幸遇到這種狀況的用戶算是個莫大的困擾。

註冊、登入合體的 app 畫面(Uber / Accupass / the fork / What’s app)

也因此,設計這類型的登入流程必須非常小心,不管是在用詞上或是位階的處理,都必須特別謹慎。如果設計得不夠清楚的話,也許設計師可以安慰自己:用戶自己多嘗試一下就會成功了。只是嘗試的過程中流失的用戶,就要由設計師去承擔了

既然這種登入流程看起來缺點這麼多,為什麼還是有不少產品想要使用呢?答案是:因為用得好的時候,這個流程是那麼的順暢而充滿魅力啊!也就是所謂的高風險、高報酬率的設計風格囉。

所以,這麼難設計的登入流程適合什麼樣的產品呢?

A. 品牌定位難以取代的產品

上圖的 What’s app 是個很好的例子,What’s app 在許多國家的定位就和台灣的 LINE 一樣重要。想想你註冊 LINE 的時候,如果有點搞不清楚註冊流程,你會因此放棄、改用別的 app 嗎?不會!因為你一定要用啊!你的朋友都在用 LINE,你去用別的軟體沒有意義嘛。
如果你的產品對於特定族群來說無法取代,他們 99% 不會在登入 / 註冊時離開,那你就可以大膽嘗試這種方法。

B. 用個人資料(如手機號碼、身分證字號)註冊的產品

Uber 是個不分青紅皂白一打開就跟你要手機號碼的 app,對於使用者來說只有一個簡單而不可違逆的指令:輸入手機號碼。大部分使用者在這一步都是乖乖輸入,輸入以後就讓 app 自己跑出對應的流程,是個超無腦、超防呆的設計。我們可以發現,Uber 從頭到尾都不使用登入或註冊的字眼,他用的是 Connect(連結)以及 Get Moving(開始)。
不過我還是要提醒,用身分證字號註冊是個比較危險的做法,畢竟身分證字號是重要個資,除非不得已否則使用者不會想要在還不信任產品的情況下提供,所以想要用身分證字號註冊的設計師們要自己斟酌。

C. 任何產品,只要設計師夠強(笑)

設計這種登入流程的最大要訣就是:用許多中性、曖昧的詞彙。像剛剛提到的 Uber 打死不提登入或註冊一樣,大多數用這種流程的產品都會盡量避免這樣的詞,來避免用戶困惑。What’s app 用 Confirm(確認)和 Done(完成);the fork 用 Start(開始)和 Continue(繼續)。Dcard 選擇用「註冊 / 登入」對於使用中文為主要語言的用戶群來說也是個不錯的選擇。
倒是 Accupass 很失敗地用了登入這個詞,他在敘述中說:請用 facebook 或 Accupass 的帳號登入。可是如果我不想用 FB 又沒有 Accupass 的帳號怎麼辦?用戶無法理解到只要隨便輸入 email 帳號就能進入註冊流程,在這一步已經開始困惑與質疑,所以這絕對是一個失敗的合體設計。


下集預告:

在設計註冊與登入流程的時候,如何減輕用戶的壓力?怎麼做出一個體貼、便利的設計?什麼樣的設計會讓使用者憤怒地想摔電腦?關於註冊流程中的警語、驗證、保持登入、忘記密碼等呈現,一些比較細節上的處理方式,就在下一篇文章~


H.Ching

Written by

H.Ching

從事 UI/UX、平面設計經歷超過六年,喜歡簡約、乾淨、俐落的設計。

More From Medium

Related reads

Feb 19, 2019 · 6 min read

111

Related reads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade