Микрокопии на лендинге: подписи к кнопкам, плейсхолдеры, ошибки

Микрокопии - это короткие тексты у кнопок, полей и подсказок: плейсхолдер, текст под кнопкой, сообщение об ошибке, подтверждение отправки. Они занимают 1-2% текста лендинга, но влияют на 15-25% конверсии, потому что стоят в точках принятия решения: заполнить поле, нажать кнопку, разобраться в ошибке.

Что такое микрокопии и почему на них экономят

Микрокопии это мелкие тексты, которые находятся вокруг интерфейсных элементов. Они занимают буквально строку, поэтому на них редко обращают внимание. А зря.

Примеры микрокопий на лендинге.

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

Эти тексты суммарно занимают на лендинге 1-2% от общего объёма, но влияют на 15-25% конверсии, потому что находятся в критичных точках принятия решения.

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

Плейсхолдеры в полях формы

Плейсхолдер это серый текст, который стоит в пустом поле и исчезает при вводе. Это один из атрибутов поля, описанных в документации MDN по input.

Зачем нужен плейсхолдер

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

Что писать

Плохо:

• "Имя".
• "Введите ваше имя".
• "Email".

Хорошо:

• "Как к вам обращаться".
• "Например: Анна или Алексей".
• "ivan@gmail.com".

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

Чего избегать

• Использовать плейсхолдер вместо лейбла. Когда пользователь начинает вводить, плейсхолдер исчезает, и человек забывает, что это за поле.
• Длинные инструкции внутри плейсхолдера. Хочется уместить подсказку, правила, ограничения. Слишком длинный плейсхолдер отсекается на мобильном.
• Плейсхолдер тем же цветом, что основной текст. Непонятно, заполнено поле или нет.

Какой текст писать на кнопке отправки?

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

Дефолтное "Отправить" или "Оставить заявку" работает в 70% случаев хуже, чем ориентированные на результат формулировки.

Сравнение.

• "Отправить" → "Получить расчёт за 20 минут"
• "Подписаться" → "Забрать чек-лист на email"
• "Зарегистрироваться" → "Забронировать место на вебинаре"

Главное правило. Кнопка говорит о том, что пользователь получит, а не о том, что он делает.

Текст под кнопкой

Под кнопкой отправки обычно пишут "Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности". Это юридическая необходимость, но её можно сделать частью конверсии.

Сильные варианты.

• "Нажимая кнопку, получите ответ в Telegram в течение 15 минут. Без звонков с незнакомых номеров".
• "Ответ придёт на email в течение часа. Мы не делаем рассылки и не передаём данные третьим лицам".
• "Первая консультация 30 минут бесплатно, ни к чему не обязывает".

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

Как написать сообщение об ошибке в форме?

Ошибка формы это момент, когда пользователь может закрыть вкладку. Хорошая ошибка помогает, плохая раздражает.

Плохие примеры

• "Ошибка валидации".
• "Неправильный формат".
• "Поле обязательно".
• "Email не подходит".

Эти сообщения констатируют проблему, не помогая её решить.

Хорошие примеры

• "Кажется, в email пропущена @. Проверьте: ivan@gmail.com".
• "Телефон короче обычного. Должно быть 11 цифр, начиная с 7 или 8".
• "Это поле нужно заполнить, чтобы мы смогли с вами связаться".
• "Мы не нашли ответа на этот email. Проверьте написание или используйте другой".

Хороший месседж ошибки.

1. Объясняет, что не так.
2. Предлагает способ исправить.
3. Использует мягкий тон (не обвиняет пользователя).

Размещение

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

Подтверждение после отправки

После нажатия кнопки отправки пользователь должен увидеть подтверждение. Это момент, когда тревога максимальна: "А отправилось ли вообще", "Что сейчас будет".

Плохие варианты

• Исчезла форма, появилась галочка и текст "Спасибо".
• Редирект на пустую thank-you страницу.
• Ничего не изменилось, форма снова пустая.

Хорошие варианты

• "Заявка ушла. Я отвечу в Telegram в течение 15 минут. Если понадобятся уточнения, спрошу там же. Если не пришёл ответ через 30 минут, проверьте, не попало ли в спам".
• "Спасибо за заявку. В ближайший час позвоню с номера +7 (XXX) XXX-XX-XX. Если не дозвонились, напишите в Telegram: @username".

Подтверждение должно:

