Осознанный дизайн емейл-рассылок: UX и UI в действии на примере письма Wildberries
К созданию емейл-рассылок нужно подходить осознанно. Это касается не только контента, но и дизайна. Он должен быть одновременно и привлекательным, и удобным для восприятия.
Как-то раз я разбирала почту и наткнулась на письмо от Wildberries. Заголовок на баннере сулил грандиозные скидки и обещал идеи того, как провести выходной. Полезные советы компактно расположились в начале письма, но потом маркетологи, видимо, решили, что этого недостаточно, и добавили баннеров. Не зря же дизайнер старался!
Тут у меня сработала профессиональная деформация. Какие хорошие идеи стоит позаимствовать из этого письма? Что можно переработать? Как сделать рассылку лучше с точки зрения UX (пользовательского опыта) и UI (пользовательского интерфейса)? Обо всём этом я и расскажу в статье.
Подход «mobile first»
По данным диджитал-агентства R:TA, больше половины пользователей просматривают электронную почту с телефона. Иными словами, подписчикам должно быть одинаково удобно читать письма и на компьютере, и на мобильном устройстве.
Wildberries следует обратить на это внимание: сейчас письмо полностью масштабируется на мобильных устройствах и мелкие элементы становятся нечитабельными. Кроме того, оно перенасыщено информацией, в нём не хватает «воздуха». Стоит добавить отступы между разделами, заголовками, подзаголовками и основным текстом, чтобы читать рассылку было комфортнее.
Контент
В этом письме Wildberries сплёл воедино сразу два типа рассылок: контентную и коммерческую.
- В контентных емейлах содержится полезная или развлекательная информация: советы, статьи, подборки идей. Цель таких рассылок — привлечь внимание потребителей к компании, напомнить им о себе, завоевать доверие аудитории.
- Задача коммерческих рассылок — побудить подписчика к действию: перейти на нужную страницу или заказать товар. Это могут быть сообщения, посвящённые акциям или новым поступлениям, письма с эксклюзивными промокодами на продукцию и так далее.
Однако нужно помнить: коммерческие рассылки в чистом виде — опасная затея, ведь они часто попадают в спам. Письма читают живые люди, которым навязчивая реклама быстро надоедает. Вместо этого стоит использовать комбинированный подход: разбавлять коммерческие предложения полезным контентом. Wildberries так и поступил, но письмо получилось слишком длинным. С большой вероятностью подписчики не досмотрят его до конца. Поэтому я разделила бы его на две отдельные рассылки:
- идеи о том, как провести воскресенье;
- подборка акций с текстовыми подводками.
Cтиль
Стилизация в письме так себе: начать хотя бы с того, что оно целиком собрано из картинок. Даже тексты в нем «рисованные». Отключаем изображения — и пользователь не увидит ничего, кроме меню и футера. А в некоторых почтовых клиентах они и вовсе отключены по умолчанию.
Не забывайте, что для писем следует выбирать стандартные шрифты, которые работают во всех почтовых клиентах. Это Arial, Comic Sans MS, Courier New, Georgia, Impact, Tahoma, Times New Roman, Trebuchet MS и Verdana. Фирменные шрифты можно использовать на баннерах и кнопках, если оформить их картинками. Обязательно пропишите alt-текст и укажите его стилизацию, чтобы он не сливался с фоном. Комфортный минимум размера шрифта — 14px. А самый читабельный — 16px.
Alt-текстом называют краткое текстовое описание изображения. Благодаря нему пользователь узнает содержание иллюстраций, если в браузере отключена загрузка изображений.
В случае с кнопкой alt-текст даст понять, что на ней написано.
«Верх» письма
В прехедере письма обычно находится ссылка на веб-версию. Вот только в письме Wildberries её нет. А зря.
В шапке письма расположен логотип на фирменном фоне. Это правильно, так читатель быстро узнает бренд. Беда в том, что у логотипа плохое качество, картинка размытая. Зато под ним есть три пункта меню со ссылками на сайт. Такое решение — хороший источник дополнительной конверсии: подписчик может перейти на страницу маркетплейса и найти нужную информацию или даже сразу приступить к покупкам. Пункты меню сверстаны текстом. Это гарантирует, что все пользователи увидят надписи даже с отключёнными изображениями.
Вот такой мне представляется идеальная шапка письма:
Тело письма
Основная часть письма начинается с главного баннера, который анонсирует большую распродажу:
Баннер большой и яркий, сразу даёт понять, о чём речь в сообщении. Вот только призыва к действию на нём нет, да и сам баннер некликабельный. Дальше следуют идеи для выходного. Хороший ход: интересные советы точно заинтересуют подписчика.
Призывы к действию (CTA)
В маркетинговых письмах обычно используется один из двух типов CTA: кнопка или гиперссылка. Пользователи чаще предпочитают первый вариант: как показало исследование Campaign Monitor, кнопки на 28% эффективнее ссылок. В письме Wildberries, однако, используются ссылки. Да, с ними дизайн становится легче, но может пострадать конверсия. Чтобы это проверить, стоит провести A/B-тестирование.
Вот пара советов:
- Чтобы кнопки хорошо смотрелись на мобильных устройствах, их высота должна быть не менее 44 пикселей.
- Используйте контрастные кнопки, чтобы их без проблем считывали даже пользователи с нарушениями цветовосприятия. Проверьте сочетания цветов на дальтонизм: например, комбинации красного и зелёного стоит избегать.
С кнопками основная часть письма будет выглядеть так:
Вторая часть письма
Вторую часть с набором промобаннеров я отделила для самостоятельного письма. Помимо того, что блок вышел исключительно коммерческим, каждый баннер выполнен в своем стиле. Кнопки тоже оформлены по-разному, а на рекламе Makita их вообще нет.
Эту проблему можно решить, убрав кнопки с баннеров и добавив для каждой акции текстовое описание и фирменную кнопку для перехода:
Из чисто коммерческого письмо превратилось в комбинированное. На главном баннере я разместила контрастную кнопку, которая ведёт на страницу со всеми акциями. К остальным баннерам добавила небольшие сопроводительные тексты и кнопки, выполненные в одном стиле. Структура контента в обновлённом письме напоминает перевёрнутую пирамиду, которая направляет внимание читателя вниз, к самому важному — CTA:
«Подвал»
Завершается письмо блоком, в котором можно скачать мобильное приложение. Он полезный, здесь ничего менять не хочется. Молодец, Wildberries!
Футер в этом письме тоже классный. Информация свёрстана текстом, используется стандартный шрифт. Есть блок со ссылками на соцсети и блок с отпиской от рассылки:
Единственное замечание: я бы переделала блок с иконками, привела бы их к одному стилю. Например, вот так:
Результат
После моей ревизии первое письмо выглядит так:
Мобильная версия:
Второе письмо:
Мобильная версия:
Впервые опубликовано на РБК Pro
