Маніпуляції користувачами сайту за допомогою кольорів

Ми живемо в часи, коли люди не звикли глибоко занурюватися в якусь тему. Це стосується і дизайну. Сьогодні все цінують перемоги на різних престижних конкурсах по дизайну, або, в гіршому випадку, оцінюють особистим «подобається / не подобається». У нас також є міжнародні нагороди по дизайну від Awwwards, Behance та інших відомих «оцінювачів», які диктують сучасну моду у веб-дизайні. Але так вони важливі? Якщо вдивитися в суть дизайну, то він, як і багато чого в нашому світі, грунтується на психології сприйняття. І психологія — це основа будь-якого успішного дизайну. Ви можете перемогти на конкурсі по дизайну, але сайт при цьому буде лише красивою картинкою, яка абсолютно не досягає поставленої мети. У цій статті ми поговоримо про психології та ефективності дизайну сайту, зокрема, детально розібравши такий важливий аспект, як кольору.

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

Колір для сайту — це не просто краса, колір змінює сприйняття людини і є далеко не останнім чинником результативності бізнесу. Мало хто про це говорить, але це чиста психологія, робота з свідомістю і підсвідомістю. Я не знаю, чому всі так часто обговорюють градієнт кнопки, закруглені або гострі кути, розмір блоку або інші дрібниці, при цьому геть забуваючи про основи людського сприйняття. Адже, якщо порушені закони базового сприйняття, то ніякі «рюшечки" і „фішечки“ не допоможуть добитися хорошої конверсії. У нашій компанії ми приділяємо дуже велику увагу психології в дизайні і конкретно цветовосприятию.

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

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



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

У колірному колі є сім основних кольорів: червоний, оранжевий, жовтий, зелений, блакитний, синій і фіолетовий кольори веселки). Інші ж кольору можна отримати шляхом змішування, такі кольори називаються додатковими або другорядними, краще всього поєднувати 2-3 основних кольори і другорядні відтінки.

Найпростіший спосіб підібрати колір — це звернути свою увагу на так звану теорію кольору.

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

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

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

Приклад: Червоний і зелений, помаранчевий і синій.

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

Приклад: Ліловий, блакитний і рожевий.

Теплі і холодні кольори — це розмежування квітів по настрою і відчуття.

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

Приклад:
Теплі — червоний, жовтий, помаранчевий
Холодні — синій, зелений, фіолетовий

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

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

Теплі кольори застосовують на тих сайтах, де потрібно викликати відчуття ніжності, смакоти і апетиту. Як приклад, відмінно підійде сайт http://daguia.com.br — тут зібрані рецепти різних солодощів (тістечок, тортів і десертів)

Холодні кольори на сайті http://www.decibelblue.com — це морські глибини і умиротворення, які змушують користувача зануритися в сайт цілком. Дизайнер вибрав синій колір, і це — правильне рішення: він як не можна краще підкреслює гладь води і красиві коралові рифи на задньому плані.

Ще один приклад холодних кольорів http://thatgamecompany.com — це сайт компанії, що розробляє ігри. Сайт виконаний у легких холодних відтінках, що надає йому ефект занурення і легкості, як ніби знаходишся в невагомості.

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

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

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

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

Тріада (триколірна) — це колірна схема, на якій всі кольори всередині колірного кола утворюють трикутник. Вона є самою збалансованою і надійною схемою. Друга за кількістю квітів у палітрі, вона викликає почуття інтересу, переливаються кольору подібно веселці, за рахунок чого людина отримує безперервний сплеск емоцій. Як приклад сайту з цією системою можна привести http://drewwilson.com — на сайті 3 основних кольори і їх відтінки, які надають йому незабутній і цікавий дизайн

Для того щоб нам отримати тріаду, потрібно всього лише вибрати 3 різних кольори розташованих у 120 градусах один від одного.



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

Як приклад, можна поглянути на сайт — http://www.enlighten-my-mind.com, розділивши професії за кольорами, сайт став жвавіше



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

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



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

Пару прикладів таких схем, на яких ми спостерігаємо, що зимовий ліс і річний мають різні кольори і створюють різну один одному атмосферу:



Саме природні і природні кольори найлегше сприймаються людиною.

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

Для того, щоб з легкістю підібрати колірну схему, існує багато різних сайтів, які надають подібні функції. І ось деякі з них:

Adobe Color CC
Paletton

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

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

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