1. Подтвердить факт получения заявки.
2. Указать следующий шаг и ожидаемое время.
3. Дать запасной канал, если основной не сработает.

Это снимает тревогу "а дошло ли" и запускает ожидание.

Тултипы и подсказки

Если поле требует пояснения, его даёт тултип (всплывающая подсказка при наведении или клике на иконку "?").

Когда использовать

• Когда формат ввода нестандартный. "Что это за серия паспорта".
• Когда термин может быть непонятен. "Что такое SIEM-система".
• Когда нужно пояснить, почему мы это спрашиваем. "Зачем вам мой номер машины".

Как писать

Тултип должен быть коротким (1-2 предложения) и содержать только суть. Не открывайте в нём википедию.

Плохо. "Серия паспорта это четырёхзначный код, который указан на второй странице в левой части, сразу после разворота. Он не совпадает с номером паспорта, который идёт сразу за серией. Серия обычно начинается с цифр 45 для Москвы, 40 для Санкт-Петербурга…"

Хорошо. "Первые 4 цифры в паспорте, до пробела. Например: 4512".

Loading-тексты

Когда что-то долго грузится, текст "Загрузка…" воспринимается как тормоз. Микрокопия может смягчить ожидание. Субъективная скорость страницы - отдельная тема, MDN разбирает её в материале о производительности веб-страниц.

Плохо

• "Загрузка…".
• "Пожалуйста, подождите".
• "Обработка запроса".

Хорошо

• "Собираем ваш персональный расчёт, это займёт 10-15 секунд".
• "Ищем свободные слоты в вашем районе".
• "Проверяем наличие мастера на выбранную дату".

Конкретика даёт понимание, почему процесс длится, и сколько ждать.

Пустые состояния

Когда в поле нет данных (например, "У вас пока нет избранного"), текст должен не просто констатировать, а подсказывать следующее действие.

Плохо. "Избранного нет".

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

Тосты-уведомления

Короткие плашки, которые выскакивают в углу экрана. "Заявка отправлена", "Корзина обновлена".

Правила.

1. Одно действие - один тост. Не три подряд.
2. Текст до 6-8 слов. Длиннее нечитаемо.
3. Сообщение должно говорить результат, не действие. "Сохранено", не "Сохраняем".
4. Время показа 3-5 секунд. Меньше - не успеют прочитать, больше - раздражает.

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

• Английские штампы в переводе. "Упс, что-то пошло не так". Звучит неестественно на русском.
• Попытка быть слишком оригинальным. "Ха-ха, а вы не ввели email, незадача". Пользователь не пришёл развлекаться.
• Одинаковые сообщения для разных ошибок. Пользователь не понимает, что именно исправлять.
• Отсутствие точек в конце предложений. Мелочь, но влияет на восприятие профессионализма.
• Микрокопии одним человеком, остальной текст другим. Стилевая разница заметна, даже если не осознанно.

Частые вопросы

Нужно ли дублировать плейсхолдер лейблом над полем?

Да, если поле не совсем очевидное по контексту. Плейсхолдер исчезает при вводе, и человек, отвлёкшись на секунду, забывает, что вводил. Лейбл остаётся на месте и снимает эту путаницу, особенно в длинных формах из нескольких полей.

Кто должен писать микрокопии - копирайтер или дизайнер?

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

Как проверить, что сообщение об ошибке понятно?

Дайте прочитать его человеку, который не видел форму. Если он не может объяснить своими словами, что случилось и что делать дальше, формулировку нужно переписать. Хороший тест - показать текст ошибки отдельно, без остального интерфейса.

Можно ли использовать эмодзи в микрокопиях?

На B2B-лендингах и в нишах вроде юридических или медицинских услуг лучше обойтись без них. В нишах помоложе - образование, доставка, услуги для дома - один эмодзи в подтверждении отправки уместен, но не в сообщении об ошибке: там не время для игривости.

Вывод

Микрокопии занимают 1-2% объёма текста на лендинге, но влияют на 15-25% конверсии. Пройдитесь по всем мелким текстам: плейсхолдеры, сообщения об ошибках, подтверждения, кнопки, тултипы. Каждый должен быть конкретным, дружелюбным, давать следующий шаг. Замена "Отправить" на "Получить расчёт за 20 минут" плюс замена "Ошибка валидации" на "Пропущена @ в email" даёт прирост конверсии 10-20% без других изменений.

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