Підвищення конверсії: 9 найважливіших елементів правильного шаблону email-розсилки

image

Ви проводите A/B-тестування, ретельно сегментируете ринок і підбираєте кожне слово в тексті своєї поштової розсилки, але що ви робите, щоб оптимізувати його розмітку? Естетика вашого шаблону так само важлива, як і зміст самого листа. Тому давайте розглянемо дев'ять елементів проектування, які допоможуть вам збільшити конверсію.

Дотримуйтеся оптимальної ширини електронного листа

Ширина електронного листа не повинна перевищувати 600px. Це стандартна ширина, при якій ваш email буде коректно відображатися у веб — і десктоп-клієнтів.

image

Скріншот з сайту sitepoint

У програмах Outlook, Thunderbird і Apple Mail вікно попереднього перегляду обмежена за розміром, тому ширина листа не повинна перевищувати 600px. І не варто турбуватися з приводу відображення листа на мобільних пристроях. Про це ми поговоримо в наступному розділі.

Застосовуйте підхід «mobile first»

На початку 90-х при верстці електронних листів веб-розробники дотримувалися концепції отказоустойчивости (graceful degradation). В даний час все частіше застосовується техніка прогресивного поліпшення (progressive enhancement), яка передбачає проектування в першу чергу для мобільних пристроїв.

image

Шаблон вашого листа повинен бути адаптивним, при цьому одного лише використання медиазапросов недостатньо. Щоб користувачам було зручно читати ваш лист з мобільного, необхідно створити візуальну ієрархію контенту і винести найважливішу інформацію на початок сторінки.

Першим ділом потрібно стиснути контент листи в одну колонку. Одноколоночная структура дозволить вашим листом масштабуватися під екрани невеликих мобільних пристроїв і лінійно розподілити інформацію.

Ще одна хитрість, яка допоможе зробити ваш email більш привабливим і менш перевантаженим – приховати частину контенту для перегляду з мобільного. Це може бути особливо корисним, коли в листі зазначаються посилання на сторінку, не підтримувану мобільними пристроями. У разі, якщо інформація не є суттєво важливим, в мобільній версії її можна сховати. Надавши користувачам менше варіантів, ви можете збільшити показник клікабельності вашого головного заклику до дії.

Використовуйте «плаваючий гібридний» дизайн

Близько 66 відсотків всіх електронних листів відкриваються на мобільних пристроях. Більш того, 70 відсотків користувачів смартфонів стверджують, що відразу ж видаляють email, якщо на їх пристрої відображатися некоректно. Тому, якщо ви не приділяєте достатньо уваги тому, як ваші листи виглядають на телефонах і планшетах, то швидше за все, ваші маркетингові кампанії малоефективні. Зрештою, такий підхід робить негативний вплив на сам бренд і рентабельність інвестицій.

Безсумнівно, кожен елемент дизайну шаблону вашого листа принципово важливим для досягнення успіху, але особливу увагу слід приділити його адаптивності.

Кращі електронні листи, призначені для читання з мобільних пристроїв, створюються з адаптивних або «плаваючих гібридних» (fluid hybrid) шаблонів. «Плаваючий гібридний» дизайн приходить на зміну дизайну з використанням технології media queries. Справа в тому, що завдяки такому «еластичному» дизайну, електронний лист відображається коректно навіть на тих клієнтів і пристрої, які не підтримують сучасний CSS.

image

Хочете відразу приступити до справи? На ресурсі Email on Acid ви можете знайти безкоштовний «плаваючий гібридний» шаблон, який був протестований на найбільш популярних клієнтів і пристроях.

Додайте візуальні елементи

Стара приказка говорить: «Краще один раз побачити, ніж сто разів почути». Вона актуальна і для email-маркетингу. Близько 80 відсотків вашої аудиторії так чи інакше побачать ваш лист, тому правильно підібране зображення надзвичайно важливо для передачі повідомлення.

При виборі зображення для свого листа пам'ятайте, що перевагу слід віддавати фотографій людей. Зображення осіб обробляються так званої «веретеноподібної мозкової звивиною» – частиною мозку, яка відповідає за емоції. Такі зображення дозволять читачеві створити емоційний зв'язок з вашим брендом або контентом листи.

image

У своєму листі благодійна організація charity:water ідеально підібрала зображення до тексту. У сукупності обидва елементи створюють переконливу історію, яка нікого не залишить байдужим.

Не перестарайтеся з кількістю зображень

