用戶體驗設計

登入體驗是應用程式中最重要的使用者體驗之一。在用戶登入時提供高品質的使用體驗,將能使轉換率達到 90% 以上,並鼓勵用戶多加互動,為您帶來更多獲利。

「Facebook 登入」可讓用戶輕鬆快速地開始使用您的應用程式,以及享有更加個人化且有意義的體驗。本文件針對使用「Facebook 登入」以建立絕佳用戶登入體驗,提供您一些訣竅和應考慮的事項。

  1. 先展現價值所在
  2. 避免不必要的步驟
  3. 按鈕設計
  4. 權限
  5. 提供登出方式
  6. 測試與衡量

1. 在提示用戶登入前先展現價值所在

當決定要在使用者體驗中的哪個階段提示使用者登入時,請先自問使用者到了哪個階段才會感謝應用程式提供的價值,且足以信任到將自身資訊交付出去。

這通常取決於用戶的自身體驗,甚至包括下載應用程式前的體驗,但透過應用程式內的設計,您仍有很大空間可進一步影響他們的決定。

以下是一些可鼓勵更多用戶登入的設計方式:

  • 清楚簡潔地說明應用程式提供的價值
  • 向用戶透露登入後能享受的內容
  • 提供全新的用戶體驗
  • 允許用戶無需帳號即可體驗應用程式

清楚簡潔地說明應用程式提供的價值

以具有說服力的方式,清楚簡潔地說明應用程式提供的價值,因為從用戶下載應用程式,或是在應用程式商店看到該應用程式的資訊到現在,可能已經過了一段時間,對說明的印象可能已經變得薄弱。

向用戶透露登入後能享受的內容

讓用戶在登入之前可以先大致查看內容,例如以下範例中的背景相片。即使影像模糊不清,更沒有任何詳細資訊,依然能吸引到更多用戶登入 Pinterest。

提供全新的用戶體驗

如果您的應用程式需要其他教學指導才能獲得最佳體驗,請在「登入」按鈕上方提供多步驟示範,好讓用戶能選擇要瞭解更多資訊,還是直接登入。

允許用戶在登入前即可體驗應用程式

如果可以,請先讓用戶體驗您的應用程式,再提示他們登入。例如,許多電子商務應用程式(例如 Zulily)都是直到用戶進入結帳流程才要求其登入。

2. 避免不必要的步驟

減少不必要的步驟是提高轉換率最有效的方法之一。

請避免要求使用者先點按「登入」或「註冊」,才顯示「Facebook 登入」按鈕,這對於使用「Facebook 登入」來說是多此一舉。用戶也不需要停下來想想自己有沒有帳號。

此外,在用戶使用 Facebook 帳號登入後,請勿再提示他們建立用戶名稱或密碼。用戶喜歡使用 Facebook 帳號登入的原因之一,就是因為「快速、簡單又無須輸入密碼」。尤其是在使用 Facebook 帳號登入後,使用者更不希望再建立使用者名稱或密碼。

3. Facebook 登入按鈕

SDK 隨附的「Facebook 登入」按鈕不但容易整合,而且內建教學,可確保設計和體驗的一致性。

若要啟用帳號建立並用於 Facebook 登入,慣用的方式是在標籤上註明「以 Facebook 帳號繼續」或「使用 Facebook 帳號登入」的字樣(視內容而定)。

「使用 Facebook 帳號登入」的核准用法

「以 Facebook 帳號繼續」的核准用法

「以 [名稱] 的身分繼續」的核准用法

上述為慣用的登入設計方式,將由我們的審查人員核准。不過,如果您需要建置符合特定需求的版本,必須遵循以下準則。

標誌

為了建立知名度和信任感,請一律使用 Facebook 品牌資源中心提供且經過批准的「f」標誌

將「f」標誌用於登入按鈕設計時,它應出現在行動呼籲之前。請勿以註明「使用『f』標誌登入」的方式,將其用作行動呼籲的一部分。

顏色

色彩是讓用戶快速辨認事物的絕佳方法之一。就可用性而言,用戶越能快速辨識出按鈕及其用途,就越會迅速點按按鈕,進而產生更順暢的體驗。

按鈕色彩為白色和 Facebook 藍:5890FF。全世界的用戶在談到「Facebook 登入」時,通常以「那個藍色按鈕」來表示。如果無法使用 Facebook 藍,請改用黑白色。

FACEBOOK 藍色彩值

  • CMYK 光面銅版紙:83 / 52 / 00 / 00
  • CMYK 膠版紙:77 / 36 / 00 / 00
  • PMS 2727C
  • PMS 2382U
  • 十六進位 #1877F2
  • R = 24 G = 119 B = 242

文字

慣用的標籤是「以 Facebook 帳號繼續」或「使用 Facebook 帳號登入」(視內容而定)。使用「f」標誌搭配行動呼籲時,請採用可自 Facebook 品牌資源中心下載的官方版本。

將行動呼籲副本放在登入按鈕內,不可置於按鈕之外。

選擇在應用程式中看起來最美觀的字型、字型粗細和間距,同時務必兼顧易讀性。

廣告版位

登入按鈕應盡可能讓人容易辨識和點按。若是使用行動裝置,這表示按鈕應靠近大拇指,且大小適合點按。最簡單的事實,就是大按鈕的轉換率比小按鈕好。

「f」標誌針對按鈕大小提供各種尺寸,但比例和排版樣式必須保持一致。

可行事項和避免事項

  • 務必使用 Facebook 品牌資源中心提供且經過批准的「f」標誌,並遵循使用準則。

  • 務必在登入按鈕上使用慣用的「以 Facebook 帳號繼續」或「使用 Facebook 帳號登入」標籤(視內容而定),並確保副本位於按鈕設計內。

  • 請勿以任何方式修改「f」標誌,例如變更設計、比例、顏色或其他任何自訂變體。如因技術限制而無法使用正確的顏色,請使用黑白色。

  • 在缺少適當行動呼籲的情況下,請勿在按鈕上使用「f」標誌,最好使用「以 Facebook 帳號繼續」或「使用 Facebook 帳號登入」

  • 請勿將行動呼籲副本(例如:「以 Facebook 帳號繼續」)置於登入按鈕之外。

4. 權限

只要求所需的權限

要求的權限越少,用戶越容易放心授權。據我們所知,要求的權限越少,通常轉換率就越高。

在用戶有機會嘗試您的應用程式之後,您便可以要求其他權限。

要求較少權限的另一個好處是,您可能就無須提交應用程式進行登入審查。只有在要求 public_profileemail 以外的權限時,才需要提交進行「登入審查」。

在相關情境下要求權限並說明原因

用戶若能瞭解為何應用程式需要該資訊來提供更好的體驗,接受權限要求的機率也會提高。只有當用戶嘗試在應用程式內完成某個需要特定權限的動作時,才觸發權限要求。

舉例來說,Facebook 應用程式只有在用戶更新近況,而且明確點擊地點按鈕時,才會要求使用「定位服務」。

5. 提供登出方式

用戶一旦登入,您還需要提供登出、中斷帳號連結及刪除帳號的方式。這不但是尊重用戶的作法,也是《開發人員登入政策》的要求。

舉例來說,交友應用程式 Tinder 能讓您選擇隱藏個人檔案卡片以免被其他用戶找到您、將您登出或完全刪除您的帳號。

6. 測試與衡量

就算是最棒的設計師也沒辦法讓登入流程一次到位。最好的登入體驗通常都經過深思熟慮且反覆再三的設計和測試。

推出應用程式前,請執行質性易用性測試,可藉此瞭解用戶對於所見事物的反應。測試不必拘泥形式,但請務必觀察用戶完成整個體驗。

除了質性易用性測試以外,請使用分析工具瞭解用戶是否能完成程序,同時也瞭解用戶的整體轉換率。採用最佳作法的應用程式,轉換率可達到 90% 以上。