теорія кольору

LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу

МАГАЗИН Лендінзі УНІВЕРСИТЕТ АКЦІЇ ВІД ПАРТНЕРІВ

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

Як вибраний колір характеризує бренд?
Чи відображає цей колір цілісну екосистему бренду?
Чи буде цей колір конвертувати?

У нашому новому пості ми пильно поглянемо на поняття кольору з точки зору неврології, психології та маркетингу. Зокрема, ми поговоримо про те,

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

Як ми бачимо колір насправді?

Великий англійський фізик сер Ісаак Ньютон (Isaac Newton) був, по всій видимості, першою людиною, які прийшли до висновку, що колір не є властивістю, спочатку властивим всім об'єктам матеріального світу - об'єкти, скоріше, відображають або ж поглинають світло певного кольору, і саме цей відбите світло мозок людини сприймає як специфічний окрас цих об'єктів.

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

колірний круг

Теорія цветa завжди привертала до себе увагу найвизначніших умів людства: так, знаменитий німецький поет Йоганн Вольфганг фон Гете (Johann Wolfgang von Goethe) проявив себе і як неабиякий натураліст - саме йому належить честь винаходу кругової схеми колірного спектра, так званого «колірного колеса».

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

Колір і зорове сприйняття

«Візуальне сприйняття людини спочатку фокусується на найпомітніших деталях зображення і тільки потім переходить на всю картину повністю. Увага спочатку привертають деталі, у яких один (або більше) низькорівневий параметр (розмір, форма, яскравість, колір, текстура і т. Д.) Значно відрізняються від навколишнього фону ».

Так звучить цитата зі звіту за підсумками експерименту, проведеного дослідниками з Університету Барселони. Більшу частину уваги люди приділяють окремими фрагментами загальної картини, завжди ведені принципом сприйняття навколишнього світу «знизу вгору» (bottom-up, «від простого до складного», «від нижчих рівнів до вищих», «від часткового до загального»). Цей феномен пояснює, чому вибір кольору (низькорівневий, «простий» параметр сприйняття) найсильнішим чином впливає на якість подальшої взаємодії користувача з відвіданих ним вперше Лендінзі.

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

Наше сприйняття кольору розвивалося протягом тисяч років, щоб допомогти нам відрізнити їстівні плоди і молоді листки від їх природного оточення (доктор Пітер Кьоніг)

У своїх дослідженнях про природу кольорового контрасту, що проводилися в тропічних лісах Уганди - на так званій «прабатьківщині людства» - професор нейробіопсіхологіі (і співзасновник сервісу айтрекінга EyeQuant) доктор Пітер Кьоніг (Peter Koenig) і його колеги виявили, що колірної контраст, який спостерігається між парою додаткових квітів «червоний - зелений» грає найбільшу роль в залученні уваги людини в природному обстановці, в той час як вплив іншої пари «синій - жовтий» проявляється набагато менше.

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

Насиченість кольору є ще одним можливим фактором залучення уваги: чим більше колірна насиченість елемента в порівнянні з його оточенням, тим швидше він буде помічений. З цього спостереження ми можемо зробити практичний висновок: насичений колір привертає увагу тільки щодо його колірного оточення. Навіть яскраво-червоний колір може не привернути уваги користувача, якщо застосувати його в неправильному місці.

Колір і семіотика (наука про знаках)

Для початку згадаємо перші приходять на розум асоціації запитали: То зелений колір символізує надійність, молодість, енергійність. Так, а що ж тоді означає жовтий? Чому відповідає помаранчевий? Або синій? Зіставлення квітів і певних станів людських розуму і психіки без скільки-небудь надійного наукового фундаменту представляється нам вкрай заплутаним.

Однак на допомогу нам прийде запозичений з семіотики (науки, що досліджує властивості знаків і знакових систем) принцип троичной класифікації, створений американським філософом і математиком Чарльзом Сандерсом Пірсом (Charles Sanders Peirce).

Відповідно до класифікації Пірса, знаки діляться на 3 класу і мають головною відмітною властивістю:

Колір і брендинг

Ви зможете пофарбувати стіни вашої вітальні не раніше, ніж вони будуть побудовані, відшліфовані і заґрунтовані. Той же принцип стосується і вашого Лендінзі: основні рішення (маркетингова стратегія, таргетування кампанії, сегментування цільової аудиторії, визначення джерел трафіку, цінова політика) повинні бути прийняті до того, як ви поринете в естетичний вибір того, якого кольору повинен бути ваш головний CTA- елемент.

Зауважимо відразу - секретної формули «кольорової гами успіху» немає, не існує жодного кольору або поєднання кольорів, гарантовано що тягне користувачів до вашого продукту як сороку до блискучого предмету.

Перш ніж приймати естетичні рішення (кольору, форми, текстури, контраст і насиченість), ви повинні спочатку зрозуміти - як це пафосно прозвучить - хто ви такий, чого ви хочете досягти, і найголовніше - для чого ви хочете цього досягти.

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

