Содержание

    Осознанный дизайн емейл-рассылок: UX и UI в действии на примере письма Wildberries

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

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

    Тут у меня сработала профессиональная деформация. Какие хорошие идеи стоит позаимствовать из этого письма? Что можно переработать? Как сделать рассылку лучше с точки зрения UX (пользовательского опыта) и UI (пользовательского интерфейса)? Обо всём этом я и расскажу в статье.

    дизайн рассылок Wildberries

    Подход «mobile first»

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

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

    Контент

    В этом письме Wildberries сплёл воедино сразу два типа рассылок: контентную и коммерческую.

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

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

    • идеи о том, как провести воскресенье;
    • подборка акций с текстовыми подводками.

    Cтиль

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

    дизайн рассылок Wildberries

    Не забывайте, что для писем следует выбирать стандартные шрифты, которые работают во всех почтовых клиентах. Это Arial, Comic Sans MS, Courier New, Georgia, Impact, Tahoma, Times New Roman, Trebuchet MS и Verdana. Фирменные шрифты можно использовать на баннерах и кнопках, если оформить их картинками. Обязательно пропишите alt-текст и укажите его стилизацию, чтобы он не сливался с фоном. Комфортный минимум размера шрифта — 14px. А самый читабельный — 16px.

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

    «Верх» письма

    В прехедере письма обычно находится ссылка на веб-версию. Вот только в письме Wildberries её нет. А зря.

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

    Вот такой мне представляется идеальная шапка письма:

    дизайн рассылок Wildberries

    Тело письма

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

    дизайн рассылок Wildberries

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

    дизайн рассылок Wildberries

    Призывы к действию (CTA)

    В маркетинговых письмах обычно используется один из двух типов CTA: кнопка или гиперссылка. Пользователи чаще предпочитают первый вариант: как показало исследование Campaign Monitor, кнопки на 28% эффективнее ссылок. В письме Wildberries, однако, используются ссылки. Да, с ними дизайн становится легче, но может пострадать конверсия. Чтобы это проверить, стоит провести A/B-тестирование.

    Вот пара советов:

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

    С кнопками основная часть письма будет выглядеть так:

    дизайн рассылок Wildberries

    Вторая часть письма

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

    дизайн рассылок Wildberries

    Эту проблему можно решить, убрав кнопки с баннеров и добавив для каждой акции текстовое описание и фирменную кнопку для перехода:

    дизайн рассылок Wildberries

    Из чисто коммерческого письмо превратилось в комбинированное. На главном баннере я разместила контрастную кнопку, которая ведёт на страницу со всеми акциями. К остальным баннерам добавила небольшие сопроводительные тексты и кнопки, выполненные в одном стиле. Структура контента в обновлённом письме напоминает перевёрнутую пирамиду, которая направляет внимание читателя вниз, к самому важному — CTA:

    дизайн рассылок Wildberries

    «Подвал»

    Завершается письмо блоком, в котором можно скачать мобильное приложение. Он полезный, здесь ничего менять не хочется. Молодец, Wildberries!

    дизайн рассылок Wildberries

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

    дизайн рассылок Wildberries

    Единственное замечание: я бы переделала блок с иконками, привела бы их к одному стилю. Например, вот так:

    дизайн рассылок Wildberries

    Результат

    После моей ревизии первое письмо выглядит так:

    дизайн рассылок Wildberries

    Мобильная версия:

    дизайн рассылок Wildberries
    дизайн рассылок Wildberries

    Мобильная версия:

    дизайн рассылок Wildberries

    Впервые опубликовано на РБК Pro

    Улучшим дизайн ваших писем
    и эффективность емейл-маркетинга
    Имя
    Корпоративный email *
    Array
    (
        [0] => WP_Term Object
            (
                [term_id] => 1425
                [name] => Статьи
                [slug] => articles
                [term_group] => 0
                [term_taxonomy_id] => 1907
                [taxonomy] => category
                [description] => 
                [parent] => 0
                [count] => 606
                [filter] => raw
                [cat_ID] => 1425
                [category_count] => 606
                [category_description] => 
                [cat_name] => Статьи
                [category_nicename] => articles
                [category_parent] => 0
            )
    
    )
    
    Поделиться статьёй
    Подписаться на рассылку
    Задайте вопрос эксперту лично
    Консультация
    с топ-менеджерами EMAILMATRIX