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

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

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

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

«Универсальный дизайн» — концепт, придуманный американским архитектором Рональдом Л. Мейсом. Он выделил 7 принципов «универсального дизайна», которые описывают, как создать хорошие условия для людей разного возраста и способностей. Он верил, что простой доступ к зданиям и свобода движения сделают жизнь проще для всех. Селвин Голдсмит переформулировал цитату Мейса в своей книге «Проектирование для инвалидов». Он придумал концепт «свободного дизайна». Затем эти термины стали известны как «инклюзивный» и «доступный дизайн». Так чем они отличаются?

Начнём с простого объяснения.
«Доступный дизайн» — это простое, прямое и быстрое взаимодействие между пользователем и интерфейсом, созданное для людей с ограниченными возможностями. Такой подход — часть инклюзивной дизайн-стратегии.

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

Теперь, когда мы уточнили важные термины, можем обратиться к моему исследованию. Зачем всё это? Я не хотела снова переписывать теорию и убеждать вас, как важно помнить про каждого пользователя с его индивидуальностью и приводить примеры, какими должны быть шрифт и текст. Я считаю, что важно на примере разговора с реальными пользователями показать боли и подчеркнуть важные факты для построения действительно удобного интерфейса. Особенно это важно, когда стремишься регулярно улучшать пользовательский опыт и восприятие бренда. И каждое глубокое интервью с пользователем даёт «яркие поинты» для усиления инклюзивности.

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

Герой №1 Оксана М.

Оксана работает в главном офисе одного известного банка и занимается адаптацией офлайн-сервисов для людей с ограниченными возможностями.

Гаджетами (мобильным телефоном и компьютером) она пользуется с помощью программ экранного доступа — скринридеров. Эти программы преобразуют текст на экране в речь. Они позволяют Оксане взаимодействовать с элементами интерфейса, читать тексты, выполнять действия. При нажатии на клавишу, скринридер с помощью синтезатора речи проговаривает букву или знак, которую нажал пользователь. Также скринридер получает информацию, когда пользователь, к примеру, перешёл на другую страницу, и оповещает, что есть на этой странице. Можно навигировать, читать, взаимодействовать с интерфейсом

— Какими приложениями и сайтами вы пользуетесь каждый день?
Из приложений и сайтов я часто пользуюсь мобильным приложением на iOS для доставки полезной еды, поисковыми сервисами, мессенджерами, социальными сетями, заказом такси, слушаю аудиокниги и музыку по подпискам, работаю с офисными приложениями по редактированию документов, просматриваю почту в мобильном клиенте, заказываю косметику в бьюти-маркете. И, конечно же, банковские приложения. Примечание: Оксана использует Windows, начала осваивать Mac и всегда использует iPhone. 

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

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

— Что не нравится?
Новый тренд, когда сторис невозможно прочитать, потому что это картинки. Есть прекрасный пример у одного из банков, где сторисы идут текстом и их возможно прочесть ридером.
Некомфортно, когда элементы не имеют лейблов, то есть не подписаны. В таком случае скринридер может прочитать: «кнопка» или «ссылка». Тогда мне, как пользователю, приходится гадать, что это за кнопка, и что случится, если я на неё нажму. 

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

— Есть ещё пожелания?
Закладывайте доступность на этапе создания прототипа. Потому что позже, когда уже всё сделано, внедрять такие решения дороже и сложнее.

Используйте руководства по доступности. Причём и нормативы, и те, которые можно получить от экспертов, так будет гораздо проще.Учитесь, коллаборируйтесь со специалистами других компаний.Используйте автотестирование. Специальные инструменты помогут найти мелкие ошибочные решения (неправильная вёрстка, огромные буквы на маленьких разрешениях) уже на начальном этапе.

Взаимодействуйте с целевой аудиторией: можно привлекать фокус-группы либо нанять каких-то специалистов на full-time или part-time.

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

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

Герой №2 Алёна К.

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

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

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

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

— Что вам нравится, а что доставляет неудобство, и из-за этого вы меньше времени находитесь на этом сайте/приложении?
Не всегда приложения хорошо продуманы с точки зрения доступности. Но мне приятнее пользоваться такими, где все продумано. Проще и быстрее найти нужные кнопки для разных действий, читать одну страницу продукта, без рекламы и чего-либо лишнего, главное, чтобы в верхнем углу экрана была кнопка «назад» для возвращения на прошлую страницу. Неудобство доставляют те приложения, в которых кнопки не подписаны или вообще — отсутствуют (например, часто используют кнопки без обводок, приложение не может считать кнопку и произносить её как текст) и где есть много рекламы.

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

— Как вы обычно пользуетесь такими приложениями, куда смотрите, как ведёте себя при поиске в этом приложении, как скроллите (ваш пользовательский путь/опыт)?Если речь идёт об онлайн-магазинах, то смотрю каталог, читаю состав, описание и отзывы, добавляю в корзину понравившийся товар. Этот процесс везде одинаковый. В соцсетях листаю ленту новостей, переписываюсь с людьми, выкладываю посты в свой блог, смотрю количество лайков и просмотров, читаю комментарии. В других приложениях выполняю только дела: например, оплачиваю счета ЖКХ, записываюсь к врачу, вызываю такси и так далее. Радует, что государственные приложения сейчас обладают инклюзивным интерфейсом — у многих хорошо продуман интерфейс для людей с ограниченными возможностями, поэтому сложностей использовать такие приложения нет.

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

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

Итого
Алёна мечтала бы использовать мобильное приложение с меньшим количеством ненужной информации в виде баннеров, которые можно было бы спутать с карточкой товара, поскольку такого рода «шум» мешает совершать ключевые действия. Особо важно, чтобы в интерфейсе присутствовала кнопка «назад», иначе такой пользователь может потеряться в интерфейсе. Важно, чтобы пуш-уведомления не пестрили смайлами, и VoiceOver мог чётко и ясно уведомлять про статусы заказа и рекламные предложения.

Герой №3 Алексей Т.

Наш следующий интервьюируемый — Алексей. Он получил инвалидность в 18 лет. У Алексея в разной степени ампутированы обе руки. Он пользуется протезами: при этом максимально активный только левый протез, правым протезом он может пользоваться намного меньше — при работе с мобильными устройствами. Алексею совсем неудобно пользоваться в обычной жизни кнопками (печатать), мышкой на ноутбуке он управляет правой ногой, а левым протезом он может работать только одним пальцем.

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

— Что вам нравится, и что доставляет неудобство, и из-за этого вы меньше времени находитесь на этом сайте/приложении?
Из-за специфики инвалидности мне не очень удобно нажимать на мелкие клавиши. Например, в онлайн-магазине перелистывается страница с товарами: 1, 2, 3, 4, 5. Долгое перелистывание сильно раздражает и утомляет. И, наверное, это мой ответ на вопрос, что заставляет быстрее оттуда уходить.

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

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

— Как вы обычно пользуетесь приложениями? Куда смотрите, как ведёте себя при поиске в этом приложении, как скроллите (ваш пользовательский путь/опыт)?
Я бы описал свой пользовательский путь так.
Я понимаю, что я хочу приобрести, например, компьютерную мышь или наушники. Ввожу в поисковик уже на маркетплейсе конкретное название техники, смотрю, сколько это стоит, сравниваю с другими маркетплейсами. В идеале: если бы это можно было бы вводить с помощью голоса. Далее понимаю, где сколько начисляется бонусов, какие скидки, исходя из персональных карт того или иного сервиса (баллы, бонусы, скидки). И, в зависимости от этого, покупаю. Иногда сравниваю с теми товарами, которые рекламирует сам маркетплейс как похожие или аналогичные. Иногда покупаю их тоже, если там есть большие бонусы или снижены цены.

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

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

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

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

Решение по инклюзивности у популярных сайтов и приложений

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

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

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

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

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

Заключение

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

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

Полезные ссылки

· Как работает скринридер
https://thewikihow.com/video_MEp9DtiTw3s

· Как использовать специальную клавиатуру Брайля на телефоне https://dtf.ru/mobile/179693-video-kak-slepye-lyudi-polzuyutsya-iphone?from=rss

· Доступность в интерфейсах (интересный сайт, который даже визуально помогает понять, что простой интерфейс — это круто)
https://doka.guide/a11y/