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

Как улучшить UX продукта, когда пройдены уровни структуры и компоновки? И сделать это минимальными силами разработчиков (то есть без геймификации и машинного обучения).

Варианты

Сделать понятнее:

  1. Понаблюдать за пользователями и поправить микротекст (заголовки, подписи и прочее), чтобы интерфейс говорил с ними на одном языке;
  2. Стандартизировать элементы интерфейса: что работает одинаково, должно выглядеть одинаково. Такой интерфейс проще поддерживать, и пользователи к нему привыкнут быстрее;
  3. Использовать текстовые плейсхолдеры (placeholder text) — текст, который отображается в незаполненных полях;
  4. Добавить подсказки и справочные материалы;
  5. Обеспечить обратную связь:
    1. Отчётливее выделять поле, на котором сейчас фокус;
    2. В процессе ожидания показывать, что программа не зависла.
  6. Проработать крайние состояния:
    1. Первое знакомство;
    2. После осознанного удаления информации, например, отсутствие непрочитанных писем или невыполненных задач;
    3. Когда нечего показать, например, нулевые результаты поиска;
    4. Ошибка;
    5. Частичное заполнение;
    6. Загрузка.

 
Сделать быстрее:

  1. Сразу сообщать о некорректно заполненных полях;
  2. Выделить предпочитаемое действие, например, главную кнопку в конце формы;
  3. Добавить горячие клавиши и проверить, что между полями формы можно перемещаться табом;
  4. Проанализировать пользовательские данные и установить значения по умолчанию там, где они будут уместны.

 
Сделать приятнее:

  1. Поправить мелкие косяки вёрстки, ведь они заставляют клиентов сомневаться в надёжности продукта. А проработанные детали вызвают позитивные эмоции, которые помогают воспринимать продукт более простым;
  2. Уменьшить визуальный шум. Например, сделать подсказки контекстными, показывать их при наведении на объекты;
  3. В монопольном приложении, с которым пользователь работает в течение продолжительного времени, притушить цвета и текстуру визуальной части.

Текстовые плейсхолдеры

Если в интерфейсе задействованы плейсхолдеры, стоит поискать типовые ошибки:

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

form_without_labels

Старая форма заказа dostaevsky.ru (в новой форме подписи расположены над полями).

В примере с сайта dostaevsky.ru на самом деле есть подпись — «Адрес доставки». Проблема со второстепенными подписями (secondary labels) к полям, разделяющим адрес на «улицу», «дом» и так далее. Отображать их лучше так:

1

Также можно использовать плавающую подпись (floating label):

tinkoff_example

Форма входа tinkoff.ru.

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

  • Он пропадает после начала взаимодействия с полем;
  • Пользователь может решить, что поле уже заполнено;
  • Снизится аффорданс к заполнению поля.

2

3. В плейсхолдере иногда сообщают требования к вводимому тексту. В этом случае к указанным выше проблемам добавляется отображение объёмного текста. Есть много других способов сообщить требования:

3

4. Пустое текстовое поле призывает ввести данные. Плейсхолдер должен быть менее контрастным, чем введённый текст:

4

Но при этом оставаться читаемым:

5

5. Не прячьте плейсхолдер сразу после того, как пользователь нажал на текстовое поле или переключился на него табом. В первом случае нагружается краткосрочная память. Во втором, скорее всего, пользователь переключит внимание на поле только после нажатия на таб и плейсхолдер просто не заметит.

Показывайте плейсхолдер, пока пользователь не начал вводить текст.

6

Из статьи Эндрю Койла «Alternatives to Placeholder Text».

Текст плейсхолдера имеет значение

Первая рекомендация в моём списке — тюнинг микротекста. Плейсхолдеров это тоже касается.

На sports.ru в текстовом поле для комментирования новости был плейсхолдер «А вы что об этом думаете?» — как когда-то на Ютубе.

Его замена на «Можете что-то добавить?» увеличила количество комментариев в 1,74 раза. Сегодня они используют текст «Что думаете о происходящем?», который проиграл лидеру, но тоже обошёл исходный — в 1,64 раза.

sports-ru

В разделе «Блоги» плейсхолдер «Есть возражения?» принёс комментариев в 1,58 раза больше, чем «Поддержите автора…». Правда, сейчас на сайте непонятно почему стоит именно исходный вариант.

Регулярно возвращайтесь к служебным текстам, устаревают даже лучшие.

Из записи в блоге Михаила Калашникова «Почему важно выбирать слова».

Читайте также