Оформлення листів часто є найважливішим фактором, що спонукає підписників читати контент. Якщо дизайн листів погано продуманий або їх важко сприймати, підписники з високою ймовірністю видалять їх, навіть не прочитавши.
З іншого боку, якщо дизайн листів добре спроектований і їх легко читати, підписники, найімовірніше, прочитають їх (і, звісно, зроблять ті дії, які ви хотіли б, щоб вони здійснили).
Єдиний спосіб зробити це правильно і добре — зосередитися на візуальній ієрархії в дизайні. Але що таке візуальна ієрархія? Дозвольте нам пояснити.
Візуальна ієрархія 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 коментарів