Войти с помощью кнопки Google UX

Рендеринг кнопок

Персонализированная кнопка отображает информацию профиля для первого сеанса Google, в ходе которого ваш веб-сайт одобряется. У одобренного сеанса Google есть соответствующая учетная запись на вашем веб-сайте, которая ранее входила в систему с помощью функции «Войти через Google».

Если отображается персонализированная кнопка, пользователь знает следующее:

  • Имеется как минимум один активный сеанс Google.
  • На вашем сайте есть соответствующий аккаунт.

Персонализированная кнопка дает пользователям быструю индикацию статуса сеанса как на стороне Google, так и на вашем веб-сайте, прежде чем они нажмут кнопку. Это особенно полезно для конечных пользователей, которые посещают ваш сайт лишь изредка. Они могут забыть, создана ли учетная запись или нет и каким образом. Персонализированная кнопка напоминает им, что они уже использовали функцию «Войти через Google». Таким образом, это помогает предотвратить ненужное создание дубликатов учетных записей на вашем веб-сайте.

Для индикации статуса сеанса персонализированная кнопка отображается следующими способами:

  • Один сеанс. Со стороны Google существует только один сеанс. Эта сессия утверждает клиента, и на вашем сайте появляется соответствующая учетная запись.

    Персонализированная кнопка, на которой отображается имя одной учетной записи Google.

  • Несколько сеансов: на стороне Google есть несколько сеансов. Эти сеансы утверждают клиента. Утверждение обозначается стрелкой списка рядом с отображаемой учетной записью. По крайней мере, один сеанс имеет соответствующую учетную запись на вашем сайте.

    Персонализированная кнопка со стрелкой списка.

  • Нет сеанса: на стороне Google нет сеанса или ни один из сеансов еще не утвердил клиента.

    Кнопка с надписью «Войти через Google» без персонализированной информации.

Персонализированная кнопка автоматически отображается, когда состояние сеанса подходит, если только настройки вашей кнопки не позволяют отображать персонализированную кнопку. Персонализированная кнопка не отображается, если:

  • Атрибут data-typeicon .
  • Атрибуту data-size присвоено значение medium или small .
  • Атрибут data-width имеет значение меньше 200 пикселей.

Имя или адрес электронной почты отображаются в виде эллипса, если они слишком длинные и не могут быть отображены внутри кнопки.

Персонализированная кнопка с многоточием имени и адреса электронной почты.

Ключевые пути пользователя

Действия пользователя различаются в зависимости от следующих статусов.

  • Статус сеанса на веб-сайтах Google. Следующие термины используются для обозначения различных статусов сеанса Google в начале пути пользователя.

    • Has-Google-session: на веб-сайтах Google существует как минимум один активный сеанс.
    • Нет сеанса Google: на веб-сайтах Google нет активного сеанса.
  • Одобрил ли выбранный аккаунт Google ваш веб-сайт в начале пути пользователя. Следующие термины используются для обозначения различных статусов утверждения.

    • Новый пользователь: выбранная учетная запись не одобрила ваш веб-сайт.
    • Возвращающийся пользователь: выбранная учетная запись ранее одобрила ваш веб-сайт.

Новый путь пользователя Has-Google-session

  1. Кнопка «Войти через Google».

    Кнопка с надписью «Войти через Google» без персонализированной информации.

  2. Страница выбора аккаунта.

    Страница выбора учетной записи с начальной сессией.

  3. Новая страница согласия пользователя.

    Войти с помощью кнопки Google, нажмите кнопку согласия и войдите в систему.

  4. После того, как пользователь подтвердит, токен идентификатора будет передан на ваш сайт.

Пользователи могут добавить новый сеанс Google, нажав кнопку «Использовать другую учетную запись» . См. раздел «Пути пользователя без сеанса Google» ниже.

Путь возвращающегося пользователя Has-Google-session

  1. Кнопка «Войти через Google».

    Персонализированная кнопка, на которой отображается имя одной учетной записи Google.

  2. Страница выбора аккаунта.

    Выбор аккаунта Google

  3. После того, как пользователь выбирает возвращающуюся учетную запись, токен идентификатора передается на ваш сайт.

Пользователи могут добавить новый сеанс Google, нажав кнопку « Использовать другую учетную запись» (см. «Пути пользователя без сеанса Google» ниже).

Путь нового пользователя без сеанса Google

  1. Кнопка «Войти через Google».

    Кнопка с надписью «Войти через Google» без персонализированной информации.

  2. Первая страница для добавления нового сеанса Google.

    Электронная почта аккаунта Google

  3. Вторая страница для добавления нового сеанса Google.

    Вход в аккаунт Google

  4. Новая страница согласия пользователя.

    Войти с помощью кнопки Google, нажмите кнопку согласия и войдите в систему.

  5. После того, как пользователь подтвердит, токен идентификатора будет передан на ваш сайт.

Путь возвращающегося пользователя без сеанса Google

  1. Кнопка «Войти через Google».

    Кнопка с надписью «Войти через Google» без персонализированной информации.

  2. Первая страница для добавления нового сеанса Google.

    Электронная почта аккаунта Google

  3. Вторая страница для добавления нового сеанса Google.

    Вход в аккаунт Google

  4. После того, как пользователь нажимает кнопку «Далее» , токен идентификатора передается на ваш веб-сайт.