Share This
Связаться со мной
Крути в низ
Categories
//Визуализация данных и цветовая доступность

Визуализация данных и цветовая доступность

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

vizualizacija dannyh i cvetovaja dostupnost 92b9415 - Визуализация данных и цветовая доступность

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

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

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

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

vizualizacija dannyh i cvetovaja dostupnost c24f17f - Визуализация данных и цветовая доступность

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

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

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

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

vizualizacija dannyh i cvetovaja dostupnost 5ffb059 - Визуализация данных и цветовая доступность

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

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

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

vizualizacija dannyh i cvetovaja dostupnost b85725d - Визуализация данных и цветовая доступность

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

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

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

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

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

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

vizualizacija dannyh i cvetovaja dostupnost 2fdb013 - Визуализация данных и цветовая доступность

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

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

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

vizualizacija dannyh i cvetovaja dostupnost 171e8f9 - Визуализация данных и цветовая доступность

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

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

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

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

vizualizacija dannyh i cvetovaja dostupnost c40bd8e - Визуализация данных и цветовая доступность

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

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

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

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

vizualizacija dannyh i cvetovaja dostupnost daf7f8b - Визуализация данных и цветовая доступность

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

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

vizualizacija dannyh i cvetovaja dostupnost 9cdca23 - Визуализация данных и цветовая доступность

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

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

vizualizacija dannyh i cvetovaja dostupnost be5034d - Визуализация данных и цветовая доступность

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

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

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

vizualizacija dannyh i cvetovaja dostupnost 249a065 - Визуализация данных и цветовая доступность

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

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

vizualizacija dannyh i cvetovaja dostupnost 1cd0e94 - Визуализация данных и цветовая доступность

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

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

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

vizualizacija dannyh i cvetovaja dostupnost 21ab140 - Визуализация данных и цветовая доступность

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

vizualizacija dannyh i cvetovaja dostupnost 0e3ef75 - Визуализация данных и цветовая доступность

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

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

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

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

vizualizacija dannyh i cvetovaja dostupnost 1716500 - Визуализация данных и цветовая доступность

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

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

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

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

vizualizacija dannyh i cvetovaja dostupnost b60fa30 - Визуализация данных и цветовая доступность

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

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

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Свежие комментарии

    Рубрики

    About Author 01.

    Roman Spiridonov
    Roman Spiridonov

    Привет ! Мне 38 лет, я работаю в области информационных технологий более 4 лет. Тут собрано самое интересное.

    Our Instagram 04.

    Categories 05.

    © Speccy 2020 / All rights reserved

    Связаться со мной
    Close