12 февраля 2018

Цвет и контраст — 2 важнейших элемента доступного дизайна

Эту статью я написал для «Агентства диджитал-трансформации» (Digital Transformation Agency), где я работаю дизайнером.

На обложке: наша собственная доступная цветовая палитра, построенная на базе цветов материального дизайна Google

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

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

Значительная группа пользователей нашего интерфейса — возрастные австралийцы: каждый седьмой пользователь старше 65 лет . Этот сегмент австралийского населения постоянно растет: примерно через 50 лет доля пожилых пользователей вырастет вдвое.

Можно предположить, что примерно половина пожилых пользователей (и какая-то часть молодых) страдают от проблем со зрением. Многие люди старше 40 не могут читать мелкий шрифт без очков — это состояние называют «пресбиопией», и это лишь один из 7 известных видов цветовой слепоты.

Итак, как нам удалось учесть все виды цветовой слепоты при выборе цветов и контрастов для дэшборда Smart Cities?

Цвет

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

Таким график видят люди, не страдающие от нарушений цветовосприятия

А таким тот же график видят люди с разными формами цветовой слепоты

Для проектирования дэшборда по городам нам нужно было 6 разных цветов — по одному для каждой категории. Но цвет — вещь субъективная: у каждого цвета есть свой культурный и социальный подтекст. Поэтому старались не использовать:

  • Красный — часто означает опасность или что-то негативное
  • Ярко зеленый — обычно несет положительный смысл

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

Затем мы провели тест: как люди с нарушенным цветовосприятием видят нашу палитру. Такой тест можно провести несколькими способами; мы пользовались Stark. Наша палитра с успехом прошла тест.

Паттерны повышают контраст

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

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

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

Для создания этих схем и применения паттернов мы пользовались инструментом High Charts и их модулем доступности.

Контраст

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

Консорциум Всемирной паутины (W3C — World Wide Web Consortium) — это международная организация, которая разрабатывает стандарты доступного контента. Они создали руководство по доступности веб-контента (WCAG 2.0 AA), и оно легло в основу наших критериев, разработанных для правительства Австралии. Кроме того, они определили минимальный уровень контрастности текста в презентациях, на картинках, в заголовках, в интерфейсе, в логотипах.

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

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

3 палитры материального дизайна Google. Хороший выбор цветов, но мало светлых тонов: только 100 и 50.

Наша собственная палитра для дэшборда, собранная на основании цветов материального дизайна.

Мы расширили палитру и включили оттенки 20, 40, 60, 80 и 90. Кроме того, добавили дополнительный темный оттенок — 950. Он тоже нужен для создания дополнительного контраста, особенно при оформлении графиков с большим количеством пунктов в легенде.

Применяем цветовую систему: для каждой секции используем один основной цвет и несколько оттенков.

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

Работая над контрастом и цветами, мы опирались на 7 принципов универсального дизайна. Эти принципы помогают проектировать продукты, инструменты и средства коммуникации для всех групп пользователей. Особенное внимание мы уделяли следующим принципам:

  • Принцип 1: учитывать интересы всех пользователей
  • Принцип 2: обеспечить гибкость использования
  • Принцип 3: обеспечить простое и интуитивное использование
  • Принцип 4: упростить восприятие информации

Советы и инструменты, которые помогут вам начать:

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

В завершение хочется дать несколько советов по созданию доступного визуального дизайна:

Пусть дизайн будет смелым, наглядным, осмысленным

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

Подбирайте цвета осознанно

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

Используйте белое пространство

Создайте смелый интерфейс, который вовлекает пользователя в процесс.

Используйте силу цвета

Цвет — это ключевой компонент дизайна. Он помогает сделать дизайн смелым, наглядным и осмысленным.

Учитывайте контекст

В каком контексте появится ваш дизайн? Что позволяет делать ваш сервис? В чем его цель? Когда, где и как его будут использовать?

Изучайте значения цветов

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

Думайте о продукте в целом

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

Пользуйтесь доступными инструментами по подбору цветов:

  • getstark.co — используйте Stark при работе в Sketch. Инструмент позволяет быстро оценивать цветовой контраст и смотреть дизайн в контексте разных нарушений цветовосприятия.
  • colordrop.io — упрощает просмотр и поиск цветовых палитр.
  • lolcolors — забавно представленные цветовые палитры.
  • material.io — позволяет одновременно проверить контрастность разных цветовых палитр на разных экранах.
  • coolors.co — большой выбор одноцветных палитр.

Если хотите узнать больше о доступном дизайне, читайте наш блог. Если у вас есть какие-то вопросы по дэшборду о городах, оставляйте комментарии или пишите на dashboard@digital.gov.au.

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

7 сентября 2016

Ask-Me-Anything: Сергей Попков

15 сентября 2017

Как Netflix использует аналитику для подбора фильмов, создания контента и принятия многомиллионных решений

30 декабря 2016

Поможет ли ИИ наконец-то найти формулу идеального подарка?

14 сентября 2016

Дуплекс в веб-дизайне: обзор цветового тренда, который захватывает мир

11 октября 2017

Доступность — золотое дно для бизнеса

17 января 2018

Новый язык дизайна на маркерной доске

aic