Что такое инклюзивный дизайн и зачем он нужен

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

Инклюзивный дизайн: почему это важно

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

Что учитывает такой дизайн:

• особенности зрительного восприятия;
• ограничения двигательной функции;
• потерю слуха;
• другие особенности, включая эпилепсию.

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

Barclays Diverse Personas — справочник, в котором содержится основная информация по разработке интерфейсов с учетом особенностей разных людей.

Инклюзивный дизайн: 5 основных принципов

На что ориентироваться, чтобы создать дизайн, который поможет решить дополнительные задачи:

• Универсальная доступность. Это касается как контента и функциональности, так и самой доступности продукта для всех желающих. Так, сайт должен открываться на любых удобных для пользователя устройствах. 

• Гибкость. У пользователя должна быть возможность выбирать, как взаимодействовать с сайтом. Изменить размер шрифта, отрегулировать контрастность, применить голосовой ввод и так далее.

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

• Возможность допустить ошибку. Это значит, что пользователь должен иметь возможность вернуться на этап назад без потери прогресса, а также внести изменения в данные на любом этапе заполнения форм.

• Тестирование. Это обязательный этап при разработке любого дизайна, однако в вопросе инклюзивности особенно важно предоставить доступ группе людей, которые смогут протестировать дополнительный функционал и его удобство.

Инклюзивный дизайн: стандарты разработки

Чтобы упростить создание дизайна такого типа, можно ориентироваться на рекомендации:

• WCAG (Web Content Accessibility Guidelines). Это стандарты международного характера, которые касаются разработки сайтов, одинаково доступных для всех пользователей.

• Inclusive Design Patterns. Полное руководство по разработке инклюзивных интерфейсов.

• WebAIM (Web Accessibility In Mind). Международная организация, которая оказывает помощь в разработке инклюзивных продуктов.

• Barclays Diverse Personas. Справочник, в котором собраны данные по разработке и внедрению инструментов инклюзивности.

Подробное руководство на сайте WCAG полезно как дизайнерам, так и программистам:

В качестве инструментов для проверки ресурса на соответствие базовым требованиям можно использовать:

• WAVE. Специальный онлайн инструмент для проверки страниц на доступность.

• Axe. Браузерное расширение, выполняющее те же функции.

• Color Contrast Check. Поможет проверить, насколько правильно вы настроили контрастность текста и фона.

• Contrast и Color Contrast Checker от Figma. Инструмент помогает убедиться, что вы подобрали комфортную цветовую гамму и правильно настроили контрастность.

Для создания инклюзивного дизайна особенно важно подробное изучение целевой аудитории и сегментирование полученных данных. Люди с дополнительными потребностями могут быть представлены в любой социальной группе.

Инклюзивный дизайн: примеры решений

Учесть особенности всех пользователей, которые будут взаимодействовать с сайтом, невозможно. Но улучшить их опыт можно при помощи простых инструментов.

• Контраст. Проблемы со зрением встречаются у пользователей чаще всего. Особенно важно, чтобы текст был читабельным. Для этого рекомендуется ориентироваться на стандарт WCAG 4,5:1 и выше. Требования актуальны для текстового контента. Важные иконки и кнопки должны иметь контраст по отношению к фону не менее 3:1. 

ВТБ — хороший пример комфортной контрастности, а еще здесь можно переключить тему со светлой на темную, что также считается инклюзивным элементом.

• Размер шрифта. Рекомендуется ориентироваться на размер не менее 16 пикселей для обычного текста. Для улучшения опыта пользователей с трудностями при восприятии текста можно реализовать возможность увеличивать или уменьшать масштаб страницы при помощи сочетания клавиш. Адаптивная верстка избавит от необходимости скроллить страницу.

• Подсказки в дополнение к выделению цветом. У пользователей могут быть проблемы с восприятием цвета, поэтому при заполнении форм важно не только выделять красным строку, которая заполнена неправильно, но и давать рекомендации, что именно и где необходимо исправить.

• Скринридер. Это дополнение позволяет прочитать текст на экране.

• Навигация с клавиатуры. Такой возможностью часто пользуются не только люди с дополнительными потребностями, но и владельцы ноутбуков, у которых нет возможности пользоваться мышкой или тачпадом. 

• Увеличение кликабельных элементов и расстояний между ними. Пользователям, у которых есть нарушения двигательной функции, может быть трудно точно попасть в маленькую кнопку. Поэтому важно сделать так, чтобы кликабельными были не только кнопки, но и пространство между ними. Это упростит совершение целевого действия для разных групп людей.

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

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

Специалисты DarvinDigital помогут решить сложные задачи и разработать удобный инклюзивный дизайн для любого проекта. Просто позвоните или оформите заявку. На бесплатной консультации мы не будем продвигать свои услуги: только ответим на ваши вопросы и поможем найти решение.