Как оформить письмо с товарами, чтобы оно продавало

Все ли письма из инбокса вас заинтересовывают и вовлекают? Вы все их детально изучаете? У меня таких единицы. Часто письма просто не цепляют, не хочется тратить время на то, чтобы понять, что полезного мне в них предлагают.

Это связано с тем, что многие компании не подстраиваются в своих рассылках под интересы подписчиков, плохо структурируют и визуализируют информацию.

Опираясь на свой опыт, поделюсь приёмами оформления писем, которые действительно работают.

Количество колонок. Подписчики читают текст сверху вниз, поэтому наиболее удобно для них одноколоночное оформление письма: не приходится дополнительно «скакать» из угла в угол.

Если контент более сложный по оформлению, то можно использовать и двухколоночный вариант.

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

Например, двухколоночное письмо «Эльдорадо» легко адаптируется под мобильные методом перестроения:

Емейл-сетки. Правильное расположение товаров в сетке позволяет привлечь внимание подписчиков к самому важному элементу.

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

В письме Lamoda самый важный товар тот, который клиент положил в корзину, но не купил. К нему магазин и привлекает наибольшее внимание за счёт большего размера блока:

«Перевёрнутая пирамида». Ещё один метод расположения контента в письме. Суть — разместить блоки так, чтобы ненавязчиво привести подписчика к целевому действию (обычно к нажатию на кнопку с главным CTA) или привлечь внимание к самым важным элементам.

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

Если интересных предложений для подписчика несколько, то можно разместить друг за другом несколько «перевёрнутых пирамид».

Расстояния между объектами. Чтобы образовать смысловую конструкцию и дать понять, какой элемент с каким связан, располагайте связанные элементы ближе друг к другу.

Так подписчик сразу поймёт, какая кнопка к какому блоку относится или какая подпись какой картинке принадлежит и т. д.

«Воздух». Для упрощения восприятия контента при беглом просмотре можно воспользоваться техникой свободного пространства. Чаще эту технику называют просто «воздухом».

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

Придерживайтесь правила: одно письмо — одна мысль. Не забывайте про цель письма и размещайте в нём только ту информацию, которая работает строго на неё. Поэтому не пытайтесь запихать в емейл все супервыгодные акции, товары и мегаполезные статьи. К тому же так у вас получится длиннющее письмо, которая вряд ли дочитают до конца. А Gmail вообще обрезает слишком длинные и тяжёлые письма, которые весят более 100 Кбайт.

Избегайте сплошного текста — подписчикам будет очень сложно его воспринимать, в большинстве случаев они просто не решатся его читать.

Разбивайте текст на небольшие абзацы по аналогичному принципу: «один абзац = одна мысль». Такой текст интереснее читать, а глаза устают меньше. А значит, больше вероятность, что подписчик дочитает письмо.

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

В e-commerce нужно брать здесь и сейчас, не давайте подписчику поводов уйти, сделайте так, чтобы он быстро увидел всё самое важное и решился на покупку.

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

Отличный пример работы с контентом показывают письма от аптеки «Вита». Благодаря качественному форматированию большое количество текста не отпугивает. Заголовки, понятные ссылки, логичные отступы, кнопки, а также иллюстрации сразу дают понять, о чём речь в каждом блоке.

А у Felix Gray кардинально другой подход. Минимум текста позволяет быстрее принять целевое решение и повышает шансы на то, что письмо дочитают:

Касательно шрифтов, их видов и размеров — тоже не стоит злоупотреблять разнообразием. 1–2 вида и 2–3 размера для наборного текста будет достаточно.

Используйте для наборного текста безопасные стандартные веб-шрифты: Arial, Courier New, Times New Roman, Georgia, Trebuchet, Serif, Sans Serif и Verdana. Их точно поддерживают все почтовики. Нестандартные шрифты почтовики могут не поддерживать и в таком случае заменят их на стандартные. Это исказит отображение письма.

Зачастую бренды используют в коммуникациях свои фирменные шрифты, но для емейлов стоит делать исключения — чтобы всё написанное гарантированно отобразилось так, как и было задумано.

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

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

Один смысловой блок — одно изображение. Так вы не дадите вниманию подписчика рассеяться. Большое количество текста можно разбавлять иконками, микроиллюстрациями или как минимум правильным форматированием (подзаголовками, отступами и т. п.).

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

MyToys — магазин товаров для детей — часто прибегают к этому методу. При этом им всегда удаётся выбрать «правильные» изображения. Они используют жизненные непостановочные фото без обработки. Такие естественные изображения располагают читателя к себе, погружают в ощущение безмятежности, свойственное ребёнку на фото.

Помните: на изображениях стоит показывать эффект от приобретённого товара — положительные эмоции людей, счастье и уверенность. Такие иллюстрации больше воздействуют на пользователя, чем банальные изображения денег и других материальных благ. Они показывают читателю, что с ним случится после приобретения товара, как его жизнь изменится к лучшему, помогают представить это.

Ещё один секрет: фотографии, где персонаж смотрит в сторону CTA или любой важной для вас информации, помогают привлечь к внимание к этому элементу.

Используйте оригинальные интересные фото и иллюстрации, а не приевшиеся всем стоковые изображения. Так письмо будет выглядеть нешаблонно и более эффектно.

Больше всего привлекают внимание гиф-анимации. С их помощью можно:

Избегайте следующих ошибок при использовании изображений в письме:

Чтобы избежать размытости иллюстраций, делайте логотипы и иконки в макете векторными. Это позволит экспортировать их в любом размере без потери качества.

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

В Photoshop для этого нужно преобразовать большую картинку в смарт-объект, а затем уменьшить её до необходимого размера:

В Figma же достаточно просто использовать изображения, превышающие размер финальной картинки в 2 раза и более.

Элементы, добавленные «для красоты», перегружают макет и делают его слабым. Читателям сложно сфокусироваться на тексте. Качественное оформление контента этого не терпит! Поэтому сокращайте количество декоративных элементов, применение которых никак не обосновано.

Разрабатывая дизайн писем, специалисты часто копируют в него стилистику сайта — чтобы создать у пользователя ассоциацию с брендом. При этом в шапку письма переносят и телефон, и меню, и соцсети и т. д. Переизбыток элементов в шапке задерживает внимание подписчика и увеличивает путь к главному элементу письма.

Оставьте в шапке только самое необходимое, например логотип. Всё остальное, если очень нужно, можно разместить в футере.

Также учитывайте, что большое количество элементов в шапке будет сложнее перестраиваться при адаптации и в итоге займёт много места на столь важном первом экране при просмотре с мобильного.

Мой самый простой и очевидный совет: кнопки должны выглядеть как кнопки. Чтобы пользователи кликали, делайте кнопку заметной и не заставляйте их думать, что произойдёт после нажатия. Всё должно быть просто, понятно и привычно.

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

Первостепенные кнопки следует оформлять контрастным цветом — так они будут больше выделяться при беглом просмотре письма.

Минимизируйте количество кнопок. Исключение — когда это кнопки для заказа на товарных карточках:

Не располагайте две одинаково оформленные кнопки рядом в одном блоке: всегда давайте пользователю понять, какое действие и кнопка важнее. Исключение — CTA для выбора категории товаров. Например, как в письме от Express: есть категория товаров для женщин и для мужчин, нет принципиальной разницы между действиями, неважно, на какую кнопку нажмёт пользователь.

Что касается текста на кнопках, чем его меньше, тем лучше. Поэтому тут старайтесь быть максимально краткими и укладывайтесь в одно-три слова.

Помните: кнопка должна активировать целевое действие и соответствовать тому, что сказано в тексте. Поэтому пишите на ней только самое важное и мотивирующее к действию. Например, если вы рассказываете о товаре и его преимуществах, логично написать на кнопке банальное «Купить», «Добавить в корзину».

Старайтесь отразить на кнопках выгоду для пользователя, чтобы при беглом просмотре емейла взгляд цеплялся за такие элементы. Например, можно добавить цены — «Купить за 4999 руб.», «Купить за 99 руб.». Тут важно понимать, что всё относительно: указанная на кнопке цена 100 000 руб. за 50-дюймовый телевизор может оттолкнуть, а 20 000 руб. — наоборот, привлечь. Цена 1000 руб. за простой чехол для телефона тоже малопривлекательна, а вот 100–200 руб. — вполне может заинтересовать. Поэтому действуйте по ситуации и давайте пользователю как можно больше выгоды.

AMP позволяет верстать интерактивные письма — как мини-сайты.Благодаря этой технологии можно создавать слайдеры и показывать товары в разных вариациях и ракурсах, не делая при этом из письма огромное полотно.

Также стало реальным использовать в емейлах аккордеоны и лайтбоксы для просмотра информации о товарах:

А ещё прямо в письме теперь можно добавлять товары в корзину, корректировать заказы, читать отзывы и оставлять комментарии:

