Включить быстрый вход: шаблоны интерфейса режима Immediate UI

Eiji Kitamura

Опубликовано: 30 сентября 2026 г.

Обзор

Режим немедленного показа интерфейса позволяет избежать потери контекста и отказов пользователей, вызванных переходом на отдельную страницу входа. Она позволяет быстро входить в аккаунт, используя ключи доступа или сохраненные пароли прямо на странице, которую просматривает или с которой работает пользователь, не покидая ее.

В отличие от условного интерфейса, который показывает подсказки автозаполнения, когда пользователь выбирает текстовое поле, режим Immediate UI сразу вызывает диалоговое окно аутентификации браузера в ответ на нажатие кнопки или ссылки. В настоящее время uiMode принимает только "immediate", но в будущем это может измениться.

Режим "Немедленный интерфейс" обладает тремя основными характеристиками, которые делают его уникально эффективным для быстрого входа в систему:

  • Пропуск QR-кодов для нескольких устройств. Если на устройстве есть ключи доступа или сохраненные пароли, браузер сразу показывает диалоговое окно аутентификации. Если таких устройств нет, приложение сразу же закроется, не показывая экран с QR-кодом для смартфонов. Это позволяет сайту естественным образом перейти к стандартной навигации (например, к странице входа).
  • Интуитивно понятный интерфейс выбора аккаунта. Вместо того чтобы показывать разные типы учетных данных по отдельности, он скрывает различия между ключами доступа и паролями, чтобы пользователю было проще выбрать аккаунт для входа.
  • Безопасное прогрессивное улучшение. Хотя эта функция поддерживается только в браузерах Google Chrome и Chromium, обнаружение функций позволяет быстро выполнять вход для пользователей в поддерживаемых средах, не нарушая существующие процессы входа для пользователей неподдерживаемых браузеров (например, Safari или Firefox) или в режиме инкогнито.

Подробнее о том, как работает API и как реализовать обнаружение функций, можно узнать в статье Режим немедленного показа интерфейса для входа в аккаунт. В этом документе мы рассмотрим рекомендуемые шаблоны UX, которые повышают конверсию в режиме Immediate UI, а также антипаттерны дизайна, которых следует избегать.

Наиболее эффективно использовать режим Immediate UI для перехвата непосредственно перед навигацией по страницам. Если не прошедший аутентификацию пользователь (или пользователь с истекшим сроком действия сеанса) нажимает на ссылку или командную кнопку, которые обычно ведут на страницу входа, вызов режима Immediate UI в этот момент обеспечивает удобство работы, не прерывая рабочий процесс.

На большинстве сайтов ссылка "Войти" размещена в глобальном заголовке в верхней части экрана и ведет на отдельную страницу входа. Когда пользователь нажимает на эту ссылку на странице, которую он просматривает, приостановка навигации и вызов режима Immediate UI позволяют браузеру показать диалоговое окно выбора аккаунта прямо над текущей страницей, если на устройстве есть учетные данные.

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

Динамический вход при оформлении покупки (для электронной торговли)

На сайтах электронной торговли переход от корзины к оформлению заказа – один из самых распространенных моментов, когда пользователи отказываются от покупки из-за проблем с навигацией по страницам. Если включить режим Immediate UI, то при нажатии кнопки "Перейти к оформлению заказа" на экране корзины появится диалоговое окно выбора аккаунта. Аутентификация будет выполнена одним нажатием.

После успешной аутентификации покупатель сразу переходит на страницу подтверждения доставки и оплаты, минуя страницу входа в аккаунт. Это значительно сокращает количество шагов, необходимых для совершения покупки. Если учетных данных нет, покупатель переходит на обычный экран входа в аккаунт или выбора гостевого оформления заказа. Вы можете настроить сайт так, чтобы гости могли оформлять заказы без регистрации, или сделать вход обязательным. Режим "Сразу" позволяет упростить процесс оформления покупки для вернувшихся клиентов.

Встроенный вход для микродействий (лайк, закладка, сохранение)

Когда посетители просматривают ленты социальных сетей, сайты сообществ или каталоги товаров интернет-магазинов, принудительное перенаправление на страницу входа каждый раз, когда они пытаются поставить отметку "Нравится" или добавить товар в закладки, может привести к тому, что некоторые пользователи откажутся от этих действий.

Когда посетитель, не вошедший в аккаунт, нажимает кнопку действия, например "Нравится", "В закладки" или "Сохранить", диалоговое окно в режиме Immediate UI появляется прямо на месте нажатия. Это позволяет быстро подтвердить личность пользователя и сразу же зарегистрировать действие и запустить анимацию интерфейса (например, значок сердца становится красным). Позиция прокрутки не смещается ни на один пиксель, поэтому просмотр не прерывается. Если учетных данных нет, вместо того чтобы сразу переходить на другую страницу, вы можете показать легкое встроенное модальное окно входа поверх текущего экрана или перенаправить пользователя на страницу входа таким образом, чтобы после входа он вернулся на исходную страницу.

