Микротексты и UX-writing

Микротекст — короткие тексты интерфейса: надписи на кнопках, подписи и подсказки полей, сообщения об ошибках. Работу над ними называют UX-writing.

Самые маленькие тексты

Подпись на кнопке, пояснение под полем, строка «Что-то пошло не так», слово «Готово»: тексты такого размера называют микротекстом (microcopy). Их пишут не меньше, чем статьи, а читают чаще, ведь человек не может пройти форму, не прочитав их. Профессию, которая этим занимается, называют UX-writing, «письмо для интерфейса»; в государственных службах, например в британской GOV.UK, говорят о «контент-дизайне».

Исследователи Nielsen Norman Group выделяют три задачи микротекста. Он сообщает (заголовок, подсказка), помогает действовать (подпись поля, текст ошибки) и влияет на выбор (призыв к действию, слоган). Все три задачи сходятся в форме заявки: на ней человек решает, довериться ли вам.

Это важное место. Страницу можно просмотреть, посетитель может не дочитать абзац, но форму он либо заполняет, либо нет. Если он не понял, что будет после нажатия кнопки, или получил сообщение «Ошибка 422», он уходит. Часто это последний вклад сайта в то, что вам напишут или позвонят. И хорошая новость в том, что работа над микротекстом дешёвая: несколько строк, а результат виден сразу.

Проверьте себя: какие три задачи у микротекста?

Сообщать (информировать), помогать действовать (подписи, ошибки) и влиять на выбор (призыв к действию).

Кнопка называет действие

Самая заметная строка формы это кнопка. Слово на ней должно отвечать на вопрос «что произойдёт, когда я нажму?». «Отправить» отвечает на вопрос «что сделает форма»: отправит данные. А человеку нужно знать, что получит он: запишется, закажет, задаст вопрос.

Практичное правило: глагол плюс то, что получает человек. «Записаться на консультацию», «Заказать звонок», «Получить расчёт», «Вступить в клуб». Проверка: подставьте название после слов «Я хочу…». «Я хочу записаться на консультацию» звучит. «Я хочу отправить» нет.

Эту фразу вы уже придумали: она записана в брифе как главное действие. Кнопка, заголовок формы и ссылка с главной страницы называют его одинаково. Так человек, пройдя путь с главной на форму, ни разу не споткнётся о новое слово.

Ещё два правила. Кнопка главного действия одна: рядом с ней «Отмена» или «Назад» делают спокойнее, а не такими же яркими. А опасные действия называют прямо: «Удалить заявку», а не «Да». Окно с вопросом «Вы уверены?» и кнопками «Да» и «Нет» заставляет читать вопрос ещё раз.

Проверьте себя: как проверить, что кнопка подписана хорошо?

Продолжить фразу «Я хочу…» названием кнопки. Если звучит естественно («Я хочу записаться на консультацию»), подпись хорошая.

Подписи и подсказки

Каждое поле нужно подписать. Подпись стоит над полем или рядом и остаётся видна, пока человек печатает. Тут частая ловушка: подпись пишут внутри поля серым шрифтом (placeholder) и на этом считают дело законченным. Но как только человек начинает печатать, подпись исчезает, и он уже не помнит, что там было. Серый шрифт плохо читается, а программы чтения с экрана объявляют его не всегда. Подсказку внутри поля можно оставить для примера (+7 900 000-00-00), но не вместо подписи.

Вторая подсказка стоит под полем и отвечает на вопрос «зачем вы это просите?». Телефон: «Позвоним, чтобы назвать время». Почта: «Напишем, когда будет готово. Рассылок не будет». Человек охотнее отдаёт то, что понимает зачем отдаёт. И если вы не можете объяснить, зачем нужно поле, возможно, оно лишнее: чем короче форма, тем больше людей до конца дойдёт. Об этом ещё поговорим в части про убеждение, на модели Фогга.

Подписи делайте разговорными вопросами или короткими существительными: «Как к вам обращаться» вместо «ФИО» (если фамилия вам не нужна), «Телефон для связи» вместо «Контактные данные». Обязательность помечайте словами: «(необязательно)» или звёздочкой с пояснением вверху формы. Звёздочка без пояснения ничего не говорит.

Проверьте себя: чем плохо писать подпись только внутри поля?

