Scott
Страница входа должна помогать человеку открыть свой аккаунт и вернуться к работе, если что-то пошло не так. Начните со способов входа, состояний формы и восстановления доступа. Затем выбирайте расположение полей, иллюстрацию и цвет кнопки. Проверку учётных данных реализуют в приложении: макет нужен, чтобы согласовать понятное поведение интерфейса.
В сообществе Pixso можно найти макеты экранов входа и выбрать отправную точку для оформления. Смотрите, что входит в конкретный файл: ниже есть мобильная регистрация, экраны YoFit и панель управления после входа. Они решают разные задачи, поэтому переносить их на веб-страницу без изменений не стоит.
1. Определите состояния входа до работы над макетом
Согласуйте с продуктовой командой и разработчиками доступные способы входа и восстановления аккаунта. Для каждого состояния задайте экран или вариант компонента, сообщение и следующее действие. Если повторный вход прерывает уже начатую работу, отдельно продумайте возврат к незавершённой форме после истечения сеанса.
- Форма готова к вводу. Подписи полей остаются видимыми, поддерживаемые способы входа понятны, основное действие выделено. Пользователь не должен угадывать, требуется адрес электронной почты, имя пользователя или номер телефона.
- Запрос отправляется. Покажите, что проверка началась, и предусмотрите защиту от случайной повторной отправки. Состояние кнопки должно отличаться от готовности к вводу и от ошибки.
- Данные не заполнены или введены в неверном формате. Поместите объяснение рядом с нужным полем и укажите, что исправить. Например, сообщение о незаполненном адресе должно относиться именно к полю электронной почты.
- Войти не удалось. Согласуйте текст с командой безопасности: он должен помогать продолжить работу, не раскрывая лишних сведений об аккаунте. Вариант для обсуждения — «Не удалось войти. Проверьте данные и попробуйте ещё раз».
- Восстановление доступа. Покажите сброс пароля или другой путь, предусмотренный выбранным способом входа. Пользователю нужны понятное действие и объяснение следующего шага, а не только ссылка «Забыли пароль?».
- Дополнительная проверка. Если продукт поддерживает второй этап, задайте инструкции, срок действия кода или ссылки и поведение повторной отправки. Просроченный код и ожидание нового кода требуют разных сообщений.
- Сбой сервиса или сети. Объясните, можно ли повторить запрос и какие введённые данные сохранятся. Сообщение о недоступности сервиса не должно выглядеть как обвинение пользователя в неверном пароле.
Значок замка может поддерживать оформление, но не заменяет защиту системы. Используйте только достоверные формулировки о безопасности и ссылку на применимую политику конфиденциальности. Реализацию и проверку аутентификации поручают разработчикам и специалистам по безопасности.
2. Проверьте поведение формы на компьютере и телефоне
В исходном макете входа из сообщества можно рассмотреть группировку полей и действий. После обсуждения макета проверьте готовую форму с клавиатурой, на сенсорном экране, при увеличении масштаба и со вспомогательными технологиями. Просмотр холста помогает оценить композицию; поведение браузерной формы проверяют уже в работающем интерфейсе.
- Сохраняйте подписи после ввода. Подсказка внутри пустого поля не должна быть единственным объяснением его назначения. При реализации задайте назначение полей и поддержку менеджеров паролей.
- Пройдите форму клавишей Tab. Порядок переходов должен соответствовать последовательности действий. Фокус должен оставаться заметным; на телефоне экранная клавиатура не должна перекрывать нужное действие.
- Используйте длинный текст при проверке узкого экрана. Русская подпись или сообщение об ошибке могут занимать больше места, чем короткая английская фраза. Разрешите переносы и убедитесь, что кнопка входа и восстановление доступа остаются доступны.
- Объясняйте ошибку словами, а не только цветом. Свяжите сообщение с соответствующим полем, чтобы эту связь можно было определить и с помощью вспомогательных технологий.
- Не задерживайте форму ради декоративных материалов. По возможности загружайте её раньше тяжёлой иллюстрации или видео. Проверяйте скорость на реальном мобильном маршруте и соединении: внешний вид макета ничего не говорит о времени загрузки.
- Проверьте требования доступности. Контраст, размер областей нажатия, видимость фокуса и доступная аутентификация описаны в справочнике WCAG 2.2 на английском. Отметьте применимые критерии и вопросы, которые ещё нужно решить в реализации. В частности, не блокируйте помощь менеджера паролей или вставку без обоснованной причины.
3. Выберите инструмент для состояний и передачи в разработку
Сравнивайте инструменты на одном сценарии входа: обычная форма, отправка, ошибка и восстановление доступа. Так будет видно, удобно ли поддерживать варианты, обсуждать переходы и передавать параметры разработчикам. Бесплатный тариф, пробный период и открытая лицензия — разные условия; ни одно из них само по себе не означает бесплатный хостинг, неограниченную совместную работу или готовую систему аутентификации.
Pixso
В Pixso можно совместно собирать интерфейс, обсуждать прототип и передавать разработчикам параметры элементов. Для формы входа создайте варианты компонентов с одинаковой геометрией: исходное состояние, отправка и ошибка. Возможности команды и ограничения доступа сверяйте на странице тарифов Pixso.
Для обсуждения восстановления соберите на холсте три связанных экрана. На первом разместите поля «Электронная почта» и «Пароль» и кнопку «Войти». На втором покажите сообщение «Не удалось войти. Проверьте данные и попробуйте ещё раз» и оставьте заметный путь к восстановлению. На третьем объясните следующий шаг восстановления доступа. Пройдите этот маршрут в прототипе: человеку должно быть понятно, где исправить ввод, а где выбрать другой способ вернуть доступ.
Добавьте к макету условия переходов и согласованные тексты ошибок. Параметры, которые разработчик получает из дизайна, помогают реализовать интерфейс; отправку запроса, проверку учётных данных и обработку ответа всё равно нужно запрограммировать и протестировать.
Спроектировать состояния входа в Pixso
Adobe XD
Adobe XD позволяет проектировать интерфейсы и прототипы, а также совместно редактировать облачные документы. Adobe указывает, что продукт находится в режиме сопровождения — maintenance mode. Если команда уже работает в XD, проверьте доступ к аккаунтам и нужным ресурсам. Для нового долгосрочного проекта учитывайте статус продукта. Он указан в справке Adobe XD на английском.
Sketch
В Sketch макеты редактируют в приложении для Mac, а браузер используют для просмотра, комментариев и передачи параметров разработчикам. Для совместного редактирования в реальном времени нужны подписка, документ в общем Workspace и совместимые версии приложения. Это отличается от лицензии только на Mac-приложение. Сравните условия пробного периода и лицензий на сайте Sketch (на английском): пробный доступ не равен постоянному бесплатному тарифу для команды.
Penpot
Penpot — платформа проектирования с открытым исходным кодом, доступная через браузер. Можно рассматривать размещённый сервис или самостоятельное развёртывание. Во втором случае отдельно оцените инфраструктуру, обслуживание и резервное копирование; открытая лицензия не делает эти работы бесплатными. Сайт и подробные условия Penpot доступны на английском.
Lunacy
Lunacy работает на Windows, macOS и Linux и поддерживает локальные и облачные документы. Возможности совместной работы и разделения доступа описаны в документации облачных документов на английском. Проверьте нужные права доступа и доступность истории версий, затем попробуйте собрать тот же сценарий входа, что и в остальных инструментах.
4. Адаптируйте готовые материалы под веб-страницу входа
В сообществе встречаются файлы разной полноты: отдельные экраны, несколько шагов или набор компонентов. Перед использованием откройте слои и переходы, определите недостающие состояния и проверьте условия использования ресурса.
Мобильная регистрация: последовательность экранов
В первом ресурсе показаны мобильные экраны регистрации и входа: способы входа через внешние аккаунты, поля телефона и ввод кода подтверждения. Используйте их, чтобы составить перечень состояний. Для веб-версии заново продумайте адаптивный контейнер, порядок переходов с клавиатуры, автозаполнение браузера и восстановление доступа. Простое растягивание телефонного фрейма не решит эти задачи.
Открыть макеты мобильной регистрации
YoFit: оформление приветствия, входа и регистрации
YoFit показывает мобильный сценарий сервиса о здоровом образе жизни: приветствие, вход и создание аккаунта. Иллюстрация и группировка полей помогают выбрать визуальное направление. Для своего веб-продукта добавьте отправку формы, ошибки, восстановление доступа и поведение на широком экране. До повторного использования материалов проверьте разрешения автора ресурса.
Открыть мобильные макеты YoFit
Панель проектов и лидов: экран после входа
Тёмные экраны управления проектами и лидами полезны для проверки визуальной связи между входом и рабочим разделом продукта. Самой формы входа этот ресурс не заменяет: состояния аутентификации нужно спроектировать отдельно. Диаграмма или уведомление на макете показывают оформление; загрузку реальных данных обеспечивает реализация приложения.
Открыть макеты панели проектов и лидов
5. Что решить перед передачей в разработку
Устраняет ли вход с помощью passkey все проблемы восстановления?
Нет. Зафиксируйте поддерживаемые способы входа и путь восстановления на случай, когда у человека нет нужного устройства, ключа доступа или доступа к почте со ссылкой для входа. Обсудите весь маршрут с разработчиками. Удаление поля пароля из макета не отвечает на вопрос, как пользователь вернётся в аккаунт после потери доступа.
Как показать защиту от ботов и злоупотреблений?
Условия дополнительной проверки задают вместе с командой безопасности. Дизайнеру нужно показать понятное задание, повторную попытку и дальнейший путь при неудаче, а также оценить доступность этих действий. Выбор системы обнаружения и её настройка зависят от угроз продукта; готовый UI-шаблон их не определяет.
Что должно быть в передаваемом макете?
Подготовьте варианты состояний, переходы между ними, подписи полей, тексты ошибок, поведение на разных ширинах и список ещё не решённых вопросов. Приложите ссылки на требования. После реализации проверьте форму на успешных и неудачных попытках входа. Чтобы оценить результат изменения, измеряйте завершённые входы и причины отказов; по одному красивому макету нельзя судить о росте конверсии.
