fbpx

Support Ukrainians. Boycott russian and belarusian products

clock icon Время чтения 7 мин. | 21.2.2024 |
21 Лютого, 2024

Структура правильної Landing Page і види функціональних блоків

Правильна Landing Page залучає і проводить користувачів до цільової дії. Тут важливо все: етап підготовки (аналіз цільової аудиторії та конкурентів), розробка прототипу, текст, дизайн, послідовність розташування блоків.

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

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

Що таке Landing Page?

Відповідно до Вікіпедії Landing Page (у перекладі з англ. цільова сторінка) – web-сторінка, основне завдання якої полягає в зборі контактних даних потенційних покупців (клієнтів).

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

Як правило, на Landing Page налаштовують і вмикають контекстну або таргетовану рекламу в Facebook і Instagram. Також можливе SEO-просування лендинга, якщо ви створите ще блог та інші додаткові сторінки. Але тоді, по суті, вже виходить повноцінний сайт, де деякі сторінки створені у вигляді Landing Page.

Структура лендінг пейдж

Під час розроблення Landing Page найчастіше використовують дві моделі залучення користувача до взаємодії з сайтом (процес купівлі товару, замовлення послуги, підписки на розсилку тощо) – це AIDA («увага → інтерес → потреба → дія») і PMPHS («біль → більше болю → надія → рішення»).

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

Створюємо перший екран

Розробляючи структуру лендінг пейдж, варто згадати закон Парето або принцип 20/80 (20% зусиль дають 80% результату, а решта 80% зусиль – лише 20% результату). Цей закон повністю застосовний при оформленні першого екрану лендінгу – тієї частини сторінки, яка доступна користувачеві без скролінгу.

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

Тому важливо, щоб перший екран Landing Page без прокрутки містив найважливішу (ключову) інформацію для відвідувача: .

  • іміджеве/атмосферне зображення або відео – оскільки цей блок є емоційною частиною, зрозуміти, що працює краще, можна тільки за допомогою спліт-тестування;
  • заголовок + підзаголовок – конкретна і ємна УТП (унікальна торговельна пропозиція, оффер), щоб з перших секунд зацікавити відвідувача;
  • форма захоплення із закликом до дії + кнопка (CTA + CTA-button);
  • тригери (блок довіри/переконання).

Тепер давайте розглянемо кожен пункт докладніше.

Іміджеве/атмосферне зображення

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

Розглянемо це положення на прикладі сайту агентства інтернет-маркетингу «Текстум Вінниця». У нас на першому екрані розташовані: хедер, меню, тематичні зображення на фоні, логотип.

А цей приклад узято з сайту Mindvalley – одного з найбільшого у світі університету інноваційної освіти. І, звісно ж, він наведений неспросто: мені як автору цікава ця сфера діяльності. На сайті Mindvalley представлено відео з ключовими моментами із заходів спільноти, меню, логотип, заголовок і підзаголовок. У відео є «гачки» для широкої цільової аудиторії. Далі в тексті я ще покажу приклади з цього сайту.

А це приклад опису з фото:

А тепер зупинимося докладніше на кожному елементі, що використовується на першому екрані.

Хедер – тут у нас знаходяться контактні телефони та кнопка «Замовте дзвінок». У шапці сайту можна вказати і будь-які інші способи зв’язку. Наявність контактів на лендінг пейдж підвищує довіру користувачів до компанії.
Меню –
якщо у вас лише одна цільова сторінка, то воно не потрібне. У нас так і було – спочатку була одна сторінка, оптимізована під копірайтинг, що продає, потім ми створили лендінг пейдж під кожну зі своїх послуг, а потім зробили повноцінний сайт. Хедер і меню у нас закріплені і під час скролінгу сторінки вони завжди перебувають у полі видимості.
Логотип –
у нас знаходиться на фоні, його можна розташовувати і в меню. Для тих, хто не знає, лого – емблема, символ або графічний знак, який використовується в корпоративному стилі компанії і формує зорову впізнаваність бренду.
Тематичні зображення/фон або відео –
можна створити варіант, як у ТОВ «Текстум Вінниц»”, або ж задіяти якісну фотографію чи невелике відео. Тут є важливий момент: текст має добре читатися на фоні.

Заголовок + підзаголовок

