UX сброса пароля: понятное восстановление доступа

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

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

Продумывайте восстановление вместе с остальными состояниями страницы входа. Даже понятная страница сброса не поможет, если ссылку «Забыли пароль?» трудно найти или после входа теряется раздел, который человек собирался открыть.

Сделайте путь восстановления заметным

Разместите ссылку «Забыли пароль?» рядом с полем пароля: именно там её, скорее всего, будут искать при неудачном входе. Показывайте её и до ошибки. Требовать сначала неудачную попытку, чтобы открыть помощь, — лишний шаг. Текстовая ссылка должна отличаться от основной кнопки «Войти», но не быть бледной или неудобной для нажатия.

На странице восстановления нужны конкретный заголовок, постоянная подпись поля электронной почты и одно основное действие. Для нашего рабочего пространства первый экран может выглядеть так:

Сбросить пароль
Введите адрес электронной почты, который используете для входа в это рабочее пространство.
Электронная почта
Отправить ссылку для сброса
Вернуться ко входу

Если человек уже ввёл адрес на странице входа, его можно перенести в это поле, чтобы не заставлять вводить повторно. При этом адрес должен оставаться редактируемым: возможно, именно опечатка и помешала войти. Если поле пустое или формат неверный, объясните проблему рядом с полем. Сообщение «Аккаунт не найден» не подходит для ошибки в формате адреса.

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

Подтвердите запрос, не раскрывая лишнего

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

Для обоих случаев используйте один текст подтверждения:

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

Такой ответ объясняет следующий шаг, не подтверждая существование конкретного аккаунта. На странице можно показать только что введённый адрес, чтобы человек заметил опечатку. Однако это не должно выглядеть как подтверждение, что аккаунт с таким адресом найден. Допустимость показа адреса зависит от требований к конфиденциальности в конкретном продукте.

«Письмо отправлено» и «Пароль изменён» — разные результаты. На этапе запроса не ставьте галочку завершения с сообщением «Всё готово». Человек ещё не открыл письмо и не задал новый пароль, поэтому его исходная задача всё ещё заблокирована.

Дайте конкретные варианты повторной попытки. Совет проверить папку «Спам» бывает полезен, но не должен оставаться единственным выходом. Сохраните возможность исправить адрес, запросить ещё одну ссылку, когда это разрешено, или вернуться к подходящему способу входа. Если перед повторной отправкой нужно подождать, покажите реальное оставшееся время и причину ожидания. Не добавляйте таймер только потому, что видели его в других продуктах.

Свяжите письмо и страницу назначения

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

В нашем примере подойдут тема «Сброс пароля рабочего пространства» и кнопка «Задать новый пароль». В письме нужно указать название сервиса и объяснить, что делать, если получатель не запрашивал сброс. Не добавляйте сюда рекламные предложения: они отвлекают от восстановления доступа, которое и так прервало работу.

Если указываете срок действия ссылки, он должен соответствовать реальным правилам. Фраза «Срок действия скоро истечёт» менее полезна, чем точный интервал или время, но неверное точное значение ещё хуже. Страница, открывающаяся в браузере, должна сохранять название и визуальный стиль сервиса из письма, чтобы переход не выглядел как посторонний запрос на вход.

Предусмотрите ситуацию, когда первое письмо задержалось и человек запросил второе. Уточните, какие ссылки остаются действительными по правилам сервиса. Инструкции на странице подтверждения и в письме должны совпадать. Не пишите просто «Используйте последнее письмо», если новый запрос на самом деле не отменяет предыдущую ссылку.

Предложите выход для просроченной или использованной ссылки

Ссылку могут открыть намного позже или повторно, уже после смены пароля. Это предсказуемые ситуации, а не исключения. Если любая неудачная попытка ведёт на общую страницу ошибки, человеку трудно понять, не потерял ли он доступ окончательно.

Что подтверждает сервис	Понятное сообщение	Следующее действие
Ссылка действительна.	«Задайте новый пароль».	Перейти к полям нового пароля.
Срок действия ссылки истёк.	«Срок действия ссылки для сброса истёк. Запросите новую, чтобы продолжить».	Запросить новую ссылку.
Ссылка уже использована.	«Эта ссылка для сброса уже использована».	Войти; при необходимости снова запросить сброс.
Не удалось проверить ссылку.	«Не удалось проверить ссылку для сброса пароля».	Повторить попытку, если это уместно, или запросить новую ссылку.

Различайте истёкший срок и повторное использование только тогда, когда сервис может достоверно определить причину. Если он возвращает один общий результат «недействительная ссылка», используйте точное обобщённое сообщение: например, «Эта ссылка для сброса больше не действует». Главное улучшение — понятный следующий шаг, а не подробное объяснение состояния, о котором приложение ничего не знает.

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

Помогите задать пароль с первой попытки

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

Подпишите поле «Новый пароль». Если нужно повторное подтверждение, назовите второе поле «Повторите новый пароль» и при несовпадении объясните ошибку, не очищая оба значения. Переключатель показа пароля помогает проверить ввод; у него должно быть понятное доступное имя и различимые состояния. При реализации поддержите ввод через менеджер паролей, чтобы сценарий не требовал перепечатывать пароль вручную.

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

Для неопределённого результата нужен другой текст. Обрыв соединения после отправки не доказывает, что пароль остался прежним. Не пишите «Ничего не сохранено — попробуйте ещё раз», если это неизвестно. Сообщение «Не удалось подтвердить смену пароля» может предложить обычный вход и повторное восстановление — в зависимости от того, какие сведения о результате и варианты восстановления доступны сервису.

Не добавляйте автоматический вход только ради сокращения сценария. Явное подтверждение и переход к привычной форме входа показывают границу между действиями: пароль уже изменён, следующий шаг — войти в аккаунт.

Завершите сценарий входом и возвращением к задаче

Экран завершения может быть коротким:

Пароль изменён
Войдите с новым паролем, чтобы вернуться в рабочее пространство.
Войти

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

После обычного входа верните менеджера проекта к графику поставок, если этот раздел всё ещё существует и у него есть права доступа. Если открыть его больше нельзя, объясните причину отдельно. Успешное восстановление пароля не должно выглядеть виновником исчезнувшего проекта или изменившихся прав.

Учтите и открытие письма на другом устройстве. Там сброс может завершиться, а в исходном браузере останется экран «Проверьте почту». На нём по-прежнему нужен рабочий путь «Вернуться ко входу». Доступ не должен зависеть от того, следит ли человек за таймером или ждёт, пока вкладка обнаружит действие на другом устройстве.

Проверьте весь маршрут в Pixso

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

Там, где это уместно, сделайте поле электронной почты, поле пароля и кнопку повторно используемыми компонентами. С помощью Auto Layout сравните короткое подтверждение с более длинным переводом: действие должно оставаться под объяснением, а не перекрывать текст из-за фиксированной позиции. Добавьте узкий экран и учтите место, которое занимает экранная клавиатура.

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

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

Хороший сценарий сброса пароля не обязан торжественно отмечать каждый шаг. Он должен точно подтвердить запрос, объяснить проблему с недействительной ссылкой, сообщить об успешной смене пароля и дать надёжный путь обратно к работе.

Спроектировать восстановление доступа в Pixso