Почему вы не должны использовать яркие и насыщенные цвета для фона сайта
Перевод подготовлен для сообщества dui. Источник uxmovement
Вы используете цвет в вашем интерфейсе, который напрягает глаза пользователя?
Если вы используете яркий и насыщенный цвет для вашего фона, то вы уменьшаете время нахождения пользователя на вашей странице. Яркие и насыщенные цвета привлекают много внимания. Но использование таких цветов в большом количестве, сильно напрягают глаза пользователя.
Пример. Посмотрите внимательно на цвета в изображении сверху.
Левый столбец содержит цвета с максимальной яркостью и насыщенностью. Правый столбец содержит цвета с яркостью и насыщенностью равной 80%.
Ваше внимание к левому столбцу будет ниже, чем к правому, так как яркие цвета сильно давят на глаза.
Яркость против насыщенности
Яркость (Brightness) и насыщенность (Saturation) это разные цветовые свойства. Первое свойство означает, как много белого или чёрного смешивается с цветом. Второе свойство — какое количество серого содержится в цвете.
Увеличивая яркость — вы не снижаете насыщенность. Когда вы понижаете насыщенность, вы смешиваете цвет с оттенком серого. Когда вы повышаете яркость, то вы делаете цвет светлее, но не делаете его серым. Источник.
Снизу. Уменьшение насыщенности — больше серого.
Влияние цвета на внимание и возбуждение
По результатам исследования — «Эффект оттенка, насыщенности и яркости» выяснилось, что цвета с высокой насыщенностью и яркостью, привлекают наибольшее внимание. Автор этого исследования пришёл к выводу, что эти цветовые свойства наиболее важны для привлечения внимания, чем оттенки.
Два других исследования — «Возбуждающий эффект цветовой насыщенности» и «Цвет и эмоции» показали, что насыщенные цвета связаны с наибольшим возбуждением. Оттенки (Hue), так же влияют на возбуждение, но насыщенность и яркость оказывают наибольшее влияние.
Используйте яркие и насыщенные цвета в кнопках
Яркие и насыщенные цвета привлекают внимание пользователя, но не задерживают его на себе долго. Использование таких цветов похоже на крик рядом с пользователем. Вы привлечёте их внимание лишь на некоторое время.
Поэтому вы должны использовать такие цвета, только в элементах интерфейса, которые требуют действия от пользователя — например, кнопки. Эти цвета привлекут внимание пользователя к элементам управления и упростят их нахождение в нужный момент.
Справа. Кнопка использует яркий и насыщенный цвет. Она привлекает внимание пользователя
Используйте тёмный и менее насыщенный цвет для фона
Лучше делать цвет фона темней и менее насыщенным. При затемнение цвета, уменьшается содержание белого цвета. В то время, как уменьшение насыщенности — увеличивает количество серого цвета.
Полученный фон не будет забирать на себя внимание пользователя, от текста или контента на странице. Это позволяет пользователю читать страницу легко и не отвлекаясь.
Поиски оптимального цвета фона
Есть много коэффициентов яркости и насыщенности, которые вы можете использовать для вашего цвета в фоне. Создание сетки цветовых образцов поможет вам найти оптимальный цвет для фона.
Сначала выберете основной оттенок и установите на нём максимальную яркость и насыщенность. Значение оттенка сохраняется и служит контрольной точкой для регулирования яркости и насыщенности.
Hue — оттенок
Brightness — яркость
Продублируйте основной оттенок цвета (образец), что бы создать четыре новых образца цвета с пониженым уровнем насыщенности и яркости.
Уменьшите уровень яркости у двух созданных образцов цвета. И уменьшите насыщенность у двух других образцов. При регулировании цвета используйте шаг кратный десяти.
Поместите насыщенные образцы цвета слева от изначального оттенка с яркость и насыщенностью равной 100%. Справа разместите образцы цвета с минимальной и максимальной яркостью.
К сожалению, полученные цвета не рекомендуются для использования. Так как они, до сих пор имеют 100% яркость или насыщенность. Поэтому, они будут служить основой для поиска подходящих цветов.
Теперь создайте второй ряд образцов цвета. Уменьшите яркость и насыщенность у них, относительно первого ряда цветов. При уменьшении значений, используйте одно и тоже значение для каждого набора образцов цвета.
В итоге, ни один из цветов второго ряда не имеет 100% насыщенности и яркости. Значит эти цвета наиболее подходящие для использования в работе.
Вы можете попробовать создать ещё один ряд образцов цвета, если вас не устраивает полученный результат. Для этого создайте третий уровень образцов цвета и уменьшите значения яркости и насыщенности у каждого из них.
Теперь у вас есть в общей сложности восемь оптимальных цветов с различными коэффициентами яркости и насыщенности.
Примеры хорошего и плохого цвета для использования в фоне сайта
Ниже приведены примеры страниц, которые приятны и неприятны для глаз. Обратите внимание, как долго вы можете смотреть на каждую из страниц в примерах.
Слева — плохой зелёный (Panic / Prismic). Справа — хороший зелёный (FreshDesk / Sigstr)
Слева — Плохой красный Telepath / Meat. Справа — Хороший красный AppFigures / Jackie
Слева — плохой синий (Compose / DareIt). Справа — хороший синий (Republic / MailTag).
Эстетика и юзабилити
В следующий раз прежде чем начать выбирать цвета для фона, подумайте, как этот цвет воспримут глаза пользователя. Оптимизирован ли у этого цвета уровень яркости и насыщенности? Легко ли читать текст пользователям с этой страницы?
Цвет влияет на эстетику дизайна, но так же влияет и на удобство использования. Дизайнеры должны учитывать эти два момента, что бы цвет был приятен для глаз.
Подписывайтесь на телеграм канал проекта или сообщество в VK и Facebook.
Автор проекта Андрей Астракт