Колір і конверсія, або Дивовижна історія Великої Помаранчевої Кнопки

Велика Помаранчева Кнопка стала загальним символом ролі кольору в оптимізації конверсії (Conversion Rate Optimization, CRO). Про неї з любов'ю і захопленням говорять в безлічі блогів, присвячених проблемам і практиці CRO. Однозначних пояснень цьому феномену немає, проте спробуємо встановити деякі можливі причини подібного успіху оранжевого кольору.

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

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

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

Кращі зразки з практики

Контрастність і баланс

В основі цієї інтуїтивно зрозумілої стратегії лежить ідея, яка цілком відповідає вже згаданої нами теорії залучення зорового уваги. У найпростіших словах вона звучить так: спочатку ми звертаємо увагу на той елемент, який займає мало місця в просторі ( «деталь», «найпростіший низькорівневий елемент») і максимально контрастує з навколишнім фоном. Рідко який використовується акцентував колір (всього 10% загальної площі) повністю відповідає цим 2 умов.

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

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

Знай свою екосистему

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

Індустрія моди представляє собою одну з найбільших екосистем E-Commerce в Глобальній мережі. Однак вона на диво добре уніфікована - основні гравці дотримуються в оформленні своїх ресурсів схожої колірної гами.

Chanel представила світу моди свою тепер всесвітньо відому чорно-білу гаму ще в 1920-і роки, потім принесла її в Інтернет, і тепер цим зразком слідують такі бренди як Net-A-Porter, TopShop, American Apparel і Sales Gossip.

У даній маркетингової ніші найчастіше використовується монохроматична чорно-біла схема з рідкісними вкрапленнями яскравих кольорів, що дозволяє користувачеві відразу зрозуміти, що він потрапив на сайт модного бренду. Погляньте, як вміло використовують дизайнери який акцентував червоний колір на сайті Net-A-Porter для залучення уваги відвідувачів:

«Екологічно свідомі» бренди віддають перевагу зеленому, інтуїтивно котрий постає для відвідувачів як знак єдності з Матір'ю-Землею, але вони ж часто вибирають додатковий до зеленому кольору - помаранчевий - як колір, що втілює зміни на краще. Варто, однак пам'ятати, що працюючи з монохроматичної шкалою (наприклад, у вишуканих відтінках сірого), ви легко можете привернути увагу відвідувачів до важливого елементу за рахунок контрастної спалаху яскравого кольору, а спроби колірного брендингу відповідно до символікою кольорів можуть порушити звичайну схему залучення уваги «bottom-up».

І знову - тест, тест, тест!

Ніл Пател, один з батьків-засновників ресурсів CrazyEgg і KISSmetrics, одного разу написав, що співробітник Google, відповідальний за створення кнопки для Gmail, провів величезну кількість А / Б-тестувань для того, щоб вибрати з 50 відтінків синього (судячи з іншим джерелами - з 41 відтінку) той єдиний, який буде найкраще працювати. Для нас така кількість тестів абсолютно поза досяжністю (в кінці кінців, Gmail має 425 000 000 добровільних тестувальників), але досягнення статистично значущих результатів цілком по плечу будь-якому клієнту маркетингової платформи LPgenerator.

Та й в більшості випадків результати досягаються з набагато меншими зусиллями, як в знаменитому спліт-тесті Hubspot, де червона кнопка, контрастна загальній колірній гаммі Лендінзі, перевершила зелену кнопку на 21%. Однак ніхто не може сказати з упевненістю, чому сталося саме так. Так, червоний - дуже помітний, «тривожний» колір, але помітність будь-якого кольору залежить від контрасту з навколишнім фоном і символічного контексту, в якому кнопка використовується (контекст задає текстова напис кнопки - теж важливий елемент). Єдине, що ми можемо впевнено порадити: переконайтеся, що найважливіші елементи Лендінзі є найпомітнішими складовими сторінки, а потім приступайте до тестування, підбору кольорів - і знову до тестування.

Основні висновки

Нашу увагу першим захоплює те, що найбільш помітно (за рахунок поєднання кольору, контрасту, розміру і розташування), потім ми наділяємо помічене семиотическим значенням, традиційно приписуються певним квітам і комбінаціям квітів.

Використовуйте насичені кольори вибірково і обережно: яскраві і сміливі кольори відмінно привертають увагу до найважливіших ділянках Лендінзі, однак якщо ними зловживати, вони придушать увагу користувача.

Найкращий спосіб привернути увагу до найбільш важливих елементів - створення балансу між прогалинами і контрастними деталями. Але перенасичені деталями Лендінзі буде придушувати здатність користувачів фокусувати увагу на найважливіших елементах.

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

Спліт-тестування є найкращим способом, щоб побачити, як ваш вибір кольору впливає на брендинг і конверсію.

Високих вам конверсій!

Якщо ви вже є передплатником блогу LPgenerator,
просто введіть ваш email

УВАГА! Ви використовуєте застарілий браузер Internet Explorer

Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.