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

Как улучшить 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. Чтобы уменьшить визуальный шум и сэкономить место, дизайнеры иногда размещают подпись в плейсхолдере. Такое решение нагружает краткосрочную память и затрудняет перепроверку заполненных форм:

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

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

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

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

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

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

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

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

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

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

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

…

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

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

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

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

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

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

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

…

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

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

• Эвристики Якоба Нильсена;
• 7 нерушимых законов дизайна пользовательского интерфейса;
• Как исправить неуклюжий дизайн интерфейсов — статья Скотта Харффа о крайних состояниях интерфейса;
• Почему вам следует пододвинуть ту кнопку на 3 пикселя влево;
• Уменьшение шума — совет Ильи Бирмана;
• «Скучные» интерфейсы — где найти вдохновение — доклад Анастасии Режепп из DataArt на ProfsoUX 2016;
• Элементы пользовательского опыта — статья Джесси Джеймса Гарретта;
• Почему важно выбирать слова — заметка Михаила Калашникова.