Что такое UX-райтинг и почему текст в интерфейсе важен
Основы4 минРедакция Innovialabs
Коротко
UX-райтинг — это проектирование слов внутри интерфейса: кнопок, подписей, подсказок, ошибок, пустых состояний и онбординга. Хороший микротекст понятный, короткий и последовательный по тону, и он помогает людям выполнить задачу, не угадывая, что делать дальше.
Что такое UX-райтинг
UX-райтинг — работа над словами, которые человек видит, пользуясь продуктом. Такие короткие тексты называют микротекстом (microcopy): подписи кнопок, подсказки в формах, сообщения об ошибках, подтверждения, пустые состояния, уведомления и экраны онбординга.
Текст в интерфейсе — не украшение, которое добавляют в конце. Пользователь читает слова раньше, чем разбирается в иконках и сетке. Если на кнопке написано «Отправить» и непонятно, что произойдёт, дизайн не справился, как бы красиво он ни выглядел. Поэтому UX-райтинг лучше всего работает, когда текст проектируют вместе с экранами, а не вставляют потом.
Где микротекст работает больше всего
| Место | Задача текста | На что смотреть |
|---|---|---|
| Кнопки | Сказать, что произойдёт | Глагол и объект: «Сохранить изменения», «Записаться на приём» |
| Подписи и подсказки в формах | Объяснить, что ввести и зачем | Пример формата, зачем нужны данные |
| Ошибки | Объяснить, что пошло не так и как исправить | Без обвинений, без кодов без расшифровки |
| Пустые состояния | Объяснить, почему пусто и что делать | Понятное следующее действие |
| Подтверждения | Защитить от случайных необратимых действий | Назвать последствие |
| Онбординг | Показать пользу и первый шаг | Коротко, можно пропустить, про цель пользователя |
| Уведомления | Сообщить, что изменилось | Конкретно, вовремя, без лишней тревоги |
Ключевые принципы
- Ясность прежде всего. Знакомые слова вместо внутреннего жаргона. «Оплата не прошла» понятнее, чем «Транзакция отклонена эквайером».
- Краткость. Убирайте слова, которые не помогают действовать. Коротко не значит загадочно: чуть более длинная, но ясная фраза лучше расплывчатой короткой.
- Польза. Каждый текст отвечает на вопрос пользователя: что это, что будет дальше, что мне сделать.
- Последовательность. Одно действие — одно название. Если на одном экране «Корзина», на другом не должно быть «Мои покупки». Ведите короткий глоссарий.
- Тон. Дружелюбный и спокойный, соответствующий бренду и моменту. Шутки в сообщении о неудачной оплате раздражают.
- Главное — в начале. Люди сканируют текст, первые слова должны нести смысл.
- Доступность. Текст должен быть понятен без цвета и иконок, а подписи ссылок и кнопок — осмысленны вне контекста, когда их зачитывает скринридер.
До и после
| Ситуация | До | После |
|---|---|---|
| Кнопка в форме записи | Отправить | Записаться на приём |
| Ошибка пароля | Неверный ввод | Пароль должен быть не короче 8 символов |
| Общий сбой | Ошибка 500 | Не удалось сохранить изменения. Проверьте подключение и попробуйте ещё раз |
| Пустой список заказов | Нет данных | У вас пока нет заказов. Загляните в каталог, чтобы оформить первый |
| Подтверждение удаления | Вы уверены? Да / Нет | Удалить проект? Все файлы в нём будут удалены. Удалить / Отмена |
| Подсказка к полю телефона | Введите телефон | Номер телефона, например +998 90 123 45 67. Позвоним, чтобы подтвердить запись |
Заметьте закономерность: варианты «после» называют действие или проблему, объясняют последствие и дают следующий шаг.
Как писать микротекст на практике
- Начните с вопроса пользователя в этот момент: «Что сделает эта кнопка?», «Почему не получилось?»
- Напишите черновик полностью, а потом уберите всё, что не помогает.
- Прочитайте в контексте — на реальном экране, в реальном размере, на телефоне.
- Сверьте с глоссарием и другими экранами.
- Учитывайте перевод. В многоязычных продуктах длина текста меняется от языка к языку: оставляйте запас в вёрстке и не склеивайте слова с иконками и числами.
- Тестируйте. Наблюдайте за пользователями на юзабилити-сессиях: заминка перед кнопкой часто означает проблему в формулировке.
Типичные ошибки
- Текст-заглушка в продакшене: «Lorem ipsum», «Кнопка», «Текст здесь».
- Сообщения об ошибках, которые обвиняют пользователя или показывают только технический код.
- Подсказки внутри поля, которые исчезают, как только человек начинает печатать.
- Общие кнопки «ОК» и «Отправить» для важных действий.
- Разные названия одного и того же в разных частях продукта.