company_banner

Почему интерфейс должен быть доступным для всех и как это сделать

    Привет! Меня зовут Валерия Курмак, я ведущий аналитик пользовательского взаимодействия в Дизайн-центре Сбертеха и эксперт в accessibility. В статье я расскажу:

    • как мы делаем цифровые продукты Сбербанка равно доступными для всех;
    • что мы выяснили в результате исследования о людях с инвалидностью;
    • с какими трудностями мы столкнулись при адаптации интернет-банка Сбербанк Онлайн и как их преодолели;
    • как мы распространяем знания и внедряем accessibility в процессы.



    Про особенные потребности


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

    image

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

    Особенные потребности в России испытывает больше половины населения: 13 млн человек с инвалидностью, 37 млн пенсионеров, примерно 30 млн людей временно испытывающих те же потребности, что и человек с инвалидностью.
    Создавая доступные продукты и сервисы, вы закрываете потребность для половины страны.



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


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

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

    image

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

    Мы рассмотрели все точки взаимодействия: отделения банка, интернет-банк и приложение Сбербанк Онлайн, колл-центр и сами банковские продукты. Это позволило нам понять, как люди с инвалидностью взаимодействуют с банком, через какие каналы, что им при этом важно, какие сложности возникают и почему.

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

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

    По результатам исследования совместно с экспертами по инвалидности я разработала и написала гайдлайны. С результатами исследования можно ознакомиться на specialbank.ru.



    Что нужно учитывать, проектируя цифровой сервис


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

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

    Подход к адаптации Сбербанк Онлайн


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

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

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

    Библиотека компонентов интерфейса:


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

    Так выглядело старое меню:

    image

    Мы проверили контрастность:



    Так будет выглядеть новое меню:

    image

    Разработчики, в свою очередь, адаптируют библиотеку готовых компонентов и добавили в список машинных тестов проверку на доступность.

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

    Сбербанк Онлайн — первый проект, на котором мы применили такой подход. В Сбербанке еще много систем и приложений, в том числе внутренних для сотрудников, у которых могут быть те же проблемы, что и у наших клиентов. Сейчас мы работаем над тем, чтобы привести к стандарту WCAG 2.0. библиотеки всех банковских продуктов.

    Тестирования


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

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

    Тестирование электронной очереди со слабовидящими пользователями



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

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

    Открытое тестирование с незрячими пользователями

    image

    Посмотреть, как мы проводим тестирование с незрячими пользователями

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

    Как распространить знания и внедрить доступность в большой компании


    Дизайн-Кухня

    Наши исследователи, дизайнеры и разработчики расположены в 16 городах России. Чтобы распространять знания и опыт, мы запустили образовательный проект «Дизайн-кухня», где рассказываем о процессах, дизайне, исследованиях. Я веду курс про то, как не проектировать в цифровой среде барьеры для людей с особенными потребностями.

    image

    Чек-лист на проверку доступности
    Также мы разработали внутренний чек-лист, по которому дизайнер, аналитик или продакт может быстро проверить прототипы на доступность. Этот же чек-лист применим и при создании новых элементов библиотеки.



    Заключение


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

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

    Сбербанк

    204,00

    Компания

    Поделиться публикацией
    Комментарии 19
      +1
      А обычные люди когда смогут в интернет-банке просто вставить номер телефона получателя, а не исключительно набирать?
        0

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

          0
          Мы все-таки за конструктивный подход, когда критику поддерживают аргументы
            0

            Было бы удобно при переводе по номеру телефона давать возможность выбора между имеющимися у этого пользователя картами Сбербанка...

              0
              Это выглядит не слишком секьюрно
                0

                Не обязательно показывать полные номера карт :)

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

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

              Если этого мало, тогда поехали:


              • У меня один единственный счет. Каждый раз при попытке вывести на него деньги я вынужден совершать по куче кликов, чтобы его выбрать. Зачем? Он у меня один. И таких моментов, которые надо бы делать выбранными по умолчанию, довольно много.
                Да просто стандартное действие с манипуляциями между своими счетами требуют какого-то дикого погружения.
                (Единственное место, где сделано адекватно — пополнение телефона)
              • Поехавшая верстка на маленьких экранах ну просто везде, где только можно. Просто авторизовываешься и даже акция про Кемерово уже едет так, что в кнопку не попасть.
              • При переходе в приложения в диспетчер задач оно не блюрится. Секьюрити, вы вообще о чем. Но ладно, это мелочи. Тем не менее, у всех ваших конкурентов это есть и штука нужная.
              • На экране просмотра счета пытаешься скроллить, а тебя настойчиво пихает на открытие нового вклада. Как это вообще связано — конкретный счет и новый вклад? И почему это настолько ломает взаимодействие, если скроллишь ну хоть чуточку выше середины экрана?
                А даже если не скроллишь, пол экрана занято бесполезной фигней.
              • Жест назад не работаешь практически везде. Захожу на инфу о счете — назад не вернуться. Бомбануло в просмотре конкретного перевода: скроллишь вниз, пропадает кнопка назад. Жест не работает при этом. Юзабилити — топ.
              • Блокирующие загрузчики просто везде. 21-й век на дворе, а решения как в iOS 4. Особенно приятно, когда сидишь с медленным интернетом и тебя вынуждают смотреть на крутилочку, когда ты уже передумал десять раз.

              Про то, что половина приложения лагает, интерфейс скачет (диалоги, выписки) и сосет батарейку — даже говорить не буду.


              Достаточно конструктивно?

                0
                Вы забыли еще упомянуть, что за пользование этим чудесным сервисом каждый владелец карты еще и доплачивает, чего нет практически ни у кого из конкурентов (особенно серьезных).
                  0
                  Про ваш первый вопрос. Для быстрого пополнения счета можно на Главной странице приложения нажать кнопку «Пополнить», тогда номер счета автоматически подставится в перевод между своими счетами. При этом другой счет/карта будет предвыбран в поле «Счет списания». Для операции перевода между своими счетами у вас должно быть минимум два счета/карты. Если вы регулярно осуществляете одну и ту же операцию, можно также оформить шаблон на перевод. В таком случае все поля будут предзаполнены, вам останется только проверить/изменить сумму и подтвердить операцию.

                  Про остальные пункты. Большое спасибо за обратную связь, она очень ценна. Мы передали фидбек команде разработки, и они постараются исправить в ближайшие релизы. Если уточните в личку детали (на каких экранах, девайсах и версиях ОС), будет совсем замечательно!
            0
            Подскажите, как обычным людям в интернет-банке посмотреть транзакции за прошлый месяц и увидеть дату совершения платежа, а не дату фактического проведения платежа?

            Вы планируете обновить интерфейс интернет-банка?
              0
              Заводил критичный баг и уязвимость два года назад в вашем приложении, в ответ мне приходило письмо: что я все не правильно оформил, что-то, нужно иначе, оформите заново на этот адрес (ответ пришел с другого).
              Надо ли говорить, что я решил его не заводить после 2-го раза?

              Когда вы исправите эту юзобилити оплошность?
                0
                А вот такой вопрос, если исследования покажут что для двух или более групп пользователей нужны будут принципиально разные интерфейсы(графический/консольный/тактильный/аудио) банк будет готов поддерживать все продукты банка на двух или более типах интерфейсов? И далее в догонку, если исследования покажут что есть группы для который новый графический интерфейс дает худшие показатели чем старый, будет ли банк поддерживать 2 или более версий графического интерфейса?
                  0
                  О чем вы говорите? Сейчас у них без всяких на то подтверждений подключается копилка, о которой почти ничего не известно, и отключается она только через терминал отделения.
                  Или вот, например, некоторые банальные вовсе недоступны через сбербанк-онлайн, из-за чего просто невозможно узнать сколько всего у тебя денег на счетах банка (например, сберегательные счета там не отображаются, зато видны в терминалах посреди отделения, где каждый может подсмотреть сколько у тебя денег на вкладе).
                  Еще пример: в терминалах при вводе пароля карты заполненные символы выглядят как пустые внутри, а незаполненные — как сплошной круг, хотя должно быть наоборот.
                  Таких примеров слишком много, чтобы все перечислять. Да и мне не платят за это, как тем людям, которые пишут волшебные статьи о юзабилити
                    0
                    Добрый день!
                    Мы внедряем доступность через нашу библиотеку элементов, из которых потом собирается интерфейс.
                    Для того, чтобы слабовидящие и люди с нарушением цветовосприятия (дальтоники) могли пользоваться графическим интерфейсом, мы привели визуальный вид элементов библиотеки к международному стандарту WCAG 2.0.
                    Слепые люди взаимодействуют с интерфейсом через программы экранного доступа (аудиовоспроизведение) или клавиатуры Брайля (тактильный интерфейс). Для того, чтобы они с помощью ассистивных технологий могли пользоваться нашим интернет-банком, мы приводим нашу библиотеку к стандарту WCAG 2.0 на уровне верстки.
                    Таким образом, нам не нужно создавать и поддерживать несколько интерфейсов. Один интерфейс доступен и графически, и аудио, и тактильно.
                    0
                    Как незрячему человеку пользоваться сервисом, если для регистрации нужно ввести капчу?

                    Интересно узнать, каким путём можно решить эту проблему и почему не получилось решить её сразу.
                      0
                      Валерия, спасибо за статью. Приятно, что заботитесь не только об основных use cases, как это делает подавляющее большинство компаний.

                      Однако вынужден присоединиться к негативным комментариям в адрес Сбербанк Онлайн.
                      Некоторое время назад я не смог выполнить элементарную операцию по смене пароля. Даже со второго раза не смог. И это при моём-то многолетнем опыте работы в IT и далеко не предпенсионном возрасте!
                      Конкретику, к сожалению, сообщить не могу — прошло довольно много времени, подзабылось. Но точно помню, что меня ввели в заблуждение надписи элементов (или элемента) управления в личном кабинете при смене пароля.

                      В этой связи предлагаю Вам ответить на вопрос (не мне, а самой себе): Вы уверены, что результаты Ваших усилий в области юзабилити не являются ошибочными с точки зрения реальных ожиданий пользователей (не малочисленной фокус группы, а большинства конечных юзеров)?
                        0
                        Меня вполне устраивает интерфейс — скромно и практично.
                        Да есть банки с более удачными и свежими — хватит пальцев обеих рук, как и наоборот — все остальные.
                        Правда сейчас пошли правки — с использованием «новомодных кривых framework» даже шлюз и тот умудрились испохабить. Но это общая тенденция и не только в РФ, если у Вас не «Google chrome» или «темная тема», то «ой»…

                        Пример обновленной, новомодной «жести» можете наблюдать на сайте ОАО РЖД, а ведь еще недавно был скромный, практичный, всех моих знакомых полностью устраивающий.


                          0
                          Как-то раз я был на экскурсии на табачной фабрике, где мне с гордостью рассказывали о процессе производства их продукции. О контроле качества, о содержании вредных смол, о жестких нормативах, о заботе об экологии… Короче, куча красивого антуража, но старательно обходя вопрос того, что производят они в конечном итоге отраву:)
                          Этот пост мне живо напомнил ту экскурсию. Особенно учитывая то, что мы имеем в результате.

                          PS Кстати, «экскурсовод» был некурящий:)

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

                          Самое читаемое