Давайте з'ясуємо, який же колір нам використовувати для цих елементів, розглянувши кожен з них окремо:

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

Давайте поглянемо на сайт youtube10.withgoogle.com, в якому використовується ігровий стиль, а червоний колір вірно підкреслює всі акценти:



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

Наприклад компанія „Stickermule“ для реалізації свого сайту вибрала саме помаранчевий колір, відображаючи в підсвідомості людини, що це весела розвага і цікава забава, яку можна придбати



Жовтий — дуже цікавий колір, залежно від відтінку може змінювати емоції людини, Яскраво-жовтий — це колір енергії. Класичний жовтий викликає відчуття заспокоєння. Темно-жовтий наповнює сайт багатством і створює відчуття комфорту.

Наприклад, сайт компанії „Lapasta Fresca“ — яскравий тому приклад: створюючи відчуття тепла, сонячного дня, комфорту, дуже успішно просуває свій продукт на ринок:



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

Як приклад можна привести компанію Oestervangskovbrug. Сайт виконаний у зеленому кольорі, що дає відчуття прилучення до природи



Синій — колір надійності, спокою, умиротворення, але як і з жовтим кольором, його вплив залежить від того, який відтінок йому зрадити, темні тони можуть викликати навіть відчуття печалі.

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

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



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

Тут на сайті Digitov фіолетовий колір надає відчуття чогось цікавого і таємничого:



Чорний — дуже сильний колір, він цілком і повністю притягує увагу, з цим кольором дуже важливо не перестаратися — якщо ми хочемо, щоб наш сайт викликав позитивні емоції, не можна робити чорний сильно інтенсивним. Такий колір часто використовується як фон. Наприклад, якщо ми вирішимо, рекламуючи, продавати комп'ютерні ігри або 3D – телевізори, можна використовувати цей колір, щоб надати сайту глибину.

Давайте поглянемо на сайт blizzard.com він ніби занурює в себе (за рахунок чорного фону), а яскраві, красиві картинки притягують погляд користувача.



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

Наприклад, сайт який я побачив behance.net яскраво показує нам, що білий колір може творити чудеса:



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

Яскравий приклад такого сайту — це awwwards.com. Тут сірий колір ніяк не створює емоції байдужості, а навпаки, доповнений яскравими картинками прекрасних робіт, дає відчуття краси та комфорту:



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

Давайте, як приклад, візьмемо сайт romanson.com: годинник на зображенні виглядають дуже дорого і якісно; на сайті створено враження комфорту і впевненості; саме цей фактор змушує людей приймати рішення про купівлю:



Рожевий — ніжний колір, який більше притягує жіночу аудиторію, викликає такі емоції, як прихильність і романтичність. Такий колір дуже добре підійде, наприклад, для магазину жіночого одягу, кольорів, парфумерії. Але окремі його відтінки (більш темні) можуть бути пов'язані з такими областями, як незвичайна музика, їжа, напої.

Ось яскравий приклад: victoriassecret.com. Виробник і дизайнер жіночої білизни, вибрав таку колірну гаму на сайті, що акцент виставлений саме на рожеві елементи:



Додатково — щоб підібрати колір можна використовувати, наприклад, такі сайти: flatuicolorpicker.com і flatuicolors.com. Дуже зручні у використанні, і можна наочно подивитися на колір і скопіювати його код.

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

Про кольорі потрібно думати з самого початку, коли ви тільки створюєте продукт (проект). Ще на етапі створення логотипу та фірмового стилю. Втім, навіть з існуючим логотипом і квітами все одно можна гратися і пробувати різні варіанти.

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

  • Створюючи сайт, не переборщіть з кількістю кольорів, інакше сайт буде схожий на цирк. І навпаки, якщо у вас буде мало квітів, то сайт буде нудним, може бути навіть сірим. Використовуйте оптимальна кількість квітів, в ідеалі 2-3 і їх відтінки.
  • Правильно розставляйте акценти. Для кнопок, блоків і тексту, до яких потрібна підвищена увага, застосовуйте більш інтенсивні кольори, щоб підвищити акцент на них.
  • Текст завжди повинен добре читатися, а найкраще його буде видно на тому кольорі, який буде найбільш контрастувати кольором тексту.
Втім, це тільки кілька простих порад, а взагалі кольору — це ціла наука, яка ґрунтується на психології. Робіть відразу правильно, щоб добитися максимальної ефективності від ваших сайтів.

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

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.