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

Цвет — это сильный инструмент в арсенале дизайнера, который может спровоцировать нужную эмоцию.

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

Как направить внимание пользователей на нужные элементы?

NNGroup провели исследование с участием 71 обычных веб-пользователей, в котором изучалось, насколько дольше пользователи ищут менее контрастные по отношению к фону элементы.

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

Оказалось, что кнопку яркого цвета на белом фоне пользователи находят на 22% быстрее, нежели ту, которая менее контрастирует с фоном.

NNGroup: “Исследования плоских UI элементов”, 2018 год

Для кнопок принято использовать яркие цвета, поскольку данный элемент должен выделяться. Но если для фона тоже используется яркий цвет, то должного контраста не произойдет — кнопка будет незаметна пользователям. Поэтому использование белого, серого, черного или другого нейтрального цвета для пространства вокруг кнопки увеличивает внимание пользователей до 20 раз, нежели яркий цветной фон.

Исследования The Daily Egg, 2019 год

По данным за 2013 год в мире около 8% мужчин и 0,5% женщин имеют нарушения в восприятии цвета (дальтонизм). Для данной категории пользователей не имеет значения, какой цвет будет использоваться для каждого конкретного элемента на сайте. Им важен именно контраст, который можно создать с помощью нейтрального фона и ярких цветовых элементов. Это позволит правильно расставить акценты и привлечь внимание к нужным элементам: кнопкам, призывам к действию, заголовкам, ховерам.

NNGroup: “Исследования плоских UI элементов”, 2018 год

В Руководстве о доступности веб-контента указано, что контраст текста по отношению к фону должен составлять 4,5 к 1 или выше. Например, синий текст на красном фоне будет практически нечитабелен, поскольку коэффициент контрастности синего цвета к красному — 2,79, что недостаточно для нормального восприятия пользователями такой цветовой гаммы на сайте. Черный текст на белом фоне имеет наивысший коэффициент контрастности — 21, а значит лучше всего воспринимается пользователями.

Руководство о доступности веб-контента

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

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

Исследователи из университета Овьедо решили проверить гипотезу: влияют ли цветовые решения на доверие и удовлетворенность пользователей от взаимодействия с сайтом?

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

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

N. Faisal: “Атрибуты веб-дизайна в построении доверия пользователей, удовлетворение и лояльность к высокой неопределенности”, 2016 год

NNGroup проанализировали 112 минималистичных сайтов, которые в последние годы находятся на пике популярности.

Оказалось, что почти половина веб-сайтов (55 из 112) использовали однотонную цветовую палитру, из них 51 сайт состоял исключительно из белого, черного и серого оттенков. Остальные 52 веб-сайта использовали один или два акцентных цвета.

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

Характеристика минималистичных сайтов, 2015 год

NNGroup провели эксперимент, в котором пользователей попросили оценить 15 идентичных версий веб-сайта Sun Microsystems, отличающихся только цветовым оформлением.

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

Тестирование Нильсен Норман Групп, 1995 год

Цветовая гамма, используемая на сайте, влияет на удобство его использования, восприятие информации и доверие пользователей. Так, использование контрастных цветов помогает лучше ориентироваться на сайте, а ограниченная цветовая палитра (2-3 цвета) создает ощущение единства в восприятии пользователей.

Резюме

Только черно-белые, монохромные контрастные или схемы с использованием ограниченного числа цветов (до трех, согласно правилу 60-30-10) являются максимально удобными для пользователей с точки зрения: