Почему вы не должны использовать яркие и насыщенные цвета для фона сайта

Перевод подготовлен для сообщества Dui.

Источник uxmovement.

Вы используете цвет в вашем интерфейсе, который напрягает глаза пользователя?

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

На какую колонку вы можете смотреть дольше?
На какую колонку вы можете смотреть дольше?

Пример. Посмотрите внимательно на цвета в изображении сверху.

Левый столбец содержит цвета с максимальной яркостью и насыщенностью. Правый столбец содержит цвета с яркостью и насыщенностью равной 80%.

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

Яркость против насыщенности

Яркость (Brightness) и насыщенность (Saturation) это разные цветовые свойства. Первое свойство означает, как много белого или чёрного смешивается с цветом. Второе свойство — какое количество серого содержится в цвете.

Увеличивая яркость — вы не снижаете насыщенность. Когда вы понижаете насыщенность, вы смешиваете цвет с оттенком серого. Когда вы повышаете яркость, то вы делаете цвет светлее, но не делаете его серым.

Сверху: увеличение яркости — больше белого. Снизу: уменьшение насыщенности — больше серого
Сверху: увеличение яркости — больше белого. Снизу: уменьшение насыщенности — больше серого

Влияние цвета на внимание и возбуждение

По результатам исследования «Эффект оттенка, насыщенности и яркости» выяснилось, что цвета с высокой насыщенностью и яркостью привлекают наибольшее внимание. Автор этого исследования пришёл к выводу, что эти цветовые свойства наиболее важны для привлечения внимания, чем оттенки.

Два других исследования — «Возбуждающий эффект цветовой насыщенности» и «Цвет и эмоции» показали, что насыщенные цвета связаны с наибольшим возбуждением. Оттенки (Hue) так же влияют на возбуждение, но насыщенность и яркость оказывают сильнейшее воздействие.

Используйте яркие и насыщенные цвета в кнопках

Яркие и насыщенные цвета привлекают внимание пользователя, но не задерживают его на себе долго. Использование таких цветов похоже на крик рядом с пользователем. Вы привлечёте их внимание лишь на некоторое время.

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

Слева: фон яркий и насыщенный. Поэтому всё внимание к фону, а не к кнопке. Справа: кнопка использует яркий и насыщенный цвет. Она привлекает внимание пользователя
Слева: фон яркий и насыщенный. Поэтому всё внимание к фону, а не к кнопке. Справа: кнопка использует яркий и насыщенный цвет. Она привлекает внимание пользователя

Используйте тёмный и менее насыщенный цвет для фона

Лучше делать цвет фона темнее и менее насыщенным. При затемнении цвета уменьшается содержание белого цвета. В то время как уменьшение насыщенности увеличивает количество серого цвета.

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

Слева: неприятно для глаз. Фон яркий и насыщенный. Максимальная яркость и насыщенность на изображении слева. Справа: приятно для глаз. Фон тёмный и менее насыщенный. Яркость и насыщенность ниже
Слева: неприятно для глаз. Фон яркий и насыщенный. Максимальная яркость и насыщенность на изображении слева. Справа: приятно для глаз. Фон тёмный и менее насыщенный. Яркость и насыщенность ниже

Поиски оптимального цвета фона

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

Сначала выберите основной оттенок и установите на нём максимальную яркость и насыщенность. Значение оттенка сохраняется и служит контрольной точкой для регулирования яркости и насыщенности.

Почему вы не должны использовать яркие и насыщенные цвета для фона сайта

Продублируйте основной оттенок цвета (образец), что бы создать четыре новых образца цвета с пониженым уровнем насыщенности и яркости.

Уменьшите уровень яркости у двух созданных образцов цвета. И уменьшите насыщенность у двух других образцов. При регулировании цвета используйте шаг, кратный десяти.

Поместите насыщенные образцы цвета слева от изначального оттенка с яркость и насыщенностью равной 100%. Справа разместите образцы цвета с минимальной и максимальной яркостью.

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

Почему вы не должны использовать яркие и насыщенные цвета для фона сайта

Теперь создайте второй ряд образцов цвета. Уменьшите яркость и насыщенность относительно первого ряда цветов. При уменьшении значений используйте одно и то же значение для каждого набора образцов цвета.

В итоге ни один из цветов второго ряда не имеет 100% насыщенности и яркости. Значит, эти цвета наиболее подходящие для использования в работе.

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

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

Примеры хорошего и плохого цвета для использования в фоне сайта

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

Слева — плохой зелёный (<a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fwww.panicstudio.tv%2Fen%2F&postId=38943" rel="nofollow noopener" target="_blank">Panic</a> или <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fprismic.io%2F&postId=38943" rel="nofollow noopener" target="_blank">Prismic</a>). Справа — хороший зелёный (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ffreshdesk.com%2F&postId=38943" rel="nofollow noopener" target="_blank">FreshDesk</a> или <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.sigstr.com%2F&postId=38943" rel="nofollow noopener" target="_blank">Sigstr</a>)
Слева — плохой зелёный (Panic или Prismic). Справа — хороший зелёный (FreshDesk или Sigstr)
Слева — плохой красный (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.dtelepathy.com%2F&postId=38943" rel="nofollow noopener" target="_blank">Telepath</a> или <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fmeat.agency%2F&postId=38943" rel="nofollow noopener" target="_blank">Meat</a>). Справа — хороший красный (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fappfigures.com%2F&postId=38943" rel="nofollow noopener" target="_blank">AppFigures</a> или <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fshopjackie.com%2F&postId=38943" rel="nofollow noopener" target="_blank">Jackie</a>)
Слева — плохой красный (Telepath или Meat). Справа — хороший красный (AppFigures или Jackie)
Слева — плохой синий (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fcompose.com%2F&postId=38943" rel="nofollow noopener" target="_blank">Compose</a> или <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fdareit.org%2F&postId=38943" rel="nofollow noopener" target="_blank">DareIt</a>). Справа — хороший синий (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Frepublic.co%2F&postId=38943" rel="nofollow noopener" target="_blank">Republic</a> или <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.mailtag.io%2F&postId=38943" rel="nofollow noopener" target="_blank">MailTag</a>)
Слева — плохой синий (Compose или DareIt). Справа — хороший синий (Republic или MailTag)

Эстетика и юзабилити

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

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

1111
10 комментариев

Прежде чем начать выбирать цвет для сайта, уберите этот чертов баннер с Теле2

14
Ответить

А мне нравится, я теперь все время настраиваю статью на vc через этот маленький баннер. Да и как он мешает-то? Сидит себе в углу тихонько.

1
Ответить

бледные цвета, безалкогольное пиво, резиновые женщины, техника от apple - это как-то по-гейски

3
Ответить

Примеры с более насыщенными цветами выглядят интереснее

2
Ответить

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

1
Ответить

TL;DR:
В следующий раз, прежде чем начать выбирать цвета для фона, подумайте...

2
Ответить