Повторная аутентификация для действий, связанных с безопасностью

Даже если пользователь уже вошел в аккаунт, для выполнения важных действий, таких как изменение пароля, адреса доставки, сохраненных способов оплаты или добавление нового ключа доступа, требуется повторная аутентификация. Это необходимо для обеспечения безопасности. Если пользователь нажмет на ссылку или кнопку, ведущую к настройке с конфиденциальной информацией на странице "Мой аккаунт", будет вызван режим немедленного интерфейса, и подтверждение личности можно будет выполнить прямо на панели управления, не покидая страницу. Это позволяет пользователю перейти непосредственно на страницу редактирования целевых настроек (или немедленно выполнить конфиденциальную операцию), не проходя через промежуточный экран повторного входа. Если учетные данные отсутствуют, перенаправьте пользователя на стандартный экран повторной аутентификации (например, экран повторного ввода пароля или экран подтверждения одноразового пароля).

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

Разблокировка платного доступа к сайту издателя

Многие новостные и контентные платформы используют модель, при которой первые абзацы статьи доступны бесплатно, а при прокрутке вниз появляется уведомление о платном контенте или размытие, которое могут видеть только подписчики.

Когда читатель прокручивает статью до платного доступа и нажимает кнопку "Продолжить чтение с аккаунтом", в режиме Immediate UI диалоговое окно аутентификации появляется прямо над тем местом, где читатель остановился. После завершения аутентификации размытие статьи плавно исчезает без перезагрузки страницы, позволяя читателю продолжить чтение с того места, на котором он остановился. Если учетных данных нет, разверните встроенную форму регистрации или входа в разделе с платным доступом.

Антипаттерны

Режим Immediate UI очень полезен, если использовать его до перехода на другую страницу, но если разместить его в неправильном месте, это может негативно повлиять на процесс входа пользователя в аккаунт.

Не используйте режим Immediate UI для кнопок входа на отдельных страницах входа

Поскольку в режиме Immediate UI и ключи доступа, и пароли обрабатываются в одном удобном диалоговом окне, может возникнуть желание использовать его для кнопки "Войти" на отдельной странице входа. Однако в этом случае его лучше не использовать. Во-первых, режим Immediate UI требует активации пользователем (например, нажатия или клика), поэтому его неудобно использовать на странице входа, где пользователи ожидают, что варианты входа будут доступны сразу после загрузки страницы. Во-вторых, страница входа – это конечный пункт, куда попадают пользователи, у которых нет локальных учетных данных на устройстве или которые хотят войти с помощью ключа доступа на мобильном устройстве (межплатформенная аутентификация) или аппаратного электронного ключа, нажав "Войти с помощью ключа доступа". Если вы используете режим "Немедленный интерфейс", браузер подавляет резервные варианты с QR-кодом и электронным ключом для нескольких устройств и немедленно завершает работу, как только обнаруживает, что на устройстве нет локальных учетных данных. В результате пользователь оказывается в тупике: нажатие кнопки ни к чему не приводит, а на странице нет других вариантов.

На странице входа, где каждый способ аутентификации должен работать надежно, рекомендуется настроить условный интерфейс (интеграцию автозаполнения) в полях ввода, чтобы обеспечить удобство использования локальных ключей доступа. При этом кнопки "Войти с помощью ключа доступа" должны быть связаны со стандартными методами вызова, которые надежно отображают QR-код для входа для нескольких устройств и варианты с электронным ключом.

Заключение

Режим немедленного перехода к интерфейсу – это мощный инструмент, который позволяет избежать лишних переходов на страницы входа и быстро выполнять вход, сохраняя контекст. Перехватывая моменты явного намерения пользователя, например нажимает на ссылку для входа в аккаунт в заголовке, кнопку оформления заказа, выполняет микродействия, проходит дополнительную аутентификацию для конфиденциальных операций (с указанием allowCredentials) или пытается обойти платный доступ к статье, непосредственно перед навигацией по страницам, вы можете предотвратить прерывание и обеспечить удобство для пользователей.

При этом помните, что режим Immediate UI – это строго прогрессивное улучшение до перехода на страницу. Не применяйте его к кнопкам на целевой странице входа, чтобы дизайн оставался открытым и доступным для пользователей, которые входят в аккаунт с помощью QR-кода.

Чтобы узнать больше о реализации ключей доступа и новейших функциях Web Identity, ознакомьтесь со следующими ресурсами: