CTA-кнопка: 10 стовпів ефективності

Розповім про перших фактори які, на мою думку, впливають на ефективність CTA (call to action) кнопки, вона ж «купити» икоммерц-проектах.
Ніяких порад і кейсів, скріншоти тільки для ілюстрації без тексту. Гіпотези кожен може побудувати сам і перевірити їх спліт-тестами.



1) Розташування
Перший екран наше все. У залежності від проекту, до 50% користувачів не скроллят сторінку вниз. Тобто, якщо ми маємо головну кнопку на другому екрані — то самі, своїми руками, знижуємо конверсію.
Перевірити легко: Дивимося на якому пікселі зверху кнопка і звіряємо з висотою екранів юзерів з ГА. Наприклад, якщо нижній край кнопки 900-ї піксел, то 30% юзерів отримують її (або її частина) на другому екрані.
Тобто, в загальному випадку, чим вище CTA-кнопка, тим краще. Традиційно її місце праворуч т. к. користувачі правші, а контент на більшості сайтів зліва.


Приклад: На сайті Ламоды чобіт у першому екрані не видно, але кнопка на місці.


2) Розмір
Розмір це акцент, наголос це пріоритет, пріоритет це що? Так — хто тут головний. Якщо ми хочемо продавати, то СТА-кнопка повинна бути головною, тобто великого розміру.
Але, не занадто великий, щоб не випадати з дизайну і не займати половину екрану.


На сайті Yoox немає сумнівів який елемент інтерфейсу головний.


3) Колір
Що ми маємо тут. Добре, якщо він контрастний, тобто відрізняється від кольору основних елементів сайту. Але, випадання його з дизайну створює відчуття чванливості. Саме тому я не вважаю універсальними і кращими відтінки червоного/помаранчевого (що прийнято в середовищі юзабилистов). Але, в деяких випадках вони дійсно працюють, все залежить від дизайну сайту.

image
На сайті Вайлберрис кнопка контрастує з дизайном і не випадково помаранчева.


4) Текст (зміст)
Це мій улюблений момент. В якості тексту всередині кнопки можна бачити на сайтах зоопарк варіантів. Я вважаю, що текст на кнопці повинен:
  • точно відображати дію, конкретизувати його. У цьому сенсі «купити» не говорить ні про що.
  • включати емпатію. Наприклад «Покласти в мою кошик»
  • містити заклик до дії, не бути нейтральною.
Сюди ж: Стрілка спецсимволом (→) в кнопці, якщо після її натискання відбувається перехід і її відсутність переходу немає.


На сайті Качкодзьоб вирішили взагалі обійтися без тексту. Хороше рішення? Не думаю.


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


На сайті Боско кругла кнопка, це незвично. Я б перевірив її на ефективність.


6) Інтерактивність / тактильність
Як добре іноді пограти з кнопкою наведенням миші. Раз, два, три навів і ось — ти її вже натиснув. Рідкісний випадок? Ні, це працює. Тому за оверлею міняємо колір, збільшуємо шрифт або ще якимось чином змінюємо кнопку. І це правильно!
Ще можна дати підказку, це теж інтерактивність.


Букінг.ком по наведенню пропонує натисненням на кнопку перейти до нового кроку.

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

7) Повторення
Якщо у нас простирадло контенту (наприклад, лендінгем), то кнопку добре повторити. Чому? Щоб для її натискання не треба було багато скролл вгору. І ще, щоб нагадати користувачеві навіщо ми все це на сторінці йому показуємо, щоб він купив.


На сайті Онлайнтурс вгорі сторінки і кнопка внизу така ж.


8) Якість виконання
Окремий пункт, який і так зрозумілий, але не завжди реалізований. Негарна, крива кнопка натискається рідше, навіть якщо весь сайт ще нічого. Це бар'єр, який нікому не потрібен і забирається легко будь-яким розумним дизайнером.
Крім того, гарна кнопка навколо має відступ, це збільшує її самостійність і виділяє з усього контенту. Погана — липне до країв і іншим об'єктам.


Бляклі, шаблонні кнопки з 90-х на сайті Никса, відразу видно робили програмісти.


9) Змінюваність
При перезавантаженні або скролінгу вниз і кнопа змінює колір. У якийсь момент вона чіпляється за екран. Кому від цього погано? — Нікому. Привертає увагу? — Так.
Прийом для спліт-тесту годиться, пробуємо.

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


На сайті BEBAKIDS вони трохи різні за розміром, але дуже схожі.


Висновок
Факторів багато (описав основні), все впливають окремо, а їх комбінація впливає разом. Думаю, що кожен розуміє як це відбивається на конверсії — прямо і безпосередньо. Я підвищував за рахунок цього продуктивність в 1,5 рази і більше. У будь-якому випадку, над нею варто гарненько попрацювати.

Всім робочих кнопок!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.