Микротекст на сайте: кнопки, подсказки, сообщения

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

Коротко

• Микротекст работает в ключевых точках: кнопки, поля форм, подсказки, ошибки, подтверждения, пустые экраны.
• Надпись на кнопке состоит из глагола и результата: Получить расчет, Добавить в корзину.
• Подпись над полем остается видимой; placeholder показывает пример формата.
• Сообщение об ошибке отвечает на три вопроса: что случилось, почему и что сделать.
• Единая терминология и тон на всех страницах и языках делают сайт предсказуемым.
• Микротекст проверяют на живых сценариях: заявка, заказ, регистрация.

Где на сайте работает микротекст

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

Кнопки и ссылки

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

• Длина надписи – два-четыре слова; длинные подписи плохо помещаются на узких экранах.
• На экране есть один главный призыв к действию, второстепенные кнопки выглядят спокойнее.
• Текст ссылки понятен вне контекста, потому что пользователи программ чтения с экрана просматривают список ссылок отдельно.
• Обычный регистр читается легче слов, написанных заглавными буквами.
• Кнопка опасного действия называет его прямо, например Удалить товар из корзины.

Поля форм, ошибки и подтверждения

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

Микротекст в формах снимает вопросы до того, как они появятся. Проверьте каждое поле по простому перечню:

• подпись стоит над полем и остается видимой во время ввода;
• placeholder показывает пример формата, например name@example.com;
• обязательные и необязательные поля помечены словами;
• рядом с чувствительными данными есть пояснение, зачем они нужны: Телефон нужен, чтобы уточнить время доставки;
• требования к паролю видны до ввода;
• рядом с оплатой стоят короткие пояснения о доставке, возврате и безопасности платежа.

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

Сообщение об ошибке состоит из трех частей: что случилось, почему, что сделать. Сравните два варианта: Ошибка 422 и Не удалось отправить заявку: проверьте номер телефона, он должен содержать код страны. Второй текст сразу дает человеку действие.

1. Разместите сообщение рядом с самим полем, чтобы оно было на виду.
2. Пишите спокойно и без обвинений: Проверьте номер звучит лучше, чем Вы ввели неправильно.
3. Избегайте технических кодов и жаргона.
4. Сохраните уже введенные данные.
5. Сделайте так, чтобы ошибки озвучивали программы чтения с экрана.

Сообщения об успехе и ожидании

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

Пустые состояния, 404 и служебные экраны

Именно на экранах, где что-то пошло не по плану, текст выполняет самую важную работу. Несколько примеров:

• Пустая корзина: ссылка на каталог и популярные категории.
• Поиск без результатов: совет проверить написание, более широкий запрос, контакты менеджера.
• Страница 404: пояснение, поле поиска, ссылки на главную и основные разделы.
• Баннер cookies: коротко объясняет, зачем нужны файлы cookie; требования к согласию зависят от страны, поэтому формулировки согласуют с юристом.
• Письмо после заказа и страница благодарности: номер заказа, состав, сроки, контакты.

Тон, терминология и несколько языков

Микротекст звучит цельно, когда команда договорилась о правилах. Достаточно короткого гайда на одну страницу:

• тон описан тремя словами (например, ясный, вежливый, деловой) и подкреплен примерами;
• одно понятие имеет одно название: если в меню есть слово корзина, оно же стоит на кнопках и в письмах;
• обращение на Вы или на ты единое для всего сайта;
• сокращения, форматы дат, валют и телефонов согласованы.

На многоязычном сайте перевод передает смысл и тон оригинала. В русском и румынском языках слово после числа меняет форму (1 товар, 2 товара, 5 товаров), поэтому шаблон сообщения со счетчиком должен поддерживать эти формы. Машинный перевод каждого языка проверяет его носитель, а строки интерфейса удобно вести в единой таблице с комментариями.

Как улучшить микротекст: шесть шагов

1. Пройдите путь клиента (главная, карточка товара или услуги, корзина или форма, благодарность) и выпишите каждый текст.
2. Отметьте места, где человек может остановиться и засомневаться.
3. Перепишите тексты по формулам: глагол плюс результат, ошибка как что, почему, что делать.
4. Уберите жаргон, внутренние термины и длинные предложения.
5. Проверьте тексты на нескольких людях из целевой аудитории: попросите выполнить задание и комментировать вслух.
6. Зафиксируйте правила в коротком гайде и пересматривайте его вместе с обновлениями сайта.

Пример: от канцелярита к простой речи

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

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

Что добавить в магазине и на странице услуги

Больше всего сомнений возникает там, где человек вводит деньги или личные данные. Короткие пояснения рядом с ценой, кнопкой и формой снимают часть таких вопросов:

• у цены – что входит в стоимость и когда она может измениться;
• у доставки – сроки и условия, которые действительно действуют;
• у оплаты – какие способы доступны и что произойдет после нажатия;
• у возврата – где прочитать условия;
• у акций и скидок – срок действия и условия;
• у формы заявки – когда с клиентом свяжутся и о чем будет разговор.

Пишите только проверенные факты. Завышенное обещание в микротексте может навредить доверию больше, чем отсутствие такой строки.

Типичные ошибки

• Общие надписи. Отправить, Далее, ОК и Подробнее повторяются на каждом экране.
• Placeholder вместо подписи. Подсказка исчезает во время ввода.
• Обвинение пользователя. Фразы вроде Вы ошиблись вызывают раздражение.
• Технические коды и жаргон. Клиент видит внутренние термины системы.
• Разные названия одного понятия. Корзина, тележка и сумка в разных местах сбивают с толку.
• Слишком много восклицательных знаков и шуток. В ситуациях с ошибкой они выглядят неуместно.
• Автоперевод без проверки. Текст читается механически и может исказить смысл.
• Завышенные обещания. Надпись о мгновенном ответе вызывает разочарование, когда менеджер отвечает в течение дня.

Вопросы и ответы

Чем микротекст отличается от обычного текста на странице?

Микротекст помогает выполнить действие прямо в интерфейсе: нажать, заполнить, исправить. Основные тексты страницы объясняют и убеждают; микротекст сопровождает пользователя в момент решения.

Можно ли заменить подписи полей на placeholder?

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

Сколько слов должно быть на кнопке?

Обычно два-четыре слова. Более длинный текст возможен, когда нужно пояснение, но его стоит проверить на узком экране телефона.

Как писать сообщение об ошибке?

Назовите проблему, объясните причину и предложите решение в одном-двух предложениях рядом с полем. Тон спокойный, без обвинений и технических кодов.

Нужен ли A/B-тест для микротекста?

Для сайтов с большим трафиком A/B-тест полезен на ключевых кнопках. На небольших сайтах надежнее наблюдать за пользователями, смотреть записи сеансов и сравнивать периоды до и после изменений.

Вывод

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

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

• Доступность сайта для всех пользователей: базовые вещи и WCAG
• Безопасность сайта для бизнеса: HTTPS, резервные копии, обновления
• Как ускорить сайт: изображения, шрифты, скрипты