Как правильно добавить кнопку в письме
В предыдущем материале мы разобрали базу: как сверстать «неуязвимую» кнопку, какие отступы соблюдать и почему нельзя делать CTA картинкой. Но даже идеально сверстанная кнопка может оказаться бесполезной, если она не учитывает психологию пользователя и контекст устройства.
Разбираем продвинутые приемы, которые превращают обычную кнопку в мощный инструмент продаж.
Визуальные триггеры для управления вниманием
Правильное оформление кнопки работает на подсознательном уровне: оно создает нужное настроение и направляет взгляд пользователя еще до того, как он прочитает текст. Чтобы кнопка не затерялась в письме, используйте проверенные приемы:
Цветовой контраст и эффект изоляции (Эффект Ресторфф)
Если всё письмо выдержано в спокойных корпоративных тонах, кнопка должна стать тем самым ярким пятном, которое мгновенно притягивает взгляд. Это сигнал о том, где находится самое важное действие.
Негативное пространство
Вокруг кнопки должно быть «много воздуха». Чем больше свободного пространства вокруг CTA, тем более значимым и кликабельным он кажется. Скученность элементов рядом с кнопкой, наоборот, снижает её ценность в глазах читателя.
Соответствие ожиданиям
Выбор оттенка должен соответствовать смыслу сообщения. Для подтверждения заказа или регистрации в сервисе лучше подходят спокойные синий или зеленый тона, вызывающие доверие. Для горячих распродаж и акций — яркий оранжевый или красный, стимулирующие к быстрому действию.
Анатомия текста и сила микротекста
Когда стандартный призыв «Купить» или «Зарегистрироваться» кажется слишком сухим или обязывающим, используйте микротекст (подпись под кнопкой или рядом с ней). Его задача — снизить порог входа и развеять последние сомнения пользователя прямо в момент клика.
Используйте три проверенных сценария:
Снятие возражений и страхов
Часто читатель боится нажать на кнопку, потому что ожидает сложной регистрации или списания денег. Микротекст «Отмена в любой момент», «Карта не требуется» или «Займет всего 2 минуты» снимает этот барьер.
Триггеры срочности и дефицита
Если акция ограничена, кнопка должна это транслировать. Подписи вроде «Осталось всего 5 мест по этой цене» или «Промокод истекает через 3 часа» подталкивают к действию тех, кто откладывает покупку на потом.
Персонализация через «Я‑формулировки»
Попробуйте сменить фокус с действия системы на желание пользователя. Вместо казенного «Начать обучение» используйте «Хочу стать PRO-дизайнером». Когда текст на кнопке или под ней написан от лица читателя, конверсия в клик обычно выше.
Иерархия кнопок
Часто в одном блоке письма нужно предложить два разных действия: например, «Купить сейчас» и «Посмотреть каталог». Главная ошибка — делать эти кнопки визуально одинаковыми. Когда у элементов равный вес, взгляд пользователя «размывается», и он может не нажать ни на одну.
Чтобы направить читателя, используйте систему приоритетов:
Первичная кнопка (Primary)
Это главная цель вашего письма. Она должна быть максимально заметной: залитая ярким цветом, массивная, притягивающая 80% внимания. Она буквально говорит: «Жми сюда в первую очередь».
Вторичная кнопка (Secondary)
Предназначена для тех, кто еще не готов к покупке, но заинтересован. Её лучше делать в виде «кнопки‑призрака» (контурная рамка без заливки) или обычной текстовой ссылки.
Совет: Не ставьте две залитые кнопки одинакового цвета рядом. Это создает «паралич выбора». Пользователь тратит лишние доли секунды на раздумья, какая из них важнее, и в итоге просто закрывает письмо.
CTA для «ленивых» и эргономика мобильных
Минимальный размер кнопки в 44px — это стандарт, но для высокой конверсии этого мало. Нужно учитывать «Зону большого пальца». Область экрана, в которую пользователю удобнее всего попадать, когда он держит смартфон одной рукой.
Магия центрирования
На смартфонах кнопки по центру кликаются в среднем на 15% чаще. Причина проста: до центральной части экрана одинаково легко дотянуться большим пальцем как правой, так и левой руки. В то время как кнопка в углу заставляет пользователя перехватывать телефон или задействовать вторую руку, что прерывает сценарий чтения.
Кнопки на всю ширину
Если на десктопе растянутая кнопка выглядит громоздко, то на мобильных это настоящее спасение. Кнопка во всю ширину экрана превращается в «безопасную мишень» — по ней невозможно промахнуться даже на ходу.
Подробнее о том, как дизайн письма влияет на конверсии, читайте в нашем материале
Что именно принесло клик?
Если у вас в длинном письме три одинаковых кнопки (в начале, середине и конце), стандартная аналитика покажет общий CTR. Чтобы понять, какой блок сработал лучше:
Детализированные UTM-метки
Не дублируйте ссылки. Добавьте в параметр utm_content уникальные значения: button_top, button_middle, button_footer. Так в Google Analytics вы увидите, какая часть письма работает эффективнее всего.
Тепловые карты кликов
Используйте инструменты визуализации, которые показывают «горячие» зоны письма. Это поможет понять, не пролистывают ли пользователи важные блоки и замечают ли они кнопку вообще.
А/Б тесты формулировок
Проверьте гипотезу «Глагол vs Результат». Например, сравните кликабельность кнопки «Получить скидку» (действие) и «Хочу подарок» (желаемый результат). Иногда замена одного слова поднимает конверсию на 10–15%.
Чтобы точно знать, какая из кнопок в длинном дайджесте принесла продажу, используйте уникальные параметры для каждой ссылки. Узнайте Как автоматизировать проставление UTM-меток в письмах
Темная тема для кнопок
Многие забывают, что в темном режиме (Dark Mode) почтовые клиенты принудительно инвертируют цвета. Это может превратить ваш идеальный дизайн в нечитаемое пятно.
Проблема: Темно‑синяя кнопка на белом фоне при инверсии часто превращается в темно‑синюю на темно‑сером фоне. Контраст исчезает, и кнопка буквально «растворяется» в интерфейсе.
Решение: Добавьте кнопкам тонкую светлую обводку (border) в 1–2 пикселя. В светлой теме она будет практически незаметна, зато в темном режиме четко очертит границы. Для продвинутой вёрстки используйте медиа‑запросы @media (prefers-color-scheme: dark), чтобы гарантированно сохранить нужные цвета.
Чтобы ваши кнопки и логотипы не «поплыли», изучите наш материал – Темная тема в email: как подготовить рассылку к Dark Mode и не потерять читателей.
Как это реализовать в Letteros?
В конструкторе Letteros вам не нужно писать код для Outlook или мобильных устройств. Просто перетащите кнопку в макет, настройте её тип и отступы в визуальном редакторе, а затем мгновенно проверьте отображение в темной теме через режим предпросмотра.