Психология цвета в web-дизайне сайтов, примеры цветовых схем


"Половина денег, которые идут на рекламу, выбрасываются
впустую, но как узнать, какая именно половина?"
Уильям Гескет Левер

Психология цвета

  • С цветными документами знакомится на 40 процентов больше людей, облегчается запоминание информации на 78 процентов.
  • Использование цвета сокращает время работы с документами на 29 процентов.
  • Время на сортировку документов уменьшается примерно на 15 процентов.
  • На нахождение слов и отдельных выражений в тексте (даже если он оптимизирован) тратится до 74 процентов меньше времени.

Это психология цвета. Как мы видим, психология цвета играет огромную роль в эффективности Вашего бизнеса. От того, насколько вашим пользователям будет приятно и удобно на вашем ресурсе (это называется юзабилити сайта) зависит успех вашего интернет проекта и конечно ваш заработок.

Рекламные предложения по почте, напечатанные на цветной бумаге, более эффективны, чем на простой. А в печатной рекламе глаз вначале задерживается на цветной рекламе, и только потом – на черно-белой.

К оглавлению ↑

Цветные шрифты и их фоны

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

Существуют и трудночитаемые совмещения цветов, которые не рекомендуется использовать: белый и голубой шрифты на розовом фоне, синий шрифт на красном фоне (или красный шрифт на синем фоне), белый шрифт на черном фоне (особенно мелкими буквами), желтый на синем и др. Это не абсолютные значения, многое здесь зависит от насыщенности цвета, его оттенка.


Цвета в смешанных цветовых решениях должны подчеркивать друг друга, а не «пожирать». Лучшие цвета для рекламы всегда интересовали маркетологов.

К оглавлению ↑

Цветовые ощущения и эмоции

Ни один из цветов не может быть формализован как такой, который вызывает у нас те или иные ощущения, или эмоции. Только лишь в зависимости от обстоятельств тот или иной цвет психологически вызывает у нас определенные чувства.

Цветовые ощущения и эмоцииНапример, опрос жителей четырех американских городов в 1987 году показал, что примерно для 59 процентов из них красный цвет вызывает ощущение опасности. Однако когда их попросили провести аналогию красного цвета с продуктами, то для 71 процента красный цвет в рекламе олицетворял напиток Coca-Cola. Фавр, автор книги «Цвет упаковки товаров», пишет, что черный цвет почти везде в Европе и США – это одновременно и цвет траура, и цвет роскоши.

Как сам цвет, так и его словесное обозначение (написание) могут вызывать определенную психологическую готовность реагировать на этот цвет. И здесь важно не то, каков цвет, а то, с каким фрагментом реальности он сочетается. Давайте рассмотрим, что означают цвета в психологии.

К оглавлению ↑

Какие же все так и использовать цвета в дизайне сайтов?

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

Поэтому в контекстно-медийной рекламе (которую мы разбираем тут) исключительно важно не столько то, какие цвета вы используете, сколько то, что они у вас подразумевают и с чем рифмуются.

Яркие, насыщенные цвета с точки зрения психологии замечаются в первую очередь. Не поленюсь еще раз привести в пример упаковку порошка Tide. В то же самое время слишком долгий контакт с яркими и насыщенными цветами может привести вас к переутомлению и раздражению: комнатные обои а-ля Tide сведут с ума кого угодно.

Цель ярких и насыщенных цветов в психологии – бросаться вам в глаза, но не «мозолить» их. Функция ярких, насыщенных цветов – быть красивым пятном товара на бледном или белом, мягко-голубом или мраморном (спокойном в общем) фоне, но никак не красивым фоном для бледного пятна товара или рекламного текста. Эту же самую функцию, если вы помните, в психологии выполняет пятно цвета: однородно окрашенное пятно определенной формы, добавленное в объявление для того, чтобы привлечь внимание.

Смотрите также:  Лайки и дизлайки YouTube теперь считаются точнее

Цветовые эмоции

Как мы видим, синий цвет в психологии идеален, например, для общих фонов сайтов или подписных страниц.

Цель фиолетового цвета с точки зрения психологии - создать интригу, тайну, что очень любят женщины и сторонятся мужчины.

Зеленый цвет используется в разных ипостасях, от желания показать готовность идти на контакт до показушной гордости.

Коричневый цвет в психологии НЕ побуждает к действиям, а вызывает чувство домашнего уюта и расслабленности (наверно поэтому я выбрал именно этот цвет в дизайне сайта).

Оранжевый и красный цвета могут привлекать внимание, но в разной степени.

К оглавлению ↑

Функции цветов (ориентировочные, речевые, эмоциональные)

- Ориентировочные функции

Цветовые решения выполняют «ориентировочную» функцию, являются своеобразными указателями на свойства предметов и явлений. Кран у холодной воды маркируется синим колпачком, а у горячей – красным. Пачки ментоловых сигарет традиционно окрашиваются в зеленые цвета. Запрещающий (красный) или предписывающий (синий) дорожные знаки мы можем увидеть много раньше, чем их конкретное содержание (что именно запрещает или предписывает).

Цветовые решения, как в их выражении, так и в написании, могут быть конгруэнтными и не конгруэнтными. Конгруэнтность цвета – это гармоничное соответствие между цветом и отождествляемым с ним явлением. Например, ярко-красное яблоко или помидор будут прекрасной дополняющей иллюстрацией к слову «спелый», но вот зеленое яблоко (и тем более помидор) – прямо противоположными, опровергающими.

Цветная психологияКрем, защищающий вас от солнца, лучше не преподносить в красном или зеленом цвете, освежающие конфеты уместны в синих и голубых тонах (или зеленых, если рифмуются с чистотой природы) – но никак не в оранжевых или коричневых. Холод нуждается в синих тонах. Экологичность лучше всего рифмуется с зелеными оттенками. Это что касается его визуального отображения.

К оглавлению ↑

- Речевые функции

Еще один пласт цветовых соответствий – это речевые. Человек, в отличие от быка, может реагировать не только на красную тряпку, но и на ее словесное предъявление. А сотни или даже тысячи товаров имеют четкую цветовую маркировку: красная и черная икра, белый и красный окунь, белое мясо, белый шоколад, белое, розовое или красное вино.


Цветовыми бывают и названия товаров: «Черный жемчуг», «Ява золотая», «Белый аист». Встречаются и цветные имена фирм: «Зеленые купола», «Красный куб». Во всех случаях вам нужно быть особенно внимательным, чтобы не допускать цветовых противоречий.

К оглавлению ↑

- Эмоциональные функции

Соприкосновение с любым цветом (особенно сильным и насыщенным) вызывает психологическую готовность эмоционально отреагировать на цветовое сочетание. Цвет является надежным индикатором желаемых и нежелательных ощущений и состояний, так что эмоциональное подкрепление на предъявленное рекламой соотношение между цветом и событием (товаром) гарантировано. Если сочетание цветов неудачно, не конгруэнтно, то возникнет реакция отторжения, и, напротив, удачное сочетание вызовет интерес, доверие и симпатию.

Важно отметить, что люди не столько помнят о тех или иных цветовых решениях для товаров, сколько вспомнят о них, когда эти товары будут предъявлены им в очередной раз на витрине магазина. По исследованиям, проведенным для «Campbell soup», люди хотя и помнят, что их банка красно-белого цвета, но не могут вспомнить, верх у банки красный или низ. В исследовании также отмечается, что если цвета поменять местами, то больше людей вспомнят, что раньше они выглядели иначе.

К оглавлению ↑

Эксперимент с цветовым восприятием

Результаты эксперимента в области психологии цвета, проведенного Евгением Поповым, признанным авторитетом в области инфобизнеса, были очень интересные и заставили меня задуматься над некоторыми аспектами своего дизайна и оформления. Это привело к внесению некоторых изменений, что к моему удивлению значительно увеличило конверсию.

Изучив результаты эксперимента, задумайтесь, так ли действительно важна психология восприятия цвета и что означает каждый из цветов. Итак, эксперимент Евгения Попова:

Есгений Попов

Курсы Евгения Попова очень популярны!

"Я утверждаю (автор), что психология цвета - это очень серьёзная тема. Меня трудно назвать экспертом в этой области, но всё же я могу немного поведать вам о некоторых парадоксальных вещах.

Смотрите также:  Белые стратегии SEO и контент-маркетинга. Психология посетителя сайта

Безусловно, психологическая реакция на различные цвета для различных культурных групп проявляется по-разному – именно поэтому следует ещё более щепетильно подходить к этой теме. Я уверен, что культура влияет на предпочтения человека, в том числе и к цветам.

