Инклюзивный дизайн — универсальный дизайн, которым могут пользоваться буквально все. Молодой или старый, с хорошим зрением или плохим, с занятыми руками или вобще без рук. Это дизайн не для людей с ограниченными возможностями, а созданный так, что любой человек, вне зависимости от статуса здоровья, положения, ситуации может им пользоваться.
Инклюзивный дизайн работает не на конкретного гипотетического пользователя, а на широкий круг людей. Если дизайн создается исключительно для человека с некой конкретной потребностью и им не могут пользоваться другие люди — это уже не инклюзивный дизайн, а вспомогательный.
Примером из реального мира могут стать часы Dot Watch для показа времени с помощью шрифта Браиля. Их могут использовать, только люди, которые знают шрифт Браиля. Это отсекает остальных людей, что делает дизайн часов не инклюзивным, а исключительно направленным на потребности конкретной группы людей.
Еще один пример — деньги. Купюры довольно не инклюзивная вещь относительно незрячих людей. Даже размещение опознавательных полосочек, точечек и других спецсимволов не всегда может помогать слабовидящим все же распознать номинал купюры.
Какие бывают виды ограничений возможностей пользователей?
Создавая дизайн в реальной или цифровой среде, дизайнер в самом начале исследования получает от отдела маркетинга или составляет сам потрет среднего потребителя (пользовательский потрет). Чаще всего — это собирательный портрет из среднестатистических пользователей и клиентов компании, подогнанный под одну гребенку и не учитывающий меньшинства, страдающего от ограничений и неудобств и не учитывающий разные ситуационные проблемы. Результат работы с таким портретом получается соответствующим.
Инклюзивный дизай, в идеале, должен учитывать потребности людей с постоянными, временными или ситуационными ограничениями возможностей.
Постоянные ограничения — некие нарушения здоровья, которые мешают выполнять действия также, как это делают здоровые люди
Временные ограничения — незначительные нарушения, при которых человек на некоторое время ограничен в своих возможностях, например, он пережил операцию и у него временно обездвижена рука. Он выздоровеет через некоторое время, но на данный момент его возможности ограничены.
Ситуационные ограничения — ограничения связанные с конкретной ситуацией или окружающей средой в которой находится пользователь.
Используя понимание о ситуационных, временных и постоянных ограничениях дееспособности можно продумывать новые сценарии использования, учитывая особенности, что человек у которого сломана рука будет использовать ваш дизайн также, как человек у которого нет руки.
Откуда ноги растут?
Впервые термин «универсального дизайна» ввел американский архитектор Рональд Л. Мейс. Он его рассматривал с точки зрения архитектуры и верил что удобный подъезд и доступ к заданиям для инвалидов, будет в той же степени комфортен и здоровым людям. Он был прав. Лестница в парадном становится препятствием не только для инвалидов, но и, например, для молодых мам с колясками.
Его теории прошли если несколько переформулировок другими специалистами и сегодня легли в термин «инклюзивный дизайн».
В цифровой среде, инклюзивный дизайн создается в соответствии с принципами, описанными в документах W3C (Консорциума всемирной паутины), а именно по руководству по обеспечению доступности Web-контента (WCAG) 2.0. Этот документ был создан в 1999 году, но прошел также сотни пересмотров и редакций дизайнерами и разработчиками.
В документе описаны 12 шагов, объединенных 4 принципами:
- Вопринимаемость
- Оперативность
- Понятность
- Надежность
Каждый принцип подтверждается оценкой A, AA, AAA, отражающей степень выполнения стандарта. WCAG в мире используется разработчиками, веб-дизайнерами, тестировщиками, менеджерами проектов и аналитиками для оценки веб-продуктов.
По-правильному, эти принципы реализуются под наблюдением эксперта и проверяются путем обратной связи с аудиторией, но на практике дизайнеры и архитекторы берут ответственность на себя. Особенно в реалиях русскоязычных стран, где про эти правилах только слышали, но никому особо нет дела.
Как сделать дизайн цифрового продукта инклюзивным?
Нужно запомнить, что создание инклюзивного дизайна в первую очередь — это устранение всех возможных трудностей в работе с интерфейсом.
Предварительно необходимо понять какие отдельные элементы восприятия дизайна будут действовать на пользователя в различных ситуациях. Это могут быть:
Визуал — формы, цвета, шрифты, графика
Звуки — громкость звука, мелодии которые он производит и ситуации в которых эти звуки будут воспроизводиться
Рефлексия — сколько времени нужно будет пользователю провести на вашем сайте.
Движения — какие движения пользователю необходимо выполнить для взаимодействия с вашим сайтом/приложением
Переходим к сути:
— Разрешение экрана
Разработка дизайна, обычно проводится на качественной рабочей станции с огромным монитором и супер разрешением. На нем отлично настроена контрастность цветов и великолепно все вмещается. Как только дизайн внедряется в реальный проект, все становится иначе. Оказывается, что у среднестатистического пользователя разрешение монитора не превышает 1366*768, а телефона 360*640, экран не ретина, да и после восьми вечера настроено включение ночного режима и вся картинка становится желтой. Все красоты при этом становятся не такими красивыми, все крупные кнопки, не такими уже и крупными, а мелкие тексты серым шрифтом даже здоровый человек не прочитает.
Вывод: помните что человек смотрит на ваш дизайн в свой монитор, а не в ваш.
— Начните с мобильного
Это очевидно как угол дома. Нет потребности даже говорить сегодня про адаптивность сайта. Делайте дизайн с учетом самого маленького устройства и переходите к крупному. Проверяйте, что вся важная информация вместилась.
— Следите за контрастностью
Вам может очень классно выглядеть серый текст под серой формой, но что делать пользователю с вашей красотой если ее просто не видно с экрана мобильного устройства в яркий солнечный день.
Проследить за контрастностью текста можно с помощью онлайн инструментов, например https://colourcontrast.cc/
Оптимальным считается соотношение 4,5:1 , но 21:1 (черный на белом) — идеальный абсолют.
— Следите за цветовой палитрой
С цветами самого дизайна чуть более сложно. Если в продукте используются разные цвета рядом с друг другом, для человека с нормальным зрением это может быть и красиво. А вот для человека с нарушением цветового восприятия все эти цвета могут слиться в единую уродливую палитру.
Для проверки восприятия цветов также лучше пользоваться симуляторами цветового восприятия: https://www.color-blindness.com/coblis-color-blindness-simulator/
Для инклюзивного дизайна, цвет вобще не должен быть ведущим параметром, а лишь вспомогательным. Например, если поле с ошибкой ввода подсвечивается красным, то это условие недостаточно для человека с нарушением цветового восприятия и просто необходимо добавить дополнительные обозначения и сообщения, что произошла ошибка.
— Следите за читаемостью текста
В понятие читаемость заложено не только грамотная структура, наличие заголовков, разделов и достаточно крупный и читабельный шрифт, но и читаемость самого текста и его понятность.
Для этого можно также использовать сервисы для проверки текста на «воду» и сложноподчиненные предложения, например: https://glvrd.ru/
Важно разговаривать с пользователем на том языке, на котором он вас поймет без сложностей.
— Адаптируйте продукт под вспомогательные технологии.
Инклюзивность проявляется в универсальности, без дискриминации здоровых или не очень людей. Поэтому не помешает адаптировать интерфейсы цифровых продуктов под вспомогательные технологии. Например, возможности распознавания экрана и чтения контента вашего продукта вслух. Озвучивание элементов интерфейса очень полезная функция для слабовидящих. Также можно добавить возможность перемещения между элементами продукта с помощью только клавиатуры.
Для всего этого необходимо немного больше вложить в работу над продуктом и соблюсти правила разметки сайта на заголовки. подзаголовки и смысловые блоки.
— Проверьте медиафайлы на доступность
Все картинки и анимации должны быть четкими и крупными. Не должно быть автовоспроизведения медиафайлов. Все картинки желательно подписывать и размещать alt тексты для поисковых машин.
Лучше избегать мерцающих гифок, автоскроллящихся галерей. Это привлекает внимание, но может кому-то навредить, вызвав раздражение вестибулярного аппарата или эпилепсию.
— Оптимизируйте загрузку под скорость интернета
Если ваш продукт люди будут использовать на улице с плохим интернетом, нет смысла перегружать страницу огромным количеством информации и великолепной графикой. Необходимо обеспечивать вес страниц продукта соответствующий ситуациям в которых его открывают.
Оптимизируйте продукты в соответствие с Google speed Test, например. Сокращайте CSS и удаляйте ненужный JavaScript. Все равно его никто не оценит, если он не прогрузится вовремя.
