Как спроектировать удобный для людей с особенностями зрения дизайн? Разработчики Kiddom Academy рассказывают о собственном способе решения проблемы цветовой доступности за 6 шагов. Обсудить

Создавая дизайн цифрового или физического продукта, важно уметь подобрать цвета с учетом их контрастности. Особенно если вы хотите, чтобы пользователи обратили внимание на важные данные. Нужно понимать, что не все люди видят ваш дизайн одинаково. Около 8% мужчин и 0,5% женщин страдают расстройствами цветового зрения (в частности, дальтонизмом), поэтому часть информации в приложении, на сайте или в ином продукте для них может просто пропасть. Возникает вопрос: как сделать, чтобы дизайн оставался привлекательным и удобным для всей аудитории?

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

Новый продукт – новый челлендж

До Kiddom Academy у компании уже была школьная система для K-12. Этот инструмент позволял создавать и выполнять задания, ставить оценки и обмениваться информацией о них. Решение было предназначено для учителей и учеников, поэтому в дизайне использовалось цветовое разделение: у учителей была голубая тема, а у школьников – фиолетовая.

Цветовое разделение функциональности

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

Шаг 1. Анализ стартовой палитры

Для начала пришлось собрать вместе все использовавшиеся цветовые палитры, чтобы проанализировать совпадения и несоответствия.

Шаг 1. Анализ цветовых палитр

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

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

Скриншот отчета в ранней версии продукта

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

Шаг 2. Изучение норм индустрии

Основная цель исследования отраслевых норм:

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

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

Анализ отраслевых норм

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

Взглянем на расширенную цветовую палитру в тех же двух режимах:

Расширенная цветовая палитра с низким уровнем контраста

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

Шаг 3. Определение ограничений

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

Пример использования цвета в пользовательском интерфейсе Kiddom

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

Шаг 4. Решение конфликтов

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

Решение конфликтов цветов

Первоначальное намерение состояло в том, чтобы тематизировать приложение для разных ролей пользователей: Ученика, Учителя и Родителя.

Четыре категории пользователей, которым соответствуют разные цвета

Однако с добавлением Администратора (Academy, зеленый цвет) палитра усложнилась. Было принято решение упростить процесс, избавившись от ролевых цветов.

Цветовая тематизация

Шаг 5. Улучшение доступности

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

Гистограмма в админ-панели Kiddom Academy

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

Гистограмма в админ-панели Kiddom Academy в режиме дальтонизма

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

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

Гистограмма, доступная для дальтоников

Гистограмма, доступная для дальтоников, в режиме дальтонизма

Шаг 6. Упрощение цветовой палитры

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

Разработчики Kiddom создали многослойную систему. Появился основной цвет и цвет наложения (тонировка, tint).

Основной цвет + наложение

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

Также в палитре должен присутствовать контрастный цвет для кнопок и ссылок. Таким глобальным цветом взаимодействия стал синий, имеющий высокий уровень доступности (AA+).

Так стала выглядеть окончательная цветовая палитра:

Обновленная цветовая палитра Kiddom ***

Если интересно, вы можете взглянуть на образовательную платформу Kiddom.