Электронные письма — это уже давно не про голый текст. Сегодня они больше похожи на мини-сайты, где можно покупать товары, читать материалы, проходить тесты. Даже если взять обычное письмо-анонс, просто сделать для него текст и подобрать картинку уже недостаточно.
Читатель хочет, чтобы письмо легко читалось, было аккуратным и понятным. Но на практике картинки часто режутся, текст скачет, кнопки прячутся — а на телефоне все выглядит еще хуже. Чтобы не допустить этого, а наоборот, влюбить читателя в рассылку и ее автора, и нужен UX/UI-дизайн.
Рассказываем, как создать не только привлекательное, но и максимально удобное для пользователя письмо.
Почему продуманный дизайн — это важно
Даже в 2016 году, когда смартфонов было намного меньше, 79% пользователей уже игнорировали письма, которые сложно читать с телефона.
При этом пользователь в среднем читает письмо 10 секунд. Поэтому важно не только оптимизировать контент для мобильного — важно сделать так, чтобы контент за короткое время захватил внимание и акцентировал на главном. В противном случае письмо покажется скучным, непонятным и читатель выйдет из рассылки.
Но главный аргумент за умный дизайн — это ожидания пользователя. Чем активнее развиваются технологии и мир, тем больше пользователь хочет от бизнеса. Особенно сильно эти ожидания выросли после пандемии.
- Мало доставить товар — покупатель хочет, чтобы товар пришел как можно быстрее.
- Мало сделать понятный каталог товаров — клиент хочет получать персональные подборки на почту.
- Мало отправить письмо — читатель хочет, чтобы оно было наглядным и захватывающим.
Все это про пользовательский, а в перспективе — про клиентский опыт.
Другими словами, чтобы получить лояльного клиента, недостаточно просто делать хороший продукт. Пользователь хочет еще и идеальных впечатлений от общения с компанией. Более того: 80% покупателей даже готовы платить больше за лучший пользовательский опыт.
И компании, которые его предоставляют — выигрывают. Даже если речь идет о email-рассылках.
Простой пример. Сравните эти два письма.
В обеих компаниях рассказывают о предстоящих мероприятиях. Но чтобы прочитать и понять первое письмо, нужно постараться. А вот второе считывается сразу, к тому же выглядит ярко и интересно. Как думаете, на какое мероприятие больше обратят внимания?
Когда пользователь заходит на сайт, чтобы что-то заказать, записаться на курс и так далее, ему должно быть все интуитивно понятно. Чтобы не нужно было напрягать мозг: в потоке ежедневной информации он и так перегружен.
Поэтому, когда человек видит классную навигацию, удобные кнопки, структурированный текст, он расслабляется — и информация быстрее считывается. В результате пользователь делает то, что хотел, и остается довольным.
Примерно так это работает и с рассылками, и с другими продуктами компании. UX/UI-дизайн — это не только про удобство, это про восприятие бренда в целом
Частые проблемы в дизайне рассылок
Но на деле письма часто выглядят не такими понятными и яркими, потому что:
- Элементы сливаются, между ними мало воздух
- Кнопка призыва к действию незаметна или не выглядит кликабельной
- Слишком много текста, который не структурирован
- Заголовки, подзаголовки и сам текст выглядят разношерстно
- Много лишних визуальных элементов, которые отвлекают от сути
- Есть мелкий или необычный шрифт, который сложно читать
- Нет единой цветовой гаммы
При чем тут UX и UI
Избежать всех этих проблем помогает UX- и UI-дизайн. Пройдемся по терминам.
UX (User Experience, пользовательский опыт) — это ощущения, которые получает пользователь от взаимодействия с письмом.
Если человек понимает, что до него хотят донести, куда в письме нажимать и что будет после клика — он удовлетворяет свой интерес и получает хороший опыт.
UI (User Interface, дословно «пользовательский интерфейс») — это то, как письмо выглядит.
Если элементы отделены друг от друга, для текста выбран читабельный шрифт, письмо выдержано в едином стиле — пользователь удовлетворяет свой интерес без лишних проблем.
Если коротко, UX ― это функционал, а UI ― внешний вид.
Как видите, понятия тесно связаны. Поэтому важно продумывать и удобство письма, и его внешний вид, то есть реализовывать связку UX/UI-дизайн комплексно.
Подробнее о том, как сделать классный дизайн письма, мы рассказывали в отдельном материале. А здесь остановимся на принципах UX/UI-рассылки.
Чек-лист: на что смотреть при создании UX/UI-письма
Фишки оформления у каждой компании будут своими. Но удобство для пользователя — это основа. Рассказываем, на какие 8 моментов нужно обратить внимание, чтобы рассылка получилась хорошо и в UX, и в UI.
Содержание
Продуманное содержание — то, с чего начинается хороший дизайн. Поэтому перед созданием макета, важно определиться:
- Зачем мы пишем письмо
- Что хотим донести до читателей
- Что будет целевым действием
- Что вынесем в начало
- Какие формулировки помогут лучше донести смысл
- Какие формулировки, наоборот, можем «выкинуть»
На основе этого черновика можно создавать дизайн. Кстати, подробно о том, как сделать работающий текст для email-рассылки мы рассказывали в статье: там 17 шагов и 5 лайфхаков.
Структура
Структура (или макет) — элементы, из которых состоит письмо. Обычно это:
- Хедер (шапка): здесь можно увидеть логотип, меню, ссылку на веб-версию
- Баннер или текст с ключевой информацией
- Текст с заголовками, картинками, кнопками CTA
- Дополнительные блоки (подборки товаров, видео, анимация)
- Футер (подвал) с контактами и формой отписки
Элементы нужно расположить так, чтобы они донесли содержание письма и при этом не вызвали вопросов. Поэтому со структурой лучше не «мудрить», а ориентироваться на эту, стандартную — она привычна для читателей.
Цветовая гамма
В идеале письмо должно быть выдержано в фирменных цветах компании, чтобы у читателя возникли ассоциации с брендом. Кислотных оттенков и обилия ярких цветов лучше избегать.
Важные части письма (вводный абзац, призыв к действию, даты проведения акции, какие-то детали на баннере) можно выделить контрастным цветом, чтобы привлечь внимание. И даже в этом случае лучше использовать приглушенные оттенки, чтобы не напрягать глаза читателя.
Расположение элементов
Композиция письма — это не то, что может получиться с первого раза. Здесь важны насмотренность и опыт. Рабочий вариант для начала — использовать готовые решения от сервисов рассылок. В них уже есть шаблоны с профессиональным дизайном.
В любом случае между элементами письма должно быть свободное место. Элементы, к которым вы хотите привлечь внимание, нужно выделить дополнительно. Например, кнопку CTA поставить по центру и сделать вокруг нее больше воздуха.
Лучше ориентироваться на 1-2 колонки: такие письма удобно читать. Исключение — подборки товаров: здесь можно сделать до 4 колонок.
Располагать текст лучше по левому краю. А если это заголовки или небольшие абзацы — по центру. Визуальные элементы, включая кнопки, картинки, иконки, тоже нужно выравнивать по одной линии с текстом, независимо от того, какое выравнивание — вертикальное или горизонтальное.
Шрифт
Шрифт должен быть не красивым, а читабельным. Поэтому лучше использовать стандартные Times New Roman, Georgia, Helvetica, Arial — они привычны глазу и их отображают все почтовые клиенты.
Если нужны акценты, используйте начертание — курсив, жирный, подчеркнутый текст (только не все сразу). Или выделяйте главное цветом/размером.
Лучше избегать декоративных и рукописных шрифтов. Пользователь должен хорошо считывать текст, а не гадать, какая это буква. И даже для простого шрифта важно подобрать нужное начертание, не слишком жирное и не слишком тонкое. Чтобы выбрать оптимальный вариант, можно сделать несколько вариантов письма.
Изображения
Каждая из картинок в письме должна весить до 200 кб. При большем весе изображения будут загружаться медленно — пользователь не станет ждать, а выйдет из рассылки.
Также важно прописать для изображений alt-атрибут. Этот текст отобразится на месте картинки, если она не прогрузится, и читатель поймет, о чем речь.
Узнать больше о картинках в рассылках можно в статье.
Темная тема
Темная тема (dark mode) — тренд в email-маркетинге, который все больше становится базой. Несмотря на это, почтовики отображают темную тему по-разному. Поэтому в идеале делать каждое письмо в двух вариантах: в светлой теме и в темной. Для этого удобно использовать шаблоны.
Если у вас пока нет шаблонов, при создании рассылки:
- Используйте цвета, которые контрастно смотрятся в обеих темах
- Выбирайте картинки с прозрачным фоном — PNG
- Выделяйте темные элементы на прозрачном фоне (обводкой, тенью, свечением)
- Кнопки CTA делайте контрастными или добавляйте обводку
- И главное — тестируйте, как рассылка отображается в разных темах
Адаптивность
Письмо должно одинаково хорошо выглядеть и на стационарных компьютерах, и на ноутбуках, и на планшетах, и на телефонах. И здесь помогает адаптивная верстка.
Ее можно сделать в HTML или в сервисе рассылки. Если сообщение типовое, для него не нужны нестандартные блоки, хватит возможностей сервиса. Главное — проверить перед отправкой, как письмо смотрится на разных устройствах и в разных почтовых клиентах.
Если сказать совсем коротко, при взгляде на письмо ничего не должно раздражать. Никаких «скачущих» или наезжающих друг на друга, элементов. Проверьте шрифт — здесь все должно быть единообразно. В тексте не должно быть грамматических ошибок, лишних пробелов и странных интервалов. Постарайтесь сделать так, чтобы все в письме — от иконок до кнопок — сочеталось друг с другом по цветовой гамме. Высший уровень — когда все элементы складываются в единый стиль.
Как сделать классное письмо без дизайнера
Хорошая новость: для создания адаптивного письма далеко не всегда нужен UX/UI-дизайнер. Если у вас стандартная рассылка без анимации, игр и других необычных решений, выручит блочный редактор.
Блочный редактор писем — это визуальный конструктор, в котором письма собираются из разных блоков: текст, кнопки, картинки.
Такой блочный редактор есть в Sendsay. По принципу работы он похож на конструктор лендингов. Здесь тоже нужно продумать, как примерно будет выглядеть письмо, а потом собрать его из блоков.
Чтобы создать письмо в блочном редакторе Sendsay, понадобится идея рассылки и немного времени. Следуйте алгоритму:
- Подберите шаблон (базовый/тематический) или начните собирать письмо с нуля
- Настройте секции (части рассылки, куда будете вставлять блоки). Для каждой секции можно задать стиль, персонализацию и количество колонок
- Добавьте блоки в настроенные секции
- Задайте настройки рассылки: цвет текста, цвет ссылок, цвет кнопок и фон.
- Проверьте письмо в режиме предпросмотра: как оно выглядит на компьютере, планшете и смартфоне. Также его можно отправить в разные почтовые клиенты (Яндекс, Mail, Gmail, Outlook), чтобы оно точно отобразилось правильно
В результате письмо получится адаптивным: то есть правильно откроется на всех устройствах. Элементы будут расположены в правильном порядке, а рассылка будет отражать ваш фирменный стиль.
Подробная инструкция о том то, как сделать такое письмо без помощи UX/UI-дизайнера — в базе знаний Sendsay.
Бонус: разбор письма на UX/UI-дизайн
Давайте на примере посмотрим, что означает UX/UI-дизайн в email-рассылке. Разберем письмо от строительного магазина «Леруа Мерлен».
У письма простая структура:
- шапка
- баннер
- текст
- подборки товаров
- подвал
Поэтому смысл считывается с ходу. Здесь нам предлагают записаться на бесплатное проектирование кухни и посмотреть товары для нее. Более того — если хочется перейти на сайт, это можно сделать из шапки. А если вдруг возникло желание отписаться — в подвале ждет ссылка на отписку.
Цветовая гамма выдержана в фирменных цветах бренда. Если упростить, Леруа Мерлен использует всего три оттенка: фирменный зеленый, черный и белый — ничего лишнего. И письмо удается выдержать в этой цветовой гамме.
Фирменным зеленым цветом компания расставляет акценты: на баннере, в подзаголовке, в кнопке. Цвет распределен по письму равномерно — так все выглядит еще гармоничнее.
Расположение элементов тоже удачное. В письме есть две подборки:
- Первая ведет на категории товаров: в ней 2 колонки + кнопки CTA
- Вторая ведет на конкретные товары: здесь 3 колонки + ссылки CTA
Такой ход как бы показывает, что категории интереснее и важнее — и читатель фокусируется на них. А бизнесу это выгодно: если пользователь перейдет в категорию, то вероятность покупки будет выше, если бы он просто перешел в отдельный товар.
Шрифт для текста выбран простой — это Arial. Главное компания выделяет жирным шрифтом или подзаголовками. Никакого курсива, скачков размеров и других «фишечек». В результате письмо легко читать.
Все изображения в письме видны сразу, а значит их оптимизировали по размеру.
И наконец — адаптивность. Письмо от Леруа Мерлен хорошо отображается и на компьютерах, и на мобильных телефонах. Текст не выходит за пределы макета, интервалы между элементами не сбиваются, карточки не становятся меньше.
UX/UI-дизайн в рассылках: главное
- В 2023 году недостаточно сделать интересное и полезное по содержанию письмо — его важно правильно подать. Современные читатели не будут продираться через сплошной текст, искать ссылку на отписку или нужную кнопку. Люди хотят легкости, удобства, эстетичности — в общем, классного опыта от взаимодействия с компанией. И все это обеспечивает UX/UI-дизайн.
- Письмо с продуманным UX/UI-дизайном одинаково хорошо выглядит на разных устройствах и в разных почтовых клиентах. В нем гармоничная цветовая гамма, грамотно расставленные элементы, есть акценты на главном. В результате читатель с легкостью считывает смысл и совершает целевое действие. И что еще важнее — у читателя остается положительное впечатление от взаимодействия с компанией, а это влияет на дальнейшие покупки.
- Сделать такое удобное и красивое письмо можно без помощи UX/UI-дизайнера. Достаточно использовать блочный редактор, который встроен в сервис рассылок. Он работает по принципу конструктора: нужно добавить в письмо блоки, настроить по стилю и цветам и проверить перед отправкой. Готовое письмо корректно отобразится на всех устройствах и донесет до аудитории именно то, что вы хотели.
