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

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

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

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

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

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

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

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

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

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

По международному стандарту WCAG (Web Content Accessibility Guidelines) минимальный уровень контрастности основного цвета и фона в интерфейсах для незрячих — 4,5:1. Контраст цвета шрифта — 3:1. Чтобы это проверить, можно использовать сервисы Webaim или 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 8 есть специальный «Accessibility Inspector», который проверяет все элементы интерфейса и указывает на проблемы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#дизайн