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

Приёмы оформления писем, которые вовлекают пользователей и мотивируют к покупке

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

Руководитель отдела дизайна агентства CRM-маркетинга EMX Юрий Гусев делится своим опытом по оформлению email-рассылок для eCommerce.

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

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

Всегда держите в голове цель письма — дизайн должен работать именно на неё. У писем с товарами обычно цель продать — напрямую (через проморассылки) или более нативно (через контентные рассылки).

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

Структура письма плавно и аккуратно подводит читателя к целевой кнопке

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

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

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

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

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

Самые важные блоки можно выделить с помощью большего размера или контрастного цвета
Самые важные блоки можно выделить с помощью большего размера или контрастного цвета
Самые важные блоки можно выделить с помощью большего размера или контрастного цвета

Также приоритетный товар можно расположить в самом верху списка — так вы тоже сделаете на нём акцент.

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

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

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

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

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

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

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

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

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

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

Текст: его пластика, оформление и шрифты должны быть понятными

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 В письме Техпорт сочетаются стандартный и нестандартный шрифты
В письме Техпорт сочетаются стандартный и нестандартный шрифты
В письме Техпорт сочетаются стандартный и нестандартный шрифты

Иллюстрации: их вид и содержание соответствуют теме письма

Все изображения должны быть релевантны смыслу письма, они должны помогать структурировать информацию и делать её понятнее.

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

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

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

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

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

Магазин divan.ru использует в рассылке изображения диванов в оригинальных интерьерах
Магазин divan.ru использует в рассылке изображения диванов в оригинальных интерьерах
Магазин divan.ru использует в рассылке изображения диванов в оригинальных интерьерах

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

  • показать таймер обратного отсчёта и тем самым поторопить подписчика сделать покупку
  • вызвать любопытство и интерес
  • показать в одном блоке больше вариаций товара
🤩 Как оформить письмо с товарами, чтобы оно продавало

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

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

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

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

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

Ретина-адаптация поможет избежать «мыльных» картинок

Важно, чтобы изображения выглядели качественными на всех экранах, в том числе на ретина-экранах (с повышенной плотностью пикселей). «Мыльные» изображения сразу портят впечатление о письме.
🤩 Как оформить письмо с товарами, чтобы оно продавало

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

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

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

Украшения решают конкретную задачу

Добавляя в дизайн какие-либо элементы, десять раз подумайте, действительно ли они нужны, не будут ли они отвлекать от сути.

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

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

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

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

На примере слева используется минималистичная шапка, которая не отвлекает внимание, а в примере справа — шапка перегружена
На примере слева используется минималистичная шапка, которая не отвлекает внимание, а в примере справа — шапка перегружена
На примере слева используется минималистичная шапка, которая не отвлекает внимание, а в примере справа — шапка перегружена

Кнопки чётко отражают целевое действие

Подписчик должен понимать, что от него хотят и что последует за нажатием на кнопку.

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

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

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

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

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

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

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

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

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

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

🚀 Автоматизировать работу интернет-магазина в RetailCRM →

AMP-технология позволяет верстать интерактивные письма — как мини-сайты

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

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

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

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

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

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

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

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

Тёмная тема меняет цвет письма — важно это учитывать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Медиазапросы указывают, как отображать элементы письма на телефоне и компьютере

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

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

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

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

Закрепим

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

2. Разбивайте текст на абзацы, ставьте заголовки и подзаголовки, чтобы при беглом прочтении клиент видел ценность письма. Также стоит использовать стандартные шрифты такие, как Arial, а фирменные нестандартные шрифты верстайте картинкой.

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

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

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

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

7. AMP-технологии позволяют создавать слайдеры и показывать товары в разных вариациях и ракурсах, а также добавлять товары в корзину прямо из письма. Такие механики помогают повысить вовлечённость подписчиков. Например, мы использовали подобную механику в нашем новогоднем письме — конверсия в оставление комментария составила 70%.

8. Чтобы письмо одинаково хорошо смотрелось и в светлой, и тёмной теме, учитывайте инверсию цветов в разных почтовиках, делайте одинаковыми подложки товаров или используйте png-картинки с прозрачным фоном.

9. С помощью медиазапросов можно указывать своё выравнивание на разных экранах или скрывать некоторые элементы на мобильной версии. Но Яндекс.Почта их пока не поддерживает.

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

Источник материала: https://www.retailcrm.ru/blog/emails-for-ecommerce