Как сделать дизайн емейл-рассылок привлекательнее
Покупка, совершённая подписчиком, — результат грамотно построенного емейл-маркетинга: визуальный ряд, время отправки, сегментация листа и т. д. Маркетолог должен оценивать письмо глазами пользователей и делать его интересным и продуманным, чтобы подтолкнуть их к покупке. В этой статье я дам советы о том, как улучшить дизайн емейл-рассылок. Следуя им, вы привлечёте внимание пользователей и повысите доход с емейл-канала.
Структура
Визуальная иерархия — эффективный способ управления вниманием пользователя. Продуманное расположение текста, изображений и других элементов дизайна емейл-рассылок гарантирует, что подписчик будет читать письмо в том порядке, в котором вы хотите, чтобы он его читал.
Подписчику должно быть достаточно бегло взглянуть на письмо, чтобы понять, о чём оно. Для этого структурируйте текст при помощи подзаголовков, используйте жирное начертание для расстановки акцентов, иллюстрации, инфографику, таблицы, списки и т. д.
Например, пробегите взглядом по этому письму. Вам сразу станет понятно, о чём в нём речь:
Не считая названия, письмо визуально поделено на шесть блоков. Каждый блок содержит заголовок, который помогает понять, о чём пойдёт речь. Всё проиллюстрировано схемами, что также позволяет быстро считать информацию и главный посыл каждого блока. Благодаря этому необязательно даже полностью читать текст.
Создавать визуальную иерархию в письме проще, если использовать емейл-сетки и учитывать естественный порядок чтения. Разберём два этих момента подробнее.
Емейл-сетки
Грамотно структурированные емейл-сетки направляют пользователей, показывают, какая информация в письме более значима. В этом помогает чередование блоков (их «ритм») и правильно подобранный размер.
Например, товарные и текстовые блоки разных размеров автоматически создают иерархию в письме. В самых больших блоках размещается самая важная информация — например, о категории товаров или о самом товаре. А в блоках поменьше — менее важная информация:
В письме lamoda акцентируется товар, который пользователь положил в корзину, но не купил. Это важный блок, он крупнее блока с сопутствующими товарами.
Ещё один вариант емейл-сетки — «перевёрнутая пирамида». Она направляет внимание читателя вниз, к самому важному — CTA:
Такая сетка состоит из трёх блоков:
- 1) крупного заголовка, который передаёт основное сообщение рассылки;
- 2) описания товара или услуги;
- 3) кнопки с призывом к действию.
Можно использовать несколько перевёрнутых пирамид в письме. Это помогает разбить информацию на удобные для чтения разделы и привести читателя к нескольким целевым действиям.
Естественный порядок чтения писем
Большинство людей просматривают текст по траектории, которая напоминает букву F:
Подстраивайте содержание письма под эту траекторию, чтобы подписчик заинтересовался и прочитал емейл полностью:
- Располагайте самую важную и полезную информацию в первых двух абзацах.
- Используйте систему заголовков. Они должны бросаться в глаза и отражать содержание всего письма.
- Делите контент письма на смысловые и визуальные блоки. Подписчикам будет легче воспринимать информацию дробно: один абзац — одна мысль. Но не перестарайтесь: не стоит выделять в отдельный абзац каждое предложение.
- Сделайте ссылки частью текста, избегайте универсальных слов: «здесь», «больше», «далее» и т. п. Подписчик должен понимать, куда он попадёт, если кликнет по ссылке, — в блог, на сайт, в статью, инфографику, на страницу с товарами конкретной категории и т. д.
- Используйте списки и выделяйте их пункты маркерами или цифрами.
Пример с логичными анкорными текстами на ссылках:
Шрифты
В дизайне емейл-рассылок лучше использовать стандартные шрифты — которые по умолчанию установлены во всех браузерах:
- Arial
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Так подписчики смогут увидеть письмо в том виде, в каком вы его задумали, — форматирование и структура «не поедут», письмо останется читабельным.
Для поддержания стиля бренда можно использовать нестандартные фирменные шрифты. Но делать это стоит на баннерах, в заголовках и на кнопках. В таких случаях на вёрстке эти элементы нужно сделать картинкой — чтобы браузеры пользователей не смогли заменить шрифт на стандартный.
Всего в одном письме лучше использовать один шрифт или два максимум.Так письмо будет смотреться гармонично и аккуратно.
Для основного текста лучше выбирать размер шрифта не менее 14 px, а межстрочный интервал — 1,5. Шрифт меньше 14 px некомфортен для чтения.
Воздух
Дизайн емейл-рассылок — это не только элементы, но и грамотно расположенное свободное пространство.
Совсем не обязательно заполнять все пустые места в шаблоне письма. Свободное пространство делает емейл удобным для чтения и общего восприятия. Оно помогает выделить наиболее важные аспекты, на которые подписчику необходимо обратить внимание.
Существует два типа свободного пространства:
- Активное пустое пространство — которое добавляют намеренно, чтобы разграничить элементы контента и удержать внимание читателя.
Свободное пространство вокруг изображений и информационных блоков выделяет их и фокусирует внимание читателя - Пассивное пустое пространство — то, которого нельзя избежать: расстояние между заголовком и основным текстом, пробелы между словами, промежутки между изображениями и т. д.
Письмо легко читать благодаря грамотному расположению подзаголовков, комфортному межстрочному интервалу и отступам между изображениями и текстом
Активное пустое пространство фокусирует внимание подписчика на главном, а пассивное не должно отвлекать от чтения, препятствовать ему.
Простой пример: возьмём чистый лист и разместим на нём в центре один объект — он сразу будет бросаться в глаза. Таким образом мы умышленно при помощи пустого места — активного пространства — выделяем этот объект.
Если сделать текст слишком плотным — с небольшим межстрочным интервалом — его будет тяжело читать. В таком случае нужно добавить «воздуха» — того самого пассивного пространства.
Если сделать слишком большой межстрочный интервал или большие расстояния между заголовками и картинками, контент будет «рассыпаться», его тоже будет сложно читать.
Основная задача «воздуха» — управлять пространством и помогать расставлять акценты, чтобы письмо выглядело гармоничным.
Цвет
С помощью определённых цветов вы можете управлять настроением читателя, привлечь его внимание и повлиять на впечатление о товаре или услуге.
Например, тёплые цвета — красный, оранжевый и жёлтый — стимулируют хорошее настроение и прилив сил. Синий цвет ассоциируется со спокойствием и надёжностью, а зелёный — с гармонией, здоровьем, деньгами.
Но не забывайте, что емейлы — это один из маркетинговых каналов. Цветовая гамма должна соответствовать фирменным цветам компании. Это поможет пользователям запомнить ваш бренд.
Если брендбук ограничивает выбор цвета кнопок или фона, используйте знания теории цвета при выборе изображения для товарной сетки в письме.
Например, зелёный цвет ассоциируется с умиротворением и богатством, поэтому его можно использовать для продажи товаров с небольшими дефектами: «Не стоит переживать из-за этой царапины. На работу прибора она никак не повлияет, а вы зато сэкономите в 2 раза, купив его!» 🙂
Интернет-магазин техники «Техпорт» учитывает цвета товаров в дизайне емейл-рассылок. Зелёный цвет главного баннера и зелёные декоративные элементы в теле письма вызывают чувство спокойствия. На его фоне красный миксер становится элементом неожиданности и привлекает внимание. На него хочется кликнуть и перейти на сайт.
Подробнее о теории цвета можно прочитать в этой инфографике:
Изображения
Изображения передают суть письма даже без текста. Во многом они влияют на то, захочет подписчик читать письмо или нет.
Объясню, как правильно подобрать изображение для кампаний бренда.
Соответствуйте общей концепции бренда. Во всех маркетинговых каналах: соцсети, сайт, емейлы и т. д.
Например, письма «Аромабутика» всегда оформлены в стиле сайта. Поэтому, когда подписчик переходит с емейла на сайт, он изучает понравившийся товар, не отвлекаясь на незнакомые элементы оформления. На сайте ему всё кажется знакомым и понятным.
Используйте фотографии людей и вызывайте эмоции. Фотографии детей и животных — хороший способ вызвать положительные эмоции.
Компания MyToys — отличный тому пример. Они продают товары для детей, соответственно, часто используют детские образы. В этом случае важно выбрать «правильные» фотографии, и у MyToys это отлично получается.
Они отдают приоритет жизненным фотоснимкам без обработки и постановочных сцен. Фото, сделанные спонтанно в непринуждённой атмосфере и естественной обстановке, переносят зрителя в место, где был сделан снимок. Помогают пережить те же ощущения, почувствовать те же эмоции, что и ребёнок на фотографии.
При взгляде на это письмо слышишь хруст снега под ногами, ощущаешь морозный воздух и детский восторг. Оно выдержано в стиле бренда, все фото на нём гармонируют по цветам друг с другом и с общим оформлением, письмо выглядит целостным.
Следует помнить, что лучше работают изображения, которые передают уверенность или счастье людей — эффект от приобретённого товара, — чем изображения денег и других материальных благ.
Такие фотографии показывают пользователю, как товар будет смотреться в жизни. Помогают представить, что будет, если он его купит.
Изображение одного человека работает эффективнее, чем двух и более: внимание сконцентрировано на одном объекте.
Выбирайте фотографии, где человек смотрит в сторону CTA, товара или просто в сторону информации, к которой вы хотите привлечь внимание.
Не переборщите со стоковыми изображениями. Да, стоковые фотографии не в тренде. Но это не значит, что вы должны полностью отказаться от них в дизайне емейл-рассылок. Они могут вдохновить на создание собственных изображений, которые соответствуют стилю вашего бренда.
Из нескольких стоковых фотографий можно собрать уникальный баннер. Например:
Выделяйтесь с помощью концептуальных изображений. Креативное концептуальное изображение привлекает внимание — сразу хочется разгадать посыл картинки, а чтобы это сделать, нужно просмотреть всё письмо.
Если тональность коммуникаций компании позволяет, добавьте немного юмора, это вызовет интерес.
Благодаря оригинальности концептуальные изображения выделяют сообщения бренда из общей массы писем.
Не переусердствуйте с количеством. Изображение — часть вашего письма, а не единственный его элемент. Большое количество фотографий без акцентов перегружают письмо. В итоге читатель не понимает, на что ему смотреть.
Кроме того, в некоторых почтовых клиентах загрузка изображений может быть отключена по умолчанию или по желанию пользователя. В таком случае, если письмо состоит из одних изображений, подписчик не получит никакой информации.
Например письмо AliExpress полностью состоит из изображений (кроме футера):
Таким его увидит пользователь, если изображения не загрузятся:
Gif-анимации
Человеческий глаз быстрее всего реагирует на движение, поэтому анимация в дизайне емейл-рассылки — хороший способ привлечь внимание подписчика.
Гифки помогут справиться сразу с несколькими задачами:
- заменят видео — в отличие от гифок его поддерживают не все почтовые клиенты;
- покажут подписчику, как пользоваться сервисом или товаром;
- разбавят приевшиеся статичные письма и сделают бренд более привлекательным;
- заменят длинную товарную сетку и сэкономят место в письме.
Призыв к действию
CTA-кнопка — такой же важный элемент письма, как текст и изображения. Кнопка должна гармонично вписываться в оформление письма: привлекать к себе внимание, но при этом не выбиваться из общего стиля рассылки.
Выберите место, где будет располагаться CTA. Размещайте кнопку под изображением товара, а не наоборот. Так пользователь сначала сможет изучить, что ему предлагают, а затем совершит финальное действие, которого от него ждут. Если же сделать наоборот, логика потеряется.
Чтобы привлечь к внимание к кнопке, добавьте свободного пространства вокруг неё.
Определитесь с размером и цветом. Выбор цвета в большей степени зависит от размера кнопки. Большая кнопка не должна сильно выбиваться из общей гаммы письма, но должна контрастировать с фоном. Для кнопки маленького размера хорошо подойдёт яркий цвет, который будет выделять её на фоне всего письма.
Высота кнопки чаще всего варьируется от 35 px до 50 px. Высоту меньше 35 px лучше не использовать, иначе по кнопке будет сложно попасть. Высота больше 50 px сделает кнопку громоздкой и неуклюжей.
По ширине старайтесь делать кнопку не больше 300 px. Иначе на мобильной версии её придётся масштабировать (тогда текст на кнопке станет хуже по качеству, «замылится») или перестраивать текст кнопки в две строчки, что также не приветствуется.
Расставьте приоритеты. Если вы используете несколько CTA, расставьте приоритеты между ними. Важность элемента в дизайне емейл-рассылок выделяют по-разному, но чаще всего — с помощью цвета и размера.
Более контрастные оттенки относительно основного цвета повышают важность CTA, менее контрастные — понижают. Аналогично с размером: важные кнопки — большие, менее важные — поменьше.
В письме KIA более важные и «продающие» кнопки сделаны красным цветом, менее важные — просто контурные. Самая важная кнопка находится на главном баннере и больше остальных привлекает внимание за счёт контраста и свободного пространства вокруг.
Адаптация
Более половины пользователей Рунета просматривают письма с мобильных.
А значит, без адаптации под мобильники сейчас никуда. Каждое письмо должно одинаково легко читаться и на телефонах, и на десктопах.
Существуют 3 способа адаптации писем, которые можно комбинировать между собой:
- масштабирование,
- отсечение,
- перестроение.
Масштабирование
Элементы письма — изображения, кнопки и т. д. — сжимаются и подстраиваются под ширину контента:
Чтобы элементы оставались читабельными при масштабировании под экраны смартфонов, объекты должны быть достаточно крупными. Картинки желательно использовать без мелких деталей, чтобы при уменьшении вдвое их можно было рассмотреть.
Отсечение
Часть элемента или фона при адаптации отсекается и становится невидимой для пользователя:
Вся важная информация и инфографика должны располагаться на одной из половин элемента — той, которая не обрежется и будет видна на смартфоне — или по центру письма, если части элемента будут отсекаться равномерно слева и справа.
Также вся важная информация должна умещаться в 300 px, так как минимальная ширина экрана среди популярных мобильных устройств — 320 px. Таким образом при отсечении важный контент не обрежется, а слева и справа от него останутся небольшие эстетичные отступы по 10 px.
Перестроение
Такой метод адаптации подходит для писем с блочной конструкцией. Когда ширина письма уменьшается и блоки перестают помещаться в заданную ширину, они перестраиваются друг под друга. Вы можете указать порядок перестроения: слева направо или справа налево.
Следите, чтобы блоки не пересекались по вертикали. Если элемент находится на пересечении, он разрежется. В примере ниже разрезается элемент с изображением процентов, но на его месте может оказаться фотография человека, и вот тогда всё может выглядеть совсем страшно. Если, например, часть фотографии с изображением ноги человека не влезет в 300 px, то при адаптации в верхнем блоке мы увидим фото, «обрезанное по ногу», а в нижнем блоке увидим как раз ту отрезанную часть фото с ногой.
В письме KIA использован комбинированный метод адаптации:
- Картинка на главном креативе масштабируется.
- Заголовок адаптируется методом отсечения. Благодаря этому он остаётся читабельным.
- Последующие блоки адаптируются прямым и обратным методом перестроения — чтобы на мобильном устройстве во всех подобных блоках текст всегда следовал за изображением.
- Изображение с превью видео снова масштабируется.
- В футере блок с соцсетями и телефонами перестраивается под блок с меню — прямое перестроение.
Таким образом в одном письме использованы все методы адаптации.
При адаптации важно сделать так, чтобы кнопки, свёрстанные картинками, иконки и все изображения отображались качественно на мобильном устройстве. Для этого их следует делать в два раза большего разрешения, чем физический размер в письме. Так элементы не будут размытыми на экранах с повышенной плотностью пикселей.
Адаптивные письма удобно читать, они хорошо структурированы, но на создание креативных адаптивных макетов требуются большие временные ресурсы. Дизайнеру вместе с верстальщиком нужно будет продумать, как адаптировать сложный с технической точки зрения макет.
В последнее время некоторые компании (в большей степени зарубежные) пренебрегают адаптивной вёрсткой в пользу интересных креативных макетов, делая письма неадаптивными или частично адаптивными. Но в этом случае нужно учесть некоторые нюансы в дизайне емейл-рассылок. Например, стоит избегать мелких элементов, чтобы при масштабировании письма их можно было рассмотреть. Шрифты также должны быть достаточно крупными.
Такой подход не только выделяет письмо из общей массы за счёт нестандартности структуры, но и сэкономит время на его разработку.
Пример частично адаптивного письма от myToys. Перестраиваются только футер, хедер, блок с промокодом (чтобы было удобно его скопировать) и блок «Всё для вашей безопасности». Товарная сетка неадаптивна и просто масштабируется. Поэтому в дизайне емейл-рассылки используются крупные изображения и шрифты.
Каждый сам выбирает, какой подход ему ближе. Главное, чтобы макеты были читабельны и доносили до подписчика всю важную информацию.
AMP-технология
С появлением AMP-технологии появилась возможность делать более интерактивные рассылки.
Теперь в письме можно:
- использовать для просмотра товаров карусели, аккордеоны, лайтбоксы:
Карусель
Аккордеон
Лайтбокс - добавлять товары в корзину и корректировать заказы:
- читать статьи и отзывы, оставлять комментарии и ставить лайки:
- заполнять анкеты:
- отвечать на приглашения и отслеживать количество участников:
- редактировать контент — даже в отправленном письме вы сможете заменить информацию на актуальную.
Интерактивность привлекает подписчиков и даёт возможность взаимодействовать с письмом, как с веб-сайтом:
Чек-лист для закрепления материала
- Шрифты: используйте те, которые установлены по умолчанию во всех браузерах. Размер шрифта основного текста — не менее 14 px, межстрочный интервал — 1,5.
Структура: структурируйте текст с помощью подзаголовков, используйте жирное начертание для расстановки акцентов, добавляйте иллюстрации, инфографики, таблицы, списки и т. д.
- Используйте емейл-сетки и учитывайте естественный порядок чтения. В длинных письмах чередуйте размеры блоков, чтобы направлять внимание пользователя и разнообразить дизайн. В коротких письмах используйте «перевёрнутые пирамиды», чтобы направить внимание читателя к CTA.
- Воздух: грамотно распоряжайтесь активным и пассивным свободным пространством. Активное пустое пространство фокусирует внимание подписчика на главном, а пассивное не должно препятствовать чтению.
- Цвет: влияет на эмоции. Цветовая гамма должна соответствовать фирменным цветам компании.
- Изображения: используйте фотографии людей. Изображение одного человека работает эффективнее, чем двух и более. Выбирайте фотографии, где человек смотрит в сторону информации, к которой хотите привлечь внимание. Не переборщите со стоковыми изображениями. При использовании gif-анимации разместите всю важную информацию на первом кадре.
СТА-кнопка: располагайте CTA под изображением товара, а не наоборот. Добавьте свободного пространства вокруг неё. Высота кнопки — от 35 px до 50 px, ширина — не больше 300 px. Выделите самые важные кнопки с помощью контрастного цвета или большего размера.
- Адаптация под мобильные: 3 способа — масштабирование, отсечение, перестроение. Кнопки, свёрстанные картинками, иконки и все изображения делайте в два раза большего разрешения, чем их физический размер в письме. Если решили создать креативное неадаптивное письмо, делайте крупными изображения и тексты.
- AMP-технология: позволяет взаимодействовать с письмом, как с веб-сайтом, — делает его интерактивным.
