Вплив кольору на конверсію сайту

Andrew Chornyy - 001
Andrew Chornyy

CEO Plerdy — експерт із SEO&CRO з більш ніж 14-річним досвідом.

SEO Інструменти Електронна комерція Посібник користування Юзабіліті сайту (UX)

colorІв Сен-Лоран, коли говорив про те, що відкрив колір у Марокко, мав на увазі те, що пізнав силу його психологічного впливу. Колір визначає наші почуття, задає настрій, змінює життя. Таким же чином він працює стосовно відвідувачів сайту. Тож завдання брендингу та дизайну — визначити неусвідомлене ставлення цільової аудиторії до компанії, її продукції або послуг з допомогою кольору. Іноді — вплинути на рішення купити, іноді — заохотити до натискання тієї чи іншої кнопки.

Чи так це важливо насправді?

гама кольорів

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

  • 93 % користувачів приймають рішення про покупку, спираючись на зовнішній вигляд продукту й сайту. 70 % людей не куплять, якщо колір їм не подобається. Успіх бренду на 80 % залежить від правильності поєднання кольорів ресурсу.
  • Є лише 8 секунд на те, щоби завоювати увагу користувача. Тільки правильно підібраний колір може допомогти в сучасній боротьбі вивісок.
  • Є кольори, які вкрай негативно можуть позначитися на продажах на вашому ресурсі. Це — сірий, коричневий, помаранчевий. Сірий неофіційно заведено вважати інтерфейсним кольором. Він «відводить» від здійснення цільової дії. Коричневий викликає негативні емоції в більшої частини жінок та чоловіків. Помаранчевий оптимальний, швидше, для виділення кнопок, аніж для створення загального враження від бренду і його сайту. Знову ж таки, він сильно дратує користувачів, навіть більше, ніж червоний.

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

Завдання сайту й послання бренду

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

Завдання сайту

Що ви будете просувати? Кольори, які є брендовими, скажімо, у «Кока-Коли», навряд чи допоможуть домогтися високої конверсії та знайти любов клієнтів банку, медичного центру, фармацевтичного підприємства.

Червоний колір чудово пасуватиме до харчової галузі, сфери обслуговування, розваг, техніки, транспорту, агрокультури. Бренди, які оцінили ефективністьцього кольору на своїх продажах: «Макдональдс», «Кока-Кола», «Авіс», «Колгейт», «Лейс», «Найк», «Верджін», «Ред Бул», «Тайм», «КФС».

Блакитний колір хороший практично для всіх сфер діяльності, за винятком тих, які пов’язані з продаванням їжі, транспорту та одягу. Він універсальний (його можуть бачити навіть дальтоніки), але не зовсім доречний для сайтів, пов’язаних із домашнім господарством. Бренди, які випробували ефективність цього кольору на своїх продажах: «Орал-Б», «Твіттер», «Фейсбук», «Лінкедін», «Форд», «ПейПел».

Зелений колір хороший для сайтів у фінансовій, енергетичній, харчовій нішах. Підходить для продажу техніки, предметів і послуг домашнього господарства. Поганий, як не дивно, для сфери охорони здоров’я, транспорту й логістики та громадського харчування. Бренди, які оцінили ефективність цього кольору на своїх продажах: «Сабвей», «Хоул Фудс», «Енімал Пленет».

Помаранчевий — колір сфери охорони здоров’я, громадського харчування, транспорту й логістики, техніки. Здебільшого, якщо його і варто використовувати в дизайні, то для виділення інтерфейсних елементів. Оранж мало з чим поєднується, і за умови неправильно підібраної колірної пари виглядає вкрай дратівливим. Бренди, які перевірили  цейколір на своїх продажах: «Фанта», «Харлей-Девідсон», «Хутерс».

Чорний — колір дуже сильний, потужний і владний. Він сильно перетягує на себе увагу, тому під час створення сайтів його варто використовувати не менш акуратно, аніж червоний, помаранчевий або золотий. Чи помічали ви, що великі модні будинки, на кшталт «Версаче», «Діор», «Шанель», «Сен-Лоран», використовують у брендінгу багато чорного? Що ж, потрібно розуміти, що цей колір асоціюється з високим стилем, з вічністю, з тим, над чим мода ніколи не буде владною. Але тільки такі поважні бренди, які задають настрій в оформленні та одязі у всьому світі, можуть дозволити собі стільки чорного на сайті. Це ідеальний колір для продажу одягу, техніки, транспорту й логістики. Варто враховувати, що він погано поєднується з харчовою нішою та зі сферою охорони здоров’я. Бренди, які довели дієвість цього кольору на своїх продажах: «Шанель», «Діор», «Версаче», «Мон Блан», «Ягуар».