Це оффер, який повинен:

  • бути конкурентоспроможним;
  • передавати суть бізнесу;
  • розповідати про вигоди для користувачів;
  • побічно відображати переваги товару (послуги).

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

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

Форма захоплення із закликом до дії

На першому екрані важливо розмістити не просто кнопку, а саме форму заявки із закликом до дії (Call-To-Action або CTA). Заклик до дії має бути зрозумілим, привабливим і нести цінність для відвідувача, щоб спонукати заповнити та надіслати заявку.

Приклади хорошого CTA:

  • Для початку скачайте бриф – і почніть роботу з нами;
  • Отримати консультацію – Відповім протягом двох годин;
  • Скачайте наш чек-лист – У ньому ви знайдете ще 132 критерії якості, за якими ми перевіряємо свою роботу;
  • Завантажити прайс-лист із цінами – Ознайомтеся з повним переліком послуг та їхньою вартістю;
  • Перевірте якість тексту – Дізнайтеся, скільки грошей ви недоотримуєте.

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

Важливо: кнопка із закликом до дії має бути контрастною до фону, помітною, а при натисканні на неї – відкриватися форма.

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

Хороший приклад: якщо на кнопці заклик до дії «для початку скачайте бриф», то логічно, що наступний крок – завантажити бриф.

Поганий приклад: якщо ми призначаємо кнопки «Розрахувати вартість», «Отримати консультацію» як заклик до дії, то наступний крок явно не повинен бути «Чекаю дзвінка».

Форма – елемент, у яку користувач вносить необхідні вам контактні дані. Вона складається з:

  • заголовка (підзаголовка) – має містити інформацію про вигоду і цінність для користувача;
  • полів для введення контактів – для кожного проєкту поля можуть бути різними: ім’я, телефон, електронна пошта, skype, посилання на профіль у соціальних мережах та інші;
  • функціональної кнопки (CTA-button) – ми розповідаємо користувачеві, що станеться, коли він заповнить форму.

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

Тригери (блок довіри / переконання) або потрійна (умовно) гарантія

Ці тригери «потрійної гарантії» найчастіше використовують на першому екрані в нижній частині після основного оффера і CTA (заклику до дії).

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

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

Ось як це зробили ми:

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

Розповідаємо про проєкт і вигоди

Далі всі авторитетні джерела, наприклад, конструктор Landing Page Tilda рекомендують розповісти про проєкт, а саме:

  • що це за продукт чи послуга;
  • як працює;
  • виконані роботи (кейси);
  • для кого корисний;
  • скільки коштує.

Для цього можна використовувати блоки:

  • опис проєкту – заголовок, невеликий опис і зображення (відео);
  • переваги або вигоди – використовуємо заголовок, іконки та невеликі описи;
  • цільова аудиторія – на лендінг пейдж можна показати групи користувачів, для яких призначений продукт або послуга;
  • команда – покажіть, хто працює над проєктом або створенням продукту. Це мають бути фото реальних людей із невеликим описом;
  • етапи робіт – розкажіть, як проходить процес створення продукту або надання послуги;
  • тарифи – цей блок слід використовувати, коли у продукту або послуги є кілька варіантів цін.

Далі зупинимося докладніше на кожному з видів блоків.

Опис проєкту

Щоб показати товар/послугу, можна використовувати:

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

Приклад на картинці нижче:

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

Представляємо переваги або вигоди

Тут варто візуально, за допомогою тексту показати, чому ваш продукт унікальний, які в нього є «фішки», чому споживачеві варто його придбати. Важливо добре відрізняти переваги та вигоди. Перші відображають характеристики продукту (послуги), а другі показують те, що отримає саме клієнт.

Зазвичай переваги (вигоди) представляють невеликими описами та ілюстраціями. Приклад із сайту ТОВ «Текстум Вінниця» подано вище, а зараз подивимося, який вигляд він має на web-проєкті університету Mindvalley.

Отже, виділю головне:

  • заголовок має бути чіпляючим і коротким;
  • переваги формулюємо в кілька слів;
  • суть переваг описуємо зрозумілою і доступною мовою;
  • іконки робимо унікальними й оформляємо в корпоративному стилі.

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

Цільова аудиторія

Візуально цей екран можна поділити на блоки. Знову ж таки, тут важливо, щоб дизайном і текстом займалися професіонали. Дивимося приклад:

