Системи проектування

Анатомія кнопки CTA у 2017 році: найкращі практики голосу та тону, стилю та компонентів.

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

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

Голос і тон

Чому я повинен натиснути цю кнопку?

а. Починаючи з дієслова дії та пишіть від першої особи

Кнопка CTA повинна починатися з дієслова дії, наприклад "Старт", "Отримати" або "Завантажити". Вони орієнтовані на дії.

Під час тесту Майкла Агаарда (Unbounce's Senior Optimizer Conversion) він виявив, що зміна копії кнопки CTA від другої особи до першої особи призвело до підвищення на 90% швидкості кліків.

б. Очікування

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

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

c. Почуття терміновості

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

г. Почуття легкості

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

е. Спускові слова

Спускові слова - це слова та фрази, які спонукають користувача до клацання. Вони містять найважливіші елементи, щоб забезпечити мотивацію користувача продовжувати перегляд. Дайте їм вагомий привід здійснити дії, які ви хочете, щоб вони вчинили. Якщо користувач шукає "плани" або "ціноутворення", а на кнопці CTA написано "плани" або "ціноутворення", він буде натискати на нього. Тож у цьому випадку «плани» та «ціноутворення» будуть тригерними словами.

Подумайте про тригерні слова, такі як ключові слова пошуку!

Джаред Spool має добрі поради в статті: Правильні спускові слова.

Стиль

Де слід натиснути?

а. Форма

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

б. Розмір

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

c. Білий інтервал

Використання пробілів (або мертвого простору) навколо кнопки CTA є ефективним способом виділити її в місцях, де багато елементів.

г. Розміщення

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

Дизайнери, які використовують мобільні додатки, розроблені відповідно до стандартів Google Material Design, вже знають, що основна кнопка (FAB - кнопка "Плаваюча дія") буде розташована в нижній правій частині екрана. Розміщення має значення!

е. Контрастний колір

Встановіть колір акценту для кнопки CTA та дотримуйтесь її. Не використовуйте основний або вторинний колір вашого бренду.

Майкл Агаард каже:

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

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

Компонент

Настав час перетворити елементи інтерфейсу на компоненти!

а. Будьте компонентом для дизайнерів та розробників

Дизайнери повинні створювати інтерфейси, роздумуючи над компонентами, використовуючи правильні інструменти, доступні на ринку, такі як Sketch, Adobe XD, Figma тощо. Також розробники! Використовуйте певну технологію передового використання для компонентнізації, наприклад React, Angular, Vue.js тощо.

б. Конвенція про рівну назву для дизайнерів та розробників

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

Приклад реагування:
<Значення кнопки = "Приєднуйтесь зараз!" className = "первинна кнопка" />
<Значення кнопки = "Зробіть тур" className = "вторинна кнопка" />
Приклад символу ескізу:
кнопка / первинна кнопка
кнопка / вторинна кнопка

c. Оптимізовано для тестування одиниць

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

Приклад HTML:

г. Оптимізовано для Analytics

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

Приклад HTML:

У реалізації та використанні атрибутів даних є кілька переваг:

е. Оптимізовано для A / B тестування

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

Приклад реагування:
<Кнопка
  value = "Пиво сьогодні!"
  className = "первинна кнопка - b"
  варіація = "b"
  кампанія = "День святого Патріка"
/>
Виведення HTML:
<кнопка
  class = "первинна кнопка - b"
  зміна даних = "b"
  data-кампанія = "День святого Патріка">
  Пиво сьогодні!
«Мета тесту - не здобути літ, а навчитись», - доктор Флінт Макглафлін, MECLABS

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

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

Пам'ятати

Нічого не написано в камені. Тестуйте багато. Це все про контекст.

Вхідний маркетинг

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

Список літератури