Дизайн пользовательского интерфейса для дальтоников

Дальтоники составляют значительную часть населения — 1 из 12 мужчин и 1 из 200 женщин, если быть точным. Тем не менее, дальтоники — это аудитория, которую часто упускают из виду в дизайне пользовательского интерфейса.

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

Большинство людей являются трихроматами, что означает, что они воспринимают цвет как комбинацию трех цветов: зеленого, красного и синего. Различные типы дальтонизма или дефицита цветового зрения (ССЗ) возникают из-за неспособности четко воспринимать один или несколько из этих цветов. Наиболее распространенными типами сердечно-сосудистых заболеваний являются красно-зеленая цветовая слепота, при которой трудно различить красный и зеленый цвета, и красная цветовая слепота, при которой красные цвета кажутся тусклыми.

Мы считаем, что у всех должен быть справедливый и равный доступ к Интернету, поэтому очень важно, чтобы дизайнеры пользовательского интерфейса разрабатывали дизайн с учетом пользователей, страдающих дальтонизмом. Закон об американцах-инвалидах (ADA) даже требует, чтобы некоторые организации соответствовали рекомендациям WCAG 2.0 Level AA.

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

Почему дизайн для дальтоников имеет значение

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

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

В настоящее время существуют такие инструменты, как Visolve, которые могут настраивать компьютерные дисплеи для определенных типов дальтонизма, но не все дальтоники используют эти инструменты — даже не все дальтоники знают, что они дальтоники.

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

Цветовая терминология, которую нужно знать

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

Оттенок: это синоним слова «цвет» и определяется спектральной длиной волны цвета.

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

Яркость: Яркость зависит от количества белого или черного, добавленного к цвету, что создает оттенки и оттенки соответственно.

Температура: это то, насколько теплым или холодным вы воспринимаете цвет. Компьютерный монитор может влиять на воспринимаемую температуру цвета.

Как создать дизайн для дальтоников

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

Не определяйте только цветом

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

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

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

Понимание контраста и выбора цвета

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

Вот еще несколько способов улучшить видимость вашего дизайна:

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

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

• Красный и зеленый
• Зеленый и синий
• Зеленый и коричневый
• Зеленый и серый
• Зеленый и черный
• Синий и серый
• Синий и фиолетовый
• Желтый и светло-зеленый

Внедрение шаблонов и текстур

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

Используйте символы и маркируйте все

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

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

Переосмыслите свои CTA-кнопки

Призыв к действию (CTA) является неотъемлемой частью интерактивного дизайна. Если пользователь не может его найти или не понимает, он не продвинется по пути, и вы не достигнете поставленных целей. Вам нужно привлечь внимание к CTA, и многие дизайнеры полагаются на цвет.

Хороший дизайн пользовательского интерфейса реализует цвет, но также использует один или несколько из этих выдающихся методов для кнопок CTA:

• Размер
• Размещение
• Сильный контраст
• Взвешенные границы
• Взвешенные шрифты
• Символические иконки
• Эффекты наведения

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

Подчеркните эти ссылки

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

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

Подумайте о минимализме

Минимализм далеко не нов. Эстетика была в тренде на протяжении десятилетий, проникая в архитектуру, искусство, внутреннюю отделку и, конечно же, дизайн.

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

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

Используйте симулятор цветовой слепоты

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

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

Сделайте свой сайт доступным

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

Доступность цветов — это лишь один из элементов создания приятного веб-сайта. Обязательно ознакомьтесь с нашим руководством по тому, как сделать ваш контент доступным для сообщества глухих и HOH.