Оформление писем часто является самым важным фактором, побуждающим подписчиков читать контент. Если дизайн писем плохо продуман или их трудно воспринимать, подписчики с высокой вероятностью удалят их, даже не прочитав.
С другой стороны, если дизайн писем хорошо продуман и их легко читать, подписчики скорее всего прочтут их (и, конечно, предпримут те действия, которые вы хотели бы, чтобы они совершили).
Единственный способ сделать это правильно и хорошо — сосредоточиться на визуальной иерархии в дизайне. Но что такое визуальная иерархия? Позвольте нам объяснить.
Визуальная иерархия 101
По сути, визуальная иерархия — это то, как элементы дизайна расположены в письмах в зависимости от их важности. Она используется для того, чтобы направить внимание читателей на те аспекты, которые имеют наибольшее значение. В контексте email-дизайна она гарантирует, что получатели быстро усвоят сообщение, даже если их концентрация внимания ограничена.
Существует несколько ключевых принципов визуальной иерархии в email-дизайне:
- Размер и масштаб: крупные элементы, очевидно, привлекают больше внимания, поэтому заголовки должны быть крупнее основного текста и так далее.
- Цвет и контраст: яркие цвета и высококонтрастные элементы выделяются на нейтральном фоне.
- Типографика: выбор шрифта, его жирность и стиль помогают различать типы контента и степень его важности для читателя.
- Расстояние между знаками: стратегически правильно расположенное свободное пространство также помогает оптимизировать внимание аудитории и улучшает читабельность (давайте посмотрим правде в глаза: люди бегло просматривают письма в 2025 году).
- Указатели направления: это визуальные элементы, которые направляют взгляд к важному контенту (стрелки, линии, указательные фигуры и т. п.) и являются важной частью того, к чему мы идем.
Мы расскажем, как связать эти элементы воедино, используя подсказки и типовые паттерны чтения, чтобы эффективно создать визуальную иерархию в письмах.
Для начала мы рассмотрим наиболее распространенные проверенные методы верстки писем: разметку в виде перевернутого треугольника, Z-образную разметку и F-образную разметку.
Из этой статьи вы узнаете, как работает каждая разметка письма и почему они подходят для определенных типов писем, а также получите несколько советов о том, как выбрать правильную разметку для своих писем.
1. Дизайн письма в виде перевернутого треугольника
Разметка в виде перевернутого треугольника — одна из самых популярных для писем. Поскольку такой дизайн соответствует естественному направлению, в котором люди сканируют глазами письма, вы сразу же создаете надежную визуальную иерархию.
Ниже приведены два отличных примера, чтобы дать представление о том, как выглядит такая разметка. Вот пример от Rootless:
(Источник: Email Love)
А вот еще один пример от Postable:
(Источник: Email Love)
В разметке в виде перевернутого треугольника наиболее важная информация располагается в верхней части письма, а менее важная — ниже. Это позволяет людям легко просмотреть письмо и быстро найти нужную часть, а также создает визуальную иерархию, о которой мы говорили ранее.
Ниже показана визуальная иерархия и то, как глаза читателей ориентируются в этих письмах:
Подумайте вот о чем:
- вы создаете в своих письмах элемент, привлекающий внимание;
- затем вы создаете предвкушение, используя вторичную, вспомогательную информацию;
- и наконец, с помощью призыва к действию вы добиваетесь того результата, которого хотели достичь в первую очередь.
Вот почему этот принцип может стать геймченджером, особенно если требуется убедить читателей совершить нужное действие в письмах.
Когда использовать перевернутый треугольник в email-дизайне
Разметка в виде перевернутого треугольника — отличный выбор для писем, в которых необходимо быстро передать большой объем информации.
Например, это хороший вариант для продающих, маркетинговых и промописем. Цель: «зацепить» читателей, предложить им больше информации и заставить их совершить нужное действие.
Если нужно продвигать несколько товаров, эта разметка может оказаться не лучшим вариантом. В ближайшее время мы рассмотрим письма с несколькими товарами, но в таких сообщениях читатели могут совершать различные действия, поэтому тут необходим другой способ привлечь внимание к контенту.
2. Z-образный email-дизайн
Z-образная разметка — еще одна популярная разметка писем, основанная на естественном движении глаз человека по странице.
Когда люди смотрят на страницу в интернете, их глаза обычно движутся по Z-образной траектории. Основная причина этого заключается в том, что в западном мире при чтении слева направо мы склонны перескакивать вперед при знакомстве с контентом.
Особенно это касается писем.
Вот два примера того, как выглядит email-дизайн с Z-образной структурой. Первый — от Postable:
(Источник: Email Love)
Вот еще один пример от Samsung:
(Источник: Email Love)
Разметка в виде буквы Z использует естественную схему сканирования глазами, при которой наиболее важная информация размещается в верхней части письма, менее важная — в середине, а призыв к действию — внизу или на краю каждой точки «воображаемой буквы Z».
Как показано на рисунке, вы можете видеть продвижение слева направо, при этом каждая секция естественным образом притягивает взгляд к следующей части. Однако это не значит, что все письмо должно быть в форме одной большой буквы Z.
Хотя этот способ может подойти для форм регистрации, посадочных страниц и большинства вводных частей письма, он лучше работает со сторителлингом, который может иметь форму последующих маленьких букв Z, создавая зигзагообразный рисунок.
Когда использовать Z-образный email-дизайн
Z-образная разметка — хороший выбор для писем, в которых необходимо передать много информации или контента, но при этом сохранить визуальную привлекательность.
Например, это хороший выбор для писем с информацией о товарах, для приглашений на мероприятия и для путешествий. Поскольку в таких письмах есть несколько призывов к действию и точек интереса, эта разметка может понравиться подписчикам, которые обычно просматривают почту или хотят быстро получить информацию по каждому разделу вашей кампании.
Если необходимо, чтобы в письмах было совершено только одно действие, стоит обратить внимание на дизайн в виде перевернутого треугольника, о котором мы говорили ранее.
Однако если вы хотите, чтобы читатели получили больше, чем один фрагмент информации, эта разметка будет идеальной.
3. F-образный email-дизайн
F-образная разметка — это, по сути, разновидность Z-образной разметки.
При таком стиле разметки наиболее важная информация размещается в верхней части письма, менее важная — в левой и правой, а призыв к действию — в нижней.
Это, опять же, повторяет естественное движение глаз читателя слева направо, ведя его от одной части к другой, при этом призыв к действию стратегически расположен слева в начале следующего раздела, к которому притягивается взгляд. По мере продвижения по тексту движения вправо становятся все более короткими, что в конечном итоге приводит к призыву к действию.
В качестве дополнительного контекста приведем два отличных примера такого дизайна в письмах. Первый — от Dwell:
(Источник: Email Love)
Другой пример — от Asana:
(Источник: Email Love)
Как и в случае с Z-образной разметкой, F-образная разметка основана на нашей склонности к сканированию контента слева направо.
Исследования по отслеживанию движения глаз, проведенные Nielsen Norman Group, подтверждают это эмпирическими данными. Если читатели потребляют цифровой контент таким образом, то почему бы письмам не быть оформленными соответствующим образом, чтобы соответствовать привычкам читателей? Мы часто обсуждаем эту тему в своем блоге про email.
Вот схема того, как глаза читателя сканируют контент, следуя F-образной фигуре:
Располагая различные части контента письма в форме буквы F, вы расставляете приоритеты в зависимости от того, насколько важна каждая из них.
Можно поместить наиболее важные части в «горячие точки» шаблона, чтобы повысить эффективность чтения. Это позволит воспринять и усвоить контент даже при беглом чтении.
Когда использовать F-образный email-дизайн
Разметка в виде буквы F — отличный выбор для писем, в которых необходимо передать большой объем информации и при этом сделать их визуально привлекательными и легко читаемыми на мобильных устройствах.
Например, это хороший выбор для рассылок с анонсами товаров, новостями компании и для писем от службы поддержки клиентов.
Если вы занимаетесь публикацией новостей, эта разметка отлично подходит для создания коротких заголовков с фрагментами статьи и прикрепленным изображением, а затем ведет читателей к призыву к действию, направленному на прочтение полной версии статьи.
Однако такая разметка не лишена потенциальных изъянов. Вы временно нарушаете структуру контента, сокращая его по мере продвижения, поэтому есть вероятность того, что несколько призывов к действию будут проигнорированы. Как правило, лучше всего использовать эту разметку для контента писем после создания убедительного вступления с помощью другой разметки, например в виде перевернутого треугольника.
F-образная разметка и даже Z-образная разметка также не идеальны для оптимизации под мобильные устройства. Не забывайте, что большинство писем, скорее всего, будет прочитано на мобильных устройствах, поэтому учитывайте это при выборе правильного шаблона на пути к созданию визуальной иерархии.
Какую разметку email-дизайна следует использовать?
Как всегда, выбор оптимальной разметки письма зависит от типа отправляемого сообщения и целевой аудитории.
При выборе разметки письма обязательно учитывайте следующее:
- тип отправляемого вами письма;
- сообщение, которое нужно передать;
- тон сообщения;
- дизайн письма.
После изучения этих вопросов вам будет немного легче решить, какой шаблон или разметку использовать. Хотя есть еще один важный фактор, требующий внимания: целевая аудитория.
Если не учитывать потребности аудитории и то, к кому обращаешься, никакой email-дизайн не принесет желаемых результатов. Однако можно использовать дизайн и определенные разметки, чтобы привлечь внимание различных типов аудитории.
Письма обладают феноменальной способностью динамически предоставлять контент различным аудиториям. Это означает, что можно внимательно следить за тем, что создается в различных частях письма, без необходимости переписывать его снова и снова для разных сегментов или целей.
Например, если вы отправляете письмо демографической группе, у которой, как считается, мало времени, то стоит обратить внимание на разметку, которая обеспечивает быструю оптимизацию преимуществ с четким сообщением и размещением CTA ближе к верхней части письма.
Если же аудитория предпочитает разнообразный контент, разметку необходимо изменить с учетом нескольких разделов, сценариев или основных моментов.
Именно здесь TLDR и резюме, встроенные в различные разметки, могут стать находкой для дизайна письма.
Что касается использования трех рассмотренных нами разметок для усиления визуальной иерархии, то вот еще несколько коротких примеров:
Пример 1: если вы отправляете продающее письмо, возможно, стоит использовать разметку в виде перевернутого треугольника, чтобы быстро донести свою мысль.
Пример 2: если вы отправляете маркетинговое письмо о нескольких товарах, возможно, стоит использовать Z-образную разметку, чтобы создать визуальную привлекательность сообщения, которое подписчики захотят дочитать до конца.
Пример 3: если вы отправляете письмо от службы поддержки, возможно, стоит использовать разметку в виде буквы F, чтобы люди могли легко найти необходимую им информацию.
В завершение
Не существует жестких правил, определяющих, какой шаблон следует использовать. При желании можно объединить все три эти разметки в одном письме. Как всегда, независимо от выбранной разметки, убедитесь, что письмо хорошо оформлено и легко читается. Используйте четкий и лаконичный язык, а также убедитесь, что призыв к действию ясен и понятен.
0 комментариев