Курс диджитал-дизайна
Содержание

    Как сделать емейл привлекательнее

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

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

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

    53% электронных писем открывают на мобильных устройствах71,6% пользователей удаляют емейлы, если они плохо отображаются на смартфоне.

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

    Существуют 3 способа адаптации писем, которые можно комбинировать между собой:

    • Масштабирование;
    • Отсечение;
    • Перестроение.

    Масштабирование

    Элементы письма: изображения, кнопки и т. д. — сжимаются и подстраиваются под ширину контента.

    Пример адаптации методом масштабирования

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

    Отсечение

    Часть элемента или фона отсекается и становится невидимой для пользователя.

    Пример адаптации методом отсечения

    Вся важная информация и инфографика должны располагаться на одной из половин или по центру письма и умещаться в 300 px.

    Перестроение

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

    Пример адаптации методом перестроения

    Следите за тем, чтобы блоки не пересекались по вертикали.

    Комбинированный способ

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

    Два блока перестроились, а всё лишнее отсеклось

    Помните про визуальную иерархию

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

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

    Например, пробегите взглядом по письму «Райффайзенбанка». Вам сразу станет понятно, о чём в нём речь:

    Из главного баннера мы понимаем, что содержание письма актуально для февраля. После главного баннера взгляд падает на изображение туфельки и крупный текст «ставка по кредиту 11,9%». Далее мы видим крупные логотипы партнёров банка и скидки от них. Структура письма ведёт нас к последней кнопке «Все предложения».

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

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

    Емейл-сетки

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

    Например, товарные и текстовые блоки разных размеров автоматически создают иерархию в письме. В самых больших блоках размещается самая важная информация, категория товаров или сам товар:

    Первое, на что обратит внимание подписчик в этом письме, — баннер и ячейки, которые идут после него. Чтобы после них внимание читателя не рассеялось, добавьте блоки разных размеров. Крупные и яркие объекты всегда притягивают внимание. Если их равномерно чередовать с небольшими блоками, ваши подписчики просмотрят письмо до конца.

    «Техпорт»: емейл-сетка с блоками разных размеров

    Следующий вариант емейл-сетки — «перевёрнутая пирамида». Она направляет внимание читателя вниз, к самому важному — CTA:

    Такая сетка состоит из блока с крупным заголовком, который передаёт основное сообщение рассылки, товара или услуги с пояснением и кнопки с призывом к действию.

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

    Естественный порядок чтения писем

    Большинство людей просматривают текст по траектории, которая напоминает букву F.

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

    • Располагайте самую важную или полезную информацию в первых двух абзацах.
    • Используйте чёткую систему заголовков. Она должна бросаться в глаза и отражать содержание всего письма.
    • Делите контент письма на блоки. Подписчикам будет легче воспринимать информацию дробно: один абзац — одна мысль. Но не перестарайтесь: не стоит выделять в отдельный абзац каждое предложение.
    • Сделайте ссылки частью текста, избегайте универсальных слов: «здесь», «больше», «тут» и т. д. Подписчик должен понимать, куда он попадёт, если кликнет по ссылке.
    • Используйте списки и выделяйте их маркерами или цифрами.

    Используйте свободное пространство

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

    Существует два типа свободного пространства:

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

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

    • Пассивное пустое пространство — то, которого нельзя избежать: расстояние между заголовком и текстом, пробелы между словами, промежутки между изображениями и т. д.

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

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

    Влияйте на эмоции подписчиков с помощью цвета

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

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

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

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

    Интернет-магазин техники «Техпорт» учитывает цвета товаров в письме. Зелёная мебель вызывает чувство спокойствия. На её фоне красный тостер становится элементом неожиданности и привлекает внимание. На него хочется кликнуть и перейти на сайт.

    Подберите правильные изображения

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

    Как правильно подобрать изображение для кампаний бренда:

    Соответствуйте общей концепции бренда

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

    Вызывайте эмоции с помощью фотографий

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

    «Райффайзенбанк» — отличный пример компании, которая использует эмоциональные образы.

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

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

    Используйте фотографии людей

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

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

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

    Кассир смотрит в сторону CTA с оформлением предзаказа

    Не переборщите со стоковыми изображениями

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

    Из нескольких стоковых фотографий можно собрать уникальный баннер. Например:

    Выделяйтесь с помощью концептуальных изображений

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

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

    Письмо Paloma Wool

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

    В письме только одно предложение с описанием концепции. Основное содержание передают три лаконичных изображения.

    Не переусердствуйте с количеством изображений

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

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

    Пример письма, которое полностью состоит из заблокированных изображений

    Чтобы избежать такого конфуза, всегда добавляйте к изображению ALT-описание.

    Применяйте гифки

    Человеческий глаз быстрее всего реагирует на движение, поэтому анимация в письме — хороший способ привлечь внимание подписчика. Гифки увеличивают кликабельность на 26%. А чем больше заинтересованных подписчиков, тем больше вероятность, что после перехода на сайт они что-нибудь купят.

    Гифки — универсальное решение для многих проблем:

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

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

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

    Продумайте CTA-кнопку

    CTA-кнопка — такой же важный элемент письма, как текст и изображения.
    Кнопка должна гармонично вписываться в оформление письма: привлекать к себе внимание, но при этом не выбиваться из общего стиля рассылки.

    Этапы создания кнопки в письме:

    Выберите место, где будет располагаться кнопка

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

    Определитесь с размером и цветом

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

    Расставьте приоритеты

    Если вы используете несколько CTA, расставьте между ними приоритеты. Важность элемента выделяют по-разному, но чаще всего — с помощью цвета и размера.

    Более контрастные оттенки относительно основного цвета повышают важность CTA, менее контрастные — понижают. Аналогично с размером: важные кнопки большие, менее важные — поменьше.

    Напишите на кнопке убедительный текст

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

    Вы можете использовать на кнопке короткий оригинальный текст, например продолжающий текст письма:

    Креативный подход предполагает, что вы знаете вкусы аудитории и уверены, что она оценит такой CTA.

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

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

    Увеличим продажи
    С помощью правильного емейл-маркетинга
    Поделиться статьёй
    Подписаться на рассылку