Рассылки «ЛитРеса». Разбор полётов
Все ошибаются. Емейл-маркетологи — не исключение, какой бы известной компания ни была. В этой статье я разберу ошибки дизайна и вёрстки, которые встречаются в рассылках, и расскажу, как их избежать.
За примерами я зашёл в свои «Входящие» и из нескольких претендентов выбрал письмо компании «ЛитРес»: его редизайнить мне было интереснее всего.
Создаётся впечатление, что к созданию этой рассылки подошли не очень ответственно: в письме отсутствует нормальная иерархия элементов, а кнопки, блоки и изображения вызывают массу вопросов.
Сразу отмечу, что не во всех почтовых клиентах письмо отображается одинаково, что, кстати, тоже недостаток. И некоторые ошибки, описанные ниже, могут проявляться или, наоборот, отсутствовать в зависимости от того, на каком устройстве, в каком браузере и в каком почтовом клиенте вы открыли письмо. В данном случае оно открыто в Mozilla Thunderbird для настольных компьютеров.
Возможно, проблема здесь не в самом дизайне, а в html-вёрстке. Но это тоже забота дизайнера: он должен контролировать результат и знать, во что превратится его макет после того, как над ним поработает верстальщик.
Рассмотрю поочерёдно все части письма:
- Начало письма.
- Товарная сетка. Главный товар.
- Товарная сетка. Второстепенные товары.
- Блок рекомендаций.
- Рекламный блок.
- Ссылки на приложения.
- Футер и дисклеймер.
Начало письма
Письмо начинается с мелкого текста «в лоб», без какого-либо вступления: подписчику сразу же предлагаются «какие-то» книги — без описания, что это за подборка, зачем, кому подойдёт… Незаинтересованному глазу тут «не за что зацепиться», и велика вероятность, что это письмо подписчик закроет, не дочитав.
- Заглавный баннер с ёмким заголовком справится с этой проблемой. Яркие цвета и крупный текст поймают внимание подписчика и убедят его читать письмо дальше.
- Можно обойтись и без баннера — решив вопрос с помощью выразительного заголовка и цепляющего оформления текста. Мелкий шрифт на бежевом фоне с задачей привлечения внимания явно не справляется.
Товарная сетка. Главный товар
Сразу после блока с вводным текстом (который никого никуда не вводит, как вы уже поняли) идёт главное предложение «ЛитРеса» — бестселлеры и новинки.
В этом блоке вижу следующие проблемы:
Слишком крупные изображения, из-за чего возникает ощущение дисбаланса. Картинка в этом блоке одна, у неё нет конкурентов, поэтому она в любом случае привлечёт к себе внимание, даже если будет немного меньше. Также есть вероятность, что при адаптации на мобильном устройстве с маленьким экраном изображение может оказаться больше высоты видимой области. Чтобы избежать этой проблемы, изображение обложки нужно уменьшить.
Посмотрите внимательно на статистику: если у вас единичные случаи открытия письма на старых телефонах с небольшими экранами, оставьте изображение прежнего размера, но увеличьте описание книги. Так вы достигнете визуального равновесия на десктопе.
- Кнопки имеют разный приоритет. Это понятно по цвету и размеру текста на них. Но размер второстепенной кнопки спорит с ключевым CTA — «Купить и скачать». Чтобы более явно разделить приоритеты, можно сделать «Читать фрагмент» обыкновенной ссылкой.
- Описание книги — две короткие строки! — совершенно не информативно. Лучше отказаться от него вовсе либо расширить, чтобы оно имело смысл. Если мы оформим призыв «Читать фрагмент» текстовой ссылкой и поместим под кнопку СТА, освободится достаточно места для полноценного описания..
Товарная сетка. Второстепенные товары
Далее следуют менее значимые предложения.
Карточки в этом блоке меньше основного товара, и это правильный подход к созданию визуальной иерархии. Но у этого блока такая же проблема с CTA, как и в первом блоке: слишком крупная второстепенная кнопка. Её решение я предложил выше. Главная ошибка заключается здесь в том, что обложка книги слева не соответствует по пропорциям месту, которое под неё отведено в вёрстке. А если это просто такая обложка с серым блоком сверху, то в следующем блоке у этой же книги появляется серая полоса слева. Скачущая сетка оставляет впечатление «поехавшей» html-вёрстки.
Блок рекомендаций
Третий по важности блок. Визуально приоритет показан хорошо. Но есть другие проблемы:
- С кнопкой явно что-то не то. Она должна либо быть ниже по высоте, либо текст должен быть выровнен по центру. А лучше исправить то и другое: сделать кнопку меньше и поправить положение текста.
- Карточка товара в строке одна, справа остаётся много пустого места. Нужно дополнить эту строку товарами, чтобы получился полноценный рекомендательный блок.
- Ещё один недостаток всех товарных карточек — отсутствие ценников. Они обязательно должны быть — чтобы подписчик сразу видел, выгодно ли ему приобретать книги именно в «ЛитРесе».
- И кстати, эта книга предлагается дважды в одном письме. Зачем? Непонятно.
Рекламный блок
Далее идёт партнёрский блок. Странно, что его разместили по центру письма — учитывая, что весь предыдущий контент выровнен по левому краю. Ещё более странным это решение смотрится в сочетании с выровненным по левому же краю одиноким товаром чуть выше.
Тут есть несколько вариантов решения.
- Как я уже сказал, заполнить ряд рекомендаций в блоке выше — это поможет сгладить переход от выравнивания по левому краю к выравниванию по центру.
- Разместить партнёрскую рекламу на всю ширину письма (но тут могут быть ограничения по баннеру, который предоставляет рекламодатель).
- Поставить рекламу ниже — в один ряд с блоком «Самиздат». Избавляясь от бессмысленных пустот, мы структурируем письмо по сетке и сокращаем его.
Ссылки на приложения
К блоку с рекламой приложения особых претензий нет. За исключением того, что «ЛитРес» самовольно изменил кнопки магазинов приложений под свой дизайн, — это запрещено. Разрешённые варианты легко находятся на сайтах соответствующих компаний.
Футер и дисклеймер
- Блок «Самиздат» внизу письма занимает неоправданно много места. Кнопка тут крупнее, чем всё остальное содержимое. Пустое пространство позволяет разместить Контент этого блока более компактно, избавившись от лишнего пустого места, — это сократит и длину самого письма без потери читабельности.
- В дисклеймере информация зачем-то продублирована на английском языке, тогда как всё письмо написано на русском. Если у компании есть англоязычные подписчики, то для этого сегмента надо в первую очередь само письмо делать на английском, в одиноком дисклеймере смысла мало.
Я переосмыслил нынешний дизайн и предлагаю вариант, в котором исправлены все перечисленные выше недочёты.
Что я сделал:
- Увеличил описание для главной книги. С самим текстом не работал, так как копирайт — это тема для отдельного разговора.
- Добавил в карточку товара метки «Бестселлер» и «Хит продаж». Да, в письме, вырванном из контекста, их значение не совсем очевидно, но пользователям сайта эти иконки давно знакомы и понятны. Подписал цены на книги. Для экономии места я их интегрировал в кнопку. CTA «Читать фрагмент» превратился в иконку — для наибольшего её отличия от основного CTA.
- Отказался от брутализма в дизайне, потому что он скорее подойдёт ценителям, чем массам. Сделал письмо более лёгким и современным, рационально использовал свободное пространство. Письмо стало выглядеть свежее.
Ну и напоследок ещё одно замечание. Судя по тому, что текст в письме индивидуальный для каждой рассылки, сообщение это не автоматическое, над копирайтом и подборкой товаров работают живые люди. Эти люди могут периодически делать тематические подборки с более красивыми обложками — письма будут смотреться более стильно и привлекательно.
