/ кейс

Улучшение формы регистрации и входа

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

1
2
3

Начинаем исправлять, исходя из допущенных при проектировании ошибок.

Общая концепция

  1. Формы регистрации и входа разделены. Это не является ошибкой, но альтернативным решением послужило слияние этих форм с помощью табов.

Форма входа

  1. Отсутствует валидация при входе. При вводе неправильной пары почты/пароля должна выходить ошибка. Добавляем простое предупреждение, которое выскакивает вверху формы в случае ошибки.
  2. Ссылка "Забыли пароль" не привязана к инпуту пароля. Логичнее её прикрепить туда.
  3. Кнопка "Вход" не совсем обьясняет действие. Меняет "Вход" на "Войти".

Добавляем форму валидации, перемещаем ссылку "Забыли пароль?" над инпутом ввода пароля, объединяем вкладки, попутно улучшая дизайн формы.

4-2

Форма регистрации

  1. Отсутствуют подсказки для полей. Не критично, но позже мы используем это место для подсказок.
  2. Введение повторного пароля не обязательно. Достаточно щёлкнуть чекбокс "Показать пароль" или щёлкнуть на глаз справа в форме входа.
  3. Кнопка регистрация не совсем верно отображает действие. Заменяем "Регистрация" на "Зарегистрироваться".

Добавляем.
6-1

  1. Отсутствует валидация при вводе информации. Решаем, что используем проверку сложности пароля и правильность заполнения E-mail.
    При этом статус текста должен быть разным в зависимости от сложности пароля и меняться динамически. Копируем форму и прописываем ошибки, отрисовываем цвета, добавляем состояния инпутов.
    7-1

Форма восстановления пароля

  1. Кнопка "отправить" не совсем отображает правильность действия. Заменяем на "Выслать пароль".
  2. Отсутствует возврат к форме регистрации и авторизации. Добавляем внизу.

8

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

Илья Дзенски

Илья Дзенски

Проектировщик интерфейсов, дизайнер. Пишу о продуктивности, инструментах, и дизайне. Веду канал и чат Perfect Pixel в Telegram http://t.me/pppixel