К оглавлению ↑

- Что означает тот или иной цвет?

Сегодня я хочу кратко коснуться темы психологии цвета и определить, какие из оттенков являются успешными, какие останутся в проигрыше, для того чтобы у вас был готовый путеводитель по созданию или выбору первоклассного дизайна, который оправдает все ваши ожидания. Какие цвета приходят на ум, когда вы думаете о слове 'успех'? Какие цвета приходят на ум, когда вы думаете о какой-то неудаче?

Для того, чтобы ответить на эти вопросы, я создал небольшой тест, где посетители моего сайта 1popov.ru собрали для меня необходимую статистическую информацию. Для того чтобы узнать о результатах теста, читайте данную статью до конца.

Почему цвета? Я должен признаться, что никогда не задумывался на эту тему, пока не столкнулся с сообщением об успехе на сайте GetClicky.com (услугами, которого я пользуюсь, время от времени). При заполнении одной из форм, мне выскочило сообщение о том, что я успешно добавил мой URL, но до меня это дошло не сразу, потому что сообщение было на ярко-красном фоне:


GetClicky.com

Первая реакция была таковой: я думал, что допустил ошибку при вводе данных (соответственно, сообщение я не прочитал); После этого я снова заполнил форму и снова передо мной возникло сообщение красного цвета. Всё это начинало меня, мягко говоря, бесить.

В один момент, меня просто осенило, что всё я делаю правильно. Просто мой мозг настолько привык, что красный цвет означает какую-то ошибку, что мне даже в голову не пришло, что всё может быть совсем иначе. Надеюсь, что ни я один такой. Вы когда-то сталкивались с подобной ситуацией?

После этого случая, я решил тщательно изучить формы на нескольких популярных сайтах и сделать выводы о цвете и принципе работы этих форм. Сайты, которые служили мне подопытными кроликами, были: Gmail, Twitter и Facebook. Эти ресурсы, все без исключения, являются популярными, а значит, над ними работали настоящие специалисты, психологи и т.д. Таки да! Там действительно есть чему поучиться и хочу напомнить, что совсем не стоит пренебрегать их опытом при продвижении вашего проекта в социальных сетях.

К оглавлению ↑

Примеры сайтов с различными цветовыми решениями

- Gmail

Пример: имя пользователя недоступно.

Для выделения данного сообщения они использовали красный текст, чтобы показать вам, что имя недоступно. Для меня это вполне объяснимо. Они хотят привлечь ваше внимание, сообщив, что имя пользователя уже занято, и вам нужно выбрать другое.

Gmail

Пример: имя пользователя доступно.

На этот раз специалисты Google использовали светло-синий цвет. Честно говоря, я не могу понять, почему их предпочтение выпало как раз на этот цвет. Это их выбор. Возможно они просто хотели сконцентрировать внимание на том, что вам предстоит выполнить следующий шаг регистрации.

Gmail

Пример: простой пароль.

И в этот раз они использовали красный цвет для оформления текста, который всем своим видом говорит, что пароль, введенный вами не является надёжным. Таким образом, они пытаются вызвать в вас чувство беспокойства для того, чтобы вы добавили ещё парочку символов.

Пример: простой пароль

Пример: надёжный пароль.

В этом случае специалисты Google использовали зеленый цвет текста, чтобы указать на то, что ваш пароль надёжен и вам не о чем беспокоиться. На этом шаге я пришёл к мысли, что они используют зелёный текст для акцентирования того, что вы молодец и всё делаете правильно.Надежный пароль

К оглавлению ↑

- Twitter

Пример: логин / имя пользователя / пароль в Twitter.


Как вы уже, наверное, успели заметить, Twitter использует несколько различных цветов, для того чтобы указать на разные вещи. Они используют зеленый текст, чтобы показать, что первое поле абсолютно валидно, красный текст, для того чтобы показать, что имя пользователя уже занято, и серый текст, для того, чтобы сообщить вам, что пароль, который вы ввели слишком прост (я вводил 123456) – интересный результат. Таким образом, мы увидели, что и на этом сайте цвет успеха - зелёный.

Смотрите также:  Всплывающее модальное окно при закрытии страницы

Пример: логин / имя пользователя / пароль в Twitter.

Пример: пароль для Twitter.

