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

No items found.
Аудио перевод статьи
0:00
0:00
·

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

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

Яркие цветовые схемы являются неэффективными

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

Из 112 сайтов с минималистичным дизайном 95% использовали монохромную палитру или ограниченное количество цветов (не более трех). Популярность таких дизайнов обоснована отсутствием конфликта между цветами, который возникает на сайтах с ярким цветным дизайном.
Характеристика минималистичных сайтов, 2015 г.

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

Яркие дизайны сайтов отвлекают внимание пользователей от кнопок призыва к действию. А вот использование белого, серого, черного или другого нейтрального пространства вокруг кнопки увеличивает до 20 раз привлечение внимания пользователей, нежели яркий цветной фон (красный, фиолетовый, оранжевый).
Исследования The Daily Egg, 2019 г.

Черно-белый или монохромный контрастный дизайн влияет на удобство восприятия контента

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

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

Кнопку яркого цвета на белом фоне пользователи находят быстрее на 22%, нежели менее контрастную с фоном кнопку.
Исследования Нильсен Норман Групп, 2017 г.

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

На мобильных устройствах половина пользователей начинают скроллить уже через 10 секунд, после того, как оказались на сайте. А 90% пользователей начинают скроллить через 14 секунд после того, как оказались на сайте.
Статья википедии о дальтонизме

Резюме

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

  • их уровней восприятия цвета
  • с точки зрения скорости работы с сайтом
  • а также, с точки зрения читабельности текстового материала

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

Источник:
·
comments powered by HyperComments