Наш мозг подсознательно реагирует на тот или иной цвет, что влияет на фокус, эмоции и, естественно, запоминаемость. Основываясь на научных исследованиях, эта статья расскажет, как использовать цвет и цветовые комбинации, чтобы пользователи лучше запоминали представленную информацию.
Что говорят ученые?
Для того чтобы понять, как цвет влияет на память мозга, было проведено немало исследований. Более того, выявлено, что некоторые цвета и вовсе способны повысить производительность памяти, уровень внимания и возбуждения.
Цвет – это информационный канал
Проведенное в 1973 году кросс-культурное исследование аффективного значения цвета Адамса и Осгуда, доказывает, что цвет считается самым важным визуальным опытом для людей. Он выступает как мощный информационный канал для когнитивной системы и играет важную роль в повышении производительности памяти.
Цвет повышает внимание
В 1976 году Фарли и Грант провели эксперименты по влиянию цвета на внимание и обнаружили, что именно цветные мультимедийные презентации привели к повышению внимания и производительности памяти человека. Цветная картинка вызывает в памяти человека наибольший отклик и потому чаще всего запоминается. Яркое в любом случае останется замеченным, потому как в мозге происходит вспышка внимания. А внимание, в свою очередь, рождает интерес к продукту и повышает вовлеченность.
Цвет формирует отношение
Мур, Стаммерджохан и Коултер проводили экспериментальные исследования в онлайн-среде и доказали, что умеренное контрастное сочетание цветов обеспечивает наиболее благоприятное отношение к объявлению. В рекламных презентациях цвет используется как один из важных элементов, влияющих на внимание людей, отношение к продукту и давление на принятие решений.
Оценивая влияние цвета на поведение человека, нельзя не обратить внимание на следующие факты:
- 93% людей решают, покупать товар или нет, глядя на его внешний вид.
- 85% людей выбирают необходимый товар исходя из его цвета.
- 70% людей готовы отказаться от приобретения товара, если он не того цвета.
- Цвет бренда повышает его узнаваемость среди покупателей на 80%.
Как управлять вниманием с помощью цвета
Исследования показывают, что почти 85% потребителей отмечают цвет как основную причину покупки конкретного товара. Этот принцип работает и в веб-дизайне: 42% аудитории охотнее читает и запоминает цветные объявления, чем такие же черно-белые.
В целом на запоминаемость картинки влияет 2 вещи: гармония (цветовой баланс) и контраст. Идеально, когда в дизайне соблюдены два этих параметра.
Цветовой баланс
Формула цветового баланса сайта представляет собой соотношение 60 х 30 х 10, где 60 — это процент, который отводится основному цвету страницы (фон), 30 — процент вторичного цвета (заголовки и меню), а 10 — процент цветовых акцентов (кнопки, ссылки и призывы к действию). Такое соотношение цветов позволяет комфортно переводить взгляд с одного акцента на другой и не потеряться в потоке информации.
Чем больше цветов используется в дизайне, тем труднее становится достичь баланса. Согласно исследованию Университета Торонто, людей привлекают комбинации, которые состоят из двух или трех цветов. Для дополнения стоит использовать оттенки или тона.
Контраст
Главная задача цветового контраста заключается в управлении вниманием пользователя. Цвет помогает усилить важные элементы и в то же время приглушить второстепенные. Если необходимо сфокусировать внимание пользователя на определенных частях или элементах сайта, их стоит выделить цветом.
При выделении большего количества элементов произойдет расфокусировка — глазам не за что будет зацепиться, и пользователь начнет теряться в количестве представленной информации.
Контрастными должны быть самые важные элементы сайта. Если нужно сосредоточить внимание пользователя на товаре или услуге, цветом выделяют кнопку. Обилие контрастных элементов приведет к их конкуренции за внимание аудитории, а значит дизайн потеряет всякий смысл.
Для измерения уровня контраста требуется сопоставить яркость фона и элементов. Чем она больше, тем выше уровень контраста. При этом слабый контраст не сработает — пользователь не увидит разницы между элементами сайта.
Значения цветов и их реализация на сайте
Исследование Kissmetrics показало, какие цвета лучше всего использовать на сайте, чтобы заставить пользователя совершить определенные действия. Так, для привлечения внимания лучше всего подойдет желтый — цвет жизнерадостности и оптимизма. На официальном сайте сотового оператора Beeline желтым цветом отмечены кнопки, а также расставлены важные акценты.
Сайт банка Тинькофф не исключение — кнопка для оформления карты бросается в глаза с первого взгляда.
Красный цвет ассоциируется у большинства людей с чем-то опасным, ошибочным или срочным. С точки зрения дизайна он является довольно опасным цветом, так как повышает уровень тревожности. Однако, использовать красный для запоминания и акцентирования допустимо.
Так, например, делает Макдональдс.
Или онлайн-кинотеатр Netflix.
Синий ассоциируется с деловыми отношениями, уверенностью и защищенностью, поэтому чаще всего в своем дизайне его используют бренды, имеющие отношение к работе с персональными данными. Например, социальная сеть Facebook, дизайн которой вряд ли можно выкинуть из головы.
Или Aqua Minerale.
Зеленый считается цветом безопасности и одобрения. Поэтому, встречая в сети сайты, оформленные в этом стиле, человек сам не ведая того запомнит их. Это относится и к сайту Сбербанка, и онлайн-гипермаркета Перекресток.
Черный и белый цвет, в свою очередь, могут как не запомнится пользователю вообще, так и наоборот — оставить самое приятное впечатление и заставить возвращаться на сайт снова и снова.
Оптимальные сочетания цветов
При выборе цветовой гаммы для сайта нужно руководствоваться не только своими пожеланиями, но и теорией цвета. Для этого стоит использовать цветовой круг — основу теории цветов и главный инструмент для комбинирования оттенков. Первый цветовой круг был придуман еще в 1665 году Исааком Ньютоном. С тех пор он множество раз преобразился, но нисколько не потерял своей актуальности.
Круг состоит из 6 основных цветов радуги: красного, оранжевого, желтого, зеленого, синего и фиолетового, а также дополнительных оттенков. С помощью цветового круга можно с легкостью подобрать оттенки, которые будут сочетаться между собой — так называемые цветовые схемы. Рассмотрим основные виды.
Монохроматическая цветовая схема
В основе монохроматической схемы лежит использование базового цвета и его вариаций (оттенков), которые получаются благодаря изменению яркости и насыщенности цвета. В результате получается элегантный и приятный глазам дизайн, даже если базовый цвет очень агрессивный.
Аналоговая цветовая схема
Для создания аналоговой схемы используются смежные цвета — один базовый и два вторичных, расположенных симметрично вокруг него на круге. При этом основной цвет является доминирующим, а остальные используются для акцентов. Аналоговая схема также выглядит очень элегантно и приятно, а палитра получается равномерно холодной или равномерно теплой.
Дополнительная цветовая схема
Для построения дополнительной схемы берется базовый цвет и его дополнение — цвет, располагающийся на противоположной стороне круга. При этом основной цвет является главным, а дополнительный используют для акцента. Важно понимать, что в случае с дополнительной схемой всегда получается комбинация теплого и холодного цвета.
Триадная цветовая схема
Триада является разновидностью дополнительной схемы, но с равным расстоянием между цветами — в результате чего получается треугольник. Четкого доминирования какого-то одного цвета здесь нет.
Прямоугольная и квадратная цветовая схема
В случае с прямоугольной схемой используется четыре цвета, сгруппированных в две взаимодополняющие пары. Квадратная схема похожа на нее, однако в этом случае все четыре цвета располагаются равномерно в цветовом круге.
Инструменты по подбору идеальных цветов
Цвета для оформления сайта можно подбирать самостоятельно при помощи цветового круга, а можно воспользоваться уже готовыми сервисами. Рассмотрим наиболее популярные.
1. Coolors
Простой и очень удобный в использовании инструмент для подбора цветов. Здесь даже необязательно регистрироваться — достаточно нажать на пробел, чтобы сгенерировать верную палитру. А если потребуются цвета из картинки или фотографии, достаточно загрузить ее на сайт.
2. Color Adobe
Этот сервис Adobe существует уже давно и доступен как в виде браузерной, так и десктопной версии. Программа позволяет подобрать необходимую палитру, выбрав понравившийся цвет и цветовую схему, а также извлечь цвет или градиент из изображения.
3. Paletton
Сервис напоминает Adobe Color, но не ограничивается пятью тонами. Paletton подходит продвинутым пользователям и позволяет создавать свои собственные схемы, а еще играть с оттенками.
4. Colorsafe
Сервис по подбору цвета, в который уже встроены все необходимые параметры. Его отличительной особенностью является использование WCAG — руководства по обеспечению доступности контента в сети. Благодаря этому можно, например, подбирать палитры, которые будут учитывать особенности восприятия цвета людей со слабым зрением.
5. Material Color Tool
Сервис, чаще всего использующийся дизайнерами пользовательских интерфейсов. Особенность Color Tool в том, что выбранную цветовую палитру можно сразу же применить к своему сайту и оценить, насколько удачно она в итоге будет смотреться.
Основные ошибки при подборе цвета для сайта
Рассмотрим главные ошибки, которые чаще всего встречаются при создании дизайнов сайтов.
1. Отсутствие контраста. Страница будет выглядеть скучно, если основной цвет сольется с фоном.
2. Использование грязных цветов или оттенков. К грязным цветам относятся все смешанные цвета. Например, коричневый. Использование таких цветов в дизайне вызывает у пользователей негативные или неприятные ощущения.
3. Перебор с количеством цвета. Чтобы сайт не превратился в пестрый ковер, рекомендуется использовать максимум три разных цвета.
4. Использование доминирующих цветов. Если цвета на сайте перекрикивают друг друга (красный, пурпурный, вишневый, оранжевый), будет сложно расставить акценты и завоевать внимание пользователя. Его взгляд будет блуждать по странице, а информация не запомнится вовсе.
5. Несоответствие цветов выбранной тематике. Формирование правильных эмоций и ассоциаций — важный шаг к запоминаемости бренда. Если сайт клининговой компании оформлен в грязных или черных тонах, это вызовет у пользователя отвращение и подсознательный отказ от услуг такой компании. В свою очередь, белый или голубой цвет подарят ощущение чистоты и свежести.
И в заключение
Многочисленными исследованиями установлено, что люди в течение 90 секунд принимают решения о том, нравится им увиденный товар или нет. В 90% случаев это решение зависит от цветовой гаммы оформления товара. При этом более 50% пользователей не вернутся на сайт, который вызвал у них неприятные зрительные ощущения. Используйте правильные цветовые схемы и создавайте дизайн, который будет привлекать, а не отталкивать.