Инклюзивный дизайн: кому и для чего нужен?

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

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

Для кого важна цифровая доступность?

В мире около 650 млн человек с инвалидностью ― это 10% населения планеты. А в России ― свыше 11,7 млн, то есть 8% россиян. Но если вы думаете, что инклюзивный дизайн нужен только для них, то это заблуждение. Уже сегодня первым пользователям «Макинтоша» 65 лет, и они постепенно стареют. Все мы стареем. А значит, становимся теми самыми людьми с особыми потребностями. Когда сложно прочитать неразборчивый текст, расслышать звуковой сигнал, попасть пальцем в крохотную кнопку. С подобными трудностями могут столкнуться люди любого возраста. Именно поэтому нужны не отдельные версии для слабовидящих и прочее, а инклюзивный интерфейс, который учитывает потребности всех пользователей без исключения. 

Читайте также:

Дизайнер интерфейсов — кто это и чем он занимается?

В феврале 2021 года в Нидерландах провели исследование среди пользователей смартфонов. Оказывается, около половины участников ― а точнее, 43% ― используют возможности кастомизации, если они предусмотрены. Что конкретно:

• 32,6% изменяют размер текста, 20% из них увеличивают,
• 26,8% переходят на темную тему,
• 14% используют две и более настройки,
• 7% зумят,
• 6,9% делают шрифт жирным,
• 6,1% используют функцию Shake to Undo («Встряхните, чтобы отменить»)
• 4,2% воспринимают интерфейс через голос. 

А вот аналитика «Додо Пиццы»: 20% пользователей увеличивают шрифт на телефоне, при этом не обязательно все они с инвалидностью.

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

Что улучшает пользовательский опыт для всех? Например, титры. 80% пользователей Фейсбук* не любят автоматическое воспроизведение роликов со звуком. Примерно 80% просмотров видео в LinkedIn происходит с выключенным звуком. В этом руководстве можно найти не только статистику и аргументацию, но и подробные инструкции с примерами. 

Как сделать интерфейс инклюзивным?

В своем Telegram-канале «Не исключение» Валерия Курмак дает комментарии к UX-принципам, включающим когнитивную доступность:

• Консистентность

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

• Паттерны

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

• Интуитивность

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

• Избыточность

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

Возможно ли сделать универсальный дизайн, который подошел бы каждому?

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

Кто-то — с нарушением слуха от рождения, кто-то теряет слух во взрослом возрасте. А кто-то не говорит, но это связано не с глухотой, а с ДЦП, и при этом человек отлично слышит и все понимает. Незрячие используют скринридер: программу экранного доступа, которая зачитывает все, что есть на экране. А у слабовидящего другие потребности: важен визуальный интерфейс, хотя некоторые слабовидящие иногда выбирают скринридер. Все эти люди будут по-разному пользоваться приложениями, и нам важно это им обеспечить.

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

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

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

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

Случай из практики Валерии Курмак, описанный в ТГ-канале «Не исключение»:

«Разработчик мне объяснял, что нужно подписывать лейбл корзины текстом “Перейти в корзину”. Я передала ему слова незрячих людей: текст лейбла должен быть максимально коротким. И так приходится прослушивать много информации. Поэтому лучше подписать лейбл словом “Корзина”. Но даже “Перейти в корзину” — это лучше, чем совсем без подписи. Чем короче, тем лучше — мысль неочевидная, если ты не общался с незрячими.

Примерно в тот же момент ко мне пришли коллеги из знакомого фонда с вопросом: “Мы все адаптировали, причем с привлечением незрячего эксперта, а нам другие незрячие пользователи говорят, что мы все сделали неправильно”.

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

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

Например, так произошло с новым дизайном Twitter в августе 2021 года.

Что сделали:

• улучшили контраст и выравнивание;
• увеличили интервалы между текстовыми блоками.

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

Через несколько дней Twitter ответил на негативные комментарии, но старую версию не вернули, только анонсировали несущественные изменения для Windows.

Были и положительные отзывы. Но это не означает, что интерфейсом стало легче пользоваться. 

Какими примерами инклюзивного дизайна стоит вдохновляться?

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

В ТГ-канале «Не исключение» также есть подборка приложений и сайтов.

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

Приложение Яндекс Go и сайт taxi.yandex.ru начали поддерживать работу с программами экранного доступа. Теперь незрячие пользователи могут без посторонней помощи заказать такси не только по телефону, но и с компьютера или мобильного устройства.

Приложение «СберБанк Онлайн» обновляют регулярно. В проектировании интерфейсов участвуют незрячие сотрудники, которые помогают продумывать новые сценарии взаимодействия с приложением, тестируют их.

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

*Meta Platforms Inc. запрещена на территории РФ.