Статьи
Accessibility – термин, который мы не знаем
Как устроен дизайн мобильных приложений для людей с ограниченными возможностями
12 сентября, 2018
avatar
Слава Тодавчич
Соучредитель и менеджер проектов в Moqod
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

Что значит accessibility дизайна мобильных приложений и сайтов? Какими возможностями обладают дизайнеры и разработчики, чтобы предоставить полноценный доступ к мобильным сервисам вне зависимости от физических возможностей пользователя?

Слава Тодавчич, соучредитель голландской компании Moqod, рассуждает о том, как следовать принципам доступности дизайна, почему это крайне важно и как благодаря mobile accessibility сделать мир немного добрее.

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

К сожалению, Украины нет в списке стран, которые приняли стандарты accessibility в консорциуме W3C. Основные принципы accessible дизайна мобильных приложений предельно просты: следовать здравому смыслу и прописным истинам дизайн-гайдлайнов. Вполне очевидно, что любой мобильный сервис является тем или иным инструментом для дальнейшего осуществления действий в реальной жизни или следует паттернам реальной жизни. Почти каждое действие в реальной жизни у человека с ограниченными возможностями занимает намного больше времени, чем у остальных. Поэтому особо важен принцип простоты, чистоты и интуитивности UI/UX дизайна.

Slider image
Slider image
Slider image

Источник изображения: www.apple.com

Чтобы убедиться в этом, можно провести простой эксперимент. Представим себе слепого человека, мечтающего найти любовь. Обычное желание большинства. Сегодня любовь часто создается в облаках AWS через мобильное приложение Tinder и тому подобные. Красивое приложение, с ярким привычным для большинства людей UI, где необходимо свайпить влево или вправо – любит-не любит. Теперь включаем режим VoiceOver и пытаемся найти её или его. Эти свайпы не работают. Напрочь отсутствуют понятные лейблы кнопок, которые мог бы прочитать VoiceOver. Продуктом практически невозможно пользоваться. А ведь сегодня тот же AWS может вполне неплохо распознать фотографию человека и дать ей понятное голосовое описание.

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

Как обстоят дела в украинских реалиях? Рассмотрим Приват24 – приложение государственного банка на сегодняшний день. В нем есть определенные зачатки accessibility. Например, VoiceOver читает все лейблы кнопок и ячеек, но динамические данные вроде суммы на счету нечитабельны. Таким образом, сделать перевод или узнать остаток на счету невозможно. Приложение не поддерживает увеличенный или жирный шрифт, поэтому может доставлять трудности пользователям с плохим зрением.

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

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

  • когнитивные;
  • визуальные;
  • слуховые;
  • нарушения моторики.

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

Главные принципы Accessibility дизайна:

  • Простота. Продукт должен быть понятен даже с закрытыми глазами. Это включает в себя базовые принципы любого хорошего дизайна – простота в навигации, быстрый старт и реакция, целостностный и предсказуемый UX.
  • Восприятие. Сделайте приоритет на четкости продукта и его UI. Будь-то контраст, размер шрифта или правильные, верно расставленные лейблы кнопок, таблиц и модальных элементов.
  • Ответственность и сопереживание. Большинству из нас, к счастью, не дано увидеть мир глазами человека с ограниченными возможностями. Поэтому мы, как дизайнеры и разработчики цифровых решений и продуктов, должны позаботиться о доступности нашей информации для максимальной аудитории.

Не забывайте тестировать приложения с функциями accessibility. Создавайте интерфейсы с учетом возможных опций accessibility: динамический размер шрифтов, VoiceOver, усиленная контрастность и т.д.

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

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

Тестирование этой функции не несет значительных затрат ресурсов: тестировщикам необходимо проверить приложение в режиме VoiceOver или Talk Back, убедиться, что все необходимые элементы воспроизводятся и правильно отмечены. Если приложение поддерживает несколько локализаций, это должно быть проверено на всех локализациях.

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

Все это не несет значительных затрат на разработку или тестирование. Для многих профессиональных команд это необходимая часть любого проекта.

В озвученных гайдах Google и Apple четко описаны детальные принципы правильного Accessibility дизайна. Основная задача дизайнеров и разработчиков – делать технологию доступной. Чем более доступна технология большему количеству людей, тем больше шансов извлечь пользу для всех нас.

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

Раньше Telegraf.design делился лайфхаками, как проверить и создать доступный дизайн.

avatar
Слава Тодавчич
Соучредитель и менеджер проектов в Moqod
Колонка

У нас есть еще кое-что для вас

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: