Лого vc.ru

Тренды в дизайне email-рассылок в 2017 году

Тренды в дизайне email-рассылок в 2017 году

Команда дизайн-студии AIC изучила исследования аналитиков и мнения специалистов email-маркетинга и написала для vc.ru колонку с трендами в дизайне email-рассылок в 2017 году.

Поделиться

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

Тренды 2016 года, которые будут жить в 2017 году

1. Адаптивный дизайн

Смартфоны победили десктоп. Согласно исследованиям Litmus, 55% писем открывают на мобильных устройствах. В 2017 году тенденция сохранится, поэтому самое время проверить свои рассылки на адаптивность. Руководствуйтесь основными принципами:

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

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

Разные CTA для мобильных и десктопа

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

Адаптивное меню

На что обращать внимание

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

2. Интерактивность

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

Интерактивные элементы работают на CSS3, а спроектированы могут быть, например, в Adobe Experience Design или Sparkbox. Задача таких инструментов — помочь сосредоточиться на контенте, а не на вёрстке.

На что обращать внимание

Сегодня существует множество почтовых клиентов — десктопные приложения (например, Microsoft Outlook, AOL, Thunderbird), веб-сервисы (Gmail, Mail.Ru Group), мобильные клиенты. В зависимости от того, какие технологии они используют, ваши дизайнерские изыскания в виде CSS-анимации будут работать или не работать в разных клиентах. Стоит предусматривать упрощенные варианты отдельных блоков и прописывать их в media queries.

К слову, в сентябре 2016-го Gmail, наконец, объявил о том, что клиент начинает поддерживать адаптивную верстку писем. Это большой шаг для индустрии почтовых клиентов в целом — переход на адаптивную верстку рассылок станет еще более массовым явлением.

3. GIF-анимация

Анимированные изображения — ещё один способ «оживить» рассылки. У них есть одно важное преимущество — простота производства. В то же время гифки способны наглядно продемонстрировать продукт в действии — поэтому, несмотря на то, что поклонники CSS предрекают скорейшую гибель GIF-анимации, та будет жить и процветать еще долго.

На что обращать внимание

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

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

4. Векторные изображения

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

На что обращать внимание

Пара полезных JS-библиотек для работы с SVG-анимацией: SnapSVG и GreenSock GSAP.

5. Покупка в письме

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

Тренды в email-рассылках 2017 года

1. Видео

Будущее контент-маркетинга за видео — пишет газета The Guardian. По прогнозам Cisco, к следующему году видео охватит 69% всего интернет-трафика. Оно выйдет за пределы YouTube и будет активно применять в email-маркетинге.

Компании, уже внедрившие видео в свои рассылки, отмечают их эффективность:

  • Кликабельность увеличивается на 55%.
  • Пользователя тратят на просмотр письма на 44% времени больше, чем обычно.
  • На 41% увеличиваются расшаривания и публикации в социальных сетях.
  • Конверсия растёт на 24%, ROI — на 20%.
  • Средний чек увеличивается на 14%.

Несмотря на эти преимущества, видео редко встраивается в письма (обычно предпочитают давать ссылку на видеохостинг).

На деле вставить видео в рассылку нетрудно — большинство сервисов поддерживает вставку роликов по ссылке (тот же Mailchimp). Видео может быть и фоном для отдельных элементов или всего макета сразу. Для этого есть онлайн-редактор Mailigen.

2. Галереи изображений

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

3. Гибридная верстка рассылок

Технология hybrid coding вместо того, чтобы полагаться на media queries, помогает создавать макеты, адаптивные по умолчанию. Технология совмещает принципы статичной и «резиновой» верстки, что позволяет ей корректно подстраиваться под размеры экрана даже у пользователей Microsoft Outlook.

4. Яркие цветовые схемы

Общие тенденции веб-дизайна найдут отражение в рассылках. Дуплекс потеснит полноцветные изображения (мы писали об этом стиле в блоге), а общее оформление писем станет ярким — как в «Мемфисе».

Насыщенные цвета помогают лучше структурировать контент.

5. Типографика и навигация

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

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

На что обращать внимание

Текст — главный инструмент в рассылках. Согласно исследованиям, 43% пользователей не используют просмотр изображений в почтовых программах. Чтобы выделить ключевые сообщения, применяйте стили для текста — цвет, начертание и размер кегля. Сам текст набирайте веб-шрифтами или подгружайте нужные с Google Web Fonts.

Как сделать макет plain-text динамичным? Используйте отступы. Они делают текст удобным для чтения, поэтому пользователи изучают такие письма тщательнее — это подтверждает исследование по психологии.

6. Интеграция с социальными сетями

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

