От автора: цвет играет огромную роль в нашей жизни. С его помощью мы различаем объекты, понимаем сигналы светофора, а также можем работать в инструментах. Но что интереснее, цвет оказывает сильнейшее влияние на когнитивные функции и настроение. Не так давно я читал небольшую статью с исследованием, где объяснялось, как разные люди воспринимают цвета, и как эти цвета могут влиять на настроение и эмоции. В статье приводился пример исследования, где работники поднимали черные коробки. Люди говорили, что коробки были тяжелые, но когда те же коробки выкрасили в зеленый цвет, они стали подниматься легче.
Точно так же с сайтами, цвета могут оказывать значительное воздействие на юзабилити и когнитивные функции пользователей. Юзабилити складывается из всех элементов дизайна, однако дизайнерам нужно несколько раз подумать при выборе цвета для них. Давайте разбираться.
Как плохие комбинации цветов влияют на читаемость
Элементы заднего и переднего плана на экране/веб-странице должны иметь разные цвета. Когда элементы одного цвета, очень сложно сразу разобраться, где передний план. Все просто, так ведь? Да, но это не все.
Не все комбинации цветов переднего и заднего плана можно использовать. Но как, зная это, понять, какие цвета выбирать? Ответ: выбирайте цвета с хорошей контрастностью.
Несмотря на высокий контраст и то, что на изображении сверху цвет заднего квадрата сильно отличается от цвета переднего квадрата, смотреть на него очень неудобно. Если бы на переднем плане был текст, то он был бы нечитаемым. То же самое касается низкой контрастности. Существует ли золотая середина? Да, читайте дальше.
Находим золотую середину контраста
Необходимо подобрать комбинацию цветов с достаточной контрастностью. По руководству WCAG 2.0 коэффициент контрастности для текста должно быть минимум 4.5:1. Например, текст довольно сложно читать при коэффициенте 1.26:1; Если бы он был 7.58:1, текст был бы разборчивым и читаемым.
Есть какой-нибудь инструмент для проверки коэффициента контрастности цветов заднего и переднего плана для приложений и сайтов? Да! WebAIM.
Подбор лучших цветов для привлекательных CTA-элементов
Контрастность также важна в случаях, когда необходимо перенести внимание пользователя на определенный элемент, например, CTA-кнопку (или просто CTA).
Для эксперимента были созданы две версии страницы (A/B). В первой версии фон был голубого цвета, а CTA-элементы использовали разные оттенки синего. Во второй версии фон был темно-синий, а CTA – оранжевые. Пользователей просили кликнуть на элемент, который их заинтересовал больше других. Оранжевый CTA получил больше кликов, чем голубой CTA, потому что контраст темно-синего и оранжевого больше, чем в первой версии.
В версии с голубым фоном коэффициент контрастности составил 1.39:1, что немного ниже золотой середины. Во второй версии коэффициент был 4.73:1, т.е. комбинация темно-синего и оранжевого лучше контрастирует, чем в первой версии страницы.
При выборе цвета для CTA-элементов необходимо отдавать предпочтением тем цветам, которые хорошо контрастируют с фоном. Но откуда нам знать, какие цвета создают высокую контрастность? Для этого можно использовать цветовое колесо, чтобы искать «противоположные цвета». Например, оранжевый расположен напротив темно-синего на колесе, что создает сильный контраст.
Как сделать CTA-элементы более доступными
Все люди по-разному воспринимают цвета. У некоторых людей наблюдаются дефекты зрения или дальтонизм – неспособность различать определенные цвета (в основном красный и зеленый или синий и желтый). По подсчетам каждый 12 мужчина и каждая 200 женщина страдают слепотой такого рода.
Дальтоникам сложно воспринимать определенные цвета. Например, голубой CTA им может казаться ненасыщенным голубым, что снизит контрастность CTA с фоном, из-за чего уже, в свою очередь, CTA станет менее привлекательным.
Ниже представлен пример формы регистрации в симуляторе дальтонизма.
Решение опять же контраст. Вне зависимости от реально используемых цветов вы можете сделать CTA-элементы доступными, если будете использовать цвета с высокой контрастностью!
Дальтоники испытывают те же проблемы со ссылками. По умолчанию кликабельный текст синий, однако дальтоники с трудом замечают кликабельный текст, если он не подчеркнут.
Скриншот ниже показывает, как дальтоники видят контент. Кликабельный и некликабельный контент почти идентичен, видите? Если бы на ссылках не было подчеркиваний, дальтоникам было бы почти нереально найти их.
Иногда с помощью цветного текста на сайте передается специальное сообщение. Зачастую красный цвет в формах означает ошибку или предупреждение, а зеленый текст – сообщение о подтверждении. Например, если неправильно заполнить форму, над полем, которое нужно поправить, появляется красный текст.
Такая привязка к цветам может сильно усложнить жизнь дальтоникам. Вместо того чтобы просто подсвечивать ошибку/показывать предупреждение, вы можете комбинировать красный с подходящим фоном, чтобы повысить контрастность. К предупреждению также можно добавить тонкую анимацию. Чтобы обеспечить исключительный UX, нельзя полагаться на одну технику дизайна.
Некоторые разновидности слепоты снижают способность пользователей различать движение. В таком случае цвет будет полезнее анимации. Давайте разберем еще пару примеров.
На изображении сверху показано, как дальтоники видят веб-страницу. Предупреждение над полем формы еле заметно, не так ли? Для решения этой проблемы здесь нужно использовать разные визуальные элементы для передачи сообщения. Например, некоторые формы показывают ошибки текстом с иконками. Иконки легче заметить, даже дальтоникам. Обычно вместе с текстом используется знак Х, чтобы показать важные предупреждения на формах. Другой пример:
Заключение
Мы узнали, что цвета могут кардинально влиять на юзабилити. При подборе цветовой палитры для дизайна приложения или сайта важно понять, что сайт должен не только хорошо смотреться, но и быть юзабельным для широкого круга людей, даже для людей с определенными нарушениями.
Все вышесказанное применимо не только к сайтам, но и к мобильным приложениям. Не проектируйте для себя или клиента, проектируйте для пользователей.
Редакция: Preston Pierce
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
