Удачные и неудачные UX-практики в банке для бизнеса

Мы команда Angry Developers, специализируемся на банковских и околофинансовых сервисах — проводим UX-исследования, делаем юзабилити-тесты дизайна, рисуем, разрабатываем и запускаем банки и другие сложные сервисы.

В декабре закончили исследование “UX 5-ти банков для МСБ”, где с помощью качественных юзабилити-тестов основных сценариев подробно описали хорошие и плохие практики каждого из участников: Райффайзенбанк, Промсвязьбанк, Модульбанк, Тинькофф банк и ВТБ.

Собрали весь пользовательский опыт и аналитику, восприятие отдельных элементов интерфейса и текста и нарисовали своё видение структуры и принципов работы удобного интернет-банка.

Так родилась эта статья.

Аналитика основных сценариев. В разных банках они отличаются на 5-15% из-за разности портретов и потребностей, но ранжирование остаётся то же. У всех банков одинаковые портреты пользователей и потребностей (за исключением каких-то уникальных функций), но разное процентное распределение. У одних больше ИП-шников одиночек, а у кого-то больше компаний с ВЭД. Условия и характеристики продукта определяют распределение.

Наши цифры — усреднены для сегмента малого и среднего бизнеса. И подтверждены количественным опросом.

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

Есть и сопутствующие вещи. Проникновение дополнительных продуктов, в разных банках для МСБ — это 5-33%. Дополнительные продукты — это всё, что помогает вести бизнес, но не относится к расчётному обслуживанию: зарплатный проект, эквайринг, валютный контроль, проверка контрагента, бухгалтерия итд.

Из тех, кто выполняет какие-то действия и переходит на второстепенные страницы, 90% делают одну задачу за один вход, например, просматривают остаток или отправляют платёж.

7% делают 2 задачи за один вход, например, отправляют платеж и настраивают уведомления. Меньше процента делают 3 задачи.

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

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

Почему так?

По логическим блокам у нас есть:

Всё. Больше ничего не нужно.

Логотип в верхнем левом углу — аксиома, 100% пользователей понимают, что окажутся на главной странице по тапу на логотип. Даже люди старшего поколения обладают этим паттерном поведения. Главная или “первая страница” для пользователя — это остаток на счету и лента операций.

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

Отдельная история, особая боль продактов. У сервисов, дополнительных продуктов и партнёрских предложений должно быть два места в интернет-банке: в одном всё неподключенное или разово использующееся. В другом — подключенное и использующееся итерационно в зависимости от бизнес-процессов.

Почему справа и почему контрастное? Исследование горизонтального распределения внимания, и F и Z-паттерны демонстрируют нам, что 70% концентрации пользователя приходится на левую часть экрана. Но самое главное, это то, что есть вертикальное считывание информации. И при всех этих паттернах, когда ты заходишь в интернет-банк, твой взгляд идёт к остатку. Далее, в зависимости от задачи либо горизонтально вправо, либо вниз к ленте операций. Если размещать меню слева (хоть контрастно, хоть неконтрастно), взгляд в процессе обучения и привыкания к интерфейсу просто до него не доходит. И пользователь учится не замечать это меню, хоть оно и размещено в зоне с самым большим процентом внимания. Мы ведь помним про основные сценарии и их распределение — меню там не нужно.

Поэтому, только с точки зрения удобства его логично расположить справа, но контрастно — в зоне с наименьшим процентом внимания, на которую приходится от силы 30%. В таком случае, пользователь не будет развивать эту “слепоту” на элемент, который чаще всего не использует, а будет туда ходить когда есть потребность. И мешаться он не будет.

Пополнение и реквизиты, то есть вся функциональность, которая относится к определенному счёту. У пополнения есть ещё особая миссия — оно призвано обучать. 90% не знают, что существуют другие способы пополнения кроме как через банкомат и кассу и генерят обращения в банк.

А дальше немного подробнее про самое интересное.