Зображення повинно бути одним із елементів шаблону вашого листа, але не єдиним його елементом. У деяких поштових клієнтів завантаження зображень може бути заблоковано за замовчуванням або за бажанням користувача. В такому випадку зображення, з яких складається ваш лист, не донесуть до одержувача ніякої інформації!

Нижче наведено приклад листа, повністю складається із заблокованих зображень:

image

І навіть повідомлення «клацніть правою кнопкою миші для завантаження зображення» не зробить лист більш привабливим. Щоб уникнути такого невдалого досвіду, завжди додавайте до зображення альтернативне опис. У нашій статті про правила верстки email-листів можна знайти кілька порад по додаванню альтернативного тексту.

Виберіть правильний шрифт

Шрифт у вашому листі повинен бути не тільки читабельним – він повинен бути відображенням вашого бренду і забезпечувати його однакове уявлення в різних медіа.

Особливу увагу потрібно приділити розміру шрифту. Переконайтеся, що він збільшується на екрані мобільних телефонів, щоб користувачам не довелося стискати або збільшувати ваш email. Для пристроїв Apple рекомендується за замовчуванням використовувати шрифт розміром 17px для основного тексту, а мінімально допустимий розмір становить 11px. Для пристроїв Android краще використовувати шрифт розміром 16px за замовчуванням для основного тексту при мінімально допустимому розмірі 12px. Таким чином, розмір шрифту основного тексту повинен бути дорівнює 16 – 17px, а розмір виносок і підписів до зображень – 12px.

Исследование показало, що шрифти Courier і Verdana є найбільш читабельними, однак, в цілому, читачі віддають перевагу шрифти Arial і Verdana. Ось короткий список універсальних шрифтів:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Σψμβολ2 (Symbol)
  • Webdings

Використовуйте лінії, щоб впорядкувати вміст листа

Лінії надають листа порядок і форму. Тому при використанні ліній – неважливо жирних або тонких, – переконайтеся, що розташування елементів листа не призводить до плутанини або невірного сприйняття матеріалу.

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

image

У своїй інформаційній розсилці компанія Cook Smarts дуже грамотно використовує лінії, впорядковуючи свої корисні поради та рецепти. В результаті в одержувача листа не створюється враження, що в його поштовій скриньці вибухнула кулінарна книга.

Використовуйте «негативний простір»

Зовсім не обов'язково заповнювати кожен пробіл шаблону вашого листа. Біле (негативний, вільний) простір робить повідомлення більш зручним для читання і загального сприйняття, допомагає виділити найбільш важливі аспекти і стимулює уяву читача.

При створенні шаблону листа дуже важливо гармонійно поєднувати текст і зображення з порожнім простором, щоб читачеві було легше опрацювати і засвоїти отриману інформацію.

Існує два типи порожнього простору:

  • Активне порожній простір – прогалини, які додаються навмисно, щоб розмежувати елементи контенту і утримати увагу читача.
  • Пасивне порожній простір – прогалини, довільно виникають в ході проектування. Наприклад, простір між словами в рядку або навколо логотипу.
Наведений нижче шаблон листа від сервісу envatotuts+ є відмінним прикладом вдалого використання негативного простору. Переглядаючи зміст цього листа, читач легко сприймає різні його елементи.

image

При проектуванні вашого наступного шаблону пам'ятайте: те, що ви виключаєте з листа, так само важливо, як і те, що ви в нього додається.

Додайте переконливий заклик до дії

Якщо ви докладаєте зусиль до створення привабливого заголовка і цікавого контенту, але при цьому забули виділити свій заклик до дії (CTA), то вас чекає повний провал. Кнопка призову до дії повинна привертати увагу читача, переконайтеся, що вона виділяється серед інших елементів листа.

У цьому вам може допомогти колірне рішення. Колір CTA повинен контрастувати з кольором тексту і фону шаблону.

Крім того, кнопка CTA повинна бути сумірною з іншими елементами електронного листа. На платформі Hubspot ви можете скористатися корисним інструментом для вимірювання кнопки заклику до дії.

image

І, нарешті, не варто розміщувати свій заклик до дії на зображенні. Як згадувалося вище, багато поштові клієнти блокують зображення за замовчуванням. В такому випадку читачі не побачать цей важливий елемент вашого листа.

Замість цього використовуйте «куленепробивні» кнопки на VML і CSS, які будуть працювати навіть при блокуванні зображень. Докладніше про це ви можете прочитати в статье EOA «Остання куленепробивна кнопка, яку ви коли-небудь скористаєтеся». В ній ви також знайдете код для розміщення кнопки CTA по центру шаблону.

Інші матеріали в блозі «Пєчкіна»:

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.