DIY: как мы разрабатывали мобильное приложение для людей с ограниченными возможностями

Анастасия Егорина, UI/UX дизайнер в Rosberry, написала для нас о том, как студия разрабатывала приложение для людей с ограниченными возможностями.

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

В прошлом году наша студия получила приглашение на разработку мобильного приложения под платформу iOS для людей с ограниченными возможностями здоровья. Инициатором проекта выступила экспертная группа Центра изучения домашнего пространства, действующего на базе факультета архитектурного дизайна Университета Нового Южного Уэльса (Австралия). Конечный заказчик — Министерство семей, жилищного строительства, государственной службы и по делам коренного населения Австралии, в компетенцию которого входит в том числе работа по улучшению условий жизни граждан с ограниченными возможностями.

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

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

1. Читаемый текст

Так как наши пользователи ограничены в способности воспринимать фото- и видеоконтент, логичным решением стало представление большей части информации (порядка 80%) в текстовом формате.

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

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

• Кроме того, при выборе шрифта важно учитывать особенности восприятия отдельных букв со сложной структурой: a, e, o, u. Глиф данных букв в шрифте должен быть максимально простым и однозначно воспринимаемым. Наш выбор пал на Roboto, поскольку его шрифтовая гарнитура обладает чистыми геометрическими формами, обеспечивающими легкое восприятие информации.

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

Пример восприятия шрифтов Roboto и San Francisco людьми с различными расстройствами зрения

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

Для облегчения восприятия приложения пользователем рекомендуется повысить контрастность интерфейса. Согласно Web Content Accessibility Guidelines (WCAG) 2.0 цвет переднего плана и фона должен быть достаточно контрастным при просмотре на черно-белом экране, а также людьми с ограниченным цветовым восприятием.

Коэффициент контрастности должен быть не менее 4.5:1 (максимальная контрастность 21:1 — черно-белое изображение). Для проверки приложения на соответствие этим требованиям мы воспользовались следующими инструментами:

1. Snook.ca  — онлайн-инструмент для проверки контрастности (https://snook.ca)
2. Stark  — плагин для Sketch с аналогичной функцией (http://www.getstark.co)

Вот как мы это делали. Плагин показывает допустимые нормы в соответствии с WCAG 2.0.

С помощью плагина Stark мы проверили свои экраны на 8 типах дальтонизма:

А так же проверили контрастность в соответствии со стандартами WCAG 2.0:

• Кроме того, в iOS предусмотрена функция Display Accommodations, которая позволяет инвертировать цвета, понижать баланс белого, отображать только оттенки серого и использовать цветные фильтры, чтобы облегчить восприятие дисплея людям с различными формами дальтонизма и другими нарушениями зрения. Благодаря требованиям, описанным выше, данная функция отлично взаимодействует с приложением.

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

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

2. Простая структура

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

• Сделали экраны в виде одномерного списка, который позволяет функциям VoiceOver и Speak Screen (аналог VoiceOver) с легкостью взаимодействовать с интерфейсом;
• Отказались от использования скролла, поскольку он затрудняет доступ к информации, скрывая не попавшую на экран часть информации. Вместо скролла мы решили использовать деление интерфейса на экраны. Таким образом, VoiceOver, прочитав информацию на экране, предлагает перейти либо на следующий экран, либо в меню. При этом информация, содержащаяся на одном экране, является законченной.

Кроме того, мы использовали функцию Larger Text, которая позволяет масштабировать шрифт без ущерба для дизайна.

• Кнопки в приложении мы сделали большими, чтобы по ним было легко попасть, что особо актуально для пользователей с нарушениями моторики. В совокупности с функцией Assistive Touch, с помощью которой можно настроить реакцию дисплея на прикосновения, большие кнопки делают приложение еще более доступным. Для того, чтобы пользователь мог безопасно нацелить кнопки на ощупь, мы следовали следующим правилам: кнопки должны быть по меньшей мере 9 мм в высоту и ширину и должны быть окружены небольшим количеством неактивного пространства.

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

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

3. Заключение

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

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

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