• UI & UX

Отримайте клік: 8 порад для ефективного дизайну CTA

  • Felix Rose-Collins
  • 6 min read
Отримайте клік: 8 порад для ефективного дизайну CTA

Вступ

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

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

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

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

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

1. Використовуйте липку бічну панель CTA

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

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

Зустрічайте Ranktracker

Універсальна платформа для ефективного SEO

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

Ми нарешті зробили реєстрацію на Ranktracker абсолютно безкоштовною!

Створіть безкоштовний обліковий запис

Або Увійдіть, використовуючи свої облікові дані

Введіть липку бічну панель CTA.

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

ATH Sport надає 10% знижку на перше замовлення і просуває цю пропозицію на своїй домашній сторінці та на всьому веб-сайті за допомогою липкої бічної панелі із закликом "Заощаджуй 10%". Таким чином, відвідувачам ненав'язливо нагадують, що потрібно діяти і отримати знижку.

Use a sticky sidebar CTA (Джерело: ATH Sport)

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

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

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

Чим менше відволікаючих чинників навколо заклику до дії, тим більш клікабельним він буде.

Зустрічайте Ranktracker

Універсальна платформа для ефективного SEO

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

Ми нарешті зробили реєстрацію на Ranktracker абсолютно безкоштовною!

Створіть безкоштовний обліковий запис

Або Увійдіть, використовуючи свої облікові дані

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

Leverage negative space (Джерело: Flamingo)

3. Створіть відчуття терміновості

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

Візьміть приклад з Amazon та їхнього розумного застереження "Лише 1/2/3 залишилося на складі", яке спонукає навіть нерішучих клієнтів замовити товар негайно, поки його не перехопив хтось інший.

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

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

Заклик до дії на головній сторінці Bed Bath & Beyond є чудовим прикладом поєднання терміновості та дефіциту. Клієнтам пропонується "Купити зараз", оскільки пропозиція дійсна до 8 січня, але це вікно можливостей додатково мінімізовано додаванням "Поки є в наявності". Той факт, що сам заклик знаходиться в межах великого червоного банера, розміщеного над згином, робить його ще більш яскравим і переконливим.

Create a sense of urgency - Bed Bath & Beyond (Джерело: Bed Bath & Beyond)

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

Create a sense of urgency - January (Джерело: січень)

4. Включіть сильні слова

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

Отже, включаючи такі сильні слова, як

  • Безкоштовно
  • Дивовижно.
  • Новий
  • Ефективний
  • Легко.
  • Миттєво
  • Гарантуємо.
  • Ніякого ризику
  • Сертифікований
  • Захищено
  • Перевірено
  • Перевірено
  • Додатково

зачепить цільову аудиторію і спонукатиме її до дії.

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

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

Include power words - Evernote (Джерело: Evernote)

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

Include power words - BaseLang (Джерело: BaseLang)

5. Зробіть свій CTA популярним

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

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

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

Головна сторінка сайту Menlo Caoching виконана в біло-сірих тонах, тому жирний червоний колір, який вони обрали для заклику до дії, одразу кидається в очі. Дизайн також виграє за рахунок негативного пробілу, який додатково акцентує увагу на кнопці заклику і виділяє її на нейтральному фоні.

Make your CTA pop (Джерело: Menlo Coaching)

6. Не будьте розпливчастими

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

Кнопки заклику до дії з написом "Натисніть тут" або "Надіслати" лише заплутають людей, а це найгірше, що ви можете зробити.

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

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

Don’t be vague (Джерело: Dropbox)

7. Додайте соціальний доказ

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

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

Таким чином, ви побудуєте довіру і розвієте будь-які потенційні сумніви щодо покупки, які вони можуть мати.

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

Add social proof (Джерело: Buffer)

8. Зберігайте речі простими

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

Але правда в тому, що простоту часто недооцінюють.

Зустрічайте Ranktracker

Універсальна платформа для ефективного SEO

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

Ми нарешті зробили реєстрацію на Ranktracker абсолютно безкоштовною!

Створіть безкоштовний обліковий запис

Або Увійдіть, використовуючи свої облікові дані

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

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

Замість складного процесу реєстрації, Jira економить час користувачів, дозволяючи їм отримати доступ до платформи через свій обліковий запис Google. Це займає лише пару кліків, і немає ніякого набридливого заповнення форм, що є причиною багатьох відмов від реєстрацій та покупок. До того ж, копія містить магічне слово з відкритим кунжутом - " Безкоштовно", яке здатне переконати тих, хто сидить на паркані, натиснути на нього і продовжити роботу.

Keep things simple (Джерело: Jira)

Підбиваємо підсумки

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

Почніть користуватися Ranktracker... Безкоштовно!

Дізнайтеся, що стримує ваш сайт від ранжування.

Створіть безкоштовний обліковий запис

Або Увійдіть, використовуючи свої облікові дані

Different views of Ranktracker app