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

按鈕顯示

個人化按鈕會顯示首個核准網站的 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 網站上至少有一個有效的工作階段。
    • 非 Google 工作階段:Google 網站沒有運作中的工作階段。
  • 在使用者歷程開始時,所選 Google 帳戶是否已核准您的網站。我們會使用下列字詞來表示不同的核准狀態。

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

Has-Google-session 新使用者歷程

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

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

  2. 帳戶選擇器頁面。

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

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

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

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

使用者如要新增 Google 工作階段,可以按一下 [Use another account] 按鈕。請參閱下方的無 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 權杖分享給您的網站。