「使用 Google 帳戶登入」按鈕 UX

按鈕顯示

個人化按鈕會針對核准網站的第一個 Google 工作階段顯示個人資料資訊。已核准的 Google 工作階段在您的網站上都有相對應的帳戶,且過去曾使用「使用 Google 帳戶登入」功能登入。

如果顯示個人化按鈕,使用者知道下列事項:

  • 至少有一個執行中的 Google 工作階段。
  • 您的網站上有對應的帳戶。

個人化按鈕可讓使用者在按下按鈕前,快速瞭解 Google 側邊和您網站上的工作階段狀態。這對於只是偶爾造訪您網站的使用者特別有幫助。他們可能會忘記帳戶是否已建立,以及帳戶建立的方式為何。個人化按鈕可以提醒使用者,「使用 Google 帳戶登入」功能使用過。 因此,可避免在網站上重複建立帳戶。

為了表示工作階段狀態,顯示個人化按鈕的方式如下:

  • 一個工作階段:Google 側邊只有一個工作階段。這個工作階段核准用戶端,且網站上有對應的帳戶。

    顯示單一 Google 帳戶名稱的個人化按鈕。

  • 多個工作階段:Google 方面有多個工作階段。這些工作階段會核准用戶端。核准後,畫面旁會顯示一個清單箭頭,表示核准。您的網站至少有一個工作階段設定對應帳戶。

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

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

    顯示「使用 Google 帳戶登入」按鈕,但沒有個人化資訊。

除非您的按鈕設定不允許顯示個人化按鈕,否則系統會在工作階段狀態適合時自動顯示個人化按鈕。個人化按鈕在下列情況下不會顯示:

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

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

含有橢圓形名稱和電子郵件地址的個人化按鈕。

主要使用者歷程

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

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

    • 有 Google 工作階段:Google 網站上至少有一個執行中的工作階段。
    • 無 Google 工作階段:Google 網站目前沒有執行中的工作階段。
  • 使用者旅程啟動時,所選 Google 帳戶是否已核准您的網站。以下術語可用來表示不同的核准狀態。

    • 新使用者:所選帳戶尚未核准您的網站。
    • 回訪者:所選帳戶先前已核准您的網站。

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

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

    顯示「使用 Google 帳戶登入」按鈕,但沒有個人化資訊。

  2. 帳戶選擇工具頁面。

    Has-Initial-Session 帳戶選擇工具頁面。

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

    表示同意並登入。

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

使用者可以按一下「Use another account」按鈕來新增 Google 工作階段,請參照下方的「No-Google-session」使用者歷程。

有 Google 工作階段的回訪使用者歷程

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

    顯示單一 Google 帳戶名稱的個人化按鈕。

  2. 帳戶選擇工具頁面。

    Google 帳戶選擇工具

  3. 使用者選擇回訪帳戶後,系統就會將 ID 權杖提供給您的網站。

使用者可以按一下「Use another account」按鈕來新增 Google 工作階段 (請參見下方「無 Google 工作階段」的使用者歷程)。

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

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

    顯示「使用 Google 帳戶登入」按鈕,但沒有個人化資訊。

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

    Google 帳戶電子郵件

  3. 用於新增 Google 工作階段的第二頁。

    Google 帳戶登入

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

    表示同意並登入。

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

不透過 Google 工作階段回訪的使用者歷程

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

    顯示「使用 Google 帳戶登入」按鈕,但沒有個人化資訊。

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

    Google 帳戶電子郵件

  3. 用於新增 Google 工作階段的第二頁。

    Google 帳戶登入

  4. 使用者點選「Next」按鈕後,系統就會將 ID 權杖提供給您的網站。