Дизайн посадкової сторінки 12 важливих правил із реальними прикладами
У нашій попередній статті, присвяченій посадковим сторінкам, ми розглянули 8 головних факторів, які необхідно враховувати під час їх створення. На цей раз, ми вирішили більш детально зупинитися на дизайні лендінгів. Оскільки дизайн веб-сторінок нерозривно пов'язаний із контентом, ми також розберемо деякі моменти щодо інформаційного наповнення цільових сторінок.
А тепер, від слів – до діла. Розглянемо конкретні правила, дотримуючись яких ви зможете покращити дизайн вашої посадкової сторінки, а значить, і підвищити рівень конверсії на своєму сайті.
1. Подбайте про юзабіліті вашої посадкової сторінки
Потрапляючи на вашу посадкову сторінку, відвідувач сайту повинен відразу зрозуміти:
- ціль сторінки
- дію, яку він має вжити
- користь, яку йому принесе ваш продукт
Якщо вона не відповідає цим вимогам, її можна вважати марною. Не змушуйте відвідувачів вашого сайту блукати лабіринтами вашої посадкової сторінки. Повірте, вони не захочуть витрачати на це свій час і просто помахають вам ручкою. В результаті на вашому сайті підвищиться лише показник відмов, а збільшення рівня конверсії так і залишиться недосяжною мрією.
Ось приклад вдалої посадкової сторінки, взятий із сайту FeedMyInbox, з якої розбереться навіть школяр:
2. Не використовуйте надто багато графіки
Ваша сторінка із закликом до дії повинна містити лише необхідні графічні елементи. Надлишок зображень лише захаращуватиме її, особливо, якщо вони розташовані в зоні «першого екрана». У верхній половині смуги прокручування повинні бути тільки логотип та стилізоване зображення продукту, який вихочете продати.
Поряд із цими зображеннями, допускаються також картинки, які демонструють переваги або характеристики вашого продукту. Будьте обережними під час використання іконок. У деяких випадках вони не принесуть ніякої користі, а лише відволікатимуть увагу потенційних клієнтів.
Як бачите, на сторінці відсутні зайві графічні елементи. Вона містить лише логотип програми, її скріншот, іконки клієнтських компаній, а також зображення милої пташки, що символізує Твіттер.
3. Зведіть до мінімуму варіанти навігації
Чим більше варіантів навігації ви пропонуєте відвідувачам свого сайту на цільовій сторінці, тим більша ймовірність, що вони скористаються ними. На вашій головній сторінці можуть міститися десятки навігаційних посилань, однак посадкова сторінка повинна вказувати потенційним клієнтам лише один напрямок, оскільки вона є початковим елементом продажів.
Творці програми eWedding, за допомогою якої ви можете створити власний сайт, присвячений вашому весіллі, взяли це правило на озброєння. На посадочній сторінці їх сайту видно лише посилання, що стосуються самого продукту (наприклад, характеристики програми або варіанти тем). А решта посилань розташована в затишному містечку: в самій нижній частині сторінки. До того ж вони надруковані досить дрібним шрифтом:
4. Використовуйте модальні вікна
При розміщенні інформації або деяких посилань, які можуть зацікавити відвідувачів вашого сайту, спробуйте використати модальні вікна замість того, щоб перенаправляти їх на нову сторінку. Модальні вікна можуть надати потенційним клієнтам будь-яку інформацію, не перериваючи при цьому роботу вирви конверсії.
Модальні вікна таспливаючі підказки можуть містити питання, списки характеристик продукту, скріншоти і т.д. Використовуйте їх за першої зручної можливості, щоб не призупиняти процес перетворення відвідувачів сайту на реальних покупців.
Наприклад, на сторінці продажу програми Capo, яка створює спектрограми музичних файлів, використовується модальне вікно у вигляді скріншота її інтерфейсу:
5. Уникайте червоного кольору в кнопці заклику до дії
У багатьох культурах, зокрема, у США та європейських країнах, червоний колір має негативний підтекст. У картині світі червоний – це колір агресії, небезпеки, стоп-сигналу. Навіть у позитивній конотації (пристрасть і любов), відтінки червоного викликають у людей занепокоєння. Звідси висновок: якщо ваш сайт призначений для європейської та американської аудиторії, відмовтеся від використання червоного фону на кнопці заклику до дії. Можливо, в деяких випадках, це зійде вам з рук, але ризикувати все ж таки не варто. Краще використовуйте більш спокійні кольори, наприклад, синій або зелений (як це роблять на сайті програми для планування часу Harvest):
6. Зробіть кнопку заклику до дії помітної
Отже, ми з'ясували, що червоне тло не є найкращим рішенням для привернення уваги до кнопки заклику до дії (див. попередній пункт). Але є й інша крайність – використання надто блідих кольорів або дрібного шрифту, через які вона буквально втрачається на вашій цільовій сторінці. Кнопка заклику до дії має бути яскравою плямою на вашій посадковій сторінці, щоб відвідувачі сайту змогли помітити її навіть неозброєним поглядом.
Ступінь «видимості» кнопки заклику до дії можна оцінити за допомогою простого візуального тесту: відійдіть назад, приблизнона метр-півтора від екрана комп'ютера і чесно дайте відповідь на запитання: «Чи кидається кнопка заклику до дії в очі?». Якщо ви не можете з упевненістю сказати «так», значить, ваша кнопка заклику до дії потребує доопрацювання.
Можливо, вам потрібно змінити колір, щоб він контрастував з фоном самої сторінки, або трохи збільшити розмір шрифту. Деякі недбайливі веб-дизайнери навіть примудряються розміщувати СТА-кнопку за межами «першого екрана», а потім ще дивуються, чому показники конверсії сайту не зсуваються з мертвої точки. Щоб не повторювати їхніх помилок, ретельно продумуйте всі аспекти кнопки заклику до дії.
Беріть приклад із дизайнерів сайту Plnnr, що складає індивідуальні екскурсії різними містами. Їхню жовту кнопку, розташовану на сірому фоні, просто неможливо не помітити!
7. Вказуйте лише інформацію, яка цікавить відвідувачів сайту
Повідомляйте відвідувачам вашого сайту лише ті відомості, які знадобляться їм для ухвалення рішення. Не варто перевантажувати їхні голови зайвою інформацією. Ваша мета – перетворити потенційних клієнтів на реальних покупців за допомогою мінімальної кількості інформації.
8. Не просіть надто багато інформації
Будь-яка додаткова інформація, яку ви просите у відвідувачів сайту, є для них черговою перешкодою на шляху перетворення на ваших клієнтів. І чим більше перешкод буде на їхньому шляху, тим вища ймовірність того, що вони не дійдуть до кінцевого пункту.
На щастя, багато веб-розробників усвідомлюють цю просту істину і намагаються не випитувати у потенційних клієнтів зайву інформацію. На деяких сайтах вони зовсім не запитують жодних особистих даних: ви просто реєструєтеся і продовжуєте свою роботу. Візьмемо, доНаприклад, блог Pen.io. Все, що від вас вимагається – придумати назву своєї сторінки та пароль, і ви можете відразу приступити до створення посту:
9. Не вимагайте з відвідувачів сайту все й одразу
Уявіть, що потенційний клієнт заходить на ваш сайт і відразу бачить величезну яскраву кнопку із закликом купити певний продукт. Якою буде реакція? У кращому разі, у нього з'явиться низка питань, на кшталт: «А що взагалі мені пропонують купити?» або «Скільки коштує цей продукт?». А в гіршому – він одразу ж закриє вашу посадкову сторінку, подумавши, що йому хочуть засунути непотрібну річ, навіть не поцікавившись, чи потрібна вона йому.
Тому не варто відразу заводити промову про покупку, якщо ви не хочете відлякати своїх клієнтів. Розділіть процес здійснення покупки на 2-3 етапи, щоб вони вивчили потрібну інформацію, перш ніж ухвалити остаточне рішення. Інакше у них складеться враження, що ви нав'язуєте їм свій продукт.
Кнопка заклику до дії повинна містити більш нейтральні фрази, наприклад, «Подивитися тарифні плани та ціни» або «Дізнатися більше». Вони містяться менше примусового підтексту, ніж у висловах «Купити зараз» чи «Підписатися». До того ж, завдяки їм відвідувачі сайту розуміють, чого їм варто очікувати на наступному етапі.
Розробники плагіна VaultPress, призначеного для підтримки сайтів на платформі WordPress, успішно застосували це правило на практиці:
10. Прагніть до простого та лаконічного дизайну
Усі лендинги мають одну конкретну мету: спонукати відвідувачів сайту до здійснення певної дії. Якщо певні елементи дизайну не сприяють реалізації цього завдання, можете сміливо позбавлятися їх.
Це не означає, що ваша посадкова сторінкамає бути наполовину порожньою: просто ви повинні визначити, які її компоненти є доречними, а які – ні. Якщо ви впевнені, що вони підвищать довіру клієнтів до вашого торгового заклику, допоможуть їм краще зрозуміти ваш продукт і, в цілому, покращать їх загальні враження про вашу компанію, то висновок очевидний: ці елементи обов'язково повинні бути присутніми на вашій цільовій сторінці.
Зверніть увагу на посадкову сторінку програми Things 2 для iPhone.
Як бачите, вона зроблена просто і зі смаком. При цьому вона містить усі необхідні елементи: опис програми, його скріншоти та заклик до дії («Перейти до магазину App Store»).
11. Виділяйте вигідніші пропозиції
Якщо на вашій посадковій сторінці міститься кілька закликів до дії (наприклад, таблиці з різними тарифними планами), ви можете підказати відвідувачам свого сайту найвигідніший або найпопулярніший варіант, використовуючи графічні засоби. Наприклад, ви можете виділити відповідну пропозицію в рамку або зробити її шрифт більшим.
Не варто автоматично виділяти найдорожчий варіант, інакше відвідувачі вашого сайту подумають, що ви робите це спеціально, щоб змусити їх розщедритися. Більшість компаній акцентують увагу потенційних клієнтів на проміжному тарифному плані, який містить усі необхідні опції та при цьому має прийнятну ціну.
12. Повідомляйте про користь продукту
Головне питання, яке цікавить відвідувачів вашого сайту: «Яку користь я отримаю від цього продукту?» Недостатньо просто перерахувати його загальні характеристики та функції – ви повинні вказати, як він може допомогти їм у реальному житті. Перш за все, ви самі повинні бути впевнені у цінності свого продукту, щоб донести цюдумка до своїх потенційних клієнтів за допомогою яскравого заголовка, зрозумілого тексту та оптимальної структури контенту на посадочній сторінці.
Загалом, не соромтеся хвалити свій продукт за заслугами, як це роблять, наприклад, розробники програми Skylight:
Не забувайте тестувати посадкові сторінки
Отже, ми проаналізували цілу дюжину рекомендацій щодо розробки дизайну посадкових сторінок та забезпечили їх реальними прикладами для наслідування. Сподіваємось, що вони надихнуть вас на подальше вдосконалення своїх лендінгів.
Проте, не забувайте про ще один важливий етап створення посадкових сторінок – А/Б-тестування. Будь-які зміни, які ви внесете в дизайн свого лендінгу, так чи інакше призведуть до певних результатів. Вони можуть підвищити або зменшити рівень конверсії вашого сайту або навіть залишити його на колишньому рівні. Все залежить від конкретної ситуації.
Звідси висновок: не лінуйтеся проводити А/Б тести, перш ніж зупинятися на певній версії посадкової сторінки. Прийміть до уваги результати цих досліджень і виберіть той варіант, який випередив решту за показниками конверсії, навіть якщо, на перший погляд, він здався вам непомітним.
Переклад та адаптація матеріалу Кемерона Чепмена Do's and don'ts of call to action pages.