Beata Sakcharova
1 463
Блоги

Десять советов по созданию приложения для тех, кто не видит

Компания-разработчик мобильных приложений MobileUp — о том, как делать интерфейсы приложений для слабовидящих и незрячих на примере кейса «Искусство.Вслух».

Поделиться

В избранное

В избранном

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

Михаил Корнеев
координатор проекта «ВОС-фильм»

Согласно опросу «Яндекса», 66,5% людей с нарушением зрения активно пользуются смартфонами. Каким должен быть интерфейс приложения для людей, которые не отчётливо видят экран? Как они поймут, куда нажимать? Разберём эту тему на примере приложения «Искусство.Вслух», которое помогает слабовидящим наслаждаться театром.

На фестивале «Золотая маска» в 2017 году «Сбербанк» и «Всероссийское Общество Слепых» (ВОС) представили первое в России приложение для прослушивания тифлокомментариев к театральным постановкам.

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

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

Чем меньше действий, тем лучше

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

Чтобы связать тифлокомментарии со спектаклями, мы проанализировали несколько технических решений и выбрали то, которое требовало минимум усилий от пользователей.

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

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

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

Ильяс Гайфуллин
дизайнер интерфейсов MobileUp

Контраст is the king

По международному стандарту WCAG (Web Content Accessibility Guidelines) минимальный уровень контрастности основного цвета и фона в интерфейсах для незрячих — 4,5:1. Контраст цвета шрифта — 3:1. Чтобы это проверить, можно использовать сервисы Webaim или Leaverou.

Интерфейс сервиса Leaverou

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

Михаил Корнеев
координатор проекта «ВОС-фильм»

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

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

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

Размер имеет значение

Гайдлайн Google Material Design в интерфейсах для слабовидящих рекомендует использовать шрифты не меньше 14 pt жирный и от 18 pt обычный.

Чтобы пользователь мог менять размер шрифта через системные настройки смартфона, Android-разработчики используют в коде единицу измерения SP («scalable point» – масштабируемый пункт). Например: android:textSize="26sp". Если у пользователя уже настроен увеличенный шрифт в телефоне, то и в приложении он увеличится.

Но если разработчик использует DP («device-independent pixels» — независящие от устройства пиксели), то в приложении шрифт останется фиксированным, несмотря на настройки пользователя.

В iOS-приложении разработчик должен заменить системный стиль шрифта в Xcode на TITLE 1, HEADLINE или BODY. Тогда размер будет меняться пропорционально.

Настройки шрифта в Xcode. По умолчанию выбрано «System»

Ещё в Xcode 8 есть специальный «Accessibility Inspector», который проверяет все элементы интерфейса и указывает на проблемы.

Сделайте максимальный шрифт и дайте возможность менять его в настройках смартфона или самого приложения.

Незамысловатые изображения

Декоративные элементы и иллюстрации не обязаны соответствовать требованиям к контрастности. Их главная задача — быть простыми, понятными и различимыми. Сложная анимация тоже не нужна, её не оценят.

Изображение велосипеда слева не соответствует требованиям контрастности, но простое и понятное, в отличие от правой картинки

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

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

Никакой «воды» в тексте

Все тексты должны быть краткими, понятными и полезными. Чтобы ориентироваться в приложении, незрячие пользователи прослушивают всю информацию на экране с помощью программ экранного доступа: TalkBack для Android и VoiceOver для iOS.

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

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

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

Описание для каждой кнопки и иконки

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

Гайдлайн Google также подсказывает, что подписи к иконкам должны указывать на их действия, а не на характеристики. Как в примере: «Редактировать», а не «Карандаш».

Слева описание указывает на действие, которое совершает иконка. Справа описание говорит о том, как выглядит иконка, а не о том, что она делает

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

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

Иерархия в интерфейсе

Синтезатор речи в программе экранного доступа последовательно озвучивают информацию с экрана, которую нужно логично преподнести.

Изначально кнопка «Слушать» в приложении «Искусство.Вслух» должна была находиться над описанием спектакля, но после тестирования с голосовым сопровождением мы поняли, что логичнее сначала рассказать о спектакле, а потом предложить послушать его.

Никаких лишних звуков

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

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

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

В приоритете Android

По данным опроса «Яндекса» 77,9% слабовидящих — пользователи Android.

Приложение «Искусство.Вслух» доступно на обеих платформах. Но заказчики говорят, что большая часть аудитории приложения использует Android.

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

Тестирование не глядя

Чтобы понять пользователя, нужно действовать, как он. Тестируйте приложение, не глядя в экран или с закрытыми глазами, чтобы выявить все проблемы, которые могут возникнуть у незрячих. Протестируйте все сценарии от начала до конца с TalkBack и VoiceOver. Попробуйте функцию «Explore by Touch» в TalkBack (воспроизведение по тапу), измените скорость, с которой текст воспроизводится.

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

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

Михаил Корнеев
координатор проекта «ВОС-фильм»

Облегчите людям жизнь

Apple и Google предоставили всё необходимое, чтобы создавать приложения для людей с нарушениями зрения. Благодаря программам экранного доступа VoiceOver и TalkBack они воспринимают информацию с экрана, даже не глядя в него.

Но в App Store и Google Play всё ещё очень мало таких приложений. По данным Всемирной Организации Здравоохранения за 2017 год, в мире около 285 млн человек страдают от нарушений зрения. 39 млн из них поражены слепотой, 246 млн имеют пониженное зрение. Жизнь этих людей может стать немного приятнее, если будет больше приложений, которые помогают им познавать мир.

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

Евгений Денисов
руководитель проектов MobileUp

#дизайн

{ "author_name": "Beata Sakcharova", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 3, "likes": 34, "favorites": 8, "is_advertisement": false, "section_name": "blog", "id": "30539", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } } ]