Как проектировать цифровые продукты для людей с инвалидностью

На встрече выступили Валерия Курмак, UX-специалист, аccessibility эксперт, ведущий аналитик пользовательского взаимодействия в Сбербанк-Технологии, и Николай Кочубеев, руководитель проектов студии No Logo.

22 августа 2017 года при поддержке Impact Hub Moscow состоялся митап Теплицы социальных технологий «Проектирование digital-продуктов». Участники познакомились с принципами проектирования сервисов для людей с инвалидностью и основами проведения UX исследований.

На встрече выступили Валерия Курмак, UX-специалист, аccessibility эксперт, ведущий аналитик пользовательского взаимодействия в Сбербанк-Технологии, и Николай Кочубеев, руководитель проектов студии No Logo.

Валерия Курмак. Фото: Мария Борисёнок.
Валерия Курмак. Фото: Мария Борисёнок.

UI (от англ. user interface) – интерфейс, который позволяет человеку взаимодействовать с программой.

UX (от англ. User eXperience, UX) – это восприятие и ответные действия пользователя, которые возникают в результате использования продукции, системы или услуги.

«Исследуя пользовательский опыт (UX), можно улучшить, а то и вовсе создать новый продукт. Например, недавно вышедший в iTunes трек, состоящий из 10 минут тишины, вошел в топ-30, поскольку решает насущную проблему пользователей iPhone.Тысячи людей готовы платить деньги, чтобы избежать прослушивания первой песни из своего плейлиста». Валерия Курмак

Исследование Сбербанка про людей с особыми потребностями

По данным Федеральной службы государственной статистики, на 1 января 2016 года в России насчитывается 12,7 миллиона инвалидов и 40 миллионов маломобильных граждан.

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

  • людей с ментальными или психическими нарушениями;
  • людей с нарушением опорно-двигательного аппарата;
  • людей с нарушением слуха;
  • людей с нарушением зрения;
  • людей с одновременным нарушением слуха и зрения.

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

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

Слайд из презентации исследования Сбербанка.
Слайд из презентации исследования Сбербанка.

Как люди с инвалидностью пользуются компьютером?

Валерия Курмак рассказала про основные принципы создания интерфейса для людей с разными нарушениями.

  • Незрячие люди пользуются цифровыми продуктами с помощью голосового интерфейса и клавиатуры с шрифтом Брайля. Для них на сайте должна быть правильно выполненная html-верстка. Это позволяет удобно ориентироваться на сайте, воспринимать и управлять контентом.
  • Важно, чтобы все нетекстовые элементы (например, картинки или иконки «Поиск) были подписаны.
  • Если на сайте приведена таблица, которая не сделана в табличной форме, то человек не сможет ее прочитать.
  • Текст ссылки должен давать четкое понимание, куда попадет человек при нажатии. Не стоит называть ее «здесь» или «читайте тут».
  • Капча полностью блокирует сценарий пути для незрячего человека. Капча – компьютерный тест, используемый для того, чтобы определить, кем является пользователь системы: человеком или компьютером.
  • Адаптивная верстка сайта позволяет пользователю настроить такой размер контента, который удобен именно для него. Кроме того, адаптивная верстка подстраивает контент вашего сайта под любое мобильное устройство.

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

Участники митапа. Фото: Мария Борисёнок.
Участники митапа. Фото: Мария Борисёнок.

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

  • Используйте инструменты проверки контрастности (например, Colour Contrast Analyser).
  • Для выделения важной информации, не используйте только цвет. Используйте также значки, иконки.
  • Для людей с нарушением слуха важно использовать субтитры в медиаконтенте.
  • Для людей с нарушением опорно-двигательного аппарата важно предоставить возможность управлять всем сайтом с помощью клавиатуры, без использования мыши.
  • В мобильных приложениях элемент нажатия должен быть достаточным, чтобы его можно было нажать.
  • Для людей с ментальными нарушениями важны конкретные понятные и простые инструкции

Исследование Сбербанка. 

Презентация Валерии Курмак.

Николай Кочубеев, руководитель проектов студии No Logo, рассказал о процессе создания сайта сервиса сопровождения людей с ограниченными возможностями здоровья «IntraLife» и посоветовал, какие инструменты в работе использует UX-специалист.

Принципы разработки

Николай привел основные правила разработки продуктов, которых придерживаются современные студии:

  • адаптивный дизайн и создание мобильной версии сервиса;
  • визуализация и анимация всех элементов интерфейсов;
  • разработка в соответствии со стандартами material design;
  • разработка в соответствии с прототипом и концептом;
  • приоритет на разработку уникальной графики;
  • соблюдение авторских прав;
  • возможность кастомизации. Пользователь должен иметь возможность адаптировать финальный продукт под себя.
Николай Кочубеев. Фото: Мария Борисёнок.
Николай Кочубеев. Фото: Мария Борисёнок.

Основные UX-понятия

  • Вайрфрейм – это образ дизайна низкой точности, который показывает: основную группу контента (что?), структуру информации (где?), описание и базовую визуализацию взаимодействия между интерфейсом и пользователем (как?).
  • Прототип – это приближенная версия дизайна к финальному продукту, позволяющая сымитировать взаимодействие между пользователем и интерфейсом.
  • Мокапы – это графические наброски, статичный образ продукта.

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

Участники митапа. Фото: Мария Борисёнок.
Участники митапа. Фото: Мария Борисёнок.

Инструменты прототипирования

  • Линейка продуктов Adobe Creative Cloud.
  • Adobe Muse позволяет дизайнеру полностью сверстать адаптивный концепт сайта на HTML5, CSS3.
  • Adobe XD – комплексное решение задач разработки дизайна интерфейса и его тестирования на различных десктопных, мобильных и планшетных устройствах.
  • Zeplin – плагин, позволяющий генерировать руководство по стилю, исходники и спецификации на основе XS/Photoshop исходников.

Презентация Николая Кочубеева