Зачем использовать в e-mail-рассылках утилитарный дизайн

Зачем нужен утилитарный дизайн

Чтобы правильно использовать дизайн, стоит рассматривать его прежде всего как утилитарный инструмент для достижения конкретных целей, например: правильное оформление email-рассылки, повышение показателя Click Rate (показатель кликабельности в письме) или конверсии письма.

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

Принципы утилитарного дизайна

Если бизнес хочет увеличить свой Click Rate (показатель кликабельности), стоит придерживаться нескольких правил:

1. Помните про адаптивную верстку

Согласно статистике Out of Cloud (входит в Kokoc Performance), более 70% получателей обычно читают письма с телефонов. Поэтому существует несколько принципов для адаптации на мобильные устройства:

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

2. Хедер должен содержать конверсионные разделы 

Внутренняя статистика компании показывает, что на хедер (шапка письма) приходится 20–28% всех кликов. Не стоит заставлять подписчика тратить время на дополнительную навигацию, лучше сразу отправить его в нужные разделы. Если на сайте интернет-магазина популярны категории «Женщины» и «Мужчины», нужно показать посетителю кратчайший путь в нужную категорию, а не заставлять его долго «зависать» на главной странице. Чем короче путь к цели, тем выше шанс покупки.

Пример хедера в письмах магазина. Источник — архив Out of Cloud

3. Главный баннер = иллюстрация + заголовок + кнопка

Задача баннера — сразу зафиксировать внимание пользователя на ключевом действии рассылки. Лучше добавлять не просто красивую картинку, а поддерживать ее коротким смысловым текстом и очевидной кнопкой перехода. Если человек сразу не зацепится за суть вашего предложения, он просто закроет письмо.

Пример главного баннера в письме. Источник — архив Out of Cloud

4. Вводный текст поддерживает главный тезис

Смысловой мостик от баннера к основной части письма — обязательный пункт хорошей рассылки. Например, в фэшн-сегменте можно отправить письмо с рассказом об акциях и отметить, что внутри лежит подборка сумок под разные запросы покупателя. Дополнительно удержать внимание помогут персонализированное приветствие и ссылка на сайт.

Пример рассылки для интернет-магазина от Out of Cloud

5. В теле письма должна быть видимая польза 

Многие дизайнеры рассылок делают ставку на стиль: уникальные фото, необычная верстка, но минимум полезной информации о продукте или товарах. Так делать не стоит!

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

При коммуникациях в финансовой сфере утилитарный дизайн особенно важен: пользователь принимает решение быстро, основываясь на понятной выгоде. Если письмо компании будет перегружено сложной графикой, абстрактными визуальными образами и длинными пояснениями, конверсия в оформление продукта снижается. Здесь работают прямые сценарии: офер → выгода → срок → CTA. Письма с простой модульной структурой и четкими CTA обычно показывают более высокий отклик.

6. Не забывайте про UX

Отдельного разбора требует вопрос CTA (Call to Action, призыв к действию), ведь грамотно упакованный призыв к действию повышает конверсию. И тут важно не уйти в слишком сложный креатив, который будет избыточен и помешает удобству пользователя. Представьте, что потенциальный покупатель получил рассылку от бренда сумок, заинтересовался красивой картинкой и захотел рассмотреть конкретную модель. Кнопки «Купить» в рассылке не было, он кликнул на картинку и оказался на главной странице вместо карточки товара. Как искать ту самую сумку в такой ситуации — непонятно. Скорее всего человек просто уйдет с сайта, не получив желаемый результат.

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

7. Фокус на целевом действии 

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

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

8. Облегчайте префутер и футер 

Футер — это финал письма. Он дает пользователю дополнительную информацию, но не отвлекает от главного, поэтому перегружать не стоит. 

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

Пример префутера и футера в письме. Источник — архив Out of Cloud

Утилитарный дизайн работает

Как понять, что действительно нравится вашей аудитории и влияет на конверсии? При работе можно ориентироваться на данные: CTR (click-through rate — какой процент получателей нажал на кликабельный элемент в письме), CTOR (Click-to-Open Rate — процент переходов от числа открытых писем), конверсию в целевое действие и результаты A/B-тестов.

• Разгрузка баннера может увеличить конверсию

Один из частых запросов в практике — поместить все в первый экран: большую «красивую» картинку, несколько УТП, длинный текст, акции, сроки, промокод и юридические сноски. Обычно в этом случае баннеры перегружают лишним текстом, изображения теряются среди предложений, а основной CTA визуально теряется. Такое письмо может выглядеть насыщенным информацией, но главное предложение пропадает за массой лишних деталей.

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

• Креативные карточки не всегда лучше стандартных

В фэшн-сегменте креатив часто уходит в «журнальную верстку»: люди получают красивый модельный имидж без четкой навигации и сути. В e-mail-коммуникациях лучше работают форматы, в которых пользователь за 2–3 секунды может считать, что продают, какую скидку предлагают и куда нажать.

• Использование креативных гифок может снизить конверсию 

Другая ошибка — считать, что обилие динамических элементов окажет больше эффекта на пользователей. Казалось бы, что плохого в анимации и гифках — они же привлекают внимание пользователей? Однако А/В-тестирования часто показывают — обычные динамические блоки побеждают креативные гифки. Обилие движущихся элементов и перегруженность письма рассеивают внимание пользователей и мешают увидеть за сложной версткой УТП компании и обращение к клиентам. Люди быстрее закрывают такие письма и меньше переходят по ссылкам, что напрямую влияет на выручку компании.

Вместо итога

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

Лучшие решения в CRM — те, которые помогают пользователю совершить целевое действие и быстро перевести интерес в конверсию. А это напрямую сказывается на прибыльности и эффективности работы бренда.