Білий і сріблястий — кольори досконалості й чистоти. Чорно-біла класика — досить заїжджений варіант для оформлення сайту одягу, техніки або транспорту. Проте такий сайт може протягом багатьох років жити без редизайну й зберігати свій стиль, актуальність та привабливість. Білий колір універсальний і поєднується практично з будь-яким іншим відтінком палітри. Під час складання колірних пар без нього практично ніколи справа не обходиться. Найбільш сумнівним є його використання в чистому вигляді для просування продуктів / закладів харчування. Бренди, які успішно використали цей колір на своїх продажах: «Еппл», «Асус», «Ральф Лорен», «Версаче», «Діор», «Ів Сен-Лоран», «Хонда».

Фіолетовий — «сеньйор» загадковий, сильний і величний. Саме тому він використовується в брендінгу б’юті-сайтів. Цей колір як ніякий інший асоціюється з красою і здоров’ям. Він не дуже підходить для енергетичної та агросфери, водночас сумнівним є і його використання для просування одягу, автомобілів, літаків, предметів і послуг домашнього господарства. Бренди, які спробували дієвість цього кольору на своїх продажах: «Яхоо», «Тако», «Крейгліст», «Крояль».

Жовтий — колір радості й дії, інтелекту й розвитку. «Херц», «Шелл», «Нешнл Джеографік» — це лише неповний перелік іменитих брендів, для яких жовтий став символічним. Так, можна сказати, що такий колір оптимальний для енергетичної сфери, харчової галузі та домашнього господарства. Але ж ми знаємо і про такого мобільного оператора, як «Білайн», який стійко асоціюється з бджолиним поєднанням жовто-чорного? Бренди, які довели дієвість цього кольору на своїх продажах: «Кет», «ДХЛ», «Пеннзоіл», «Шелл», «Херц».

Цільова аудиторія

Жінки, чоловіки, дорослі, діти — хто вони, відвідувачі вашого сайту? Вік і стать також потрібно враховувати під час вибору оформлення сайту.

Наприклад, жінкам подобаються пастельні відтінки зеленого, синього, фіолетового. Багатьом також подобається ніжно-рожевий і персиковий.

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

Жінки, навпаки, люблять яскраві й ніжні кольори. Їм не до вподоби, коли на сайті превалюють сірі, блідо-жовті, помаранчеві та коричневі відтінки.

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

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

Щедрий, звичайний, економний

Яка вона — місткість гаманців ваших клієнтів? Фінансові можливості представників ЦА також впливають на прийняття одного кольору і відкидання люди іншого в кожній конкретній ситуації. Наприклад, щедрі й імпульсивні покупці люблять усе яскраве й «палаюче», що привертає увагу (червоне, синє й навіть чорне). Звичайні користувачі вважають «рідними» рожеві й небесно-блакитні варіації, а щодо економістів і консерваторів, то їм подобається синьо-зелені змішані відтінки.

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

Колірні асоціації

