Автор: Мария Кокухина, эксперт по юзабилити
Книга Марии Кокухиной

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

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

цвета на сайте

Проведем оценку. Слева цвета с максимальной яркостью и насыщенностью. Справа цвета с яркостью 80% и насыщенностью 80%. Какой столбец ваши глаза могут терпеть дольше на сайте? Там, где 100% яркость, насыщенность или 80%? Ваша оценка?

цвета на сайте

Оценка №1 — яркость и насыщенность

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

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

цвета на сайте

Провести юзабилити аудит сайта

Оценка №2 — внимание и возбуждение

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

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

цвета на сайте

Оценка №3 — темные цвета

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

цвета на сайте

Оптимальный цвет для фона

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

Итак, выберите цвет и установите максимальную яркость, уровень насыщенности. А теперь нужно настроить различный уровень яркости и насыщенности.

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

цвета на сайте

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

Создайте второй уровень оттенков, уменьшив яркость и насыщенность образцов в первом ярусе.

цвета на сайте

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

цвета на сайте

В качестве фона сайта всегда используйте цвета, которые не напрягают глаза, а успокаивают их.

Заключение

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

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

Понравилась статья? Поделитесь с друзьями!

Популярные статьи