Лучшие практики email-дизайна: 16 ключевых моментов, о которых необходимо знать

Дата публикации: 20.11.2023

 

Email-дизайн — это одна из важнейших составляющих маркетинговой деятельности любой компании. Вне зависимости от цели, тестируете ли вы новый шаблон письма или же пробуете увеличить конверсию, используя инструменты конверсионного дизайна (Conversion Centered Design или  сокращенно CCD), ваши письма должны быть как красивыми, так и эффективными.

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

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

 

 

Какое значение имеет дизайн в ваших email-кампаниях?

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

 

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

 

Email-дизайн важен, так как в первую очередь он влияет на впечатления читателей, а от впечатлений зависят и вовлеченность, и желание купить, и лояльность клиентов в целом.

 

 

Ключевые элементы email-дизайна 

Дизайн охватывает все визуальные элементы письма без исключений:

 

• Хедер: визуальное вступление к письму, часто содержащее логотип компании;

• Основной контент: шрифт и варианты расположения элементов;

• Призыв к действию (CTA): размеры, формы, цвета и расположение кнопок в письме;

• Изображения и другие вложения: какие вложения вы выбираете, как их оформляете и где размещаете в письме;

• Футер: ссылки на социальные сети, кнопка с возможностью отказаться от подписки и другая юридическая информация в нижней части сообщения;

• Варианты взаимодействия: использование и дизайн элементов взаимодействия (опросы,  аккордеоны и т.д.); 

• Удобство использования для мобильных устройств: как выглядит письмо на мобильных устройствах.

 

 

16 лучших практик эффективного дизайна электронных писем для email-маркетинга

Email-дизайн зависит от множества факторов, а тенденции имеют свойство постоянно изменяться, поэтому предлагаем не затягивать и сразу перейти к рекомендациям.

 

 

Совет 1: Создайте модульную дизайн-систему с общими используемыми элементами

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

 

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

 

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

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

 

• Есть ли разделы, которые повторяются во всех письмах? Если это, к примеру, футер, создайте отдельные элементы, которые будут его формировать, или поместите его в систему целиком.

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

• Будут ли ваши письма содержать видео? Если да, то создайте библиотеку с ними.

• Будете ли вы проводить опросы в письмах? Если да, определитесь с инструментами, которые будете использовать для их создания.

 

 

“Мы работаем так: я задаю как можно больше вопросов по проекту и пытаюсь оценить его масштаб, чтобы понять, какой контент стоит использовать в письме, какие запросы перед нами. Особенно если это новые шаблоны писем, я хочу быть уверена, что знаю все подробности перед началом работы". - Ханна Тайнер, UX-дизайнер отдела маркетинга в Litmus

 

 

Совет 2: Используйте адаптивный дизайн

Адаптивный дизайн писем потому и имеет такое название, т.к. адаптируется под устройство, на котором пользователь открывает письмо. В идеале, дизайн письма должен хорошо выглядеть на всех платформах. Для создания адаптивного дизайна можно использовать медиа-запросы CSS. Они определяют размер экрана и соответствующим образом изменяют дизайн под него. Вы можете самостоятельно создавать такие медиа-атрибуты для каждого письма или же использовать готовые адаптивные шаблоны, которые можно найти в свободном доступе в интернете.

 

Совет 3: Не будьте противоречивыми, придерживайтесь одного стиля

Старайтесь соответствовать уже используемому стилю бренда. Определите общие стилевые правила и поместите их в гайд. Задайте вопросы, соответствуют ли элементы писем общему тону и фирменному стилю бренда? Соблюдаются ли при этом принципы построения письма? Стоит уделить внимание единообразию шаблонов, чтобы не вызывать противоречий.

 

Совет 4: Создайте гибкий фреймворк

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

 

Пример письма, построенного с использованием гибкого фреймворка

 

 

Совет 5: Обращайте внимание на ограничения

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

 

UX-дизайнер отдела маркетинга, Ханна Тайнер, делится:

 

"В наши письма о предстоящих мероприятиях получается добавить только 3-5 блоков, чтобы письмо оставалось читабельным. Поэтому я возражаю, если мы пытаемся включить больше 5. В таком случае стоит продумать более динамичный способ, как их показать, а если не получается, то отложить их до следующего письма”. 

 

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

 

Совет 6: Не пренебрегайте UX-дизайном

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

 

Ханна Тайнер отмечает:

 

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

 

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

 

Совет 7: Сочетайте призывы к действию (CTA) и цели письма

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

 

Задайте себе вопрос: что самое важное необходимо донести до адресата? Убедитесь, что у вас есть четкое понимание цели письма. Так вы сможете определить и использовать именно те концепции дизайна, которые будут этой цели соответствовать.

 

Сочетайте инструменты дизайна и цели осознанно - и у вас получится добиться наилучших результатов.

 

Сочетание цели письма и СТА на примере Dunkin Donuts

 

 

Совет 8: Вносите правки в письма по ходу работы

Вы наверняка слышали фразу “единственная постоянная вещь - это перемены”. Это относится и к email-дизайну в том числе. Рекомендуем разрабатывать дизайн с учетом того, что правки будут появляться регулярно. А при разработке попытайтесь проанализировать, где можно поэкспериментировать и что-то добавить, а где лучше перестраховаться и наоборот что-то убрать.

 

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

 

А уже после этого займитесь добавлением “приятных мелочей”. Уже тут стоит подумать о том, как можно удивить получателей, что добавить в виде элемента сюрприза и т.д.

 

Совет 9: Фокусируйтесь на простоте, избегайте визуального шума

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

 

Совет 10: Аккуратно используйте визуал

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

 

• Используйте не просто видео, а видеоизображения, чтобы пользователь мог просмотреть их на всех платформах;

• Используйте GIF-файлы, чтобы привлечь внимание читателя (но в небольшом количестве);

• Избегайте писем, состоящих только из изображений;

• Добавьте фактурности письму, используя фоновые изображения.

 

Это письмо Outdoorplay - отличный пример простого (но визуально привлекательного) письма.

 

 

Совет 11: Создайте рабочий макет

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

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

 

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

 

Совет 12: Уделите внимание типографике и шрифтам

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

 

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

• Веб-шрифты создаются из файлов, которые размещены на вашем сервере или на внешнем сервере (к примеру, Google или Adobe). Такие шрифты, в отличие от безопасных, обеспечивают большую гибкость в оформлении. Но при этом существует большая вероятность того, что они будут отображаться на устройствах получателей не совсем  так, как это было задумано в дизайне.

 

Совет 13: Добавляйте ALT-описания к изображениям

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

 

Пример использования атрибута ATL в Recreation.gov

 

 

Совет 14: Используйте динамический контент

Динамический контент (текст и визуальные эффекты), который будет самостоятельно подстраиваться под размер экрана, позволяет отправлять персонализированные письма без необходимости разрабатывать большое количество версий под разные девайсы. Рекомендуем использовать динамический контент во всех письмах. Попробуйте, к примеру, добавить динамические изображения товаров в письма о брошенной корзине.

 

Использование динамического контента в письмах на примере PrettyLittleThing

 

 

Совет 15: Добавьте заметную кнопку отказа от подписки

Кнопка отказа от подписки размещается в футере письма, но не стоит делать ее еле заметной. Убедитесь, что ее легко увидеть и что она кликабельна. А на странице отказа от подписки рекомендуем добавить настройки рассылки, чтобы пользователь мог выбрать, какие письма он бы хотел получать, а от каких предпочел бы отказаться.

 

Совет 16: Оптимизируйте изображения под темный режим

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

 

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

 

 

Использование аналитики для email-дизайна

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

 

Уровень email-вовлеченности

• Если вовлеченность в длинных письмах падает, можно попробовать сократить содержание или изменить элементы дизайна;

• Если вы наблюдаете высокую вовлеченность в письмах с изображениями, стоит инвестировать средства в создание иллюстраций и фотографий для будущих email-кампаний;

• Если в транзакционных письмах (например, о сбросе пароля) время вовлеченности низкое, а количество кликов наоборот высокое, значит, ваше письмо хорошо справляется со своей задачей;

• Если в маркетинговых письмах время вовлеченности высокое, а вот количество кликов низкое, стоит поработать с кнопками CTA, сделав их визуально более заметными.

 

Знание особенностей почтовых клиентов

• Если большинство ваших подписчиков открывают письма в десктопных версиях Microsoft Outlook, вам, возможно, стоит оформлять письма более традиционным образом, используя условные комментарии Microsoft (MSO);

• Если же большинство подписчиков открывают почту в Apple Mail (веб, десктоп или мобильных версиях), можно использовать движок WebKit.

Тестируйте и оптимизируйте

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