Більшість думає, що мати добро цільова сторінка досить, якщо це візуально привабливо. Але реальність така, що навіть якщо ви наймаєте найкращого дизайнера або дизайнера веб-сторінок у світі, це не гарантує, що ваша цільова сторінка перетвориться і запрацює.

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

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

1. Візуальна вага впливає на тривалість уваги користувача

Подумайте про свою цільову сторінку як про набір елементів. Серед цих елементів є текст, кнопки, фотографії, форми та піктограми.

Кожен із цих елементів пов’язаний із вагою.

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

Ми досягаємо цього, збільшуючи зорова вага.

Що таке візуальна вага?: Це сила, з якою елемент композиції привертає погляд користувача, чим більша візуальна вага цього елемента, тим більша сила привабливості буде.

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

цільовій

Якщо ти CTA важка (більше візуальна вага), відвідувачі будуть витрачати більше часу, звертаючи на це увагу.

Чим більше часу користувач витрачає, зосереджуючись на CTA, тим більша ймовірність виконати цю дію.

Прикладом використання є те, як вони це роблять у цій веб-компанії у Валенсії:

2. Які фактори надають більшої візуальної ваги елементам ваших цільових сторінок

Є багато способів зважити елемент на цільовій сторінці. Для простоти ми обмежимося трьома: через колір, контраст та розмір.

Колір

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

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

синя кнопка важить, візуально.

А тепер подивіться на цей інший приклад із зайвим синім:

Ця посадка має синій заголовок, літери та дві кнопки.

Яку інформацію користувач отримує тут? Все. Відвідувач цієї цільової сторінки буде дезорієнтований.

Синя кнопка тут не має ваги. Оскільки все блакитне, цей елемент втратив значення і намір.

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

Контраст

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

Контраст дозволяє користувачеві легше ідентифікувати предмети:

Це просто, важливі елементи потребують високої контрастності. У наведеному вище прикладі ви чітко бачите різницю між низькою і високою контрастністю.

Світлий кольоровий текст на світлому фоні забезпечує низьку контрастність.

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

Ви повинні створити контраст на тлі і одночасно між іншими елементами посадки, як чорний текст і кнопка заклику до дії.

Елементи з високою контрастністю вони візуально важкі.

Розмір

Чим більше предмет, тим більша його вага.

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

Заголовок такого розміру вимагає уваги користувача і робить його першим прочитаним.

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

Результатом поєднання розміру елемента з його кольором та контрастом є те у вас вже є елемент, на який користувач буде звертати пильну увагу.

3. Що має мати зорова вага, а що не повинно мати її

Найважливіші елементи цільова сторінка би:

  • Основний тримач або колонтитул (UVP)
  • Вторинний заголовок або підзаголовок
  • Кнопка із закликом до дії (CTA)

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

Ми побачимо, як застосувати візуальну вагу до кожного з цих елементів.

Ваш основний заголовок або унікальна цінова пропозиція

Основним заголовком або унікальною пропозицією вартості повинен бути елемент з більше ваги вашої сторінки.

Коли користувач потрапляє на вашу цільову сторінку, у вас є близько 5 секунд, щоб продати те, що ви пропонуєте.

Єдиний спосіб це зробити - це змусити його прочитати та засвоїти ваш заголовок.

Це повинно бути ВЕЛИКИЙ, найбільший розмір шрифту на вашій сторінці. Навіть більше, ніж ваш логотип або бренд.

Основний заголовок або заголовок також повинен мати символ ВИСОКИЙ КОНТРАСТ. Якщо у вас є сумніви з цього приводу, раджу не використовувати кольорові шрифти. Якщо текст на темному тлі, використовуйте білий, а якщо на світлому фоні - чорний.

Заголовок не повинен мати той самий колір, що і кнопка CTA.

Ваш підзаголовок або додатковий заголовок

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

Розмір шрифту повинен бути більше базового абзацу на вашій цільовій сторінці, але менший за розмір шрифту вашого основного заголовка.

Повинні мати ВИСОКИЙ КОНТРАСТ так само, як основний заголовок. Так само він не повинен мати такий же колір, як кнопка CTA.

Візуально цей елемент є третім за значимістю на вашій цільовій сторінці.

Ваша кнопка із закликом до дії (CTA)

Вважається гарною практикою мати на кожній сторінці визначену мету та вести користувачів до цієї мети через CTA (заклик до дії), заклик до дії.

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

Кнопка із закликом до дії доповнюється повідомленням вашого головного заголовка або заголовка (UVP) і навпаки. Одне не може бути без іншого, і ці окремі елементи втратили б своє значення.

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

У будь-якому випадку, ти Кнопка CTA повинна бути ВЕЛИКОЮ, так що його легко побачити та натиснути.

Він також повинен мати ВИСОКИЙ КОНТРАСТ, не тільки кнопки та з фоном, але також на рівні кольору шрифту та кольору тла самої кнопки (жовтий у прикладі вище).

Колір фону CTA повинен бути унікальним у всіх ваших посадках, і вражаючих.

Приклад: якщо кольорова палітра вашої посадки зелена та синя, ви можете використовувати помаранчеву кнопку CTA.

Останнім, кнопка CTA повинна виглядати як справжня кнопка.

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

4. Здоровий глузд - це ваш найкращий союзник у розробці

Навчання користуватися візуальною вагою - це велика перевага, яку слід враховувати, коли ми хочемо, щоб відвідувачі цільової сторінки генерували конверсії.

Однак, щоб знати, які елементи ваших цільових сторінок є найважливішими, точної науки не існує.

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

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

Якщо ви хочете, щоб користувач натиснув вашу кнопку, Ви бачите це неозброєним оком?

Якщо ви хочете пояснити користувачеві, який дивовижний ваш продукт, Чи має він пріоритет над іншими елементами?

Думайте про свою цільову сторінку так, ніби це реальна розмова. Ви повинні спілкуватися голосно і чітко.

Застосовуйте такий спосіб мислення до посадки і використовуйте візуальну вагу, щоб вести відвідувача від початку до кінця розмови.

Останні висновки

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

  • Економно додавайте зорову вагу: Не всі елементи посадки важливі. Ретельно підбирайте ключові елементи і додайте до них необхідну вагу.
  • Встановіть єдину ціль конверсії для своїх відвідувачів: Знання того, чого хочуть користувачі, які приземляються на вашій посадці, є ключовим для правильного нанесення зорової ваги.
  • Використовуйте візуальну вагу, щоб вести користувача: Якщо ми робимо це належним чином, правильна різноманітність ваг може вивести користувача на правильний шлях до CTA.
  • Надайте кнопкам зовнішній вигляд: забудьте про тенденції у веб-дизайні тут, якщо це негативно впливає на візуальну вагу кнопки із закликом до дії.
  • Задайте собі здоровий глузд: Мій заклик до дії помітний і привертає увагу? Я керую користувача куди хочу? Чи швидко читається моя основна назва? Чи продаю я свій товар за 5 секунд?

Сподіваюся, ця стаття була корисною для того, щоб ви зрозуміли важливість та силу застосування належної візуальної ваги до елементів цільових сторінок. Про всяк випадок я додав визначення поняття "цільова сторінка" та інші маркетингові концепції. Це безпосередньо перекладено зі статті Крейга Моррісона, і я також додав кілька особистих приміток та концепцій.