Колір кнопки «Додати в кошик»: 6 кращих прикладів

Дрібні деталі часто виявляються найважливішими — за статистикою Toast, проста зміна кольору кнопки «Додати в кошик» може збільшити рівень конверсії на 200–350% і підвищити продажі в кілька разів. Звичайно, цю статистику слід розглядати в контексті, адже сайт — це складний комплекс UI-елементів, кожен з яких спрямовує користувача до цільової дії. Однак інтернет-магазин без ефективних конверсійних елементів буде незавершеним, як картина без підпису художника. Тому сьогодні ми розглядаємо дуже вузьку, але важливу тему — як саме колір кнопки впливає на ключові показники електронної комерції. 

Чому колір кнопки «Додати в кошик» має значення

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

Колір кнопки «Купити зараз» має велике значення для конверсії. За результатами досліджень Top Design Firms, він є визначальним фактором для ухвалення рішень у 40% покупців. Колір маленьких конверсійних елементів впливає на продажі так само як всі фотографії та відеоролики в картці товару. 

Колір кнопки «Додати в кошик»: ключові поради

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

1. Зробіть її контрастною

Ще в 1933 році німецька науковиця Хедвіг фон Ресторфф виявила, що люди в першу чергу помічають ізольовані елементи, які значно виділяються зі свого оточення. Тому конверсійні елементи мають відрізнятися від інших деталей UI, хоча й не настільки сильно, щоб це різало очі відвідувачам сайту. 

2. Враховуйте психологію сприйняття кольорів

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

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

3. Використовуйте перевірені колірні схеми

Дослідження, які проводили видатні психологи протягом XX сторіччя, також допомогли нам дізнатися про існування колірних схем, привабливих для людини:

• Компліментарна — два протилежні кольори. Створюють максимальний контраст, в першу чергу привертаючи увагу до кнопки «Додати в кошик». Така схема ідеально підходить для стимулювання емоційних купівель.
• Аналогічна — два близькі кольори. Ця схема також дає змогу виділити конверсійний елемент, але вона не відриває увагу від інших деталей на зразок фото товару чи контактних даних.
• Тріадна — три кольори, рівновіддалені один від одного за тональністю. Створює відчуття гармонії та спокою, мотивує ухвалювати зважені раціональні рішення.
• Квадратна — чотири рівновіддалені кольори. Має найменшу контрастність, але викликає відчуття довіри й підкреслює естетику товарів. Підходить для продажу унікальних продуктів, наприклад брендового одягу чи витворів мистецтва. 

4. Спирайтеся на брендбук

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

5. Використовуйте кнопки-привиди

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

6. Проводьте A/B тестування кольорів

Як ми згадували вище, не існує універсальних кольорів кнопки «Додати в кошик» або «Купити зараз». Тому вам завжди слід експериментувати та виявляти ті кольорові рішення, які показують найкращі результати саме для вашого бізнесу.

Наприклад, А/B тестування допомогло одній компанії виявити, що червона кнопка призводить до збільшення коефіцієнта конверсій на 34% порівняно із зеленою, а інший компанії А/B тестування показало, що синій колір кнопки забезпечує 9% зростання конверсій порівняно з помаранчевим.

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

Приклади брендів, що використовують кращі кольори кнопки «Додати в кошик» або «Купити зараз»

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

1. Червоний — Funky Moose Canada

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

Червона кнопка «Купити зараз» у Funky Moose Canada вийшла дуже контрастною. Вона сильно виділяється на тлі мінімалістичного чорно-білого дизайну інтернет-магазину. Це рішення ідеально підходить для індустрій, у яких емоції виходять на перший план: музики, відео, комп’ютерних ігор тощо. 

2. Жовтий і помаранчевий — Amazon

Що ми шукаємо на маркетплейсах? Насамперед вигоду від можливості порівнювати товари різних продавців. Дизайнери Amazon чудово це розуміють, а тому вибрали для своїх конверсійних елементів кольори, що асоціюються з багатством, вигодою та достатком, — жовтий і помаранчевий. Так, покупцям доступні дві кнопки одразу — «Купити за один клік» та «Додати в кошик». 

Amazon дає нам один із кращих прикладів кнопок «Купити зараз» — як за колірною гамою, так і за UI-дизайном. Поруч із ними розташовані ціна й умови купівлі — усе максимально чесно та прозоро, що збігається із загальною темою вигоди й раціональності.

3. Фіолетовий — MAUDAU

Український маркетплейс показує один із кращих прикладів оформлення кнопки «Купити зараз» з кількох причин:

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

Але MAUDAU пішли далі та покращили свої показники ефективності за допомогою Claspo. Наші віджети також гармоніювали із загальним дизайном сайту, просували спеціальні пропозиції та переводили відвідувачів на сторінки акційних товарів для ознайомлення та покупки, де їх вже зустрічала вдало оформлена кнопка «Купити». Результати? Збільшення переглядів товарів на 14%, підвищення додавань у кошик на 15% та збільшення транзакцій на 19%.

Вибирайте Claspo та повторіть успіх MAUDAU! Наші віджети можуть переводити покупців як на сторінку товару, так і на сторінку оформлення замовлення безпосередньо. Оформляйте ваш віджет у будь-яких кольорах у нашому простому редакторі та перевіряйте які колірні схеми приносять найкращі результати з нашою вбудованою функцією А/В тестування.

4. Синій — Microsoft

Операційна система комп’ютера — це основа основ, якій ми довіряємо свою продуктивність, безпеку й вільний час. Тому топовий розробник програмного забезпечення вибрав для себе блакитну кнопку «Додати в кошик», яка насамперед символізує надійність та довіру. У випадку з Microsoft мова йде одразу про дві рівнозначні кнопки — купити програму разовим платежем або оформити підписку. 

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

5. Зелений — Google Play

Ринок мобільних застосунків — це світ безперервного руху. Тому онлайн-маркетплейс Google Play мотивує клієнтів ухвалювати швидкі рішення, пропонуючи їм кнопку Install зеленого кольору. Цій колір, як ми вже знаємо, символізує рух, розвиток, безпеку та стабільність. Додатковими аргументами, покликаними розвіювати вагання, будуть соціальні підтвердження — рейтинг застосунку та кількість завантажень. 

6. Чорний — Boohoo

Багато магазинів одягу використовують саме чорний колір для кнопки «Додати в кошик», тому що він асоціюється з розкішшю та елегантністю. Британський рітейлер Boohoo.com не став винятком.

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

Висновки

UX/UI-дизайн сайтів — це доволі складна сфера, у якій найдрібніші деталі можуть суттєво впливати на показники залученості й конверсії. Особливої уваги потребують елементи, які ведуть до транзакції, зокрема кнопки «Купити зараз», «Додати в кошик», «Замовити», «Встановити» чи «Підписатися». Вибравши ідеальний колір з урахуванням цінностей та меседжу свого бренду, ви можете значно збільшити обсяг продажів і розмір клієнтської бази. А виявлення цього «ідеального кольору» можливе за допомогою регулярного A/B тестування.

З Claspo віджетами ви можете отримати перші цінні інсайти про виграшний колір кнопки без зайвих витрат. Просто скористайтесь нашим безкоштовним планом, створіть ваші перші віджети з кнопками відповідних кольорів та налаштуйте їх A/B тестування. Це дозволить вам перевірити ваші пріоритетні гіпотези перед тим, як вносити суттєві зміни кольорів кнопок по всьому вебсайту.