Она исчезает, когда человек начинает печатать, плохо читается и не всегда доступна программам чтения с экрана. Подпись должна оставаться видимой над полем.

Сообщения об ошибках

Ошибка это самое неприятное, что случается в форме, и от слов зависит, исправит ли человек её или уйдёт. Хорошее сообщение состоит из трёх частей:

1. Что случилось. «В номере не хватает цифр».
2. Что сделать. «Напишите телефон целиком».
3. Пример, если есть формат. «Например, +7 900 000-00-00».

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

Три технических условия. Сообщение стоит рядом с полем, а не только вверху страницы. Оно не опирается на один цвет: красная рамка без слов не видна дальтонику и незрячему. И введённое не стирается: нет ничего хуже, чем заново заполнять форму из-за одной цифры. Стандарт доступности WCAG требует именно этого: назвать ошибку и, где можно, подсказать исправление (критерии 3.3.1 и 3.3.3, ссылка в источниках).

Сравните на схеме две версии одной формы. Переключите момент на «Ошибка» и нажмите на текст: схема объяснит, что в нём не так и что сделано.

До После

Заполняют Ошибка в телефоне Отправлено

Форма обратной связи ФИО *

 

Телефон *

 

Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности Отправить

Нажмите на любой текст в форме: услышите, что с ним не так или что в нём сделано.

Проверьте себя: из каких трёх частей состоит хорошее сообщение об ошибке?

Что случилось, что сделать и пример нужного формата.

После отправки и рядом с согласием

Когда человек нажал кнопку, он ждёт: «дошло или нет?». Сообщение после отправки отвечает на три вопроса:

• Дошло ли. «Заявка принята».
• Что дальше и когда. «Позвоним сегодня до 18:00».
• Что, если не так. «Если не дозвонимся, напишем в мессенджер. Передумали? Позвоните нам».

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

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

1. Это отдельное действие, галочка. Не фраза вроде «Нажимая кнопку, вы соглашаетесь…», которую нельзя не принять.
2. Галочка по умолчанию не отмечена. Заранее поставленная галочка относится к тёмным паттернам (о них в части про убеждение): решение за человека принимает форма. Юристы считают, что она плохо совместима с требованием, чтобы согласие было сознательным и конкретным. Подробности в уроке про юридические тексты.
3. Текст понятен без юриста. «Согласен на обработку имени и телефона, чтобы со мной связались по заявке. Подробнее в политике». Сказано: на что, зачем и где прочитать подробнее. Точные юридические формулы проверьте у юриста: хорошая формулировка на человеческом языке не заменяет требований закона, а только делает их понятными.

Проверьте себя: что должно быть в сообщении после отправки заявки?

Что заявка принята, что будет дальше и когда, и что делать, если связь не состоится.

Когда микротекст подводит

• Милота не к месту. Шутка в окне «Не удалось сохранить» раздражает человека, потерявшего данные. Лёгкость уместна, когда ничего не ломается, и по тону мы ещё поговорим.
• Пристыживание. Кнопка отказа «Нет, я не хочу экономить» это приём, который называют confirmshaming: человека стыдят за решение. Честный отказ нейтрален: «Нет, спасибо».
• Выдуманная срочность. «Осталось два места!», когда мест нет и не будет. Это уже обман, и разбор таких приёмов впереди.
• Слишком коротко. Сокращать нужно ради ясности, а не ради счёта слов. Сообщение «Ошибка» короткое и бесполезное.

Проверьте себя: почему «Нет, я не хочу экономить» плохая подпись кнопки?

Она стыдит человека за отказ, чтобы он остался. Честная кнопка отказа нейтральна: «Нет, спасибо».

Практика

В предпросмотре форма главного действия вашего проекта: поля есть, слов нет. Впишите их.

1. Заголовок формы в h2 с классом form-title: назовите действие.
2. Подписи двух полей в элементах label и подсказки под ними в span с классом hint: зачем вы просите эти данные.
3. Текст согласия в label с классом consent: на что, зачем, где подробнее. Галочку не отмечайте.
4. Текст кнопки на главное действие из брифа теми же словами.
5. В заметке «Что сайт скажет»: три сообщения об ошибках и сообщение после отправки со сроком.

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