Рассылки «ЛитРеса». Разбор полётов

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

За примерами я зашёл в свои «Входящие» и из нескольких претендентов выбрал письмо компании «ЛитРес»: его редизайнить мне было интереснее всего.

пример письма ЛитРес

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

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

Возможно, проблема здесь не в самом дизайне, а в html-вёрстке. Но это тоже забота дизайнера: он должен контролировать результат и знать, во что превратится его макет после того, как над ним поработает верстальщик.
Рассмотрю поочерёдно все части письма:

  • Начало письма.
  • Товарная сетка. Главный товар.
  • Товарная сетка. Второстепенные товары.
  • Блок рекомендаций.
  • Рекламный блок.
  • Ссылки на приложения.
  • Футер и дисклеймер.

Начало письма

начало письма ЛитРес

Письмо начинается с мелкого текста «в лоб», без какого-либо вступления: подписчику сразу же предлагаются «какие-то» книги — без описания, что это за подборка, зачем, кому подойдёт… Незаинтересованному глазу тут «не за что зацепиться», и велика вероятность, что это письмо подписчик закроет, не дочитав.

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

Товарная сетка. Главный товар

Сразу после блока с вводным текстом (который никого никуда не вводит, как вы уже поняли) идёт главное предложение «ЛитРеса» — бестселлеры и новинки.

Главный товар ЛитРес из товарной сетки

В этом блоке вижу следующие проблемы:

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

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

  • Кнопки имеют разный приоритет. Это понятно по цвету и размеру текста на них. Но размер второстепенной кнопки спорит с ключевым CTA — «Купить и скачать». Чтобы более явно разделить приоритеты, можно сделать «Читать фрагмент» обыкновенной ссылкой.
  • Описание книги — две короткие строки! — совершенно не информативно. Лучше отказаться от него вовсе либо расширить, чтобы оно имело смысл. Если мы оформим призыв «Читать фрагмент» текстовой ссылкой и поместим под кнопку СТА, освободится достаточно места для полноценного описания..

Товарная сетка. Второстепенные товары

Далее следуют менее значимые предложения.

Второстепенные товары ЛитРес из товарной сетки

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

Блок рекомендаций

блок рекомендация в письме ЛитРес

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

  • С кнопкой явно что-то не то. Она должна либо быть ниже по высоте, либо текст должен быть выровнен по центру. А лучше исправить то и другое: сделать кнопку меньше и поправить положение текста.
  • Карточка товара в строке одна, справа остаётся много пустого места. Нужно дополнить эту строку товарами, чтобы получился полноценный рекомендательный блок.
  • Ещё один недостаток всех товарных карточек — отсутствие ценников. Они обязательно должны быть — чтобы подписчик сразу видел, выгодно ли ему приобретать книги именно в «ЛитРесе».
  • И кстати, эта книга предлагается дважды в одном письме. Зачем? Непонятно.

Рекламный блок

рекламный блок в письме ЛитРес

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

  • Как я уже сказал, заполнить ряд рекомендаций в блоке выше — это поможет сгладить переход от выравнивания по левому краю к выравниванию по центру.
  • Разместить партнёрскую рекламу на всю ширину письма (но тут могут быть ограничения по баннеру, который предоставляет рекламодатель).
  • Поставить рекламу ниже — в один ряд с блоком «Самиздат». Избавляясь от бессмысленных пустот, мы структурируем письмо по сетке и сокращаем его.

Ссылки на приложения

ссылки на приложения ЛитРеса в письме

К блоку с рекламой приложения особых претензий нет. За исключением того, что «ЛитРес» самовольно изменил кнопки магазинов приложений под свой дизайн, — это запрещено. Разрешённые варианты легко находятся на сайтах соответствующих компаний.

Футер и дисклеймер

футер письма ЛитРес
  • Блок «Самиздат» внизу письма занимает неоправданно много места. Кнопка тут крупнее, чем всё остальное содержимое. Пустое пространство позволяет разместить Контент этого блока более компактно, избавившись от лишнего пустого места, — это сократит и длину самого письма без потери читабельности.
  • В дисклеймере информация зачем-то продублирована на английском языке, тогда как всё письмо написано на русском. Если у компании есть англоязычные подписчики, то для этого сегмента надо в первую очередь само письмо делать на английском, в одиноком дисклеймере смысла мало.

Я переосмыслил нынешний дизайн и предлагаю вариант, в котором исправлены все перечисленные выше недочёты.

исправленная товарная сетка ЛитРеса

Что я сделал:

  • Увеличил описание для главной книги. С самим текстом не работал, так как копирайт — это тема для отдельного разговора.
  • Добавил в карточку товара метки «Бестселлер» и «Хит продаж». Да, в письме, вырванном из контекста, их значение не совсем очевидно, но пользователям сайта эти иконки давно знакомы и понятны. Подписал цены на книги. Для экономии места я их интегрировал в кнопку. CTA «Читать фрагмент» превратился в иконку — для наибольшего её отличия от основного CTA.
  • Отказался от брутализма в дизайне, потому что он скорее подойдёт ценителям, чем массам. Сделал письмо более лёгким и современным, рационально использовал свободное пространство. Письмо стало выглядеть свежее.

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

исправленное письмо ЛитРеса
Like
Love Haha Angry
671411
Увеличим продажи
С помощью правильных писем
Поделиться статьёй
Подписаться на рассылку