Нужен ли команде дизайн-менеджер и почему он мало понимает в UX, на примере сценария авторизации в ЛК
Сделайте интерфейс авторизации в личный кабинет с мобильной версии сайта на основе этой User Story.
С чем мы имеем дело
Дизайнер имел ровным счетом ничего: ни дизайн-системы, ни UI-kit-а, который попросту отсутствовал у компании (ввиду заказа сайта на outsource у uplab.ru). "Косяки" видно — положение dropdown смещено вправо от границ и небрежно залезает на шапку.
Результат в виде кликабельного прототипа сделан
На самом деле работа Middle+ дизайнера за пару дней, который не знает что менеджер может быть не прав и слепо следует решению конкретной задачи, по сути являясь лишь руками в Figma. Он не провел Desk research, не подумал об удобстве, мало того не провел опрос или интервью с пользователями.
Что сделает Senior дизайнер?
- Провел Desk исследование и собрал данные
- Убрал лого и подпись в шапке, несущие лишнюю когнитивную нагрузку
- Сделал отдельный ID логотип (для всех личных кабинетов, как у МТС)
- Заменил ввод почты на ввод номера телефона (что удобнее, поскольку по сценарию получения кода пользователь будет вынужден совершить доп. действие: открыть вкладку или приложение с почтой, открыть письмо и скопировать код, после вернуться в веб-авторизацию и вставить код)
- Убрал обязательный ввод Имени (пользователь сам укажет имя уже в ЛК, если это реальный клиент, то при заполнении анкеты ФИО укажет в ней)
- Убрал фичу изменения почты (или телефона) Ошибся? Возвращайся.
- Добавил в первый экран переходы в авторизацию других ЛК компании
- Нашел компромисс в колористике, чтобы одно с другим не сливалось (как ранее лого и цвет CTA кнопки)
- Гарнитуру Aeonik Pro больше не используем, она неряшливая для бизнеса
- Прочитал лекцию менеджеру по поводу неудобства паролей
Пароли — анахронизм, не удобный никому после СМС верификации. Они размножаются с каждой регистрацией, никто их уже не помнит и не хранит из casual пользователей, а usability "восстановить пароль" часто вызывает дискомфорт и негативный User experience в целом.
Скажи нет этим фичам
Фича надежности пароля
Слабый пароль, хороший пароль, надежный пароль: всего 12 символов, включая цифры, большие и маленькие буквы и спецсимволы. Полная тупость и неудобство, которая отжила свое и кое-где сохраняет тренд в США за счет их консервативности.
Фича скрыть/показать пароль
Представляю, как за спиной у пользователя «стоит шпион и подсматривает», быстро, моментом, запоминая 12 символов! Это давно ушедший анахронизм и мало того, что пользователю неудобно вводить пароль вслепую, он его просто не запомнит, даже считывая.
Фича генерации пароля
Удобная фича, используемая например mail.ru но не решающая задачу ввода этого пароля в последствии.
Избавь пользователя от «лишней двери»
Представь, что ты посетитель отеля (такого дорогого, 5 звезд) в нем есть холл, в котором стоит рецепция и лифт, ведущий в номера отеля и в зависимости от твоего статуса ты можешь пойти к себе в номер или на рецепцию, чтобы стать клиентом отеля (совершить регистрацию как гость) — примерно так выглядит анахроничный паттерн авторизации "Войти", "Регистрация". В интерфейсе это обозначается: кнопкой, ссылкой или свитчером. Паттерн удобен и понятен, но с появлением СМС верификации по номеру тел. он становится не нужен, что позволяет избавить пользователя от него и убрать лишний выбор на экране.
Для тех, кто не понял: если вход и регистрация имеют один и тот же триггер (например: только ввод номера телефона с получением СМС кода), не нужно плодить сущности и делать разные страницы для этих сценариев. Не важно это новый пользователь или уже имеет аккаунт, они вводят идентичное для входа или регистрации в ЛК. Проще говоря вход = регистрация. Касательно копирайта: чтобы не делать содержимое кнопок контекстным, ведь в этом случае придется писать: "войти", "зарегистрироваться", нужно сделать один простой копирайт, например: "Далее" или "Продолжить".
Кто-то спросит, а как новый пользователь поймет, что это не только вход, но и возможность регистрации? Просто. Посредством UX копирайта — дайте пользователю понять, что он может. Перенесите триггер «по нажатию» в копирайт и вы избавите пользователя от доп. действия. Изменив одну сущность на другую (кнопку на текст)
Семь раз проведи usability test, один раз разработай
Задай вопрос менеджеру: сколько времени займет у разработчика решение данного сценария?
- Будет ли интересно разработчикам или они это уже делали
- Выгодно ли это бизнесу, если прод займет много времени
- Удобно ли будет пользователю, если он привык к лучшему
Поговори с разработкой и донеси менеджеру, что прод твоего решения займет x2 меньше времени. Донеси что время прохождения авторизации сократится в 2-3 раза.
МТТ — федеральная IT и телеком компания, обслуживающая тысячи корпоративных клиентов, дочерняя компания «МТС».