Интерактивность привлекает подписчиков и позволяет взаимодействовать с письмом как с веб-сайтом. Товарных AMP-писем с различными механиками мне найти, к сожалению, не удалось. Поэтому для общего понимания, как всё это работает, приведу примеры наших писем.

В 2019 году мы отправляли AMP-письмо, в котором были реализованы слайдер с аккордеоном и другие механики, а ещё пользователи могли оставлять комментарии онлайн:

Ещё более проработанную механику с онлайн-комментариями мы использовали в нашем новогоднем письме. Конверсия в оставление комментария составила 70%. Механика вовлекла подписчиков и напомнила им о том, что мы умеем создавать оригинальные и продвинутые письма.

Тёмная тема — относительно новое явление в емейл-маркетинге. Когда подписчик включает её на своём устройстве, цвета в письмах меняются — инвертируются. При этом разные почтовики и разные системы (iOS, MacOS, Android) по-разному изменяют цвета писем. Это создаёт дополнительные трудности разработчикам писем и маркетологам.

Если не предусмотреть эти моменты, в тёмной теме подписчик может увидеть слившийся с фоном логотип или «невырезанный» товар с раздражающим белым прямоугольником на фоне и много чего ещё.

В результате тестирований на письмах наших клиентов из сферы e-commerce мы выяснили, что в тёмной теме емейлы просматривают 17% мобильных пользователей и целых 45% пользователей айфонов. Так что не стоит её игнорировать.

Большинство почтовых клиентов в тёмной теме просто делают письмо тёмным и меняют в соответствии с этим цвета шрифтов. При этом изначально чёрное письмо не будет видоизменяться в тёмной теме. Но Gmail на iOS — исключение. В тёмной теме этот почтовик в любом случае инвертирует цвета вашего письма. То есть изначально чёрное письмо при включении тёмной темы он сделает белым.

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

Важно: изменяются только те цвета, которые прописаны в вёрстке письма кодом: цвета текста, фонов, кнопок (если они свёрстаны). Изображения (в том числе и тексты на них, написанные нестандартным шрифтом) и фоны, сделанные из изображений, остаются неизменными.

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

Что касается заголовков с нестандартным шрифтом, которые верстаются картинками, — можно добавлять им обводки цветом, совпадающим с фоном письма. В обычном режиме эти обводки будут невидимыми, а в тёмной теме они выделят заголовок контуром, который не сольётся с фоном письма. Либо такие заголовки можно просто делать цветом, который будет одинаково контрастно выглядеть и на светлом, и на тёмном фоне.

С логотипами история похожая. Лого изначально контрастного цвета, например красное, будет хорошо смотреться и на тёмном, и на светлом фоне.

Но как быть, например, с логотипом чёрного цвета? В большинстве случаев корпоративные гайдлайны запрещают добавлять к логотипу контурную обводку или тени. Тогда, чтобы лого не слилось с тёмным фоном, его можно разместить на невидимой в светлой теме подложке. Так вы не будете противоречить гайдлайну, а логотип будет хорошо выглядеть в любой теме. «Яндекс.Маркет», например, пользуются как раз этим приёмом:

Изображения товаров лучше вырезать из белого фона и использовать в вёрстке в png-формате. Так они будут одинаково хорошо выглядеть в любой теме и ни у каких изображений не вылезет неаккуратно вырезанных фоновых подложек:

В крайнем случае можно сделать у товаров подложки одинаковых размеров — чтобы в тёмной теме все карточки были ровными и аккуратными:

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

Медиазапросы — это некие «правила» оформления и адаптации письма, прописываемые уже на вёрстке. Они указывают, как отображать элементы письма в зависимости от размеров экрана, на котором оно открыто. Например, через медиазапросы можно указать, чтобы в десктопной версии письма текст показывался с выравниванием по левому краю, а на мобильном телефоне — с выравниванием по центру.

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

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

Проектируйте письмо так, чтобы и без применения медиазапросов оно хорошо адаптировалось стандартными методами — масштабированием, перестроением, отсечением. Старайтесь не скрывать «лишние» элементы в мобильной версии, как в примерах ниже, и сохранять всё содержимое из десктопной.

Грамотное оформление писем поможет достичь ваших целей. Смотрите на дизайн не только с точки зрения красивого визуала, но и с точки зрения маркетинга. Узнать ещё больше о том, как дизайн помогает достичь целей емейл-рассылки, вы можете в нашей методичке. В ней собрано много примеров писем и полезных советов.

Впервые было опубликовано в блоге RetailCRM.