Успішні цільові сторінки 15 прикладів дизайну, які вам доведеться побачити
Не так просто створити привабливу цільову сторінку, яка також працює так, як ти хочеш.
Є багато різних речей, на які слід звернути увагу, щоб мати чудову цільову сторінку. Що саме це залежить - як і багато іншого - від мети вашої цільової сторінки.
Візьмемо для прикладу довжину форми: форма - це лише один з безлічі елементів на цільовій сторінці, які потрібно налаштувати. І якщо ви будете слідувати найкращим практикам, ви виявите, що у довжині форми немає "правильної" чи "неправильної" форми. Короткі та довгі форми можуть працювати однаково добре - кожна залежить від того, чи бажаєте ви генерувати багато потенційних клієнтів із (потенційно) меншим інтересом або меншою кількістю потенційних клієнтів із більшим інтересом.
Перш ніж почати створювати власні цільові сторінки, спершу слід з’ясувати, що робить хорошу цільову сторінку, - і на прикладах отримати уявлення про те, як ці окремі елементи ефективно реалізовані. Однак, шукаючи приклади успішного оформлення цільових сторінок, ми помітили, що навряд чи існує сучасні вражаючі цільові сторінки, які пропонують більше, ніж просто домашню сторінку з формою реєстрації. Це стало причиною скласти цей список цільових сторінок, який переконав нас з точки зору дизайну.
Заздалегідь примітка: Ми не маємо доступу до статистики на цих сторінках. Тому ми не можемо робити жодних заяв про те, скільки відвідувачів, потенційних клієнтів та клієнтів буде в підсумку перетворено на ці цільові сторінки. Це приклади вдалого поєднання та інтеграції окремих елементів цільової сторінки. Звичайно, якщо ви хочете самостійно випробувати одну з тактик, представлених у наступному дописі, ви не можете заздалегідь знати, чи вони спрацюють. Тож девіз: тест, тест, тест!
Успішні цільові сторінки: 16 прикладів дизайну, які вам доведеться побачити
1) Вістія
Перший кандидат - це цільова сторінка Вістії, де відвідувачі можуть зареєструватися для безкоштовного облікового запису. Око відразу потрапляє на коротку форму для створення облікового запису, яка своїми білими полями чудово виділяється на блакитному, з мінімальним малюнком тлі.
Завдяки довжині поля форми в поєднанні з привабливим розміщенням, відвідувач одразу знає, про що йдеться: створення облікового запису. Якщо ви все ще вагаєтесь, ви можете прокрутити вниз і прочитати там відповіді на поширені запитання. Оскільки ці дві області оформлені в протилежних кольорах, ви як відвідувач можете легко тримати огляд і не випускати з виду форму - ідеально підходить для коефіцієнта конверсії!
2) Відскок
Не дивно, що наступним місцем у нашому списку є: Unbounce! Зрештою, ця компанія в минулому вражала нас своїм досвідом у цільових сторінках та оптимізацією, орієнтованою на конверсії. Ця цільова сторінка, безперечно, має багато успішних елементів, два з яких ми хотіли б виділити: 1) Стрілка, спрямована з напрямку допоміжних зображень на кнопку CTA та 2) детальну - але добре упаковану - інформацію під формою.
Пункт 1 (стрілка) негайно повідомляє відвідувачам про мету сторінки: вони повинні заповнити форму! І все це працює, не будучи особливо нав'язливим. Тонке проведення відвідувачів по сторінці - це мистецтво саме по собі, і Unbounce робить це чудово. Пункт 2 (детальна інформація) також пропонує переваги для сторінки з точки зору SEO, оскільки пошукові системи мають більше вмісту, який вони можуть індексувати. У той же час відвідувачі, які хотіли б дізнатись більше, перш ніж вони розкриють свої контактні дані, задовольняються - і розумне розміщення цієї інформації не відволікає від форми.
3) ВПЛИВ Брендинг та дизайн
Заздалегідь: Так, IMPACT є партнером HubSpot! Але не тому ми вносимо їх до нашого списку. Цільові сторінки IMPACT здавна вважалися джерелом натхнення для успішного дизайну. Простий макет сторінки, від великого заголовка та детального зображення зображення до кадру, що оточує форму, до кольорів та шрифтів, які дуже зручні для очей, тут все вдало.
Можливо, ви також помітили поле для підписки на блог? Це перевірено за замовчуванням! Зверніть увагу: хоча поле для підписки у формі цільової сторінки - це чудовий спосіб отримати нових підписників, ми рекомендуємо не встановлювати цей прапорець за замовчуванням, щоб користувачі могли вибрати, чи підписуватись хочуть. В іншому випадку ви ризикуєте додати до своєї бази даних контактів занадто багато незацікавлених передплатників .
4) WebDAM
Цільова сторінка WebDAM, безсумнівно, має багато приємних елементів, але наш (безперечний) фаворит - форма. Він бездоганно вписується в структуру сторінки і, отже, виглядає як природний компонент, але який візуально відрізняється завдяки своєму кольору тла. Розміщуючи форму поруч із зображенням, яке саме по собі не дає важливої інформації, користувачі не відволікаються, і вся увага зосереджується на формі. Кнопка "Надіслати" має пурпуровий колір (доповнює бірюзово-синій колір) і виділяється та закликає відвідувачів завантажити пропозицію.
Під формою обіцянка про ефективність діяльності компанії коротко підсумована у трьох пунктах. Крім того, цей текстовий блок діє як візуальне відокремлення від форми вище. Першокласна робота, WebDAM!
5) Bills.com
Часто вважають, що цільові сторінки - це статичні сторінки веб-сайту. Але це не повинно бути так. За допомогою відповідних інструментів цільові сторінки також можна розробити в інтерактивному режимі та налаштувати.
Наприклад, подивіться на наступний приклад із Bills.com. По-перше, вам потрібно відповісти на три запитання, щоб дістатися до форми. Це заздалегідь уточнить, чи потрібна вам взагалі порада. Перш за все, відвідувачам потрібно вказати, який у них рівень боргу:
Далі слідують ще два запитання, такі як: B. Ось тут ("Ви заборговали із своїми платежами?"):
І ви перейшли до фактичної форми цільової сторінки, де вам буде запропоновано ввести свої дані:
Незалежно від того, як працює алгоритм (якщо він взагалі є), підхід іноді викликає у відвідувачів невелику нервозність через те, що вони можуть не мати права на консультацію. Коли ви побачите форму, рельєф встановлюється і заповнення форми стає дуже простим. Ми вважаємо, що через ексклюзивність пропозиції (будь вона справжньою чи підробленою), Bills.com має досить високий коефіцієнт конверсії.
6) Трулія
Trulia робить це на своїй цільовій сторінці аналогічно Bills.com. Там ви починаєте з простої форми, яка запитує "адресу" (яка звучить не так нав'язливо, як "ваша адреса", хоча саме це мається на увазі). Під полем простої форми є помаранчева кнопка, яка добре виділяється на тлі зображення форми. У тексті CTA конкретно вказується, що для вашого майна буде зроблено індивідуальну оцінку.
Звичайно, адреси недостатньо для визначення вартості об’єкта нерухомості. Фактично реєструються лише місцезнаходження та околиці. З цієї причини на наступній сторінці випливають додаткові запитання щодо власності, такі як кількість спалень та ванних кімнат. Внизу ви побачите текст «Скажіть нам, куди надсилати звіт» - із зазначенням, що, вводячи цю інформацію, ви погоджуєтесь з вами зв’язуватися з агентом з нерухомості. Це чудовий приклад компанії, яка додає цінності своїм відвідувачам, одночасно вказуючи, чого очікувати.
7) Базовий табір
Basecamp має велику цільову сторінку з великою кількістю інформації в безпосередньо видимій області та нижче. Більша частина інформації подається у текстовій формі, що також має наслідком, що єдиний візуальний елемент сторінки, форма, тим більше виділяється. Тут також процес реєстрації настільки ж простий, як і при простому введенні адреси електронної пошти або вході за допомогою вашого облікового запису Google.
Заголовок із переліком кількості компаній, які зареєструвались на Basecamp за попередній тиждень, та рекомендаціями клієнтів, Basecamp повністю покладається на соціальні докази для досягнення бажаних конверсій. Ефект виділення в рекомендаціях замовника, який виглядає так, ніби тут використано підсвічувач, надає додатковий акцент на тих моментах, які Basecamp особливо хотів би просувати.
8) Зендеск
Нам подобається цільова сторінка безкоштовної пробної версії Zendesk, оскільки вона зберігається просто і просто як з точки зору тексту, так і дизайну. Єдине, що справді виділяється - це дві кнопки CTA - і яйце зверху, яке рухається так, ніби пташеня ось-ось вилупиться. Сама форма проста і вимагає лише професійної адреси електронної пошти та пароля, щоб можна було створити обліковий запис. Увійти за допомогою входу в Google Apps ще простіше. Надавати цю опцію рекомендується завжди, оскільки це ще більше скорочує шлях до конверсії і, як правило, має нижчий поріг обмеження для користувачів, які вже мають обліковий запис Google.
9) веб-прибуток
Як щодо трохи довшої цільової сторінки для змін? За допомогою лише декількох прийомів навіть найдовша цільова сторінка може створити враження короткої. Webprofits показує нам, як це зробити.
Угорі є видно розміщене поле форми для адреси електронної пошти, яке добре виділяється на тлі і тому вже помітне саме по собі. Якщо ви хочете негайно залишити свої дані, все, що вам потрібно зробити, це ввести свою адресу електронної пошти, а решта поля форми з’явиться чарівним чином. Оскільки повна форма відображається не відразу, сторінка виглядає не такою складною.
Окрім того, ви на перший погляд бачите, чим насправді займаються Webprofits. Решта сторінки містить детальну інформацію про те, що ви отримуєте, коли вводите свої дані. Крім того, заклики до дії розміщуються скрізь у стратегічних точках, за допомогою яких відвідувачі можуть повернутися вгору сторінки.
10) Вхідні емоції
Ця цільова сторінка іспанською мовою від партнера HubSpot. Подібно до прикладу з Basecamp, форма розміщується помітно і завжди залишається у видимій області, навіть коли відвідувачі прокручують вниз. Нам також подобаються графічні руки, які показують відвідувачам, куди вводити свої дані або де ділитися сторінкою з іншими.
11) H.BLOOM
Іноді ви просто хочете, щоб цільова сторінка деякий час сиділа на вас, тому що вона така гарна. H.BLOOM робить саме це завдяки фотографії з високою роздільною здатністю та великій свободі - ви більше не хочете відводити погляд.
На додаток до привабливого дизайну, на сайті також є кілька чудових елементів перетворення: форма у безпосередньо видимій області, чітке та стисле пояснення того, що відбувається після заповнення форми, і помаранчева кнопка надсилання. Ми б змінили лише одне: текст на кнопці подати, щоб він більш конкретно стосувався пропозиції.
12) Чат Velaro Live Chat
Іноді найменші речі мають найбільше значення. Це стосується, наприклад, цільової сторінки Velaro Live Chat.
Невеликий символ PDF на зображенні елемента є тонким вказівкою формату, в якому надається пропозиція. Стрілка перед підзаголовком привертає увагу відвідувача до тексту, який слід прочитати. Як і у випадку з IMPACT, для підписки на розсилку повідомлень автоматично встановлено прапорець, що, як варіант, є чудовим способом завоювати нових підписників. Всі ці дрібні деталі, які на перший погляд здаються незначними, складають чудовий, функціональний дизайн цільової сторінки.
13) Конверсійна лабораторія
Як правило, ми не перелічуємо початкову сторінку з формою як приклад чудової цільової сторінки. Ми робимо виняток на цьому веб-сайті з поважної причини! Домашня сторінка - це цілий веб-сайт, а навігаційні посилання ведуть вас лише до інформації нижче на цій сторінці.
Все, що вам потрібно зробити, це натиснути "Отримати допомогу з цільовими сторінками", і весь веб-сайт переміститься в одну сторону, звільнивши місце для форми. Ось так це виглядає перед натисканням:
Після натискання на заклик до дії відображається форма:
Той факт, що вам не потрібно залишати сторінку, щоб заповнити форму, забезпечує безперебійну роботу користувачів. До того ж форма розміщується дуже ненав’язливо.
14) Промисловий маркетинг міцності
Ця цільова сторінка одразу ж викликає інтерес відвідувачів своїм провокаційним заголовком. Тому що там чітко сказано: "Не змушуй мене масштабувати" (приблизно: "Припиніть масштабування!"). Тут вирішується типова проблема, яка виникає у більшості з нас, коли ми працюємо в Інтернеті за допомогою смартфона або планшета - і це твердження навмисно тримається в трохи провокаційному тоні.
Але це не єдиний цікавий елемент цієї цільової сторінки. Ви помітили, як червоний колір був стратегічно розміщений? Наприклад, над і під формою, яка наблизить вас до перетворення.
Цей дизайн також має вирішальну перевагу: він також чудово виглядає на мобільних пристроях. Тому що ви завжди повинні пам’ятати, що багато відвідувачів отримують доступ до ваших цільових сторінок зі своїх смартфонів чи планшетів. Якщо дизайн неправильний, вони можуть швидко покинути ваш сайт.
Люди з Industrial Strength Marketing зробили поле шрифту та форми досить великим, щоб відвідувачам не довелося збільшувати, щоб побачити такі речі: Б. читати текст або взаємодіяти зі змістом. (Прочитайте цю публікацію в блозі, щоб дізнатись, що таке дизайн веб-сайту для гарного користувацького досвіду.)
15) Shopify
Як і багато інших прикладів у цій публікації, Shopify пішов на простоту, не маючи надмірностей для своєї цільової сторінки для тестового запуску. Орієнтований на користувача заголовок, наприклад, складається лише з декількох слів, підзаголовок ("Довіряють понад 325 000 компаній у всьому світі", наприклад: "Понад 325 000 компаній у всьому світі нам довіряють") вводить у дію соціальні докази, і зображення свідчать про те, що користувачі використовують продукт можна використовувати на всіх пристроях. Все, що вам потрібно зробити, це вказати свою електронну адресу, щоб розпочати. Ось як ви швидко дістаєтеся до реальної суті: Продаж продуктів через Інтернет - за допомогою інструменту Shopify.
Вишенька на торті? Цільова сторінка оптимізована для кожного пристрою як з точки зору дизайну, так і функціональності. Чуйний дизайн - це секрет!
Чи є у вас надихаючі приклади чудових цільових сторінок? Будь ласка, залиште нам коментар із вибраними!