Лента  •  6 августа 2019👀 394

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

Паша Павлов
Различает все оттенки серого

В прошлом году мы закончили проектирование интерфейса для банкоматов сети СБС — Системы Банковского Самообслуживания. В начале 2019 года интерфейс начали внедрять, и теперь его можно увидеть на 30% всех банкоматов страны или на 350 машинах в одном только Минске. Сегодня хочу рассказать, почему дизайнеры, инженеры и все, кто занимается созданием продуктов для большого количества людей, обязаны учитывать долю пользователей с нарушениями зрения и смотреть намного дальше ТЗ при создании интерфейсов. Заодно подскажу несколько полезных программ, которые в этом помогут.

Ограничения банкоматов. Технические и не только

Банкоматы и терминалы — надежные устройства, которые эксплуатируются десятками лет. Поэтому так часто можно встретить банкоматы с дисплеями старого образца и плохой цветопередачей, которую не сравнить с современными компьютерными мониторами. Помимо слабой контрастности экрана существенными ограничениями являются низкое разрешение (800×600, 1024×768), слабый отклик сенсорной матрицы, слабая мощность устройства и ряд ограничений формата изображений. Ситуацию с низким качеством отображения дисплея может ухудшить неудачное расположение устройства. Например, на солнечной стороне улицы.

Из менее очевидного: у матриц старых дисплеев плохой угол обзора (30-50˚). То есть, если смотреть на экран под большим углом — цвета меняются, а иногда даже инвертируются. Поэтому нужно помнить про физические особенности пользователей: низкий или высокий рост, нарушения зрения или опорно-двигательной системы.

Кроме технологических существуют еще законодательно-нормативные требования. Разработка пользовательского интерфейса банкомата должна выполняться по требованиям технического кодекса установившейся практики ТКП 064-2012 (07040). Это документ Национального банка Республики Беларусь с описанием всех требований, возможностей и ограничений проектирования интерфейса. На мой взгляд, требования в нем есть как уместные, так и откровенно устаревшие. Например, требуемый минимальный размер шрифта в миллиметрах :(

Одно из спорных, но обязательных требований ТКП: все подтверждающие функции должны быть обозначены зеленым цветом, а отменяющие — красным. Не буду углубляться, почему это спорно, но для успешной сертификации интерфейса требование нужно выполнить. Сложность использования в массовых интерфейсах красного и зеленого в том, что есть существенная доля людей с нарушениями цветовосприятия, и чаще всего проблема как раз в ослабленной способности различать эти два цвета. Углубляемся в тему.

Красноречивая статистика и цветовое восприятие

В Беларуси как минимум 400 000 человек имеют нарушенное цветовосприятие и не могут с легкостью распознавать оттенки красного и зеленого. Проблема касается 8-10% мужчин и до 2% женщин. В центральной части сетчатки глаза расположены так называемые колбочки — цветочувствительные рецепторы с пигментами трех типов (один чувствителен к красному цвету, другой — к зеленому, третий — к синему). У некоторых людей их содержание отклоняется от нормы.

Дейтераномалия или отклонения по зеленым оттенкам

При дейтераномалии восприятие зеленого ослаблено, но человек его все-таки видит. Такое нарушение является самым распространенным и встречается у 2,7% людей, как правило у мужчин.

Вот как видит обычный человек:

Эмуляция дейтераномального зрения:

Протаномалия или отклонения по красным оттенкам

Еще одна разновидность нарушения цветового зрения — слабость восприятия красного цвета. Эмуляция искажения цветовосприятия при протаномалии:

В целом, по данным ВОЗ около 18% людей имеют нарушения зрения, причем сюда не входят обладатели привычной нам близорукости и дальнозоркости. Это только те, чьи проблемы не корректируются очками и медикаментами. То есть в Беларуси это где-то 1,7 млн человек или без малого население Минска. Получается, если слепо выполнить все нормативные требования без оглядки на технические ограничения и особые потребности пользователей, то как минимум каждый пятый белорус не сможет комфортно пользоваться интерфейсом. Не рискнем назвать это «эйблизмом», но со всем этим пора что-то делать.

Делаем. Основное цветовое решение и много тестов

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

Определились с удачной гаммой в стиле банка, хорошо отрабатывающей контраст на экране. Подготовили еще десяток экранов других типов. Снова поехали тестировать в банк. Механика та же: отбираем лучшие варианты, дорабатываем их, снова тестируем, каждый раз более точно проверяем и фон, и тексты. Так на этом этапе получаем работающее и визуально приятное цветовое решение. Когда определились с основным цветовым решением, переходим к проработке доступности интерфейса. Тут уже методика «на глазок» не работает.

Эмуляция отклонений цветовосприятия и проверка контрастности

Чтобы интерфейс обеспечивал должный уровень доступности, мы опирались на WCAG 2.0 (Web Content Accessibility Guidelines или Руководство по обеспечению доступности Web-контента), приводя интерфейс к классу АА-AAA. Полное выполнение класса AAA недостижимо в силу возможностей банкомата. Для того чтобы выполнить стандарт и дать возможность пользоваться интерфейсом всем, нужно привести интерфейсные элементы к требованиям по контрастности и цветовой дифференциации.

Балансируем оттенки

Логотип SimDaltonism

Мы использовали специализированный софт, чтобы посмотреть на свои интерфейсы глазами людей с нарушениями восприятия цвета. Sim Daltonism (доступен только для mac). Как альтернатива — Color Oracle, он есть для любой ОС. Для теста сайтов подойдет расширение RGBlind.

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

Приводим контраст в соответствие классу AA-AAA WCAG 2.0

Логотип Color Contrast Analyser

Для этого теста используем Color Contrast Analyzer Можно использовать онлайн-инструменты, например, Color.review очень наглядный. Выбираем текстовые элементы и смотрим Contrast Ratio. Задача — получить максимальный контраст 5:1 и выше, что соответствует классу ААА. В окне программы он отображается как «Pass AAA». Если тест не пройден, нужно поправить размеры и цвет текста и снова повторить предыдущий шаг.

Выводы, мораль и все такое

  1. Мы добились решения, которое укладывается в требования нормативов и дает возможность комфортно пользоваться интерфейсом банкомата наибольшему количеству людей.
  2. Далеко не все решения можно правильно оценить «на глаз», лучше придерживаться международных стандартов, таких как WCAG, и использовать специализированное ПО.
  3. Тестируйте решения.