На обложке: наша собственная доступная цветовая палитра, построенная на базе цветов материального дизайна 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.
