Які кольори найкраще підійдуть вашому лендінгу?
Коли людина потрапляє на ваш Лендінгем, дуже важливо, щоб абсолютно всі сприяло його подальшому просуванню вглиб воронки продажів (sales funnel). Зокрема, на показники конверсії величезний вплив має колірна гамма.
Ральф Уолдо Емерсон (Ralph Waldo Emerson) одного разу дуже мудро сказав, що «природа завжди носить колір настрою».
У цій статті ми обговоримо, чому важливо обдумано підходити до вибору відтінків, які значення таїть в собі той чи інший колір, що було виявлено в ході проведення деяких експериментів і як слід вибирати кольори для збільшення конверсії вашої цільової сторінки.
Колір як один з важелів конверсії
Якщо ви думаєте, що колір є незначним фактором конвертації цільової аудиторії, то ви помиляєтеся. Практика показує, що багато маркетологів недооцінюють вплив кольору на людське сприйняття.
Згідно з даними Kissmetrics, досить часто вирішальним фактором для здійснення споживачем покупки стає зовнішній вигляд продукту, і в тому числі його колір. Якщо говорити точніше, 85% споживачів диктують кольору в якості основної причини вибору того чи іншого продукту.
Крім того, 42% формують свою думку про сайт лише по його дизайну, і більше половини (52%) не повертається на сайт з невдалим оформленням.
Kissmetrics також дає свої рекомендації по вибору кольору в залежності від характеру вашого бізнесу. Червоний, оранжевий, чорний і королівський синій кольори слід використовувати для залучення «імпульсивних» покупців (impulse shoppers); темно-синій і синьо-зелений – для «економних» покупців (shoppers on a budget); і м’які кольори, такі як рожевий і небесно-блакитний – для залучення «традиційних» покупців (traditional buyers).
Культура кольору
Як і з усім іншим в маркетингу, процес вибору ефективної колірної гами для вашої посадкової сторінки повинен починатися з чіткого визначення цільового ринку (target market). Особливо це важливо в тому випадку, якщо ваш цільовий ринок включає людей з різних культур.
Одні і ті ж кольори в різних культурах можуть мати абсолютно протилежні значення. Наприклад, в той час як західні люди вважають білий колір символом чистоти, для китайців – це колір трауру і смерті. А в Бразилії кольором смерті є фіолетовий.
Щоб переконатися, що ваш Лендінгем принесе оптимальний коефіцієнт конверсії, потрібно попередньо ознайомитися з культурними особливостями вашої цільової аудиторії і розробляти дизайн на підставі цих даних. Можливо, ви навіть вважаєте за необхідне інвестувати в кілька колірних схем для людей з різних країн.
Тема вашого лендінгу
Наступний ваш крок – упевнитися, що вибрані вами кольори збігаються з темою вашого сайту. Тут вступає в силу так званий «принцип близького знайомства» (the familiarity principle).
Простіше кажучи, «принцип близького знайомства» говорить, що людей притягує те, з чим вони добре знайомі. Ось чому кольорове оформлення повинно повністю відображати суть вашого продукту або послуги. Так, згідно з Color Wheel Pro:
«Синій – колір неба і моря. Він часто асоціюється з глибиною і стабільністю і символізує довіру, лояльність, мудрість, впевненість, розум, віру і правду. Вважається, що синій благотворно впливає на розум і тіло: він уповільнює метаболізм і має заспокійливий ефект ».
Помаранчевий ж колір символізує ентузіазм, захоплення, щастя, творчість, рішучість, потяг, успіх, заохочення і стимул. Саме тому багато «елементи призову до дії» (calls to action) пофарбовані в оранжевий колір:
Припустимо, що ви збираєтеся продавати морські рибальські снасті онлайн – в цьому випадку, краще не використовувати коричневі і зелені кольори в дизайні вашого сайту. Замість цього вдалим вибором стануть кобальтові та білий кольори, так як вони добре знайомі морським рибалкам. Якщо ж ваш бізнес пов’язаний зі збільшенням доходів підприємців, як у випадку з Quick Sprout, то зелений стане відмінним рішенням.
Купівельні візки в магазинах і цільові сторінки також не є винятками. Вони повинні повторювати колірну палітру вашого основного сайту, тим самим активізуючи «принцип близького знайомства».
Значення кольорів
У кожного кольору є свій характер. У той час як одні кольори пробуджують гарний настрій і надихають, інші, навпаки, викликають безпричинну тугу і валять в депресію.
Люди звикли прив’язувати до певних кольорів ті чи інші емоції, настрій і / або думки. Досвідчені веб-дизайнери знають абсолютно все про психологію кольору і розробляють сайти відповідно до цими знаннями.
Нижче ми розглянемо коротко значення основних кольорів.
Червоний
Червоний колір на Заході має декілька основних значень: заборона, любов і Різдво. Він часто використовується для формування відчуття терміновості або для передачі ідеї енергії.
Червоний також вселяє почуття голоду. Більшість мереж ресторанів швидкого харчування використовують в своєму логотипі саме червоний колір: McDonald’s, KFC, Chili’s, Applebee’s, і In-N-Out.
В ході різних тестів червоний колір неодноразово визнавався як найефективніший колір для кнопок «заклику до дії» на сайтах.
Жовтий
Жовтий колір – це свого роду пастка для очей, так як він досить рідко зустрічається в природі. Цей колір створює відчуття щастя і оптимізму, а також надихає на творчість.
Однак використовуючи жовтий колір, важливо не переборщити з ним. В іншому випадку є небезпека того, що ваш сайт стане виглядати занадто «гучним» і буде приносити абсолютно протилежні задуманим результати. Тому краще використовувати жовтий колір для кордонів, логотипів і кнопок, але не для фону.
Крім того, жовтий є відмінним контрастним кольором. Якщо ваша загальна колірна схема добре гармонує з жовтим, ви можете використовувати його для залучення уваги до певних елементів вашої сторінки.
Зелений
Перша думка у більшості водіїв при вигляді зеленого кольору одна: «Вперед!».
Крім цього, зелений колір передає собою ідею природи. У зв’язку з цим він стане хорошим вибором для сайтів, тематикою яких є активний відпочинок, як кемпінг або піший туризм.
Не варто забувати також, що зелений часто асоціюється з добробутом через колір американських купюр. Якщо ви просуваєте курси з продажу або маркетингу, то можете використовувати зелений колір для стимулювання думок про поліпшення свого фінансового стану у ваших відвідувачів.
Сайт VitaCost вдало використовував зелений колір для дизайну кнопок «заклику до дії»:
Синій
Синій є універсальним «корпоративним» кольором, і безумовно, займає чільне місце в багатьох бізнес-темах WordPress. І на це є своя причина.
Як уже згадувалося вище, синій передає відчуття довіри, чесності та безпеки. Фірми, які вибирають синій колір в якості основного для дизайну свого сайту, тим самим як би говорять своєї цільової аудиторії: «Ви можете довіряти нам».
Також синій може застосовуватися для вираження холодного або океанічного розташування. Якщо ваш продукт або послуга будь-яким чином пов’язані з подібною навколишнім середовищем, то розгляньте варіант використання синього кольору як основного для вашого дизайну.
Величезний плюс синього кольору полягає в тому, що, на відміну, наприклад, від жовтого, ви можете використовувати його в великих кількостях, особливо якщо виберете більш світлий відтінок синього.
Сайт Dr. Dental – відмінний приклад того, як задіюються різні відтінки синього на головній сторінці стоматологічної клініки:
Помаранчевий
Помаранчевий колір може транслювати різні повідомлення. Думки психологів на його рахунок розходяться. Одні кажуть, що він випромінює тепло і оптимізм, інші вважають, що помаранчевий вказує на застереження (згадайте про придорожніх знаках). Треті ж називають помаранчевий агресивним кольором.
Одне можна сказати напевно: безперечний король електронної комерції Amazon успішно використовує помаранчевий колір для кнопок «заклику до дії».
Фіолетовий
Фіолетовий колір був атрибутом королівської влади. У маркетингу він застосовується, щоб заспокоїти або втішити людей. Однак, як і у випадку з жовтим кольором, використовувати його слід в помірних кількостях.
Фіолетовий часто вибирають компанії, що займаються продажем антивікових продуктів. Хорошим прикладом тут служить сайт Meaningful Beauty. Зверніть увагу на те, як поєднуються різні відтінки фіолетового на сайті, а кнопка «заклику до дії» (суміш рожевого і фіолетового) гармонує не тільки з одягом моделі, але і з дизайном всього сайту в цілому.
Рожевий
Рожевий – улюблений колір багатьох молодих дівчат. Саме тому він досить часто вважається жіночим кольором.
Якщо основними відвідувачами вашого сайту є молоді жінки, зверніть увагу на цей колір.
Слід зазначити також, що більш темні відтінки рожевого можуть бути апелювати і до чоловічої частини аудиторії.
Дослідження, опубліковане в Journal of Orthomolecular Medicine, показало, що рожевий виробляє заспокійливий ефект. Згодом була висунута гіпотеза, що саме з цієї причини препарат від розладу шлунка Pepto-Bismol має рожевий колір.
Білий
У західній культурі білий колір символізує чистоту, якість і ясність. Ось чому він добре підходить до синього ( «цілісність») в корпоративній темі.
Білий колір практично завжди є найкращим вибором для фону сайту.
Чорний
Чорний є поєднанням всіх кольорів разом узятих і передає відчуття влади. Він часто використовується на ринку люксових товарів, а також для сайтів, присвячених технологіям або чоловічого фітнесу.
Дослідження: Червоний / Оранжевий vs. зелений
З метою вивчення впливу кольору на сприйняття було проведено кілька досліджень, порівняли ефективність червоною або помаранчевої кнопки «заклику до дії» із зеленою.
Dmix протестували 600 об’єктів з червоними і зеленими кнопками. На Лендінзі з червоною кнопкою коефіцієнт конверсії виявився вищим на 34%.
1: 0 на користь червоної кнопки
У другому дослідженні, проведеному HubSpot, трафік порівнювався за кілька днів і знову переможцем виявилася червона кнопка з рівнем конверсії, які перевищили інші варіанти на 21%.
2: 0 на користь оранжевої кнопки
У тесті, проведеному Visual Website Optimizer, порівнювалися три типи кнопок: біла кнопка з зеленим текстом, зелена кнопка з білим текстом і червона / помаранчева кнопка з білим текстом. Цього разу червона / помаранчева кнопка знову обійшла своїх конкурентів, однак збільшення конверсії склало лише 5%.
У підсумку, 3: 0 на користь червоної / помаранчевої кнопки
Чи випливає з цього, що червоний колір – найкращий вибір для збільшення конверсії?
Не обов’язково
Помаранчевий vs. синій
Monetate провів свій експеримент, порівнявши ефективність помаранчевої кнопки «заклику до дії» з синьою.
В ході класичного спліт-тестування компанія виявила, що синя кнопка перевершила результати своєї помаранчевої копії, хоча збільшення конверсії було не настільки велике – 9%.
То який же колір найкраще?
Не існує єдиного універсального рішення для всіх. Оптимальний колір для вашої кнопки «заклику до дії» залежить від контексту.
Так, в тесті Hubspot, згадуваному вище, червона кнопка помітно контрастувала з загальною колірною схемою сайту, в той час як зелена практично губилася на тлі схожого відтінку. Як ви думаєте, це могло якимось чином вплинути на більш високий показник конверсії у випадку з червоною кнопкою?
Зрозуміло
Ось чому HubSpot відразу ж вказав, що «результати даного дослідження можна віднести до всіх ситуацій. Максимум, чого ми можемо бути впевнені, це що вони справедливі для тих умов, в яких вони були виявлені: з цим дизайном сторінки, на цьому сайті і з тією аудиторією, яка переглянула його ».
Таким чином, для кожного конкретного сайту колірне рішення буде своє, однак намагайтеся при цьому дотримуватися наступного правила: колір кнопки повинен контрастувати з основною колірною схемою сайту, при цьому гармонируя з нею. Наприклад, якщо ваша колірна схема – блакитний і білий, можливо, хорошим вибором для кольору кнопки «заклику до дії» стане темно-синій. У той час як яскраво-червона кнопка буде занадто виділятися і може бути сприйнята як перешкода.
Спліт-тестування
Спліт-тестування допоможе вам визначитися з вибором найкращого колірного рішення. Оскільки в дизайні може використовуватися більше 2-х кольорів, вам, можливо, буде потрібно провести кілька ітерацій спліт-тестування.
Почніть з скорочення потенційно можливих кольорів для вашої кнопки «заклику до дії» до кількох варіантів, що відповідають темі вашого сайту або створюють достатній контраст.
Після цього можна починати проводити спліт-тестування, які нагадують собою груповий турнір. Виберіть переможця з перших двох тестів, а потім продовжите тестування з переможцем з іншої групи, і продовжуйте таким чином до тих пір, поки не буде визначено фіналіст.
Всі інші правила залишаються в силі
Навіть правильно вибраний колір сам по собі не врятує вас. Якщо ваш сайт і інформація на ньому не достатньо переконливі для відвідувачів, то зовсім не важливо, яку колірну схему ви оберете – ваша конверсія навряд чи зміниться.
Колір – це тільки частина вашої маркетингової стратегії. Пам’ятайте про це.
Підведемо підсумки
Кольори, які використовуються дизайнерами на веб-сторінках, впливають на показники конверсії. Спліт-тестування і знання основних значень кольорів допоможе створити вам такий дизайн, який переконає звичайних відвідувачів стати вашими клієнтами або навіть фанатами бренду.
Основні моменти, які завжди слід мати на увазі:
- Фон не повинен залучати занадто багато уваги
- Не варто використовувати кольори, які мають негативне значення в культурі цільової аудиторії
- Елементи «заклику до дії» повинні бути помітними і розташовуватися вище «лінії згину»
- Кількість відволікаючих елементів повинно бути зведене до мінімуму.
- Високих вам конверсій!