Сыграть в ящик: важные рекомендации по визуальному стилю email-рассылок

Прочтёте за 6 мин.

Основные требования и чек-лист

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

Biz360.ru

Основные проблемы email-рассылок

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

Если решить эти проблемы, письмо станет удобно читать и оно будет отображается в почтовике корректно.

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

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

Структура

Размер письма. Оптимальной шириной всё ещё остается 600 пикселей. С таким размером письмо будет отображаться корректно во всех почтовиках: во всю ширину и без горизонтального скролла.

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

Biz360.ru

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

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

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

Biz360.ru

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

  • Важно! Это не касается тех ситуаций, когда вы призываете читателя к действию, на которое с ходу тяжело решиться. В этом случае выгоднее расположить кнопку внизу, после всех объяснений о выгоде продукта.

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

  • от 1 до 2 колонок - хорошо;

  • от 3 до 4 колонок - нормально;

  • 5 и более - нельзя, так как ширина колонок станет настолько маленькой, что с высокой вероятностью ваш контент станет просто нечитабельным.

Biz360.ru

Типографика

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

  • Arial,

  • Helvetica,

  • Verdana,

  • Tahoma,

  • Trebuchet MS,

  • Comic Sans MS,

  • Courier New,

  • Lucida Console,

  • Lucida Grande,

  • Times New Roman,

  • Georgia.

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

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

Biz360.ru

Расстояние между объектами поможет правильно распорядиться вниманием читателя. Чтобы создать письмо комфортное для чтения, достаточно помнить о принципе «внутреннего и внешнего». Если вкратце, то внутренние расстояния одного элемента должны быть меньше внешних: например, межбуквенное расстояние должно быть меньше межсловного пробела.

Biz360.ru

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

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

  • Выражайте свою мысль кратко: F-паттерн характерен только для объёмных статей и писем. Так вы увеличиваете вероятность быть понятным.

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

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

  • Используйте форматирование ссылок с выгодой для себя и убедитесь, что они содержат информативные слова: например, в промо-рассылке с товарами используйте CTA-элемент с текстом «Посмотреть весь ассортимент» вместо общих «Перейти» и «Нажмите здесь».

Biz360.ru

Изображения

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

Biz360.ru

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

Biz360.ru

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

Мы обычно комбинируем инструменты - после сжатия в Photoshop картинку можно дополнительно прогнать через один из сервисов и ужать её ещё на 15-50%, не сильно потеряв в качестве. Визуально баннеры весом 50 kb и 20 kb не отличаются, но скорость загрузки у сжатого баннера будет выше в два раза

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

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

Визуальный стиль

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

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

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

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

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

  • Подберите цвета: их желательно использовать не более трёх, плюс нейтральные.

  • Выберите шрифтовую пару, которая будет передавать «характер» вашего бренда. Например, для новостных ресурсов или бренда модной одежды будет органично сочетание serif-шрифта для заголовков и sans-serif для абзацного текста. Но для магазина детских игрушек это будет выглядеть странно.

  • Определите кегль для заголовков каждого уровня и акцентного выделения: цитаты и ссылки.

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

  • По правилу «внутреннего и внешнего» определите отступы под все ситуации, которые будут встречаться в вашей рассылке: отступ от картинки и до подписи к ней, отступ от заголовка и до подзаголовка, отступы вокруг CTA, интерлиньяж. Всё пустое пространство в вашем письме должно быть определено конкретными значениями, а не спонтанно.

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

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

Посмотрите на взаимодействие объектов в вашей рассылке друг с другом. Чтобы прийти к визуальному решению, ответьте на вопрос: «В каком месте и в какой форме использовать каждый элемент»?

Краткий чек-лист для оформления рассылки

  1. Ширина письма не должна превышать 600px, высота может быть любой.

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

  3. Собирайте макет по модульной сетке - она облегчит вёрстку и сделает письмо адаптивным.

  4. Количество колонок в письме - не больше четырех.

  5. Выберите для вашей рассылки пару из безопасных шрифтов для заголовка и абзацного текста. Нестандартные шрифты используйте только в картинках.

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

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

  8. Типографика в письме важнее графических элементов.

  9. Текста меньше 11px в письме быть не должно.

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

  11. Уменьшайте вес изображений и гифок, с помощью редактора, в котором работаете или специальных сайтов. Вес гифок не должен превышать 1Мб.

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

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

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

  15. Письмо должно делиться на горизонтальные блоки общей шириной всего макета.

  16. Элементы, с которыми можно совершать действия не должны быть меньше, чем 50×50px.

Правила и советы выше - просто рекомендации по созданию рассылки. Некоторые из них можно (и иногда даже нужно) нарушать, в зависимости от задач.

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

Biz360.ru


Читайте также:  

15 причин, почему вашу email-рассылку никто не читает.
Стыд и спам: как мотивировать подписчика открыть рассылку.
Email-маркетинг живее всех живых: как устроен сервис электронных рассылок.

05 июня 2019

Комментарии

0
Войдите через аккаунт социальной сети:
  • Прокомментируйте первым.

Это ответ на комментарий (отмена - x)
  • Задайте вопрос
    профи

    Наши эксперты ответят на любой вопрос

    Задать вопрос
    Ваш вопрос отправлен

    Ваш вопрос

    Введите Имя
    Введите E-mail
    Отправить Очистить
Возможно, вас заинтересуют другие наши материалы
Идёт загрузка материалов