Дизайн писем для высокой конверсии
Емейлы — самый популярный и эффективный канал для общения бренда с клиентами и продвижения своих услуг. Поэтому важно развивать его и делать емейлы качественными. В этой статье я расскажу о дизайнерских приёмах, которые помогут повысить конверсию и сделать дизайн писем эффективным.
Общий дизайн писем
Стремление к минимализму — общая тенденция в веб-дизайне. Письма в этом плане не остались в стороне. Старайтесь избегать излишних украшений, необязательных элементов и визуального мусора, чтобы сохранить фокус на главном — контенте и вашем предложении клиенту.
Делайте очевидными разделения между смысловыми блоками путём добавления воздуха между ними. Например, добавив воздуха вокруг кнопки, вы сделаете визуальный акцент и привлечёте к ней внимание. Об отступах и принципах расположения блоков в дизайне подробнее можно прочитать в статьях о теории близости и принципах Гештальта.
Обычно, разрабатывая дизайн писем, специалисты копируют в него стилистику и структуру некоторых элементов с основного сайта, что увеличивает доверие пользователя к рассылке. При этом переносят и главное меню, и телефон, и ссылки на соцсети из верхней части страницы в шапку письма. Но не стоит заполнять полезное пространство бесполезными элементами. Берите только самое необходимое.
Для идентификации бренда достаточно разместить в шапке только логотип компании. Избыточное количество элементов также чревато тем, что на мобильном телефоне перестроенная шапка письма будет съедать значительную часть столь важного первого экрана.
Например, Grammarly придерживаются минимализма и для идентификации бренда используют лишь логотип и фирменные цвета. А воздух в дизайне и отступы между логическими блоками делают письмо удобным для чтения:
Противоположный пример от Overstock.com. Перегруженная лишними элементами шапка, отсутствие акцентов, иерархии и пространства между элементами мешают сконцентрироваться на чём-то конкретном:
Дизайнер Джо Харрисон проделал большую и интересную работу, предложив отличный способ адаптации логотипов. Просто изменяйте размер окна браузера, и вы увидите, как изменяется размер лого и количество его элементов в зависимости от ширины контекста, в котором он расположен. Но, стоит заметить, в большинстве случаев этот подход остаётся лишь размышлением на тему, т. к. условия и варианты использования логотипа чаще всего жёстко прописаны в брендбуке и гайдлайнах компании.
Структура
Разрабатывая дизайн писем, старайтесь делать макет удобным для сканирования, т. е. понятным при беглом просмотре. Это очень важно, ведь в наше время человек получает десятки писем каждый день, и, конечно же, мало кто читает их досконально.
Создавайте в текстах писем чёткую визуальную иерархию. Логичное и приятное для глаз форматирование текста — грамотное разбиение его на абзацы, наличие заголовков и подзаголовков — сделают письмо дружелюбным и удобным. Но помните, что копирайт при этом должен быть кратким и ёмким, без воды — только самое важное для подписчика.
Письма Zoom — отличный пример работы с контентом. Несмотря на большое количество текста, его качественное форматирование (заголовки, понятные ссылки и логичные отступы) делает письмо удобным для чтения:
Felix Gray придерживаются другого подхода: минимальное количество текста способствует более быстрому принятию решения и минимизирует риск того, что получатель не прочтёт письмо до конца.
То же самое можно сказать и о структуре контента. Расставьте в письме приоритеты для своих товарных предложений: поставьте главное из них в самое начало, а второстепенные опустите ниже. Выделить главное можно не только местоположением, но и более крупным размером или более ярким оформлением всего блока.
Для оформления контента письма наиболее удобным считается одноколоночный формат. В таком исполнении письмо читается быстро и комфортно, т. к. взгляд скользит сверху вниз и нет необходимости скакать из угла в угол.
Но для более сложных в плане контента писем подойдёт структура и из двух колонок:
Одно- и двухколоночный способ компоновки контента хорошо подходит для адаптации под мобильные устройства: при двухколоночном формате блоки легко перестраиваются друг под друга, а одноколоночный хорошо масштабируется.
Пример того же двухколоночного письма от Tattly на мобильном устройстве. Письмо легко адаптируется методом перестроения:
Полная адаптация писем под мобильные устройства не всегда положительно влияет на показатели переходов. Часто компании вставляют в письмо очень много предложений — особенно это заметно на рассылках в ритейл-сфере. После адаптации на телефонах письмо становится необоснованно длинным, и получатели просто-напросто не досматривают его до конца.
В этом случае как вариант можно взять исходную структуру, сократить количество информации, избавиться от мелких деталей, оставив самое важное, и сохранить такой блок неадаптивным. Тогда письмо будет занимать меньше места, но при этом всё равно останется читабельным. Ведь сейчас большинство смартфонов позволяют комфортно просматривать такой контент.
Например, это письмо от MyToys легко адаптировать таким образом, т. к. у него крупные и удобные для мобильного блоки:
Также, чтобы сделать визуализацию понятной и удобной, при создании письма или оформлении ключевого предложения можно применять метод перевёрнутой пирамиды. Суть метода заключается в расположении элементов таким образом, чтобы максимально эффективно и ненавязчиво направить зрителя к совершению целевого действия. Сначала интересный заголовок, привлекающий внимание, говорящий о ценности вашего предложения. Затем более детальная информация, например о том, какую выгоду получит пользователь и каким образом. И в завершение призыв к действию. При такой структуре контента внимание читателя максимально концентрируется на предложении и не рассеивается на второстепенные элементы письма.
Но что делать, если предложение не одно? Расположите несколько пирамид друг за другом. Более подробно этот метод разбирают в статье How to Use the Inverted Pyramid Design to Boost Email Conversions.
Графика
Иллюстрируйте один информационный блок одним изображением. Переизбыток картинок рассеивает внимание пользователя. А текстовый поток лучше разбавьте иконками, микроиллюстрациями или же правильным форматированием текста (расстановка заголовков, отступов, выбор подходящего размера и цвета для шрифта).
При этом оригинальные фотографии и иллюстрации помогают разработать более эффективный дизайн писем, чем примелькавшиеся стоковые фотографии с рукопожатиями и улыбчивыми сотрудниками с первой страницы поиска любого фотобанка.
Будьте аккуратны при размещении текста, набранного нестандартным шрифтом, и с текстом на картинках, которые при адаптации будут масштабироваться. В этом случае на мобильных устройствах текст может стать нечитаемым, ведь он уменьшится в размере вместе с изображением пропорционально ширине экрана. Поэтому прежде чем отдавать письмо на вёрстку, проверьте, как такой текст выглядит на мобильных устройствах. Если он не читается, поэкспериментируйте с размером и видом шрифта.
Добавлять анимации в дизайн писем, т. к. они больше всего привлекают внимание.
С помощью gif-анимации можно:
- вызвать чувство срочности, путём добавления таймера обратного отсчёта;
- пробудить у читателя любопытство и интерес к письму;
- показать больше контента на одном и том же месте (например, несколько товаров из категории или несколько разных фотографий одного товара).
Помните: первый кадр анимации должен быть самым информативным, т. к. некоторые почтовые клиенты могут не воспроизводить гиф и показывать только начальный кадр. Например, Outlook 2007–2016. Хотя для него и придумали создавать и прописывать в вёрстке отдельный баннер, и при этом для остальных почтовиков оставлять гифку. Но всё же, сделав первый кадр гифки самым информативным, вы наверняка обезопасите себя — ведь мало ли какой ещё почтовик встретится с такой же проблемой.
CTA
Кнопки в веб-дизайне — это наиболее часто встречающийся элемент, предназначенный для взаимодействия пользователя с системой. Не стоит недооценивать их важность и легкомысленно относиться к их оформлению. Поскольку кнопки в цифровой среде используются практически везде, нижесказанное можно отнести не только к письмам.
Люди привыкли общаться с системой посредством кнопок. У них уже сформировано представление о том, как они работают. Поэтому самый простой и очевидный совет: кнопки должны выглядеть как кнопки. Чтобы избежать падения CTR, не заставляйте пользователя искать желаемое действие, думать о том, что произойдёт при нажатии на кнопку. Всё должно быть однозначно и привычно.
Обратите внимание на размер кнопки. Убедитесь, что он удобен для нажатия на мобильных устройствах. На тему размеров UI-элементов для сенсорных экранов есть интересная статья, опубликованная в далёком 2012 году. Но за это время принципиально ничего не поменялось, так же, как и средние размеры человеческих пальцев 🙂
Создавая дизайн письма, разработайте минимум два стиля для кнопок: один для первостепенных действий, другой для второстепенных. Если уровней важности больше, соответственно, постарайтесь придумать и больше стилей, но всё в пределах разумного. Чаще всего трёх видов более чем достаточно.
Используйте контрастные цвета для оформления первостепенных кнопок, чтобы выделить их из общего потока информации при беглом просмотре письма.
Старайтесь при этом минимизировать количество кнопок, если только они не выполняют одну и ту же функцию, находясь в разных местах. Например, CTA на товарных карточках, как в примере «Техпорта»:
Не располагайте две равнозначных по оформлению кнопки рядом друг с другом в одном блоке. Например, в карточке товара. Может сложиться впечатление, что мы сами не знаем, чего хотим от пользователя. Исключением может быть, например выбор категории товаров — «Товары для женщин», «Товары для мужчин», как в письме от Express:
Если вы располагаете горизонтально две кнопки рядом друг с другом, приписывайте основное ключевое действие той, что расположена справа. При вертикальном расположении — той, что снизу. Такое расположение приводит к более быстрому результату.
Эта теория основана на естественном движении взгляда при просмотре контента — слева направо и сверху вниз. Т. е. нам будет физически неудобно дочитать письмо до конца и затем вернуться в середину, чтобы найти кнопку и выполнить целевое действие.
О других способах размещения кнопок в дизайне хорошо написано в статье «The Optimal Placement for Mobile Call to Action Buttons».
Текст на кнопках
Что касается текста на кнопках, старайтесь делать его максимально коротким — одно-три слова. Не нужно принимать это за каноническое правило и полностью отказываться от более многословных призывов. Просто помните: чем меньше, тем лучше.
Также помните, кнопка должна лишь активировать всё сказанное в теле письма. Поэтому всю нужную информацию сообщайте в тексте, а на кнопке пишите только целевое действие — не перегружайте её второстепенной информацией.
Избегайте формулировок, не подразумевающих дальнейшего взаимодействие с системой. Например, в письме с предложением пройти обучающие курсы есть две кнопки: «Начать обучение» и «Я ещё подумаю». Какой смысл во второй кнопке? Чтобы человеку подумать, ему не нужно нажимать никакие кнопки. Можно просто закрыть письмо и подумать. Если же компания таким образом собирает список пользователей, которым необходимо отправить напоминание позже, то логичнее было бы так и написать — «Напомнить позже».
Делайте осознанные надписи на кнопках, чтобы при сканировании письма пользователь понимал, что он получит, нажав на эту кнопку, и в чём для него выгода. Например «Получить демо-доступ» вместо «Посмотреть». Однотипные «Читать далее» и «Подробнее» вряд ли помогут осознать все выгоды от нажатия на такую кнопку. Только если вы не рассылаете анонсы статей, конечно.
Можно попробовать добавить на кнопки цены, например «Купить за 4999 руб.». Нажатия на такие кнопки могут свидетельствовать о том, что клиент близок к конверсии и готов приобрести что-либо за указанную вами стоимость, т. к. перед нажатием он точно знал цену и то, на что шёл. Также это может положительно повлиять на дизайн писем, т. к. в таком случае не нужно будет искать место для отдельного расположения цены.
Конечно же, однозначно ответить на вопрос, что именно нужно писать на кнопке, нельзя. Выбрать оптимальный вариант для каждого типа рассылок поможет только тестирование. Поэтому не бойтесь и экспериментируйте!
Под конец хотелось бы обратить внимание на использование кнопок-картинок вместо html- и css-оформления их в вёрстке. Помните: пользователь может открыть письмо в режиме отключённых изображений, и при этом оно должно оставаться читаемым и удобным для использования. Поэтому пропишите для вашей кнопки alt-текст и укажите его стилизацию, чтобы он не терялся на фоне.
Конечно, этот способ не сработает идеально во всех почтовых клиентах. Например, Outlook просто заменит недостающую картинку серым прямоугольником. Но во многих других визуально кнопка останется. И это лучше, чем не видеть CTA вообще.
Чтобы вам было легче разработать дизайн писем, я составил краткий список вышеперечисленных советов для запоминания:
- создавайте понятную структуру письма, разбивайте содержимое на визуальные смысловые блоки;
- при копировании сайта берите только самые необходимые элементы интерфейса;
- старайтесь соблюдать чёткую визуальную иерархию;
- тщательно форматируйте текст, особенно когда его много;
- копирайт без воды, коротко и ясно;
- используйте одноколоночную сетку, если структура контента простая, или двухколоночную, если структура более сложная;
- адаптируйте с умом;
- используйте метод перевёрнутой пирамиды;
- один смысловой блок = одно изображение;
- избегайте типовых стоковых фотографий;
- используйте крупный шрифт на изображениях, которые уменьшаются при адаптации;
- используйте gif-анимации (осторожнее с Outlook);
- кнопки в письме должны выглядеть как кнопки;
- кнопки должны быть удобными для нажатия на телефоне;
- применяйте разные стили для основных и второстепенных CTA;
- минимизируйте количество основных CTA;
- не располагайте рядом друг с другом кнопки, которые оформлены как равнозначные, если они таковыми не являются;
- пишите короткие осознанные надписи на СТА;
- тестируйте формулировки на кнопках;
- не используйте кнопки-картинки в вёрстке или прописывайте их так, чтобы в режиме отключённых изображений СТА оставался узнаваемым.
