Scott
Экран ввода кода подтверждения должен отвечать на четыре вопроса: куда отправлен код, как его ввести, что произойдет дальше и что делать, если сообщение не пришло или код уже не действует. Начните с одного логического поля, которое принимает код целиком. Исправление адреса, повторную отправку и ошибки продумайте в рамках того же сценария, а не добавляйте мелкими ссылками в самом конце.
Рассмотрим пример рабочего пространства для проектов: новый участник подтверждает электронную почту перед входом в команду. В примере используется шестизначный код 024681. Ноль в начале важен: это последовательность символов, которую нужно воспроизвести, а не число для вычислений. Создайте связанные экраны в редакторе интерфейсов Pixso, чтобы проверить письмо, поле и следующий шаг вместе.
Покажите адрес назначения до ввода кода
Используйте прямой заголовок «Подтвердите электронную почту» и короткую инструкцию: «Введите шестизначный код, отправленный на m***@studio.example». Заголовок объясняет цель, а адрес помогает понять, какой почтовый ящик открыть. Рядом оставьте заметное действие «Изменить адрес».
Степень скрытия адреса зависит от ситуации. При регистрации человек только что ввел почту и должен суметь заметить опечатку. Слишком сильная маскировка может скрыть именно ее. На общем экране или при восстановлении доступа могут быть важнее требования конфиденциальности. Одно правило отображения не обязано подходить для обеих задач.
Само письмо тоже должно быть узнаваемым. Укажите рабочее пространство и причину отправки кода. Рекламный текст не должен конкурировать с информацией, ради которой человек открыл сообщение. Если продукт просит «шестизначный код», не называйте его в письме паролем или номером приглашения.
Изменение адреса — отдельная ветка сценария. Верните человека к редактируемому полю, сохраните нужные данные регистрации и запросите подтверждение исправленной почты. Код для старого адреса не должен незаметно подтверждать новый.
Оставьте код одним логическим полем
Одно поле — надежная исходная точка: ввод, выделение, вставка и исправление полного значения привычны пользователям. Визуально можно показать шесть ячеек, но они не должны заставлять человека управлять шестью независимыми фрагментами текста.
Руководство web.dev по полям одноразового кода рекомендует хранить цифровой код как текст, использовать подходящий режим цифрового ввода и подсказку автозаполнения одноразового кода. Эти требования нужно передать разработчикам: шесть нарисованных прямоугольников сами по себе их не реализуют. Поддержка браузеров различается, а поведение для SMS не гарантирует автозаполнение кода из электронной почты.
Вставьте в поле код из примера — 024681. Он должен остаться шестизначным. Если числовой элемент превращает его в 24681, он меняет сам код. Здесь не нужны разделители тысяч, кнопки увеличения и уменьшения или арифметическое форматирование.
Если важен вид отдельных ячеек, особенно внимательно проверьте обычное редактирование. Вставка должна заполнять весь код, Backspace — вести себя предсказуемо, а замена цифр — не требовать попадания в крошечные ячейки. Доступная подпись относится ко всему логическому полю: скринридер не должен последовательно объявлять шесть непонятных полей.
Не мешайте обычному вводу и исправлению
Подпись поля может быть простой: «Код подтверждения». Требование к длине оставьте видимым и отделите от ошибки. Пока человек печатает, фраза «Введите все 6 цифр» служит подсказкой, а не доказательством неверного кода.
Не показывайте «Неверный код», когда введены только три цифры. Полное значение еще не отправлено на проверку. Дайте закончить ввод, а при попытке отправить неполный код объясните проблему рядом с полем.
Разрешите вставку кода целиком. Удаление пробелов по краям скопированного значения может уменьшить число случайных ошибок, если реализация при этом проверяет допустимые символы и длину. Не угадывайте недостающие цифры, не удаляйте символы из середины и не превращайте другой код в предполагаемое совпадение.
В нашем примере используем явную кнопку «Подтвердить почту». Некоторые продукты отправляют код автоматически после ввода нужного количества символов; такой вариант требует заметного состояния ожидания и надежного пути исправления. Отдельная кнопка дает человеку время проверить значение и делает результат менее неожиданным.
Во время проверки не допускайте повторных отправок и сохраняйте стабильное поле ввода. Не открывайте рабочее пространство только потому, что появились шесть цифр. Переход выполняется после подтвержденного ответа сервиса.
Различайте неверный код и недоступность сервиса
Разные сбои выглядят одинаково, если любой ответ превращается в красное поле. Для каждого известного условия предусмотрите полезное действие. Сообщения должны быть короткими, чтобы на телефоне оставалось место для кода и восстановления.
| Известное условие | Пример сообщения | Следующее действие |
|---|---|---|
| Отправлен неполный код. | Введите шестизначный код. | Завершить текущий ввод. |
| Сервис отклонил код. | Код не совпал. Проверьте его и попробуйте снова. | Исправить или заменить код. |
| Сервис подтвердил истечение срока. | Срок действия кода истек. Запросите новый. | Запросить другое письмо. |
| Запрос не дошел до сервиса. | Не удалось проверить код. Проверьте соединение и повторите попытку. | Повторить запрос, не объявляя код неверным. |
Различайте только те условия, о которых действительно сообщает сервис. Если ответ объединяет просроченный и другой недействительный код, используйте честную общую формулировку, а не придумывайте более точный диагноз. Цель — дать путь восстановления, а не изложить пользователю подробную классификацию внутренних состояний.
После несовпадения дайте легко заменить значение. Не очищайте его до того, как человек сможет сравнить с письмом. Если политика безопасности требует очистки или повторного прохождения шага, объясните последующее действие вместо неожиданного сброса поля.
Повторная отправка — запрос, а не обещание доставки
«Отправить код повторно» точнее, чем «Попробовать еще раз», когда действие запрашивает новое сообщение. У этого запроса должны быть свои состояния ожидания и результата. Успешная отправка запроса не означает, что письмо уже оказалось у адресата.
Если отправка завершилась ошибкой, сохраняйте возможность восстановления в соответствии с реальными правилами сервиса. Не заменяйте кнопку на «Отправлено!» после тайм-аута и не заставляйте человека ждать выдуманный отсчет, прежде чем сообщить о неудаче.
Пауза перед повторной отправкой должна соответствовать реальному ограничению. Покажите оставшееся время, после чего снова сделайте действие доступным. Пауза между отправками и срок действия кода — разные вещи: первая определяет, когда можно запросить письмо, второй — до какого момента код принимается. Не подписывайте оба таймера одинаковой фразой «Осталось времени».
Определите, что происходит с предыдущим кодом после запроса нового. Если действует только последний, сообщите об этом рядом с подтверждением повторной отправки. Если прежние непросроченные коды сохраняют силу, не требуйте их игнорировать. Экран, письмо и сервис должны следовать одному правилу.
Оставьте альтернативный путь видимым. Человеку с ошибкой в адресе нужно действие «Изменить адрес», а не бесконечные повторные отправки. Если доступа к ящику нет, может понадобиться предусмотренная продуктом помощь с аккаунтом. Не предлагайте резервный канал, который сервис на самом деле не поддерживает.
Подтвердите результат и верните человека к его задаче
После успешного подтверждения почты покажите однозначный результат и переход в командное пространство. В этом примере достаточно сообщения «Почта подтверждена» и действия «Перейти в рабочее пространство». Не утверждайте, что проверка почты установила личность человека во всех отношениях или сделала аккаунт безопасным.
Если письмо открыто на другом устройстве, исходный экран должен оставаться пригодным для работы. Сценарий не должен зависеть от открытой вкладки конкретного почтового сервиса или копирования между двумя окнами определенного размера. При возвращении оставьте доступными адрес назначения и действия восстановления.
Если сервис поддерживает ответ о ранее завершенной проверке, покажите понятный результат. «Почта уже подтверждена» может вести к следующему шагу вместо загадочной ошибки кода. И наоборот: неподтвержденный сетевой ответ нельзя оформлять как успех.
Восстановление пароля решает другую задачу. Если нужно заменить забытый пароль, а не подтвердить почту при регистрации, руководство по UX сброса пароля описывает отдельный путь запроса и перехода по ссылке. Не отправляйте туда пользователя только из-за задержавшегося письма с кодом.
Соберите весь сценарий в Pixso
Разместите экран ввода адреса, экран кода и письмо в одном дизайн-файле. Добавьте отдельные фреймы для неполного ввода, отклоненного кода, истечения срока, ошибки повторной отправки и подтвержденного результата. Во всех состояниях сохраняйте одинаковые название рабочего пространства и адрес.
Используйте один компонент поля для обычного вида и ошибки, а область сообщения сделайте растягиваемой при переводе. На узких экранах основное действие и повторная отправка должны оставаться доступными, не перекрываясь клавиатурой. Карточка фиксированной высоты, удобная для короткой английской фразы, может обрезать объяснение на другом языке.
Проверьте три пути: успешная вставка кода, исправление адреса с опечаткой и получение нового кода после истечения срока. До нажатия спросите коллегу, что, по его ожиданиям, сделает «Отправить код повторно». Если ответ расходится с правилом сервиса, уточните текст или поведение.
Передайте разработчикам назначение поля, длину кода, правила вставки и реакции на ответы сервиса. Прототип показывает задуманный сценарий, но не проверяет коды и не обеспечивает правила аутентификации. Сильный интерфейс помогает завершить нужный шаг без догадок о том, какое письмо, значение или действие еще актуально.
