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

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

Примером из реального мира могут стать часы 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. Все равно его никто не оценит, если он не прогрузится вовремя.