Исследование Litmus показало: интеграция с Twitter увеличивает вовлечение. Пользователи твитят с хештегом компании, чтобы увидеть свои посты в рассылке.

7. Мини-игры в рассылках

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

Мы всё уже привыкли к тому, что рассылки стали интерактивными — опросы, товарные карточки, просто анимированные элементы. В скором времени от email-маркетинга стоит ожидать более смелых экспериментов по вовлечению пользователей — например, в письма будут интегрировать небольшие игры — например, с механикой point-and-click.

Почему рассылки не умрут в 2017 году

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

— Пол Бакхейт, программист и ведущий разработчик Google

Смерть email-маркетингу предрекали много раз — от SMS, социальных сетей и даже приложений для совместной работы. Однако маркетологи продолжают использовать рассылки. Эксперты дают этому три объяснения:

  • Персонализация. Электронная почта — это канал коммуникации, где содержимое можно адаптировать для каждого получателя в отдельности.
  • Окупаемость. Рассылки — один из самых доступных инструментов маркетинга. ROI может достигать 4300%.
  • Измеримость. Эффективность рассылок легко измерить, при этом письма можно оптимизировать и улучшать результаты с каждой отправкой.

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Статьи по теме
«Мемфис» в веб-дизайне: как «яркий» тренд из 80-х возвращается в 2016 году10 октября 2016, 12:26
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Я верю, что в наступающем году авторы рассылок наконец научатся не выглядеть идиотами и в предпросмотре первых строк писем не будет отображаться "Не отображаются картинки? Перейти на сайт для промотра полной версии." и т.п. =)

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

Как оно реально выходит, тут недавно хорошо откомментировали в частности и в общем под феерической статьёй «2017 год станет годом "интерактивной" электронной почты»: vc.ru/p/interactive-email#comment359492

0

Всё так, читал и не понимал, о каких слайдерах и джс-библиотеках для работы с вектором речь

0

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

Если подписан на 50+ сайтов, тогда да, засоряют.

На деле вставить видео в рассылку нетрудно
- вставить нетрудно, только вот отображается корректно не везде

накой делать слайдер в рассылках? CTA сделать хороший - и пусть на сайт переходят, там смотрят..

0

Круто! СПасибо за обзор.

0

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

0

а векторные изображения уже можно использовать при верстке писем разве? Вроде как рекомендовался растр всегда из-за совместимости.

Хорошая статья, но я всегда улыбаюсь подобным утверждениям "Конверсия растёт на 24%, ROI — на 20%." :))))

А суть неприметно кроется в пункте 5:
------------------------------
«Текст — главный инструмент в рассылках. Согласно исследованиям, 43% пользователей не используют просмотр изображений в почтовых программах.»
------------------------------
То есть, по словам самих авторов, в 57% случаев вся красота, живописуемая в остальных пунктах, идёт строго лесом.

0

А вот свежачок по теме!
=)

Какие тренды? Вы видели акутальную конверсию с рассылки?

0
Оставить комментарий

Поддерживается YouTube, Vimeo и Coub

Сейчас обсуждают
Victoria Vasilieva

Фотографии рабочих мест это просто праздник какой-то!

Сотрудников ищут Beta Digital Production, Plarium, «Додо Пицца» и «Е заем»
0
Artem Makeenok
JAMI

Очень крутая статья. В принципе, все эти идеи витают в воздухе - zero UI и общие тенденции в UI/UX со времен Стива Джобса примерно в этом направлении и движутся, с разной степенью осознанности.
Кстати, часть про чат-ботов очень на злобу дня. По сути, чат-бот - это обычный интерфейс, который (пока что) в большинстве случаев менее удобен, чем классические решения. Зачем этот интерфейс пытаются прикрутить везде и всюду, зачастую делая путь пользователя к получению услуги более длинным - большой вопрос.

Мнение: Пользовательский интерфейс — это компенсация отсутствия телепатии
0
Danil Dellos

Кто-нибудь знает что-то про компанию на IGG от фирмы Crazybaby - внутриканальные беспроводные наушники Air? Пока все выглядит вполне реально, но гарантий нет конечно никаких. Денег уже собрали много они

Смерть стартапа: Как создатели «умного» кольца BioRing собрали $460 тысяч на краудфандинге и исчезли
0
Kirill Pankin

А работать кто будет?

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Евгений Григорьев
Esprit Games

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

www.kickstarter.com/projects/1041610927/znaps-the-9-magnetic-adapter-for-your-mobile-devic?ref=discovery

Смерть стартапа: Как создатели «умного» кольца BioRing собрали $460 тысяч на краудфандинге и исчезли
0
Показать еще