Как общаться с пользователем через интерфейс

Аутентификация в продукт.

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

Если рассматривать регистрацию нового аккаунта, то необходимо проверять и указывать пользователю:

• Проверка использования никнейма.
  Если в вашем продукте уже зарегистрирован пользователь с таким никнеймом, то укажите, что он занят, и предложите варианты.
• Live-проверка электронной почты.
  Есть вероятность, что пользователь уже зарегистрирован или невозможно зарегистрироваться с определенными доменами.
• Правила для пароля.
  Со стороны безопасности желательно делать пароли с использованием символов, цифр и букв с нижним и верхним регистром. Со стороны UX должны указать перед вводом пароля выполнение ряда правил.

Главная страница.

Десктопная или мобильная версия — это неважно. Главное в интерфейсе — информировать пользователя, где он в данный момент находится, в каком разделе. В этом нам помогает активное состояние навигационного листа.

Загрузка данных и контента.

Есть три вида отображения загрузки: инфинити лоадер, лоадер с прогресс-баром, скелетон. Эти индикаторы помогают дать обратную связь пользователю о том, что система загружает что-либо. При этом важно правильно использовать эти лоадеры:

• Инфинити лоадер. Мы привыкли видеть его в виде круглых шейпов, которые крутятся по часовой стрелке без индикации «сколько осталось». Чаще всего используется на страницах, где не требуется долгая загрузка. Я использую там, где загрузка не дольше 20–30 секунд. Тестируешь через консоль и настраиваешь во вкладке «Network» сеть. В случае использования инфинити лоадера на страницах, где происходит долгая загрузка данных, пользователь может воспринимать, что что-то затормозило, залагало, возможно поможет рефреш страницы. Происходит все заново. И таких циклов может быть n-количество.
• Лоадер с прогресс-баром. Я его обозначил так, но не всегда используется прогресс-бар, может просто проценты в тексте или секунды/минуты/часы. Особенность этого лоадера — это индикация выполнения какой-либо операции. Помогает пользователю дать понять, сколько требуется для загрузки, что система загружает и поясняет пользователю «не переживай, но нам потребуется дольше времени». Я использую такой лоадер там, где происходит операция «загрузка» или «обработка файлов».
• Скелетон. Используется для динамической загрузки массива данных, помогает создавать эффект предпросмотра. В дополнение пользователь получает приблизительное расположение параметров и значений.

Уведомления.

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

Заголовок по-хорошему должен состоять из 2–3 слов максимум для короткой передачи «Что за фидбек». Например:

• Успешная загрузка;
• Ошибка;
• Идет поиск…

Описание помогает пояснить выполнение операций:

• Файл zametki-dizaynera.mp3 успешно загружен;
• Вы неправильно ввели запрос. Прочитайте справку;
• Мы нашли 35 запросов .. и кнопка «остановить».

Такие уведомления полезны для пользователя, но не забываем про настройки.

Состояние кнопок (State)

Все мы знаем, что есть базовые состояния кнопки: Enable, Hover, Focus, Active, Disable. Эти состояния уже дают фидбек пользователю о том, можешь ли ты нажать на кнопку или нет.

Кроме этого есть selection controls: checkbox, switcher, radio button, которые меняют свой вид в зависимости от булевого значения: включен/выключен. Это тоже нужно учесть при создании ui-kit и дизайн-системы.

Пустой стейт (Empty state).

Многие забывают при проектировании. Он должен появляться, когда на странице нет контента, нет данных или вывод ошибки. В этом состоянии присутствует заголовок, который поясняет основную информацию «Создать новый проект». Описание, которое добавляет подробности или объясняет какие действия надо сделать: «Выберите шаблон или начните с пустого листа». И кнопка, которая призывает пользователя к какому-либо действию, но не всегда. Пример «Создать проект». Ну и для привлекательности часто добавляют иллюстрации.

Где использовать:

• Ошибка. Некоторые используют пустой стейт, когда у пользователя потеря соединения с интернетом.
• Нет результатов. Если у вас в продукте есть функция ввода запроса, и пользователь получает взамен данные, то тут тоже надо отображать пустой стейт.
• Как в моем примере про проект, то это стартовая пустая страница, где пользователь начинает свой путь в интерфейсе и создает дополнительный ориентир.
• Загрузка файлов.

Ошибки.

При возникновении какой-либо ошибки, необходимо максимально понятно и подробно описать пользователю решение, также указав ссылки на Help Center или справку.

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

Сайт • Инстаграм • Телеграм-канал • Ютуб-канал

Подкаст «Заметки дизайнера»:
Apple Podcast • Яндекс.Музыка • Google Podcasts