колірні асоціації

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

  • Чорний. Елегантний, елітний, вишуканий, вічний, сильний. У майстрів бойових мистецтв є пояси різних кольорів, але всі знають тільки про один — чорний. Він символізує вершинну майстерність, нескінченну досконалість, до якої можна прагнути. Приблизно такі асоціації викликає цей колір і в представників вашої ЦА. Він потужний, елітний. Їм легко і просто підкреслювати статус лакшері-продукції. Але й забувати про те, що чорний — колір потужний та привертає багато уваги, не варто. Чудовий варіант для виділення важливої ​​інформації.
  • Червоний. Вогняний, кривавий, агресивний, соковитий, життєствердний. Це колір величезної мотивації, хороший для кнопок і виділення важливої ​​інформації. Водночас він багатьох відштовхує своєю тотальною насиченістю, ріже око. Червоний колір, як ніякий інший, привертає увагу. Але й символізує небезпеку (всі пам’ятають 3 кольори світлофора?). Він викликає стійке бажання жити, боротися, діяти, але в той самий час сильно втомлює. Буквально викликає апетит, тому ідеальний для всіх сайтів, які пов’язані з їжею, технікою, транспортом і логістикою, сільським господарством.
  • Зелений. Колір природи, гармонії навколишнього середовища, колір грошей і процвітання. Ніщо не може бути більш заспокійливим і живим, ніж зелений листок. Зелений колір полегшує сприйняття, заспокоює й розслабляє. Саме тому широко використовується під час оформлення фінансових, технологічних та кулінарних порталів.
  • Синій. Вважається найбільш лояльним і універсальним кольором. Абсолютно нейтральний у плані сприйняття, він викликає відчуття надійності, стабільності. Безвідмовна чесність, продуктивність, професіоналізм — усе туди ж, до синього кольору. Його активно використовують у світі інформаційних технологій, рідше — там, де мова йде про транспорт, кулінарії, предметах одягу.
  • Сріблястий і білий. Чистота, ясність, прозорість, досконалість — девіз сприйняття тих, хто бачить цей колір. Компанія Apple не випадково обрала його для свого символу — яблука. Її продукт більше ніж просто смачний і соковитий. Він — досконалий. Принаймні, саме так вважають «яблокомани», яких у світі мільйони. Колір володіє аналогічною універсальністю, нарівно із синім, зеленим і чорним. Чудово працює буквально в будь-яких комбінаціях, а от у чистому вигляді не поєднується зі сферою банківських послуг і харчування.
  • Пурпурний. Сильний, загадковий, колірне втілення могутності, пишноти. Широко використовується в б’юті-індустрії й галузі охорони здоров’я, сфері інноваційних технологій. Це колір королівської мантії, синтез рожевого й синього, розкішний не менш ніж чорний, тож може з успіхом використовуватися і в просуванні продукції для лакшері-сегмента.
  • Помаранчевий. Життєрадісний, креативний, непередбачуваний, але водночас і дуже агресивний. Можна сказати, що не менше червоного. Недарма він один із найбільш дратівливих квітів у палітрі. Використовувати його потрібно грамотно, а знайти колірну пару оранж не так уже і просто. Добре цей колір проявляє себе у сфері охорони здоров’я, енергетики, техніки. В інших напрямах поводиться, як і личить завзятому апельсину, — непередбачувано.
  • Жовтий. Колір тепла, затишку, світла й радості. Викликає приємні емоції, підводить до енергетичного підйому. Чудовий варіант для фуд-бренду, івент-компанії, енергетичного підприємства. Але й тут правило світлофора ніхто не скасовував. Жовтий — знак попередження й символ преси із сумнівною репутацією, яка має аналогічну назву.

Колір може закласти в підсвідомості філософію бренду і сформувати до нього ставлення.

Бажаєте показати, що ваші товари тільки для обраних, статусних? Використовуйте чорний.

Плануєте підкреслити досконалість і унікальність товару або послуги? Беріть білий і будьте, як Еппл.

Хочете примусити до дії або звернути на себе увагу? Червоний і оранжевий допоможуть у цій справі.

Привносите світ красу й королівську велич? Ваш варіант — пурпурний.

Головне — не боятися експериментувати.

Рекомендації, дослідження і схеми палеток — це ще не останнє слово в оформленні сайту.

Формула кольору ідеального сайту та найкращий колір для кнопок

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

Що стосується ідеальної формули кольору, то тут можна застосувати принцип трьох: 60% основний колір низької насиченості, 30% вторинний колір, 10% колір кнопок цільової дії, елементів СТА, найбільш високої яскравості. Кольори можна підбирати згідно з колірним колом, що складно й довго, з урахуванням таблиці сполучуваності, або ж згідно з колірними блоками на Дрібле, що швидко й більш зручно.

Не робіть ставку на складні колірні поєднання — вони рідко працюють. Трьох кольорів більш ніж достатньо. Враховуйте вашу нішу й портрет ЦА, пам’ятайте про результати досліджень, але завжди експериментуйте — це допоможе вам знайти оптимальні фірмові кольори, підвищити конверсію й лояльність покупців.