Кнопки «Заклик до дії», найкращі практики та приклади

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

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

Мета кнопки "Заклик до дії"

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

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

Типи кнопок "Заклик до дії"

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

1. Додати в кошик кнопки

Веб-сайти електронної комерції зазвичай використовують декілька кнопок виклику до дії, але найбільш поширеним є “додати в кошик” кнопки. Ці кнопки зазвичай з'являються на окремих сторінках продукту. Їхня мета - заманити клієнтів на придбання товару. Загальні елементи дизайну в додатку до кнопок кошика включають просту формулювання (наприклад, “Додати до кошика” або “Додати до сумки” або “Придбайте зараз“) і використання іконок (як правило, сумка або візок).

2. Завантажити кнопки

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

3. Пробні кнопки

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

4. Докладніше Кнопки

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

5. Зареєструйте кнопки

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

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

Ефективне використання негативного простору

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

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

Деякі вказівки:

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

Розмір і колір

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

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

Деякі вказівки:

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

Мова

Точне формулювання, яке ви обираєте використовувати на кнопках із закликом до дії, може мати величезний вплив на конверсію. Порівняйте “Придбайте зараз” с “Додати до кошика“. Один набагато гостріший за інший. Або як “Спробуйте безкоштовно” с “Безкоштовне випробування“? Один з них набагато більш чіткий, ніж інший, і виділяється більше.

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

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

Деякі вказівки:

Використовуйте просту, пряму мову
Використовуйте великий, жирний шрифт на кнопці для основного тексту
Переконайтеся, що мова явно вимагає певних дій

Створити терміновість

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

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

Деякі вказівки:

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

Надайте додаткову інформацію

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

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

Деякі вказівки:

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

Пріоритети

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

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

Іконки та зображення

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

Деякі вказівки:

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

Приклади

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

Наживо - Хорошою стратегією є відмінність кнопок "купити зараз" (для платних опцій) і "зареєструватися" (для безкоштовних опцій).

Windows 7 - Велика, зелена кнопка "Отримати Windows7" легко помітити відвідувачам.

Fileshare HQ - Яскрава зелена кнопка тут дійсно виділяється на білому тлі.

Журнал - Використання різних кольорів для кнопок "Завантажити" та "Придбати" відрізняє їх і надає пріоритет кнопці "Купити".

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

GoodBarry - Ще одна яскрава зелена кнопка виклику до дії.

Lifetree Creative - Продовження того ж самого шрифту від тіла до кнопки виклику до дії створює почуття згуртованості.

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

Блокнот - Хороший приклад включення додаткової інформації в кнопку виклику до дії.

Inkd - Чудовий приклад визначення пріоритетів кнопок з розміром.

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

ZenDesk - Ще один чудовий приклад створення кнопки виділяється кольором.

Storenvy - Кругла кнопка є несподіваною і виділяється, особливо коли вона оточена білою облямівкою.

Bara'Mail - Іноді кнопка, яка вписується в роботу краще у вашому загальному дизайні сайту, особливо, коли дія менш актуальна.

Більше ресурсів

Заклик до дії Кнопки: приклади та найкращі практики - від розгрому журналу
Гарні кнопки Call-to-Action - від UX Бут
Заклик до дії Кнопки: чи розмір має значення? - З Get Elastic
10 методів для ефективного “Заклик до дії” - Від Boagworld
5 Поради щодо створення ефективної кнопки виклику до дії - з SitePoint