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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3:註冊為主、登入為輔

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

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

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

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:登入與註冊合體

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

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

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

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

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

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

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

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

B. 用個人資料(如手機號碼)註冊的產品

Uber 是個不分青紅皂白一打開就跟你要手機號碼的 app,對於使用者來說只有一個簡單而不可違逆的指令:輸入手機號碼。大部分使用者在這一步都是乖乖輸入,輸入以後就讓 app 自己跑出對應的流程,是個超無腦、超防呆的設計。我們可以發現,Uber 從頭到尾都不使用登入或註冊的字眼,他用的是 Connect(連結)以及 Get Moving(開始)。

設計這種登入流程的最大要訣就是:用許多中性、曖昧的詞彙。

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

下集預告:

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

為設計癡迷的實戰派 UI/UX設計師——理論是拿來用的!派不上用場的理論都是空談。// Contact me at: hching.design@gmail.com

為設計癡迷的實戰派 UI/UX設計師——理論是拿來用的!派不上用場的理論都是空談。// Contact me at: hching.design@gmail.com