6 августа, 2019
В прошлом году мы закончили проектирование интерфейса для банкоматов сети СБС — Системы Банковского Самообслуживания. В начале 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 недостижимо в силу возможностей банкомата. Для того чтобы выполнить стандарт и дать возможность пользоваться интерфейсом всем, нужно привести интерфейсные элементы к требованиям по контрастности и цветовой дифференциации.
Мы использовали специализированный софт, чтобы посмотреть на свои интерфейсы глазами людей с нарушениями восприятия цвета. Sim Daltonism (доступен только для mac). Как альтернатива — Color Oracle, он есть для любой ОС. Для теста сайтов подойдет расширение RGBlind.
Работает все просто: запускаем приложение и наводим рамку окна на тестируемый интерфейс или макет, видим, что контраст красного и зеленого пропал. Подгоняем цвета так, чтобы они были максимально различимыми в окне эмулятора, при этом оставались определимыми и соответствющийми ТКП для нормального зрения. Результат:
Для этого теста используем Color Contrast Analyzer. Можно использовать онлайн-инструменты, например, Color.review очень наглядный. Выбираем текстовые элементы и смотрим Contrast Ratio. Задача — получить максимальный контраст 5:1 и выше, что соответствует классу ААА. В окне программы он отображается как «Pass AAA». Если тест не пройден, нужно поправить размеры и цвет текста и снова повторить предыдущий шаг.
