UX-тексты и микрокопирайтинг

Что это такое

UX-текст живёт внутри интерфейса: это подписи кнопок, подсказки к полям, пустые состояния, сообщения об ошибках и подтверждения. Микрокопирайтинг работает с тем же материалом, только в самом мелком масштабе, — с двумя-тремя словами, которые человек читает в момент, когда решает, понятно ли ему, что вот-вот произойдёт.

Почему это важно

Интерфейсы читают фрагментами и под давлением, а слова обычно пишут последними и винят за них первыми. Кнопка «Отправить» заставляет пользователя гадать, а «Отправить счёт» — нет. Сообщение «Неверные данные» не подсказывает ничего, с чем можно что-то сделать, тогда как «Введите дату после сегодняшней» уже даёт исправление. Именно здесь пользователи застревают, однако починка часто стоит одного предложения, а не четверти работы инженеров.

Ключевые идеи

Каждая строка отвечает на один вопрос

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

Вопрос     «Что произойдёт, если я нажму?»
Плохо      Отправить
Лучше      Создать аккаунт
Отлично    Создать аккаунт и отправить подтверждение

Называйте вещи так, как их называет пользователь

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

Ошибки говорят, что случилось и что делать

Частей не больше четырёх: что пошло не так, почему (если это известно), что делать и как получить помощь. Никогда не вините пользователя, не выносите код ошибки в текст сообщения и всегда сохраняйте введённые данные.

Плохо   Ошибка 422: неверные данные
Лучше   Не удалось сохранить адрес: почтовый индекс заполнен не полностью.
        Проверьте индекс и попробуйте снова. Остальные данные сохранены.

Пустые состояния — это онбординг

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

Сначала пишите для самого маленького экрана

Делайте черновик для самой узкой ширины из поддерживаемых и берите самую длинную реалистичную строку, в том числе переведённую. Если подпись при 320 пикселях требует второй строки, для кнопки она слишком длинна.

Практика

Перепишите пять настоящих строк

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

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

Проверьте переписанные строки на пяти людях

Покажите каждую строку без окружающего контекста и спросите, что, по мнению человека, должно произойти.

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

Частые ошибки

• Внутренний жаргон в интерфейсе — пользователь не знает проектных названий вещей; исправить: берите слова из сессий и обращений в поддержку.
• Обвинение в сообщении об ошибке — «вы ввели неверное значение» заставляет человека чувствовать себя виноватым; исправить: сообщите, что случилось, и что делать дальше.
• Подтверждения «Вы уверены?» — они спрашивают об уверенности пользователя, однако о последствии не говорят; исправить: назовите действие и то, что оно сделает.
• Пустые состояния оставлены заглушками — первый экран нового пользователя не говорит ничего; исправить: напишите, что здесь появится и как начать.
• Строки пишут последними, экран за экраном — у продукта оказывается четыре слова для одного понятия; исправить: держите единый список строк и переиспользуйте его.

Что читать дальше

• Контент-стратегия (03-design-ux/08-content-strategy) — правила и голос, благодаря которым строки всего продукта остаются согласованными.
• Информационная архитектура (03-design-ux/09-information-architecture) — подписи, от которых зависит навигация.
• Юзабилити-тестирование (03-design-ux/33-usability-testing) — как проверить, понятна ли строка.
• Исследования UI/UX (03-design-ux/18-ui-ux-research) — проверка понимания формулировки до вёрстки.