На днях мы в нашем блоге (@robotwashereblog) показали одну из распространенных ошибок на примере сервиса Youdo. Ее устранение облегчило бы жизнь пользователям сервиса.
Сегодня решили рассмотреть еще одну ошибку интерфейса сервиса и на практике показать как будет выглядеть окно входа, если избавить его от недостатков.
Рассмотрим по порядку что тут не нравится.
Для десктопной версии на этом этапе вопросов много. Нарочито крупные иконки соц. сетей. Авторизация через социальную сеть Google +, которая закрыта компанией Google в апреле 2019 года. Логичнее сделать авторизацию через Google. Сами элементы формы скомканы.
Окно входа на смартфонах
Высота окна слишком большая для мобильного телефона. На первом скриншоте при открытии автоматически перебрасывает на кнопку Google + и поле ввода емейла. Как быть если я хочу зайти, например, через Facebook? На втором скриншоте не видно поле для ввода пароля и кнопка входа. Приходится скролить. Неудобно
Вернемся к десктопному экрану.
Я забыла пароль. И благодаря этому нашли еще одну ошибку. Воспользуюсь отправкой пароля на емейл. Что происходит при клике на ссылку Забыли пароль?
Видео процесса
Зачем путать пользователя, предлагая зарегистрироваться. Ведь запрос очевиден — вспомнить пароль. Здесь должно быть поле для ввода емейла и кнопка Отправить
На мобильной версии ссылка “Забыли пароль” в двух местах. Одна ссылка явно лишняя. Кроме того, ошибка в данных "Неверный логин/пароль" все-таки должна применяться к конкретному полю — или логин или пароль, чтобы показать пользователю в каком именно поле ошибка
Мы решили показать на конкретном примере как может выглядеть окно формы. Приведем окно входа в порядок. Сократим по высоте, сделаем элементы компактными, уберем лишнее.
Окно входа
Если забыли пароль, вводим в поле и больше ничего не отвлекает от данного действия
Сделали запрос на восстановление, получили уведомление
На то, чтобы сделать удобную для пользователей форму ушло 40 минут.
По-моему, хороший вариант получился. Нравится?
Заходите в @robotwashereblog и, голосуйте за этот или другой пост с анализом интерфейсов, задавайте вопросы. Обязательно отвечу на них.
Будем рады и признательны за +, если вам понравилась наша статья. Команда дизайнеров ux/ui — Robot was here
Наш канал в тг https://t.me/robotwashereblog