Содержание
В утилитарном дизайне решения оценивают по результатам рассылки: CTR, CTOR, конверсии в целевое действие и данным A/B-тестов. Оформление должно помогать читателю перейти к следующему шагу.
Специалисты Out of Cloud, которая входит в Kokoc Performance, используют этот подход при работе с email-рассылками.
Как устроено функциональное письмо
Каждый элемент письма решает свою задачу. Хедер помогает перейти в нужный раздел сайта, первый экран объясняет предложение, товарные блоки ведут в карточки, а футер содержит служебную информацию.
В среднем человек смотрит на рекламное сообщение около трех секунд. За это время он должен понять, что ему предлагают и куда нажать. Поэтому на одном экране лучше оставлять один основной смысл и одно действие.
Мобильная версия и доступность
Если верстка не адаптирована к небольшому экрану, часть аудитории не сможет прочитать текст или нажать на кнопку. На мобильных устройствах проверьте размер кнопок, расстояние между блоками, отображение в темной теме и горизонтальную прокрутку. Второстепенные детали не должны мешать чтению.
Хедер
По данным Out of Cloud, хедер получает 20-28% всех кликов из рассылки. В нем можно разместить ссылки на основные разделы сайта, например «Каталог», «Акции» и «Доставка». Так читатель сразу переходит туда, куда ему нужно.
Главный баннер и вводный текст
На первом экране достаточно иллюстрации, короткого заголовка и кнопки. Эти элементы должны объяснять предложение за несколько секунд. Красивый баннер без текста и понятного действия может не привести к переходу.
После баннера можно добавить короткое приветствие, описание акции или подборку товаров со ссылкой на сайт. Этот текст придает контекста и подводит читателя к основному содержанию письма.
Товарные блоки
В товарной части письма человеку прежде всего нужны характеристики, которые повлияют на решение. В рассылке застройщика это могут быть район, стоимость, срок сдачи и условия предложения. В финансовых письмах последовательно показывают предложение, выгоду, срок и кнопку перехода.
Ссылки должны вести на конкретную страницу. Если читатель нажал на фотографию сумки, ему нужно открыть карточку этой сумки, а не главную страницу или общий каталог. Иначе ему придется заново искать товар.
Визуальное оформление не обязательно делать нейтральным. Фотографии могут передавать стиль бренда, если они не мешают читать текст, видеть цену и находить кнопку.
На каждом экране выделяйте одно основное действие. Конверсионный блок должен быть заметен среди остальных элементов письма.
Префутер и футер
Префутер и футер содержат служебную информацию и не должны отвлекать от основного предложения. В префутере можно разместить ссылки на полезные разделы сайта. В футере обычно находятся иконки социальных сетей, ссылка на веб-версию письма, контакты, юридические сведения и кнопка отписки.
Для этой части письма подойдут приглушенные цвета и простое оформление.
Что показали A/B-тесты
Сравнивать варианты дизайна лучше по результатам сплит-теста. Ниже приведены три примера из практики Out of Cloud.
Кейс 1. Упрощенный баннер
В первом варианте баннера было несколько графических слоев, мелкий текст и несколько одинаково заметных акцентов. Специалисты Out of Cloud оставили только иллюстрацию, короткий заголовок и одну кнопку.
После изменения CTR вырос на 100%, с 1,2% до 2,4%. Конверсия в переход на страницу акции увеличилась почти в 1,8 раза.
Кейс 2. Товарные карточки ECCO
В рассылках обувного бренда ECCO сравнили креативные иллюстрации и стандартные карточки товаров с фотографией, ценой и кнопкой.
Стандартные карточки получили на 10,6% больше кликов. Конверсия была выше на 9,8%, средний чек также вырос. Знакомая структура помогала покупателю быстрее перейти к товару.
Кейс 3. Динамические блоки и GIF-анимация
В одном из проектов стандартные динамические товарные блоки заменили сложной GIF-анимацией. После замены CTR снизился на 23,1%, CTOR на 20,5%, а конверсия на 66,6%. Снижение показателей отразилось на выручке.
Чек-лист: как проверить письмо перед отправкой
Откройте письмо на смартфоне. Текст должен помещаться на экране, кнопки должны быть достаточно крупными, а горизонтальная прокрутка отсутствовать.
Проверьте первый экран. На нем должна быть заметная кнопка, которую видно без прокрутки.
Перейдите по всем ссылкам. Фотография товара должна вести в его карточку, а не на главную страницу или в общий раздел каталога.
Посмотрите на футер. Оставьте в нем только служебную информацию и убедитесь, что он не перетягивает внимание с основного предложения.
Оцените первый экран за две-три секунды. За это время должно быть понятно, что предлагает письмо.
Проверьте количество действий. У письма должна быть одна основная цель, а второстепенные элементы не должны с ней конкурировать.
Включите темную тему. Убедитесь, что текст остается читаемым, а изображения отображаются корректно.
