Цвет – одно из самых мощных средств в инструментарии дизайнера. С его помощью можно привлечь внимание, создать определенное настроение, повлиять на эмоции, восприятие и поведение.
Знаете ли вы, что среди причин, побуждающих покупателей приобретать определенный товар, 90% приходится на долю цвета? Или что на цветную рекламу в журналах обращают внимание на 26% чаще, чем на черно-белую?
Вывод очевиден: использование правильного цвета поможет достичь успеха. Но тут же возникает естественный вопрос: как подобрать правильный цвет? Для ответа на него придется проанализировать несколько важных аспектов:
- цветовые ассоциации
- различия в восприятии цвета у мужчин и женщин
- проблемы, связанные с нарушением цветовосприятия.
Черный
Черный – это еще один очень универсальный цвет. Он может быть современным или традиционным, захватывающим или расслабляющим. Но если вы используете черный как контрастный цвет, то есть в соотношении 1:6, 1:8 к основному — вы рискуете привнести драму, печаль в восприятие визуальных рекламных материалов вашими клиентами.
Вот пример хорошо продуманного по цветам лендинга — с чем у вас ассоциируются данные цвета? — https://cashflow-igra.ru
Психология Цвета
Цвет не только помогает получить более объективную информацию о продукте, он также способен оказывать мощное психологическое воздействие. Одни и те же цвета могут действовать по-разному – в частности, это зависит от национальности и места проживания человека. Остановимся на цветовых ассоциациях у людей западного мира.
Красный цвет в психологии: опасность, важность, страсть
Красный – это цвет огня и крови. Один из самых мощных цветов по силе воздействия, который ассоциируется одновременно с любовью и войной. Известное выражение to see red (в дословном переводе с англ. «смотреть на красное») означает прийти в ярость, выходить из себя.
Этот цвет обладает сильным эмоциональным воздействием. От него может подниматься давление или увеличиваться частота дыхания.
Красный цвет – энергичный и импульсивный. Он ассоциируется со скоростью и силой. Именно поэтому Netflix и YouTube используют его в качестве доминирующего цвета.
Хорошо известно о способности красного цвета привлекать внимание. В дизайне он часто используется как мощный цветовой акцент. Подобно красным ковровым дорожкам на церемонии вручения наград, можно использовать красный цвет для выделения особо важных деталей на странице сайта.
Оранжевый цвет в психологии: уверенность, энергия, оптимизм
Оранжевый очень энергичный цвет – подобно красному, он возбуждает, но в меньшей степени. Обладает энергетической аурой, но без агрессивности, присущей красному. Может создавать радостную атмосферу.
На главной странице сайта Hipmunk – поисковой системы авиарейсов – оранжевая кнопка поиска сразу же привлекает внимание.
Как и красный цвет, оранжевый способен привлекать внимание, поэтому его можно использовать для акцента важных деталей, таких, как кнопка призыва к действию (CTA). Некоторые считают это слишком простым решением, однако многие приложения и сайты часто пользуются этим «дешевым» в хорошем смысле приемом.
Желтый цвет в психологии: солнце, счастье, внимание
Как ни странно, желтый цвет ассоциируется одновременно и с радостью, и с тревогой. Он часто используется для фокусировки внимания. Примером могут служить предупреждающие знаки. Желтый цвет может ассоциироваться с опасностью, но в меньшей степени, чем красный.
Желтый цвет сразу обращает на себя внимание при контрастном сочетании с черным. Торговая марка часов Breitling использовала это свойство при разработке своего официального сайта.
Особенно эффективно работает сочетание желтого цвета с черным. Яркий тому пример – нью-йоркское такси.
Зеленый цвет в психологии: природа, развитие, успех
Зеленый цвет естественным образом связан с природой. Он ассоциируется с жизнеспособностью и ростом, поскольку большинство растений на земле зеленого цвета.
Зеленая кнопка призыва к действию.
В дизайне этот цвет часто используется для создания баланса и гармонии. Однако, чтобы добиться сбалансированности, дизайнерам следует учитывать насыщенность цвета.
Насыщенные зеленые оттенки привлекают к себе внимание, благодаря энергичному возбуждающему воздействию. Именно поэтому их часто используют для кнопки призыва к действию.
Синий цвет в психологии: комфорт, расслабление, доверие
Синий – это цвет моря и неба. Один из наиболее значимых и часто используемых цветов при разработке пользовательского интерфейса. При этом от правильного выбора оттенка будет во многом зависеть визуальное восприятие дизайнерских разработок:
- Светло-синий оттенок ассоциируется с прохладой, свободой и спокойствием. Спокойствие может перерастать в доверие, именно поэтому этот оттенок часто используется в банках.
- Темно-синие оттенки отлично подходят для проектов, где очень важна стабильность и надежность.
Синий цвет часто ассоциируется со стабильностью.
Фиолетовый цвет в психологии: роскошь, одухотворенность, креативность
Естественный фиолетовый цвет редко встречается в природе, поэтому для него отводится особая роль в дизайне.
Исторически связанный с королевской властью, фиолетовый цвет и сегодня ассоциируется с роскошью. Он тонко намекает на высокое качество продукта или сайта (даже если это не так).
Фиолетовый цвет большинство молодых людей считают цветом счастья.
Интересно, что 75% детей предпочитают фиолетовый цвет всем остальным оттенкам.
Черный цвет в психологии: сила, изящество, утонченность
Черный – самый сильный из всех цветов. Он сразу привлекает к себе внимание, именно поэтому он наиболее часто используется для текстов и акцентов.
Черная кнопка «Get started» одной из первых бросается в глаза, когда заходишь на сайт Squarespace.
При использовании в качестве доминирующего цвета – например, для создания фона – черный может вызывать оригинальные ассоциации. С его помощью легче добиться ощущения изысканности и загадочности в дизайне.
Белый цвет в психологии: здоровье, чистота, целомудрие
Белый цвет часто связывают с непорочностью, чистотой и добродетелью. Используя ассоциации белого цвета со здоровьем или разработкой инноваций, можно подчеркнуть безопасность продвигаемого продукта из области медицины или высоких технологий.
Белые участки создают пространство вокруг элементов дизайна, помогая подчеркнуть их или отделить друг от друга.
В дизайне белый превосходно оттеняет соседствующие с ним цвета, что делает его популярным в качестве вторичного цвета. Правильное использование белого поля – это мощный дизайнерский инструмент. Вспомним, к примеру, страницу поиска Google. Белый цвет придает больше выразительности другим оттенкам.
Серый: официальность, нейтральность, профессионализм
Серый – это символ нейтральности. Он легко сочетается с другими цветами. В качестве основного фона серый цвет создает ощущение официальности, что не всегда плохо. Подобно белому, серый фон хорошо оттеняет другие цвета.
Серый обычно сочетается с более яркими цветовыми акцентами. На сайте Dropbox серый цвет используется для выделения кнопок призыва к действию.
Пол и цвет
Пока не существует определенных норм, какие цвета считать сугубо женскими, а какие мужскими. Есть лишь результаты исследований, проведенных за последние восемь десятилетий, которые позволяют сделать некоторые обобщения. И хотя данные неоднозначны, один вывод неоспорим: у мужчин и женщин разные цветовые пристрастия.
Самые любимые цвета
Наименее любимые цвета
- Синий – самый популярный цвет как среди мужчин, так и среди женщин. При этом мужчины значительно чаще, чем женщины, используют вариации на тему синего цвета.
- Самые непопулярные цвета у мужчин и женщин – коричневый, оранжевый и желтый. Серый – наименее любимый цвет для женщин, а фиолетовый – для мужчин.
- Что касается оттенков и тонов, то мужчины обычно предпочитают смелые цвета, в то время как женщины чаще выбирают более мягкие оттенки.
- Большинство людей считает, что розовый – это цвет, обожаемый всеми женщинами, но это не так. Число его поклонниц составляет небольшой процент. Таким образом, хотя в психологии цвета розовый ассоциируется с женственностью, он вовсе не является привлекательным для всех женщин.
Синий
Синий помогает отвлечь внимание от ненужных мелочей и сконцентрировать его на главном. При этом в отличие от красного синий не агрессивен и никогда не вызывает раздражения, позволяя при использовании в рекламе и каталогах привлечь внимание потребителя с практически 100-процентным результатом.
Тем не менее, стоит учитывать, что синий несет в себе оттенок профессионализма, так что использовать его для рекламы детских товаров или, скажем, парфюмерии, не стоит.
Что говорят исследования
Восприятие цвета зависит от личных предпочтений, воспитания и культурных особенностей человека, но когда дело касается покупок и взаимодействия с брендом, прослеживаются и универсальные моменты:
- для 80% пользователей цвет влияет на узнаваемость бренда;
- 90% клиентов решаются на покупку исходя только из цвета товара.
Цвет помогает бренду выделиться и запомниться на фоне конкурентов. Он пробуждает воспоминания и влияет на эмоциональное состояние человека. Причем каждый по-своему. Давайте разбираться, что с этим делать email-маркетологам.
Цветовое колесо
Идея создания цветового круга восходит к началу 1700-х годов. Он использовался, чтобы иллюстрировать различные перестановки цветов, основанные на изменении оттенков.
Рис. 17. Цветовое колесо
Выбор цветов, которые хорошо сочетаются с другими или которые обеспечивают хороший контраст, может быть трудным, но настройка цветового круга может избавить от некоторых догадок.
Важно обращать внимание на оттенки выбранных вами цветов. Смешивание теплого и прохладного, особенно если они могут противоречить друг другу, может испортить смысл сообщения, которое вы хотите передать.
Поиск цветовой гармонии является важным фактором — не только гармонией цветов, но и гармонией сообщения, представленного цветами.
Хотя цветовая психология не может быть гарантией успеха дизайнерского решения, если вы проведете свое исследование и определите свою аудиторию, она может дать вам преимущество.
Фиолетовый — добавляем загадочности, но не слишком
Ассоциируется с роскошью и тайнами. Фиолетовый цвет мотивирует человека решать отложенные задачи и проблемы, а главное, вызывает желание творить.
Интернет-магазины одежды используют светлые тона фиолетового, чтобы подчеркнуть романтичность, а бренды косметики показывают загадочность с помощью оттенков потемнее. Старайтесь использовать этот цвет в меру, не отвлекая от главного, как это делает NYX.
Красный
Красный – цвет активный и даже агрессивный. Он побуждает человека к действию, требует определенной решимости. Кроме того, красный способствует кратковременному привлечению внимания – на него случайный взгляд падает в первую очередь. Поэтому этот цвет считается цветом первых чувств – он требует незамедлительных действий. Из-за такой агрессивности, красный особенно сильно действует на мужчин, поэтому используется он для продвижения товаров и услуг для сильного пола.
Но, используя красный, следует помнить, что этот цвет – акцентный, если его будет слишком много, он начнет раздражать и приведет к негативному восприятию.
Цвет в маркетинге и бизнесе
Роль цвета при создании фирменного стиля
При разработке философии бренда цвет занимает центральное место среди остальных факторов. Каждый цвет, который мы видим, прямо или косвенно что-то подразумевает, и это помогает повлиять на восприятие той или иной торговой марки. Некоторые цвета выходят за рамки отдельных брендов, символизируя целые отрасли, например, голубой для туристического бизнеса, зеленый для здорового питания, красный для фаст-фуда.
Нет никаких четких правил для выбора цветовой гаммы при разработке фирменного стиля. Некоторые используют привычные для своей отрасли цветовые оттенки, а другие, напротив, предпочитают идти против традиций, считая, что это помогает более эффективно привлекать внимание. Например, Virgin America решила изменить традиционную концепцию при разработке своего сайта и приложения. И хотя, возможно, это не совсем то, что ожидают пользователи от сайта авиакомпании, он, тем не менее, привлекает к себе внимание.
В приложении Virgin America для iOS нет даже намека на голубые оттенки.
Таким образом, неожиданный выбор цвета может стать эффективным приемом, который поможет привлечь внимание пользователей к вашей компании.
Цвет и оптимизация уровня конверсии
Как можно использовать знания в области теории цвета и психологии, чтобы побудить людей нажимать на кнопку? Выбор цвета для кнопки призыва к действию (CTA) – один из старейших аспектов спора относительно конверсии и оптимизации. На каждого утверждающего, что лучшим для кнопки является красный цвет, так как привлекает наибольшее внимание, найдется оппонент, уверенный в том, что лучший выбор – зеленый цвет, потому что он ассоциируется с безопасностью и побуждает к действию.
Сервис HubSpot представил результаты проведенного маркетингового исследования (A/B теста), которые показывают, как выбор цвета для кнопки призыва к действию влияет на количество зарегистрировавшихся пользователей.
A/B тестирование – наиболее эффективный и часто используемый метод маркетингового исследования.
Хотя изначально предполагалось, что зеленая кнопка будет работать эффективнее, результаты тестов показали, что у красной кнопки на 21% больше кликов. При этом HubSpot предупредил своих пользователей, что результаты теста в некоторой степени субъективны – возможно, аудитория предпочла красный, потому что это был единственный насыщенный цвет на странице сайта.
Сам по себе цвет кнопки не влияет на ее абсолютную эффективность – то, что хорошо работает на одном сайте, может быть малоэффективным на другом. Утверждение, что один цвет конвертирует лучше другого – ошибочное, потому что не существует универсального наилучшего цвета. Однако при этом все же существуют некие правила, основанные на практическом опыте, которые помогают эффективно использовать цвет в своих интересах. Одно из них – использование психологического принципа, известного как «эффект изоляции». Согласно этому принципу, люди лучше запоминают объект, который выделяется на фоне остальных «как бельмо на глазу».
Например, если в оформлении вашего сайта или приложения много зеленого, пользователи, скорее всего, не будут обращать внимание на зеленую кнопку, несмотря на то, что данные A/B теста подтвердили ее эффективность в другой компании.
Веб-сервис Evernote. Их кнопка призыва к действию «It’s Free» просто похоронена, потому что по цвету сливается с фоном. Она теряется на странице, и пользователи ее не замечают.
Иногда следует менять визуальную иерархию цветовой гаммы на странице, чтобы выделить кнопку призыва к действию. Очень важную роль играет контраст – если цвет кнопки не привлекает внимание потенциального клиента, значит, не будет регистраций/продаж.
Кнопка призыва к действию (CTA), действительно, привлекает внимание пользователей в том случае, когда контрастирует по цвету с остальными элементами страницы.
Цвет и юзабилити
Дизайн подразумевает не только красивое оформление, но и функциональность и юзабилити – пожалуй, два наиболее важных принципа для работы любого UX-дизайнера.
Цвет – это инструмент, который помогает направлять взгляд на нужные объекты. Правильный выбор цвета при разработке интерфейса не только привлекает пользователей, но и повышает эффективность работы пользовательского интерфейса.
Ограничение количества цветов
Применяя разные цвета в дизайне, следует стремиться к балансу. Чем больше цветов вы используете, тем труднее добиться сбалансированности. Использование слишком большого количества цветов – это распространенная ошибка разработчиков. Возможно, они стараются таким способом оказать максимальное влияние на пользователей и донести до них как можно больше информации, однако это может сильно запутать людей, заходящих на сайт.
Какие бы цветовые оттенки вы ни использовали, слишком большое количество цветов создает неудачный визуальный эффект.
Дизайнеры интерьеров придерживаются простого правила 60–30–10, которое хорошо работает и при разработке сайтов. Этот прием, неподвластный времени, поможет подобрать сбалансированную цветовую гамму: 60% должно приходиться на доминирующий цвет, 30% на вторичный цвет и 10% на цветовой акцент. Такое соотношение гарантирует цветовое равновесия и комфортный переход взгляда от одного объекта к другому.
Формула 60% + 30% + 10% – это залог сбалансированности используемых цветов.
Доступность цветовосприятия
Люди воспринимают цвета по-разному. Примерно 8% всех мужчин и 0,5% всех женщин страдают дальтонизмом в той или иной степени. От нарушения цветовосприятия больше всего страдает сочетание красного цвета с зеленым. Единственный способ избежать проблем – стараться не использовать эту цветовую комбинацию.
Многим дальтоникам трудно отличить красный цвет от зеленого.
Возьмем для примера распространенную ситуацию. Вы когда-нибудь получали сообщение о неправильном заполнении формы – что-то вроде «Поля, отмеченные красным, обязательны для заполнения»? Хотя для пользователей с нормальным зрением в этом нет большой проблемы, людей, страдающих дальтонизмом, такое сообщение может расстроить.
Разработчики сайтов для операции заполнения форм используют только два цвета: красный и зеленый. Но дальтоники не различают поля, выделенные этими цветами.
Как сказано в рекомендациях организации W3C, цвета не должны использоваться в качестве единственного визуального инструмента для следующих целей: передачи информации, побуждения к действию и ответной реакции, выделения визуального элемента. Следуя этим рекомендациям, разработчики сайтов должны обратить внимание на некоторые моменты: ответное сообщение об ошибках должно быть более информативным, например, таким: «Адрес электронной почты, который вы ввели, недоступен»; или, возможно, следует добавить иконку рядом с полем для заполнения, чтобы привлечь внимание пользователя.
Дополнительные визуальные подсказки и встроенная проверка ошибок помогают выделить неверно заполненное поле.
Есть несколько способов, которые помогут протестировать ваш пользовательский интерфейс на доступность?
- Сервис WebAIM поможет с проверкой цветовых сочетаний.
- Использование графического редактора Adobe Photoshop поможет откорректировать изображения с помощью Color Universal Design. Это обеспечит доступность графической информации для людей с нарушением цветовосприятия, в том числе и цветовой слепотой.
