用戶體驗設計

開始使用體驗是您應用程式最重要的用戶體驗之一。高品質的登入體驗能導致 90% 以上的轉換率,也會鼓勵用戶更加積極互動而成為您的營利來源。

「Facebook 登入」可讓用戶輕鬆快速地開始使用應用程式,並享受更為個人化且有意義的體驗。在本文件中,我們將為您提供一些貼士和考慮事項,以助您使用「Facebook 登入」締造出色的用戶登入體驗。

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

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

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

這通常甚至會受到用戶在下載應用程式前自身體驗的影響,但透過應用程式內的設計,您仍有很大空間可進一步影響。

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

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

清楚簡潔地說明應用程式的價值所在

清楚、簡潔且有說服力地說明應用程式的價值所在。用戶可能是在很久之前下載應用程式,或在應用程式商店內閱讀其資訊。

讓用戶一窺登入後才能享受的內容

在用戶登入前,先透露所提供的內容,如此例中的背景相片。您無需提供詳細內容;Pinterest 的 Pinboard 即使只有模糊的圖像,也能鼓勵更多用戶登入 Pinterest。

提供全新的用戶體驗

如果應用程式需要額外訓練才能有最佳體驗,請在「登入」按鈕上方提供多步驟示範。這樣可讓用戶選擇進一步了解內容,或在準備好時選擇直接登入。

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

可以的話,不妨在提示用戶登入前,先讓他們體驗您的應用程式。舉例來說,Zulily 等許多電子商務應用程式在用戶準備好結帳前,不會要求他們登入。

2. 避免不必要的步驟

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

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

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

3. Facebook 登入按鈕

我們 SDK 附帶的「Facebook 登入」按鈕十分容易整合,並包括內置說明,可確保設計與體驗的一致性。

啟用帳戶建立功能及 Facebook 登入時,視乎具體上下文,首選的標籤為「使用 Facebook 繼續」或「使用 Facebook 帳戶登入」。

已批准的「使用 Facebook 帳戶登入」使用方法

已批准的「使用 Facebook 帳戶繼續」使用方法

已批准的「以 [Name] 的身分繼續」使用方法

請優先使用上述登入設計,我們的審查人員將會審查此等設計。不過,如果您需要按照特定需求建立特定版本,請務必遵循以下準則。

標誌

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

在登入按鈕設計中使用「f」標誌時,此標誌應早於呼籲字句出現。請勿將此標誌用作呼籲字句的一部分,如「使用「f」標誌登入」。

顏色

使用色彩是能夠讓用戶快速辨識資訊的最佳方法之一。就可用性而言,用戶越能快速辨識出按鈕用途,就越會迅速點按按鈕,進而產生更順暢的體驗。

按鈕的顏色為白色和 Facebook 藍:5890FF。在世界各地,每當有人談論 Facebook 登入,他們經常會稱之為「藍色按鈕」。如果您無法使用 Facebook 藍,請改用黑色和白色。

FACEBOOK 藍的顏色值

  • 四色印刷銅版紙:83/52/00/00
  • 四色印刷膠版紙:77/36/00/00
  • PMS 2727C
  • PMS 2382U
  • Hex #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% 的轉換率。