Если идти от потребности пользователей, в навигационном меню им нужны самые частые операции. Сейчас у банков самая частая UX-проблема — это дублирование разделов меню или сервисов: подключенные и неподключенные или даже одни и те же сервисы, но в разных местах. Отдельные банки могут размещать в 3-х или даже 4-х местах главной страницы одни и те же функции.

Зачем делают навигацию?

Для быстрого доступа к функциям, для порядка и логической структуры.

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

Для пользователя всё это платежи, любую из этих задач он будет искать в платежах.

В горизонтальном меню есть блок “Сервисы” и блок “Подключенные сервисы”.

Мы разбиваем сервисы по логике использования на 2 типа:

1. Разовые услуги

То, что один раз получил, заплатил и забыл. Например, одноразовая проверка контрагента. Эти сервисы остаются всегда в Сервисах. Однако, если проверка контрагента подключена безлимитно на месяц — она переходит в подключенные сервисы.

2. Итерационные сервисы

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

Например:

У итерационных сервисов 2 состояния: подключены и находятся только в разделе Подключенные, и не подключены и находятся только в Сервисах.

Всё то чем клиент пользуется постоянно — в вертикальном меню с быстрым доступом.

Это решает проблемы пользователя:

Существуют и другие сценарии — изменение тарифов, настроек и просмотр лимитов. Тут всё просто: не надо вытаскивать все задачи в меню.

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

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

Выход — спорная функция. Я б её убрала и решила вопрос безопасности и сессий технически. Но остаются 5-7% от всего числа пользователей на разных платформах, которые жмут на Выход и считают это безопасным. Нет интернет-банка без выхода. Даже в мобайле есть выход. С банкоматами та же тема. Всё ещё остаются люди, которым проще зайти внутрь интернет-банка и найти карту банкоматов там. Эти люди характеризуются либо крайним недоверием к технологиям, либо зацикленностью на безопасности. В любом случае мы всех их любим и принимаем такими какие они есть.

Не менее важные элементы, чем остаток, т.к. по ним выполняют основные сценарии. Там где они — там для пользователя главная страница.

Кстати, понятия “лента операций”, “история платежей” потихоньку перекочевали в головы людей из социальных сетей.

Немного из статистики и качественных исследований:

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

Эти графики и сводная аналитика пока не позволяют принимать решения.

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

Либо если: “Тут не исправить уже ничего. Господь, жги!”

Визуальная структура

Не обязательно перекраивать всё с ног на голову. Есть изменения “малой кровью”, которые можно сделать уже сейчас — они не требуют огромных ресурсов разработки. Посмотрите на свои контрасты, группировки и расположение элементов. Каждый раз, когда будете изменять дизайн, держите цифры про основные функции и распределение внимания в голове. И если у вас появляется новый дизайнер — заставьте выучить их наизусть.

Бейте по рукам продуктологов, каждый из которых хочет свой сервис или фичу разместить на главном экране красной кнопкой, желательно в пол экрана.

Логика

Какие функции должны быть вместе, а какие врозь? Например, платёж — это не про счёт, а про компанию. Ты заходишь в компанию, чтобы сделать платёж. Люди не ассоциируют платёж, как “платёж со счёта Х”, им не нужно для этого заходить в счёт, поэтому не надо размещать его под остатком или визуально группировать рядом с остатком.

Текст словами пользователя

Теперь вы знаете часть того восприятия, которая не совпадает с вашим. (У нас под это есть отдельная книга знаний “Словарь предпринимателя”) Просто пройдитесь по интерфейсу и набросайте, как бы это могло выглядеть с другими названиям пунктов и текстов. Можно было бы сказать, что это — изменения малой кровью, так как не требуют больших ресурсов (ну в случае банков даже не знаю), но для пользователей это может оказаться шок-контентом :)

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

Неприоритетное и Приоритетное

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

Дублирование и повторение функций

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

Это верхнеуровневая структура, прототип. Мы не претендуем на истину в последней инстанции. Не говорим, что должно быть так и никак иначе, и это лучший вариант. В конце-концов есть обучение — люди привыкают ко всему.

Если эта статья была вам полезна — напишите чем конкретно, чтобы мы понимали, чему больше уделять время.