Что такое инклюзивный веб-дизайн и как его создать?

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

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

Рекомендации, разработанные Консорциумом Всемирной паутины (W3C), а также местными органами власти, помогли дизайнерам устранить пробелы в вопросах юзабилити и доступности. Однако даже четкое следование этим правилам не обязательно делает сайт полностью инклюзивным. 

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

Что такое инклюзивный дизайн?

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

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

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

• Физические нарушения, связанные со зрением, слухом или координацией
• Психические нарушения, влияющие на когнитивные функции или речь
• Ситуационные ограничения, которые не позволяют пользователю полноценно взаимодействовать с продуктом
• Технические ограничения, такие как оборудование, возможность подключения к Интернету и компьютерная грамотность
• Языковые и географические барьеры
• Демографические различия, такие как возраст, раса и пол
• Социально-экономические различия

Вывод: инклюзивный дизайн — это универсальный дизайн. 

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

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

Почему инклюзивный веб-дизайн важен

Существует ряд причин, по которым дизайнеры должны делать каждый свой сайт доступным и инклюзивным. Давайте сначала рассмотрим, какие негативные последствия имеет неинклюзивный дизайн:

Минусы неинклюзивности

В 2021 году некоммерческая организация WebAIM опубликовала результаты опроса пользователей скрин-ридеров. 92,3% респондентов сообщили, что им приходится использовать программы чтения с экрана из-за проблем со здоровьем. 

На вопрос о том, как они оценивают доступность Интернета сегодня, только 39,3% ответили, что он стал более доступным, чем в предыдущие годы, 42,3% — что ничего не изменилось, а 18,5% — что ситуация стала хуже.

По словам Майка Гиффорда из CivicActions, более 7,7% населения сталкиваются с недоступностью и разделяют эти чувства: 

"Сочетания физических или психических нарушений и методов, с помощью которых люди преодолевают барьеры, чрезвычайно разнообразны. С точки зрения этики, проектирование для самых уязвимых пользователей должно иметь наивысший приоритет. К сожалению, мы постоянно стремимся к новому и яркому, и поэтому регулярно сбрасываем со счетов 10-20% наших сограждан".

По данным Американской ассоциации юристов, в период с 2017 по 2020 год в федеральные суды было подано 8000 исков по Закону об американцах с ограниченными возможностями (Americans with Disabilities Act Title III). По данным Accessibility.com в 2021 году их число выросло на 14,3%.

Есть и другие люди, которые могут чувствовать себя отвергнутыми, но не имеют возможности обратиться в суд. Например, по данным World Data Lab, в мире насчитывается 1,1 миллиарда людей, не имеющих доступа к Интернету. В некоторых случаях это означает, что они не могут позволить себе мобильные тарифные планы. В других — что им доступен слишком маленький объем трафика, которого не хватает для изучения “тяжелых” сайтов.

Необходимо также учитывать пожилое население. Исследовательский центр Pew Research Center установил, что за последние годы число пожилых пользователей Интернета выросло. При этом по данным TechCrunch примерно 50% из них нуждаются в помощи, когда дело доходит до настройки и применения новых цифровых технологий. Что любопытно, 40% пожилых людей в городе Сан-Франциско (по соседству с Кремниевой долиной!) абсолютно не разбираются в компьютерах.

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

Плюсы инклюзивности

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

Инклюзивность положительно сказывается на продуктовом дизайне

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

Бренды охватывают более широкую аудиторию

Бренд, который заботится о том, чтобы все пользователи, а не только “идеальные”, получили максимально приятный опыт, привлечет более лояльную аудиторию, которая также ценит инклюзивность и равенство. 

Пользователи чувствуют себя лучше, взаимодействуя с инклюзивными веб-сайтами

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

Благодаря инклюзивному дизайну сайты лучше ранжируются в результатах поиска

Несколько лет назад Google обновил свой поисковый алгоритм, назвав четыре фактора, которые играют решающую роль в создании наилучшего опыта взаимодействия: производительность (скорость), доступность, лучшие практики (дизайн и код) и SEO (например, alt-текст). Инклюзивный дизайн вносит свой вклад в каждый из них.

Как создавать инклюзивные персоны

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

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

• Имя
• Демографические характеристики (например, возраст, пол, профессия и т.д.)
• Черты характера
• Тон
• Цели
• Мотивы
• Фрустрации
• Страхи

Инклюзивные пользовательские персоны также должны включать: 

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

Способности: Если вы изучите данные об Интернет-пользователях, вы поймете, что некоторые из них могут плохо разбираться (или совсем не разбираться) в цифровых технологиях. Отклонение от базовых структур и лейаутов, а также отсутствие достаточного контекста (например, подписей полей в контактных формах) могут негативно сказаться на опыте этих пользователей. 

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

Доступ: Многие люди имеют ограниченный доступ к Интернету или не имеют его вообще. Например, по данным ЮНЕСКО, около половины населения мира не могут выйти в сеть из дома. Это не означает, что у них вообще нет возможности зайти в Интернет, просто им приходится искать другие способы получения доступа — например, ходить в библиотеку или интернет-кафе. Таким образом, на доступ могут влиять соединение, оборудование, программное обеспечение и даже местоположение. 

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

7 принципов инклюзивного дизайна

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

1. Гибкость

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

Например, хорошая идея — разместить под видео его расшифровку (транскрипт). Таким образом, пользователи, у которых нет возможности или желания слушать / смотреть ролик, смогут прочитать текст. 

2. Простота

Минимализм — долгое время не теряющий своей актуальности дизайн-тренд, и не зря. Дело не только в том, что такой дизайн смотрится привлекательно, но и в том, что минимализм и простота позволяют создавать интуитивно понятные интерфейсы.

Лучший подход — рассматривать сайт как минимальный жизнеспособный продукт (MVP). Спроектируйте основные функции, которые сделают его полезным и ценным для аудитории. Затем добавляйте дополнительные элементы, но только там, где они действительно необходимы и могут положительно сказаться на опыте всех пользователей. 

3. Последовательность

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

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

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

4. Восприятие

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

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

5. Равенство

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

Здесь на помощь нам приходит UX-дизайн. Когда дизайнер получает информацию о целях пользователей и о том, что им нужно для их выполнения, из первых рук, это помогает проектировать эффективные взаимодействия и пользовательские пути для всех и каждого.

Например, рассмотрим такой UI-компонент, как слайдер. Чтобы сделать его инклюзивным, необходимо отключить функцию автоматической смены слайдов. Затем нужно добавить возможность управления для пользователей как компьютеров, так и мобильных устройств (свайпы и клики), чтобы каждый пользователь мог управлять процессом и регулировать его скорость.

6. Предотвращение

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

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

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

7. Комфорт

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

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

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

Заключение

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

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

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