Ключевые результаты масштабного сравнительного исследования, которое легло в основу нового юзабилити-рейтинга интернет-банков для физических лиц. Презентация с презентации юзабилити-рейтинга 16 ноября 2018.
2018 году, остальные улучшали текущие. Встретились и те, кто почти не вносил изменений. Понятие юзабилити стало популярным настолько, что в некоторых случаях подменяется такими сущностями, как фич-лист или наличием максимальной функциональности. Мы поговорим о юзабилити как о работах по улучшению пользовательского опыта. Вы получите представление об уровне интерфейсных решений и функциональности интернет-банков. Плюс, проведем параллель с развитием приложений банков.
свой интернет-банк. В новом интернет-банке на главной странице находятся три раздела, вместо семи, как в прошлой версии. Разделы «Главная» и «История операций» остались без изменений, а вот остальные изменились. Теперь на главной странице нет следующих разделов: «Счета и карты», «Кредиты», «Вклады», «Шаблоны и платежи». Раздел «Оплата услуг и переводы» переименован в «Переводы и платежи», а подобать вклад теперь можно внизу главной странице. Шаблоны и платежи также отображаются на главной странице, а еще продублированы в разделе «Переводы и платежи». Пользователям стало легче идентифицировать свои продукты, так как карточный счет и карта объединены в один продукт.
«Открытие» в очередной раз изменился. Изменено название разделов меню на главной странице. Раздел «Платежи и переводы» разбит на два отдельных раздела, раздел «Главная» переименован в «Мои продукты», а «Мои финансы» в «Аналитика расходов». Именно с двумя последними разделами возникали проблемы у респондентов в 2017 году. Они не понимали, в каком разделе можно посмотреть свои продукты, так как не предполагали, что информация о продуктах находится в разделе «Главная». Они искали свои продукты в разделе «Мои финансы», но там располагалась история операций. В 2018 году такой проблемы не возникало, так как теперь названия разделов соответствуют их содержанию, между тем верхнее меню стало менее заметным. Также в интернет-банке изменен дизайн.
банков. Название и содержание разделов главной страницы интернет-банка РоссельхозБанка похоже на главную страницу интернет-банка Росбанка 2017 года. Из положительных моментов можно отметить то, что респонденты быстро находили информацию о продуктах, также в интернет-банке можно совершить операции не переходя в раздел «Платежи и переводы», а из продукта на главной странице по кнопке «Все действия» или «Оплатить».
Русский Стандарт представил новую бета-версию интернет-банка. Но тестирование проводилось на текущей версии интернет-банка. В бета- версии интернет-банка на главной странице отображены два раздела «Платежи и переводы» и «Страхование». Теперь информация по продуктам закреплена слева, пользователь всегда может к ней обратиться вне зависимости от раздела, в котором он находится. В текущей версии у пользователей возникают проблемы с идентификацией своих продуктов и предложений банка. На главной странице представлена возможность совершить наиболее частотные переводы и платежи. Более подробный список операций и возможностей для перевода представлен в разделе «Платежи и переводы». На главной странице представлен «Календарь событий», который позволяет добавлять события (например, «Оплатить ЖКУ»), чтобы уведомляла о них в виде сообщений.
Газпромбанк также представил бета-версию нового интернет-банка. Тестирование проводилось на текущей версии интернет-банка. Чтобы посмотреть изменения, мы попробовали войти в новый интернет-банк, но сделать это не удалось, так как для входа требуется оформить именную карту. В колл-центе также отметили, что именную карту необходимо регистрировать (привязывать) через приложение. Для входа в текущую версию достаточно знать логин и пароль и не обязательно оформлять именную карту. Перейти из текущей версии на Бету пока невозможно.
предыдущего исследования. Однако некоторые проблемы сохранились или перекочевали в новое решение. Критичных юзабилити-проблем стало намного меньше. Это позволило нам в презентации предложить идею типизировать юзабилити-проблемы, чтобы команды могли не только обратившись к внешней юзабилити-экспертизе, но и самостоятельно, проводить оценку всего интернет-банка.
осталась проблема с прошлого года. При просмотре истории операций по продукту пользователь не сразу сможет понять, что за платеж был совершен, так как названия операций написаны латиницей, с использованием английских слов и банковских терминов.
интернет-банке Сбербанка по-прежнему сложно проверять номер карты получателя перевода, так как в поле «Номер карты получателя» номер карты написан без пробелов и разделений по блокам (как на карте).
чтобы вы могли повторить этот платеж в любой момент без повторного ввода реквизитов. 2017 Банк Санкт-Петербург 2018 Банк Санкт-Петербург Пользователи не понимают, как можно создать шаблон для последующей оплаты мобильного телефона. В интернет-банке Санкт-Петербурга не используется термин «Шаблон». Важно отметить, что задание не содержит формулировку «шаблон». На слайду в названии вы это можете увидеть. Создать шаблон можно нажав на кнопку «Сохранить черновик», таким образом, эта операция сохранится в разделе «История операций» со статусом «Черновик», но при этом пользователь сможет совершить по нему платеж без очередного ввода реквизитов. Еще способ подобного повтора операции возможен с главной странице интернет-банка, по нажатию на логотип последней операции. Для пользователей это не является очевидным. Эта проблема сохранилась с прошлого года.
интернет-банке БСПБ стало удобнее оплачивать мобильный телефон. Теперь пользователю не нужно выбирать оператора сотовой связи, так как оператор определяется автоматически после ввода номера. Также пользователю стало удобнее вводить номер телефона, так как на поле для ввода номера появилась «умная» маска. Теперь пользователь может начать вводить номер телефона с 8,9,7, а система автоматически подставит +7.
пользователи не понимали, что означает чекбокс «Подтвержденный» и как он работает. В частности, они не понимали, что при активации чекбокса «Подтвержденный» не нужно будет подтверждать оплату своего номера телефона по коду из смс. Теперь этой проблемы нет, так как в интернет-банке Райффайзенбанка больше не используется этот чекбокс. А оплату по шаблону не нужно подтверждать, если пользователь оплачивает свой номер телефона, который привязан к карте.
интернет-банке «Открытия» 2017 года пользователям было трудно выбрать нужный раздел, чтобы оплатить сотовую связь. Они ошибочно выбирали категорию «Телефония», так как эта категория находилась в каталоге выше «сотовой связи» , а иконка с телефонной трубкой ассоциировалась с оплатой телефона. Теперь этой проблемы нет, так как в новом интернет-банке появилась сортировка по категориям, раздел «Сотовая связь» находится в самом начале списка категорий, а раздел «Телефония» переименован в «Домашний телефон».
ВТБ один и тот же элемент управления (переключатель) используется для разных действий: «выбран/не выбран» и «переключить между опциями Шаблоны/Автоплатежи». Во втором случае он не становится синим, а просто меняет положение справа налево, при этом оставаясь серого цвета, как будто находится в состоянии «не выбран» из предыдущего пункта. Это сбивает с толку респондентов, они не могут понять, как работает этот элемент интерфейса.
информацией о корректном имени шаблона и управлении им через SMS-команды воспринимается, как ошибка. Пользователи предполагали, что нужно изменить название шаблона, но не понимали, как правильно задать имя шаблона. Также пользователи не понимали, что означает термин «SMS-команды». Правило название шаблона удалось выяснить только у оператора кол-центра.
Русский Стандарт информация об ошибке о некорректно введенных данных находится вне поля зрения пользователя. В случае, если пользователь указал некорректный номер телефона, внизу экрана появляется ошибка. Но пользователь ее не видит, так как она находится за сгибом страницы, а система не переводит пользователя автоматически к информации об ошибке.
пользователям неудобно ввести период оплаты ЖКУ в том формате, который требует система. В платежном документе период оплаты начинается с месяца, затем идет год. А в интернет-банке поле «Период оплаты» заполняется с года, при этом после начала ввода периода подсказка внутри поля пропадает и пользователь не понимает, как дальше его заполнять.
где находится выбор вида перевода. После перехода в раздел «Переводы и платежи» пользователь видит возможность оплатить различные виды услуг, а вот возможность перевода незаметна, так как располагается справа, где обычно указана информация о контактах или баннеры. Также пользователю нужно выполнить лишние действия, чтобы оплатить мобильный телефон. Во-первых, названия операторов связи указаны непривычно для пользователей (ОАО «Вымпелком-Коммуникации» (БИЛАЙН)), во вторых, пользователю нужно выбрать способ подтверждения операции.
экране статуса операции появляется красная полоса, которую пользователи принимают за индикатор ошибки. Такие красные полосы появляются на экранах статуса операции при оплате или переводе средств получателям или провайдерам услуг, которые используют красный цвет в своем логотипе.
всех поставщиков услуг указаны иконки, а для нескольких провайдеров используется одинаковый логотип. Таким образом, пользователю нужно больше времени на поиск нужного провайдера услуги, так как приходится читать названия, а не выбирать по логотипам.
и истории операции информация об одной и той же операции различается. Респонденты не сразу поняли, почему в истории операции последняя операция указана не как расход, а как приход, при том что в выписке эта же операция отображается, как расход.
интернет-банке Хоум Кредит банка сложно проверить корректность введенных данных, так как нет система не отображает тип платёжной системы карты получателя перевода, а также ФИО и информацию о банке получателя.
Хоумкредит Банк В интернет-банке Хоум Кредит банка недостаточно информации о кредитной карте для принятия решения о ее оформлении. Кнопка «Оформить заявку» уводит пользователя на сайт банка, где он должен заполнить форму и ввести в нее все данные, которые банк про него и так знает. Почему бы не предлагать заполнить эту заявку в авторизованной зоне, автоматически подставив туда данные клиента?
при переводе средств на карту другого банка при заполнении полей появляется модальное окно с информацией, которая не относится к совершаемой операции. Оно раздражает пользователей, в том числе из-за того, что им приходится отвлекаться от основной задачи и делать лишний клик, чтобы его закрыть.
модальное окно, которое закрывает всю рабочую область появляется при заполнении заявки на открытие вклада. Пользователю приходится отвлекаться на закрытие этого окна и выполнять лишнее действие.
ЖКУ система подгружает информацию о долговых начислениях и информацию о сумме оплаты этого долгового начисления. Но ее очень сложно читать, так как она перекрывает поля с информацией о сроках исполнения операции и другие кнопки (например, «редактировать»).
при создании цели для накопления страница очень долго загружается. Поэтому пользователь потратит слишком много времени на создание цели для накопления, а может и вовсе уйдет.
рейтинговые места. Тем не менее, целый раздел исследования посвящен этой теме. Во- первых, часть проблем, связанная с дизайном, проектированием и контрастностью касается большинства из нас. Во-вторых, мы верим и уже видим, что банки принимают свою социальную ответственность с плоскости финансовой доступности для граждан РФ.
Экранный диктор – Соответствие рекомендациям ГОСТ Р 52872-2012, информационным письмам ЦБ и WCAG 2.0 Экранный диктор Windows 10 Чекер контрастности Color Checker Analyzer Мы оцениваем доступности интернет-банков экспертно, так как большая часть оценки – техническая. Мы используем чекеры контрастности для проверки контрастности текста, экранный диктор для проверки озвучивания элементов на сайте, а также проверяем интернет-банки на соответствие рекомендациям ГОСТ Р 52872-2012, информационным письмам ЦБ и WCAG 2.0 (следующая оценка будет на основе WCAG 2.1).
связана с качеством кода. Это значит, что, например, незрячий человек, использующий экранный диктор, не сможет выполнить многие операции в интернет-банке, поскольку часть значимого текста не будет озвучиваться. На втором месте – проблемы дизайна. На третьем – проблемы проектирования, влияющие на доступность.
встречающихся типов проблем качества кода: не устанавливается фокус на элемент. Например, незрячий человек не сможет сделать перевод с карты на карту в банке Открытие, поскольку экранный диктор пропускает блок ввода данных карты получателя.
экранного диктора устанавливается, но элемент не озвучивается. В РоссельхозБанке будет сложно узнать информацию о карте, пользуясь экранным диктором, поскольку вкладки не озвучиваются.
6 7 8 Во многих банках, где используются кнопки вида «пиктограмма+текст» фокус устанавливается отдельно на картинку и отдельно на ссылку. На примере Альфа-Банка, при установке фокуса на картинку, она озвучиваются диктором как «Таблица-ссылка», и только после этого происходит переход к названию раздела. Если нужно сделать перевод с карты на карту, то процесс удлиняется в два раза, поскольку «Таблица-ссылка» озвучивается при каждом переходе к следующему пункту.
с низким контрастом текста. Согласно WCAG2.0 минимальный контраст текста должен быть не менее 4,5:1. Графические элементы в интернет-банках часто неконтрастны. Это затрудняет использование сервисов в том числе пожилым и слабовидящим людям.
с контрастностью элементов. На тестированиях зрячие пользователи часто жаловались, что текст очень бледный и его тяжело читать, а они не входили в категорию слабовидящих. Предполагаем, что это проблема системного характера, связанная с брендбуком.
регистре, встречается на кнопках и в заголовках интерфейсов. Это нарушает зрительную форму слова и затрудняет восприятие текста, особенно для людей с нарушениями зрения и ментальной сферы. Буквы сливаются, меняются местами, такой текст читается в среднем на 10% медленнее.
экрана средствами браузера до 200% не должна скрываться значимая информация. На сайте Райффайзенбанка меню с банковскими продуктами и часть блока для ввода данных о карте при переводе с карты на карту скрывается за полосой прокрутки.
или управлении с клавиатуры требуется выполнить большое количество переходов. Например, в Альфа- Банке для того, чтобы узнать баланс счета после захода в банк, нужно сделать 29 переходов. Проблема сохранилась с прошлого года!
с долгим доступом при управлении с клавиатуры, мы внедрили кнопку «Пропустить меню» на сайте Юзабилитилаб. Эта кнопка видна только при нажатии TAB и позволяет пропустить верхнее меню и перейти к основному содержанию страницы.
доступности прошлого года, многие проблемы были исправлены, однако общая картина не сильно изменилась. По-прежнему, в некоторых банках невозможно выполнить часть операций с использованием экранного диктора. Например, в Райффайзенбанке не озвучивается виджет с историей операций.
озвучиванием экранного диктора. Однако для слепого человека сделать перевод в банке по- прежнему остается сложной задачей, поскольку не озвучиваются названия полей «Со счета», «Куда», «Сумма» и др.
Банк Русский Стандарт (бета-версия) Наследованная проблема с некорректным озвучиванием названия кнопок управления наблюдалось на странице авторизации банка Русский Стандарт. На старой версии интернет-банка кнопка озвучивалась как «селект-бак-селект». В новой бета-версии проблема осталась, но озвучивание названия кнопки изменилось на «Привиус».
с некорректной версткой составного элемента можно наблюдать в интернет-банке Тинькофф. Кнопка с пиктограммой озвучивается как единый элемент, а не два разных, как было показано в примере на слайде 35.
многом цитирует WCAG 2.0, но при этом описывает доступность интерфейсов только для пользователей с нарушениями зрения. Стандарт выделяет 3 уровня доступности интерфейсов: Уровень минимальной доступности. Позволяет инвалиду по зрению обеспечить доступность к интернет-ресурсу без потерь информации. Уровень полной доступности. Позволяет инвалиду по зрению обеспечить доступность ко всем структурным элементам интернет- ресурса. Уровень доступности специализированных интернет-ресурсов для инвалидов по зрению. Позволяет инвалиду по зрению обеспечить доступность к интернет-ресурсу с использованием специальных технологий этого ресурса, разработанных для людей с ограничениями по зрению. А АА ААА При оценки мы использовали рекомендации ГОСТ и WCAG. Часть рекомендаций повторяются. Однако, есть и отличия. Например, при оценке уровня доступности ГОСТ использует формулировку «позволяет пользователям».
ГОСТ Р 52872-2012, описывает рекомендации, направленные на обеспечение доступности интерфейсов для людей со всеми видами нарушений. Рекомендации также имеют 3 уровня важности: Сайт обязан следовать этим положениям, иначе некоторые пользователи не смогут получить доступ к содержимому сайта. Сайт должен следовать этим положениям, иначе некоторые пользователи испытают существенные затруднения при доступе к содержимому сайта. Желательно, чтобы сайт следовал этим положениям, иначе некоторые пользователи испытают некоторые затруднения при доступе к содержимому сайта. А АА ААА WCAG – «сайта обязан». При этом оба документа требования относят к страницам. 17.12.18 мы представим в ЦБ на согласование методологию оценки доступности и рейтингования ДБО на примере приложений iOS и Android. Уровень доступности будет присваиваться уже пользовательским сценариям. При этом коэффициент важности будет единым для всех исследуемых сценариев и для всех групп различными с нарушениями.
доступности для пользователей с нарушениями Зрение Моторика Слух и речь 1. Банк А (5 баллов) 1-3. Банк А, Г, Д, (5 баллов) 1-4. Банк А, Б, В, Д (5 баллов) 2. Банк Б (4,2) 3. Банк В (4,2) 4. Банк Г (3,2) 4. Банк В (4,2) 5. Банк Д (2,7) 5. Банк Б (4,5) 5. Банк Г (4,5) ... ... ... Несоответствие рекомендациям понижает общий уровень доступности анализируемой страницы. Каждому выявленному несоответствию будет указан уровень доступности в соответствии с ГОСТ и WCAG, до которого оно понижает доступность страницы.
проблемы доступности мобильных приложений Ссылки ведут на скачивание документов, которые мы представили на встрече банков. Именно эти документы будут доработаны по комментариям, которые мы сейчас собираем от банков.
банки развивают каналы, сравнив функциональность интернет-банков с приложениями – это с одной стороны. А опрос по модели КАНО – оценить востребованность той или иной функции, что было учтено в рейтинге, а также стало обоснованием рекомендаций, которые банки получат в индивидуальных отчетах.
242 239 261 195 113 141 141 170 181 192 203 208 224 234 244 256 265 198 0 50 100 150 200 250 300 2017 г. СРАВНЕНИЕ ФУНКЦИОНАЛЬНОСТИ ИНТЕРНЕТ-БАНКОВ Среднее кол-во функций За прошедший год основная часть интернет-банков не сильно увеличила функциональность. Количество возможностей осталось почти на прежнем уровне. Зелёный фон – «средний» банк, то есть средние значения по всем участникам оказались даже ниже, чем в прошлом году. Это связано с тем, что два банка отказались от целого раздела - аналитики финансов.
скриншоты прошлого года. В интернет-банках Русский Стандарт и Промсвязьбанк существовали специализированные разделы, где пользователь мог смотреть расширенную аналитику финансов, а также вносить расходы/доходы по другим источникам. В этом году ни в Банке Русский Стандарт, ни в Промсвязьбанке уже нет такой возможности.
функций Прирост в мобильных банках: 373 функции Среднее кол-во функций 113 141 141 170 181 203 192 208 224 234 256 244 265 198 85 99 176 181 180 233 178 179 223 186 190 204 232 180 0 50 100 150 200 250 300 Интернет-банки Мобильные банки Если сравнивать две платформы, то Мобильные банки (МБ) активно догоняют интернет-банки (ИБ), а у некоторых из банков - уже лидирует по функциональности. «Средний» банк в 2018 году имеет почти такое же «мощное» приложение как и веб-версию. Можно отметить то, что средний прирост функциональности ИБ за год почти в три раза меньше, чем МБ.
банки Мы сравнили и полноту реализации смысловых групп функций, чтобы понять, какие возможности шире доступны пользователям ИБ, а какие - МБ. На данный момент, в МБ представлено больше возможностей по управлению продуктами, операциям и настройке интерфейса. А в ИБ - по настройке безопасноти и уведомлений, шаблонам, курсам валют, заказу документов и открытию продуктов. Разрыв в неавторизованной зоне связан с тем, что в МБ до входа зачастую можно увидеть курсы валют, адреса отделений и банкоматов, новости банка.
особенностями устройства: в МБ есть интеграция с телефонной книгой (подтягивание контактов), есть камера (сканирование данных). Но некоторые функции пока что чаще встречаются в МБ, хотя и не зависят от возможностей платформы. Так, в Хоум Кредит банке можно перейти к операциям из продукта в МБ, но нельзя в ИБ.
уже можно переводить средства клиентам Тинькофф Банка по номеру телефона, а в ИБ – нет. Речь идет о разделах «Перевод на карту в другом банке» и «Перевод частному лицу в другой банк по реквизитам». В разделе «Перевод клиенту Сбербанка», есть возможность совершения перевода по номеру телефона, но только для клиентов Сбербанка. Перевести средства на карту стороннего банке возможности нет.
группы, функций в которых сейчас больше в вебе: настройки уведомлений, безопасности, шаблоны и автоплатежи, запрос документов. Так, в интернет-банке ВТБ в разделе «Шаблоны» можно создать новый шаблон, а в МБ — нельзя, хотя в остальном разделы в обоих интерфейсах очень схожи.
для открытия новых вкладов и счетов. Промсвязьбанк в приложении позволяет открыть только вклад, цель и кредит, а в ИБ можно перейти, например, к открытию ИИС и других продуктов.
в год — Важна оценка новых функций в динамике Каждый год мы проводим опрос пользователей и обновляем показатели востребованности функций. Сейчас мы видим, что востребованность базовых функций почти не меняются. Они из года в год показывают похожие результаты. А вот новые для рынка функции имеют динамику. Вначале они могут получать низкие веса, а затем расти и наоборот, то их ценность меняется в процессе реального использования. Так было с функцией предоставления доступа к своим счетам, которая сначала оценивалась как нежелательная, но затем перестала быть такой.
приоритет — Возможны связанные сценарии: • Создание списков покупок • Подписка на покупки • Проверка наличия товаров • Сравнение стоимости и др. В этом году мы включили в контрольный список оценку возможности видеть продукты в чеке. Пока что она получила низкие оценки востребованности. Но в дальнейшем её ценность может вырасти, если добавлять новые сценарии её использования. Так, пользователи могли бы заказывать продукты в интернет-магазинах, сравнивать цены на них и др. И здесь мы переходим в новую плоскость - оценку не отдельных возможностей, а более крупных процессов, которые могут стать для клиентов дополнительной ценностью при работе с банком.
Санкт-Петербург 4. ВТБ 5. Банк Открытие 6. Промсвязьбанк 7. ЮниКредит Банк 8. Райффайзенбанк 9. Альфа-Банк 10. РОСБАНК 11. Банк Русский Стандарт 12. РоссельхозБанк 13. Банк Хоум Кредит 14. Газпромбанк
usabilitylab
magma_info
so_kotani
kadokawaconnected
re9010matsubara
alexanderbyndyu
anymind
syo
findyinc
gtnako
eikohashiba
umzws
kenjisugiura
ddemaree
quramy
bcantrill
jonyablonski
keathley
samanthasiow
mthomps
bkeepers
tmm1
shpigford
eileencodes
rmw
