Кнопка «Купити» на сайті працює, коли вона одна головна на екрані, вирізняється стилем, який не повторюють інші кнопки, стоїть поруч із ціною й вибором варіанта, а на телефоні має щонайменше 1 см у висоту й завжди під рукою. Звучить очевидно, але дослідники Baymard Institute пишуть, що 48% інтернет-магазинів порушують хоча б одне з базових правил оформлення головної кнопки. Нижче розбираємо кожне правило і те, як його виконати на Хорошоп.
Який текст писати на кнопці «Купити»?
Текст кнопки має чесно описувати, що станеться після натискання. Якщо товар потрапляє в кошик і покупець може продовжити покупки, точніше писати «У кошик» або «Додати в кошик». Якщо після натискання одразу відкривається оформлення, доречне «Купити» або «Оформити». Невідповідність тексту й дії змушує людину зупинитися і з’ясовувати, де вона опинилася, а кожна така пауза на телефоні коштує частини покупців.
- Одне дієслово, без загадок. «Купити», «У кошик», «Замовити» зрозумілі всім. «Хочу!» або «Беру» виглядають мило, але не кажуть, що буде далі.
- Одна мова з сайтом. Якщо сайт українською, а кнопка залишилась російською з шаблону, це сприймається як недогляд.
- Стан після натискання. Коли товар уже в кошику, кнопка має це показати: змінити текст чи вигляд. Інакше покупець натисне вдруге і отримає дві одиниці.
На Хорошоп назви кнопок і блоків змінюють через функцію «Переклад інтерфейсу» в адмінці, без правок шаблону. Це зручно, коли треба привести текст до одного стилю на всіх мовних версіях.
Якого кольору має бути кнопка «Купити»?
«Найкращого» кольору не існує. Зелена, помаранчева чи червона кнопка працює однаково добре, якщо вона контрастує з фоном і більше ніде на сторінці не трапляється. Baymard прямо радить давати кнопці «У кошик» унікальний стиль, який не використовують інші кнопки, і тримати його однаковим на всьому сайті. Покупець вчиться: побачив цей колір, значить, тут купують.
Типова помилка: кнопки «Купити», «Купити в кредит», «Швидке замовлення» і «Додати в обране» зроблені в одному стилі й стоять поруч. Людина бачить чотири однакові прямокутники і вагається, який із них потрібен. Головна дія має бути найпомітнішою, решта виглядають другорядними: контурні, світліші або дрібніші. Підібрати кольори під палітру магазину допоможе стаття про кольори віджета під дизайн магазину, правила там ті самі.
Якого розміру кнопка потрібна на телефоні?
Nielsen Norman Group рекомендує для сенсорних екранів ціль щонайменше 1 × 1 см, і це нижня межа, а не мета: якщо людина користується телефоном на ходу, ціль має бути ще більшою. Baymard у дослідженні кнопок наводить близьку цифру: мінімальна зона натискання 7 × 7 мм суттєво зменшує кількість промахів. Для кнопки «Купити» на мобільному розумно робити її на всю ширину картки з висотою від 44 до 48 пікселів, щоб у неї легко влучити великим пальцем.
Де розмістити кнопку на сторінці товару?
Кнопка має стояти там, де покупець ухвалює рішення: одразу під ціною і вибором розміру, кольору чи кількості. На телефоні це має бути видно на першому екрані без прокрутки. Якщо між ціною та кнопкою вклинились банери, характеристики чи блок доставки, людина спершу шукає дію, а вже потім купує.
На Хорошоп сторінку товару налаштовують у розділі «Сайт → Дизайн → Редактор дизайну → Сторінка товару», а мобільну версію окремо, у тому ж редакторі в розділі «Мобільна версія сайту». За довідкою Хорошоп, у блоці кнопок купівлі зібрані кнопка «Купити», кнопка кредиту, кнопка швидкого замовлення та лічильник кількості. Кнопка кредиту з’являється лише тоді, коли для товару налаштована оплата частинами. Перевірте, чи блок стоїть одразу після ціни і чи не загубився серед інших елементів на мобільному.
Що має статися після натискання «Купити»?
Покупець має миттєво побачити, що товар додано, і зрозуміти, куди йти далі: оформити замовлення чи продовжити покупки. Baymard, аналізуючи сотні прикладів підтвердження «Додано в кошик», зафіксував, що неоднозначні шляхи на цьому кроці змушують людей витрачати час на пошук наступної дії. Тому гарне підтвердження має дві чіткі кнопки і не ховає перехід до оформлення.
Цей момент також найкращий для доречної пропозиції: людина вже вирішила купити і відкрита до дрібниці, яка доповнює покупку. Так працюють рекомендації «Часто беруть разом»: після додавання товару в кошик вони показують кілька супутніх позицій з кнопкою «+», і покупець додає їх, не виходячи зі сторінки. Що саме вважати супутнім товаром і як його підбирати, ми пояснили у статті супутні товари: що це.
Як тримати кнопку під рукою на довгій картці?
На мобільному картка товару довга: фото, опис, характеристики, відгуки. Поки покупець дочитує відгуки, кнопка «Купити» вже кілька екранів вище. Рішення тут одне: закріпити дію внизу екрана. Липка кнопка «Купити» від widgetis з’являється на телефоні після того, як людина прокрутила сторінку, бере текст з вашої справжньої кнопки й натискає саме її. Тому вибір розміру, перевірка наявності й додавання в кошик працюють так само, як задумав Хорошоп, а колір, шрифт і закруглення ви підбираєте під дизайн. Докладніше про ефект закріпленої кнопки читайте у статті про липку кнопку і мобільну конверсію.
Чеклист кнопки «Купити» за 5 хвилин
- Відкрийте картку товару на телефоні: кнопку видно на першому екрані без прокрутки?
- Текст кнопки відповідає дії: «У кошик», якщо товар кладеться в кошик, «Купити», якщо одразу відкривається оформлення.
- Колір кнопки більше ніде на сторінці не повторюється, другорядні кнопки виглядають скромніше.
- Висота кнопки на мобільному не менше 1 см, ширина на всю картку.
- Після натискання видно підтвердження і два зрозумілі шляхи: оформити або продовжити покупки.
- На довгій картці кнопка доступна внизу екрана під час прокрутки.
Гарна кнопка «Купити» нікого не вмовляє. Вона просто не змушує людину шукати, як зробити те, що вона вже вирішила.Віджети для конверсії на Хорошоп
Часті питання
Що краще писати на кнопці: «Купити» чи «У кошик»?
Пишіть те, що реально станеться. Якщо товар додається в кошик і людина може продовжити покупки, точніше «У кошик» або «Додати в кошик». Якщо після натискання одразу відкривається оформлення замовлення, підходить «Купити». Збіг тексту й дії прибирає паузу, коли покупець з’ясовує, де опинився.
Який колір кнопки «Купити» продає найкраще?
Універсального кольору немає. Працює контраст із фоном і унікальність: кнопку «Купити» не варто фарбувати так само, як інші кнопки на сторінці. Baymard радить тримати для неї окремий стиль і використовувати його однаково на всьому сайті, щоб покупець одразу впізнавав головну дію.
Якого розміру має бути кнопка на мобільному?
Nielsen Norman Group називає мінімумом для сенсорного екрана ціль 1 × 1 см, а Baymard наводить мінімальну зону натискання 7 × 7 мм. На практиці кнопку «Купити» роблять на всю ширину картки товару з висотою приблизно від 44 до 48 пікселів, щоб у неї легко влучити великим пальцем.
Як змінити текст кнопки «Купити» на Хорошоп?
Назви кнопок і блоків на Хорошоп змінюють через функцію «Переклад інтерфейсу» в адмінці, окремо для кожної мовної версії. Розташування блоку кнопок на сторінці товару налаштовують у редакторі дизайну: окремо для десктопної та мобільної версії сайту.