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

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

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

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

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

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

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

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

  

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

  

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

  

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

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

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

Ключевой момент: инструмент разработчика Code Generator может помочь вам разработать кнопку «Войти через Google» в интерактивном режиме и сгенерировать код.

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

Ключевой момент: отображение персонализированной кнопки или общей текстовой кнопки не влияет на потоки пользовательского интерфейса после нажатия кнопки. Учетная запись, отображаемая на персонализированной кнопке, не выбирается автоматически.

Ключевой момент: кнопка «Войти с помощью Google» не поддерживает автоматический вход. Для выбора правильного сеанса требуется действие пользователя, даже если активен только один сеанс Google.

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

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

  • Has-Google-session: на веб-сайтах Google существует как минимум один активный сеанс.
  • Нет сеанса Google: на веб-сайтах Google нет активного сеанса.

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

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

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

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

   

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

   

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

   

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

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

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

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

   

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

   

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

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

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

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

   

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

   

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

   

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

   

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

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

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

   

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

   

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

   

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