Мені подобається, коли на Landing Page немає надлишку інформації, принципово не затримуюся на тих сторінках, де тексту занадто багато.

Команда

Люди довіряють бренду, коли бачать, хто саме задіяний у виробничому процесі. Ось як цей блок представлений у нас:

Тут важливо, щоб фото й описи були зроблені в єдиному стилі.

Текстові описи на сайті агентства інтернет-маркетингу «Текстум Вінниця» умовно розділені на три частини:

  1. прізвище та ім’я;
  2. досвід роботи та посадові обов’язки;
  3. ключові навички фахівця.

Звісно, тут можна експериментувати, але не робіть описи об’ємними.

Етапи робіт

Це може бути вертикальна або горизонтальна схема. У нас на сайті задіяна вертикальна:

У цьому блоці ми використовуємо унікальні іконки і невеликі описи.

Тарифи

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

Ось приклад:

У тарифах потрібно вказати, що в них входить і як вони відрізняються між собою.

Створюємо блоки довіри

У цій частині Landing Page можна уявити:

  • відгуки;
  • гарантії та сертифікати;
  • приклади робіт (успішні кейси);
  • партнерів;
  • поширені запитання.

Зупинимося детальніше на кожному функціональному блоці.

Відгуки

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

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

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

Тут біля фотографії клієнта є іконка Facebook, при натисканні на яку користувач потрапляє на особисту сторінку замовника. Це підвищує довіру споживачів.

Гарантії та сертифікати

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

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

Приклади робіт (успішні кейси)

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

Це найкращий спосіб підтвердити свою експертність у певній галузі. Але приклади робіт мають бути подані правильно і містити:

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

Візуально цей блок не повинен бути перевантажений текстом.

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

Інший варіант візуалізації – демонстрація робіт за принципом «До/После» з тією ж інформаційною «начинкою».

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

Партнери

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

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

Також у цьому блоці можна розмістити форму для тих, хто хоче стати партнером заходу або проєкту.

Часті запитання

Блок ЧАВО (добірка порад з тієї чи іншої теми) застосовують у нішах, де багато додаткових характеристик і чинників, що впливають на процес ухвалення рішення покупцем.

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

Розділ «запитання-відповідь» дає відчуття турботи з боку компанії, збільшує рівень професіоналізму та компетентності організації, якщо містить справді цікаву та корисну для користувача інформацію.

Цей блок не тільки дає змогу розвіяти страхи і сумніви цільової аудиторії, але є чудовим інструментом для SEO-просування. Включивши до запитань і відповідей ключові слова, можна просунути Landing Page у топ за середньочастотними і низькочастотними запитами. Але це, звісно, за умови, що роботи з розкрутки сайту ведуться комплексно. Крім цього, Google часто використовує запитання і відповіді під час формування нульового сніпета і видачі в голосовому пошуку.

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

ВАЖЛИВИЙ МОМЕНТ: запитання і відповіді мають бути написані так, як кажуть у житті: просто, зрозуміло і доступно.

Мотивуємо до цільової дії

Це останні екрани лендінг пейдж. Тут використовуються:

  • блок із подарунком;
  • акція й обмежувач за часом;
  • контакти.

Докладніше про кожен із них.

Блок із подарунком

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

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

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

Приклад реалізації цього блоку на сайті агентства інтернет-маркетингу «Текстум Вінниця»:

Акція та обмежувач за часом

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

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

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

Контакти

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

Інший плюс ідентифікації – використовувати перевагу зручного розташування.

Бажано, щоб контактна інформація містила якомога більше способів комунікації (телефон, пошта, skype, viber тощо) і режим роботи організації для зручності, знову ж таки, користувачів.

На закінчення додам, що ціна хорошого лендінгу становить від 1000 у. о. і включає роботи: маркетолога, дизайнера, копірайтера і програміста. Але вартість і зусилля зі створення Landing Page окупаються швидко. При правильно налаштованих рекламних кампаніях і SEO-просуванні цей інструмент генеруватиме продажі цілодобово багато років поспіль.

Отримати практичні навички написання SEO-статей можна на курсі: “Креативний SEO-копірайтинг“:

Автор статьи

Засновник Textum. Розробляє стратегію і реалізовує план просування бізнесу. Приділяє велику увагу розвитку себе і своєї команди. Любить те, що робить. Підписуйтесь на мої сторінки в соціальних мережах.

View Category