「使用 Google 帳戶登入」按鈕的使用者體驗

本頁說明「使用 Google 帳戶登入」按鈕的使用者體驗 (UX)。

按鈕顯示

個人化按鈕會顯示首個 Google 工作階段的個人資料資訊,該工作階段會核准你的網站。已核准的 Google 工作階段會在您的網站上找到對應的帳戶,且該帳戶曾使用「使用 Google 帳戶登入」功能登入。

如果系統顯示個人化按鈕,使用者會知道以下資訊:

  • 至少有一個有效的 Google 工作階段。
  • 你的網站上有對應的帳戶。

使用者在點選按鈕前,可以透過個人化按鈕快速瞭解 Google 和網站的工作階段狀態。這對偶爾造訪網站的使用者特別有幫助。他們可能會忘記是否已建立帳戶,以及建立帳戶的方式。系統會顯示個人化按鈕,提醒使用者曾使用「使用 Google 帳戶登入」功能。因此,這有助於避免在網站上不必要地建立重複帳戶。

為了顯示工作階段狀態,系統會以以下方式顯示個人化按鈕:

  • 一個工作階段:Google 端只有一個工作階段。該工作階段會核准客戶,且您的網站上會有對應的帳戶。

    顯示單一 Google 帳戶名稱的自訂按鈕。

  • 多個工作階段:Google 端有多個工作階段。這些工作階段會核准用戶端。核准狀態會以清單箭頭表示,並顯示在所選帳戶旁邊。至少有一個工作階段在網站上有對應的帳戶。

    含有清單箭頭的個人化按鈕。

  • 沒有工作階段:Google 端沒有工作階段,或是所有工作階段都尚未核准用戶端。

    顯示「使用 Google 帳戶登入」的按鈕,不含個人化資訊。

系統會在工作階段狀態適當時自動顯示個人化按鈕,除非按鈕設定不允許顯示個人化按鈕。系統不會顯示個人化按鈕,如果:

  • data-type 屬性為 icon
  • data-size 屬性設為 mediumsmall
  • data-width 屬性已設為小於 200 像素的數字。

如果名稱或電子郵件地址過長,無法顯示在按鈕中,系統會顯示省略號。

個人化按鈕,內含以省略號代替的名稱和電子郵件地址。

主要使用者歷程

使用者歷程會因下列狀態而異。

  • Google 網站上的工作階段狀態。下列術語用於指示使用者歷程開始時的不同 Google 工作階段狀態。

    • Has-Google-session:Google 網站上至少有一個有效的工作階段。
    • No-Google-session:Google 網站上沒有有效的工作階段。
  • 在使用者歷程開始時,所選 Google 帳戶是否已核准您的網站。我們會使用下列字詞來表示不同的核准狀態。

    • 新使用者:所選帳戶尚未核准你的網站。
    • 回訪者:所選帳戶曾核准過你的網站。

Has-Google-session 新使用者歷程

  1. 「使用 Google 帳戶登入」按鈕。

    顯示「使用 Google 帳戶登入」的按鈕,且不含個人化資訊。

  2. 帳戶選擇器頁面。

    有初始工作階段帳戶選擇頁面。

  3. 新的使用者同意聲明頁面。

    「使用 Google 帳戶登入」按鈕同意聲明和登入畫面。

  4. 使用者確認後,系統就會將 ID 權杖分享給您的網站。

使用者可以按一下「使用其他帳戶」按鈕,新增 Google 工作階段,請參閱下方的無 Google 工作階段使用者歷程。

Has-Google-session returning user journey

  1. 「使用 Google 帳戶登入」按鈕。

    顯示單一 Google 帳戶名稱的自訂按鈕。

  2. 帳戶選擇器頁面。

    Google 帳戶選擇器

  3. 使用者選擇回復帳戶後,系統會將 ID 權杖分享給您的網站。

使用者可以按一下「使用其他帳戶」按鈕,新增 Google 工作階段,請參閱下方的「無 Google 工作階段」使用者歷程。

無 Google 工作階段的新使用者歷程

  1. 「使用 Google 帳戶登入」按鈕。

    顯示「使用 Google 帳戶登入」的按鈕,且不含個人化資訊。

  2. 新增 Google 工作階段的第一個頁面。

    Google 帳戶電子郵件

  3. 新增 Google 工作階段的第二個頁面。

    Google 帳戶登入

  4. 新的使用者同意聲明頁面。

    「使用 Google 帳戶登入」按鈕同意聲明和登入畫面。

  5. 使用者確認後,系統就會將 ID 權杖分享給您的網站。

無 Google 工作階段的回訪者歷程

  1. 「使用 Google 帳戶登入」按鈕。

    顯示「使用 Google 帳戶登入」的按鈕,且不含個人化資訊。

  2. 新增 Google 工作階段的第一個頁面。

    Google 帳戶電子郵件

  3. 新增 Google 工作階段的第二個頁面。

    Google 帳戶登入

  4. 使用者按下「Next」按鈕後,系統就會將 ID 權杖分享給您的網站。

您仍可沿用上一節中介紹的一般重要使用者歷程。以下是登入時,系統會針對孩子的 Google 帳戶顯示額外流程的畫面。

No-Google-session

  1. 「使用 Google 帳戶登入」按鈕。

    顯示「使用 Google 帳戶登入」的按鈕,不含個人化資訊。

  2. 新增孩童 Google 工作階段 (孩童 Google 帳戶電子郵件) 的第一個頁面。

    孩子的 Google 帳戶電子郵件地址

  3. 新增孩子的 Google 工作階段 (孩子的 Google 帳戶密碼) 的第二個頁面。

    孩子的 Google 帳戶密碼

  4. 第一頁:向家長申請核准,以便新增新的 Google 子帳戶。

    家長核准選項頁面

  5. 請家長核准新增孩子的 Google 工作階段。

    家長核准密碼頁面

  6. 第三頁:取得家長核准,可為孩子新增 Google 工作階段。

    家長核准頁面

  7. 第一頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。

    請家長核准登入頁面

  8. 第二頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。

    選擇要核准登入頁面內容的家長

  9. 第三頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。

    家長 Google 帳戶的密碼,用於核准登入頁面

  10. 最後一個畫面,家長必須核准孩子登入應用程式的 Google 帳戶。

    家長核准子女登入頁面

  11. 家長按一下「繼續」按鈕後,系統就會將 ID 權杖提供給您的網站。

Has-Google-session

  1. 「使用 Google 帳戶登入」按鈕。

    顯示「使用 Google 帳戶登入」的按鈕,且不含個人化資訊。

  2. 帳戶選擇器頁面。

    選擇孩子的帳戶頁面。

  3. 第一頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。

    請家長核准登入頁面

  4. 第二頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。

    選擇要核准登入頁面內容的家長

  5. 第三頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。

    家長 Google 帳戶的密碼,用於核准登入頁面

  6. 最後一個畫面,家長必須核准孩子登入應用程式的 Google 帳戶。

    家長核准子女登入頁面

  7. 家長按一下「繼續」按鈕後,系統就會將 ID 權杖提供給您的網站。