Интеллектуальный выбор цветовых решений
Веб-дизайн 0 Комментариев

Интеллектуальный выбор цветовых решений

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

Самое интересное – это то, что цвет влияет на наше восприятие и настроение. К примеру, проведенное исследование показало, что цвет влияет даже на восприятие веса объекта. Рабочим предложили поднимать разные коробки. Коробки, окрашенные в черный цвет, показались более тяжелыми.

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

Как цвет может ухудшить UX?

Известно, что элементы фона и переднего плана на экране или веб-странице должны быть разных цветов. Когда оба цвета совпадают, сразу трудно определить элементы переднего плана. Это очевидно, не правда ли? Но это еще не все.

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

Интеллектуальный выбор цветовых решений

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

Если бы вместо внутреннего квадрата был текст того же цвета, он был бы также трудно читаемым. То же самое относится и к низкому контрасту.

Как найти правильный контраст?

Решение – выбор сочетания цветов с достаточным контрастом. Согласно рекомендациям WCAG 2.0, коэффициент контрастности текста должен быть не менее 4,5: 1.

Для подбора правильной комбинации можно воспользоваться сервисом WebAIM tool (webaim.org/resources/contrastchecker).

Интеллектуальный выбор цветовых решений

Как повысить эффективность СТА?

Каждый человек индивидуально определяет цвета. Всем известны случаи так называемой цветовой слепоты (дальтонизм), когда человеку сложно правильно определить цвет. Согласно статистике такую проблему испытывают 1 из 12 мужчин и 1 из 200 женщин.

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

Ознакомиться с примерами дальтонизма можно на сайте симулятора такого эффекта.

color-blindness.com/coblis-color-blindness-simulator

Решением этой проблемы, опять же, является использование контрастных цветов.

Такие же проблемы дальтонизм вызывает с определением текстовых ссылок. Пользователю весь текст может казаться синим, а не только ссылка. Вариантом решения служит подчеркивание ссылки.

Пример такой ситуации.

Интеллектуальный выбор цветовых решений

Заключение.

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

Это относится не только к сайтам, но и к приложениям. Не проектируйте для себя или заказчика. Проектируйте для пользователя!



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий