Возьмём сложный продукт, автоматизирующий бюрократию. Все углы уже срезаны, остался только необходимый минимум форм, которые заполняют люди с низким уровнем подготовки и гибкости. Перед использованием продукта они проходят обучение.
Как улучшить UX продукта, когда пройдены уровни структуры и компоновки? И сделать это минимальными силами разработчиков, то есть без геймификации и машинного обучения.
Варианты
Сделать понятнее
1. Понаблюдать за пользователями и поправить микротекст (заголовки, подписи и прочее), чтобы интерфейс говорил с ними на одном языке.
2. Стандартизировать элементы интерфейса: что работает одинаково, должно выглядеть одинаково. Такой интерфейс проще поддерживать, и пользователи к нему привыкнут быстрее.
3. Использовать текстовые плейсхолдеры (placeholder text) — текст, который отображается в незаполненных полях.
4. Добавить подсказки и справочные материалы.
5. Обеспечить обратную связь:
- Отчётливее выделять поле, на котором сейчас фокус;
- В процессе ожидания показывать, что программа не зависла.
6. Проработать крайние состояния:
- Первое знакомство;
- После осознанного удаления информации, например, отсутствие непрочитанных писем или невыполненных задач;
- Когда нечего показать, например, нулевые результаты поиска;
- Ошибка;
- Частичное заполнение;
- Загрузка.
Сделать быстрее
- Сразу сообщать о некорректно заполненных полях;
- Выделить предпочитаемое действие, например, главную кнопку в конце формы;
- Добавить горячие клавиши и проверить, что между полями формы можно перемещаться табом;
- Проанализировать пользовательские данные и установить значения по умолчанию там, где они будут уместны.
Сделать приятнее
- Поправить мелкие косяки вёрстки, ведь они заставляют клиентов сомневаться в надёжности продукта. А проработанные детали вызвают позитивные эмоции, которые помогают воспринимать продукт более простым;
- Уменьшить визуальный шум. Например, сделать подсказки контекстными, показывать их при наведении на объекты;
- В монопольном приложении, с которым пользователь работает долго, притушить цвета и текстуру визуальной части.
Текстовые плейсхолдеры
Если в интерфейсе задействованы плейсхолдеры, стоит поискать типовые ошибки.
1. Чтобы уменьшить визуальный шум и сэкономить место, дизайнеры иногда размещают подпись в плейсхолдере. Такое решение нагружает краткосрочную память и затрудняет перепроверку заполненных форм:
В примере с сайта Dostaevsky на самом деле есть подпись — «Адрес доставки». Проблема со второстепенными подписями (secondary labels) к полям, разделяющим адрес на «улицу», «дом» и так далее. Отображать их лучше так:
Также можно использовать плавающую подпись (Floating Label):
2. Образец заполнения помогает пользователю понять, что нужно ввести в поле. Если образец оказывается в плейсхолдере:
- Он пропадает после начала взаимодействия с полем;
- Пользователь может решить, что поле уже заполнено;
- Снизится аффорданс к заполнению поля.
3. В плейсхолдере иногда сообщают требования к вводимому тексту. В этом случае к указанному выше добавляется проблема с отображением длинного текста. Есть много других способов сообщить требования:
4. Пустое текстовое поле призывает ввести данные. Плейсхолдер должен быть менее контрастным, чем введённый текст:
Но при этом оставаться читаемым:
5. Не прячьте плейсхолдер сразу после того, как пользователь нажал на текстовое поле или переключился на него табом. В первом случае нагружается краткосрочная память. Во втором, скорее всего, пользователь переключит внимание на поле только после нажатия на таб и плейсхолдер просто не заметит.
Показывайте плейсхолдер, пока пользователь не начал вводить текст:
Текст плейсхолдера имеет значение
Первая рекомендация в моём списке — тюнинг микротекста. Плейсхолдеров это тоже касается.
На sports.ru в текстовом поле для комментирования новости был плейсхолдер «А вы что об этом думаете?» — как когда-то на Ютубе.
Его замена на «Можете что-то добавить?» увеличила количество комментариев в 1,74 раза. Сегодня они используют текст «Что думаете о происходящем?», который проиграл лидеру, но тоже обошёл исходный — в 1,64 раза.
В разделе «Блоги» плейсхолдер «Есть возражения?» принёс комментариев в 1,58 раза больше, чем «Поддержите автора…». Правда, сейчас на сайте почему-то стоит именно исходный вариант.
Регулярно возвращайтесь к служебным текстам, устаревают даже лучшие.
Контекстные подсказки
Редко читаю подсказки, которые появляются после запуска приложения и отображаются вместо его интерфейса. Я либо пользуюсь им постоянно и запускаю, чтобы в очередной раз решить свою задачу. Либо запускаю впервые, но уже зная о нужной функции из описания приложения.
Особенно раздражает, когда в движущейся машине включаешь Яндекс Навигатор, чтобы понять, куда ехать дальше, а вместо карты получаешь рассказ о побочных обновлениях приложения.
Если такой оторванный от интерфейса рассказ оказывается полезным, пользователь вынужден всё запоминать и ждать возможности эти знания применить. Лучше обучать пользователя в процессе работы с продуктом.
И в этом помогают подсказки.
1. В нулевом состоянии
Когда пользователь ещё не добавил контента, и отображать просто нечего.
Подсказка перестаёт отображаться после появления в этой области контента.
2. Подсказка в контексте
Например, врезка с рассказом об элементе интерфейса недалеко от этого элемента.
Похожим образом в новостную ленту в приложении «Медузы» врезался блок с призывом оценить приложение.
Подсказку может скрыть пользователь. Она может скрыться сама, как только пользователь нажмёт на контекстный элемент интерфейса.
3. Подсказка при взаимодействии с элементом интерфейса
Расскажет о дополнительных возможностях, если основное назначение элемента пользователю понятно.
Подсказка скрывается после завершения взаимодействия. Или целенаправленным действием пользователя.
4. Подсказка по итогам взаимодействия
Подтверждает завершение действия и рассказывает о появившихся возможностях. В Gmail’е подсказка не требует реакции пользователя и исчезает со временем.
5. Пачка подсказок при первом посещении страницы
Это такое же знакомство в три-четыре шага, но отображающееся поверх интерфейса. Читайте статью об особенностях этого решения.
Эффект с лайтбоксом, как на скриншоте выше, Саша Волкова остроумно назвала паранджой.
Кстати, интерфейс не обязательно затемнять и блокировать для взаимодействия.
6. Блокирующие подсказки
Пригодятся, когда незнание этой информации может обернуться проблемами.
Конечно, пользователь не застрахован от нажатия «Продолжить» по привычке, но если использовать подход аккуратно, привычка для этого продукта может и не сформироваться.
Контекстная документация
В сервисе Sociate придумали простое решение, как снизить количество обращений в поддержку с базовыми вопросами. Они закрепили кнопку «Показать подсказки» (скрыть её решили 15% пользователей).
Нажатие на неё открывает лайтбокс с галереей анимированных скриншотов, рассказывающих о работе с этой страницей.
При переходе к помощи пользователь не покидает текущей страницы и контекста задачи. «Как показала практика, подсказки работают, в отличие от раздела FAQ».
Кроме того, проанализировав частоту вызова подсказок, дизайнеры выявили самые непонятные пользователям страницы.
…
Использованы материалы статьи Эндрю Койла «Alternatives to Placeholder Text», Михаила Калашникова «Почему важно выбирать слова», команды Sociate «Подсказки на сайте» и Романа Камушкина «Новый пользователь вашего продукта — как ему помочь».
…
Впервые опубликовано в рассылке 18 и 25 декабря 2016 года.
Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.