Вот тут начинается что-то интересное, а именно целый диапазон цветов, для того чтобы передать степень надёжности пароля, причём самый слабый характеризуется красным цветом, а самый надёжный - опять-таки зелёным. Мне понравилось это решение, оно несколько нестандартно.

Пример: пароль для Twitter.

К оглавлению ↑

- Facebook

Тут я просто не могу не высказать своё собственное мнение: я был просто в шоке от того, насколько неудобной является форма регистрации на Facebook. Процесс просто примитивен – сообщение об ошибке не выводился до тех пор, пока пользователь не нажмёт на кнопку. Но тут мы говорим о цветах:

Facebook

Пример: регистрация на Facebook.

Тут вы можете заметить, что Facebook-овцы используют красный цвет для того, чтобы предупредить меня о том, что я должен ввести свою дату рождения прежде, чем они предоставят мне учётную запись. Это классический приём, и что уж там говорить – достаточно выразительный и эффективный. Странным показалось ещё то, что на данном ресурсе при одном нажатии на кнопку регистрации выводится только одна ошибка. Также у полей абсолютно нет никаких подсказок – например, пароль должен быть больше , чем 6 символов и т.д.

К оглавлению ↑

- Getclicky

Сейчас я бы хотел вернуться назад, к примеру сайта Getclicky. После того, как я написал им моё мнение, они прислали следующий ответ:

Getclicky

Перевод: «Главной целью является то, чтобы сообщение было заметно пользователю. Трудно не заметить сообщение красного цвета»

Вот это действительно интересный момент! Получается, что они используют красный, потому что он лучше других подходит для привлечения внимания пользователя вне зависимости от того, какую смысловую нагрузку оно несёт. Если посетить их сайт, то можно понять, что этот принцип они применяют на каждом шагу:Getclicky

Getclicky

Когда же дело доходит до сравнения каких-либо услуг, то они применяют классический подход, где красное - это плохо, а зелёное - хорошо:


Getclicky

А это что? Красный текст для несохраненных изменений и зеленый для того, чтобы сообщить, что всё сохранено:

Красный текст для несохраненных изменений

Все сохранено

Все это конечно же безумно интересно. Создатели этого сайта использовали красный цвет для того, чтобы донести сообщение до пользователя, но всё же лучше не придерживаться двойных стандартов, а склоняться к чему-то одному. Теперь давайте посмотрим на результат тестирования, который проводился у нас на сайте.

К оглавлению ↑

Результаты и выводы

Вот результаты нашего быстрого теста:

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

большинство людей выбирают зеленый цвет

88% опрошенных выбрали красный как цвет неудачи – оказывается не один я такой:

88% опрошенных выбрали красный

Тут тоже получился довольно-таки интересный результат: 71% опрошенных выбрали красный цвет, оценив его как наиболее заметный. 18% выбрали зеленый цвет. Надеюсь, это не заставит вас думать, что мы должны использовать красный, чтобы выделять наши сообщения?

71% опрошенных выбрали красный цвет

В противоположном вопросе, 59% выбрали фиолетовый цвет и 35% выбрали синий. Я не могу со стопроцентной уверенностью утверждать, что это характерно для всех сайтов. Наверное, всё ещё зависит от сочетаний цветов?

88% людей чётко дали понять, что зелёный цвет больше всего подходит для сообщения, 'Вы успешно завершили задачу’:

88% людей чётко дали понять, что зелёный цвет больше всего подходит для сообщения

94% опрошенных согласны с тем, что для слова «Предупреждение» больше всего подходит красный цвет:

94% опрошенных согласны с тем, что для слова «Предупреждение» больше всего подходит красный цвет

К оглавлению ↑

Как эффективно использовать цветовые схемы?

Таким образом, данный тест показал, что не только для меня красный цвет ассоциируется с неудачей, а зелёный - с успехом.

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

Я думаю, что Twitter является лучшим из примеров, которые мы рассмотрели в этой статье – они наиболее эффективно используют цветовой арсенал для передачи различных сообщений. Чем комфортнее чувствует себя ваш пользователь, тем лучше и вам и ему.

Конечно же цветовая политика сайта Getclicky никак не повлияет на моё мнение об их услугах (этот ресурс очень полезен для меня), но я думаю что нужно прислушиваться к исследованиям и пользовательскому опыту".

К оглавлению ↑

И напоследок ржачный прикол про экспертов))))))))))))))

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях

Вам также понравится...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *