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

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

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

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

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

Что в основе?

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

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

ТОП-7 сценариев

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

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

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

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

Интернет-банк — это сервис одной задачи, очень важно дать простой и логичный путь, который ведёт к наиболее востребованным из них.

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

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

Почему так?

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

  1. Горизонтальная панель
  2. Вертикальное меню
  3. Область счёта
  4. Лента операций

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

Горизонтальное меню

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

Чат с банком

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

Сервисы и предложения

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

Вертикальное меню справа

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

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

Карточка счёта

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

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

Сервисы, дополнительные продукты и предложения

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

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

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

В чем наша концепция?

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

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

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

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

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

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

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

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

Например:

  • Бухгалтерия. Минимум раз в квартал платишь налоги и заходишь для этого в сервис. Сдаешь отчётность раз в год.
  • Зарплатный проект. 2 раза в месяц платишь зарплату и налоги.
  • Эквайринг, Депозиты, Кредиты имеют историю и итерационное использование. И после подключения они попадают в Подключенные сервисы.

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

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

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

  • Нет засоренности меню и огромного количества пунктов, которыми он не пользуется
  • Есть только то, что он подключил сам, легко запомнить в каком списке или блоке списков оно находится
  • Когда появляются новые сервисы, они не смешиваются с уже подключенными
  • Всегда понятна логика — почему кредиты теперь в подключенных? — потому что уже есть кредит. И там же есть опция взять еще кредит.

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

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

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

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

Лента операций или История платежей

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

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

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

  • ⅙ новых платежей повторяются из ленты операций, даже если есть шаблоны или избранные. Их ищут по сумме либо контрагенту.
  • Плюсы и минусы у сумм — это наверное хорошо, но визуально они усложняют структуру и считывание. Поэтому их лучше разделять только цветом, но не жирным и вырвиглазным. Сумма справа, опять же, потому что горизонтальное распределение внимания, F и Z-паттерны.
  • Быстрые действия и статус — скачивание, повторение, оповещение о каких-то проблемах с платежом — всё это должно быть в элементах строки платежа, а не в развёрнутой карточке.
  • Дополнительным критерием поиска платежа служит назначение — конкретно за что, по какому договору или счёту. Это позволяет не заходить в карточку платежа и не прекращать поиск, а двигаться дальше. Больше про платежи рассказывать не буду — это уход в другую очень масштабную тему.
  • Поиск должен быть прикреплён к конкретному объекту или списку, по которому совершается. Поиск по платежам — рядом с лентой платежей, поиск по сообщениям — в чате.

Карточка счёта

  • Не надо писать маленький заголовок к большим цифрам типа “баланс”, “остаток”, “всего на счетах”. Всем очевидна эта сумма.
  • Людям не нужен единый доступный остаток по всем счетам. Просто примите это и не пытайтесь сломать систему и засунуть в одну цифру все остатки по счетам, овердрафты, кредиты и зарезервированные суммы. Сломаете мозг и себе и какой-то части своих пользователей. Ещё ни у кого эти попытки не приводили к 100% пониманию пользователя, скорее к недоумению: “Что тут происходит?!”
  • Копейки предпринимателям не нужны, бухгалтерам нужны. Все банки много о них спорят. На деле же, когда показываешь интерфейс на юзабилити-тестах, то люди просто начинают искать оправдание из своего опыта тому, что они либо есть либо нет, но негативного опыта от их отсутствия или присутствия в главной сумме остатка не было. Вывод — это не значимо. Решение — применять размеры, контрастность. Что многие успешно и делают.
  • Блок Пришло/Ушло — полезный, но только в том случае, когда банк может правильно это разделять. Не помещать в “Ушло”, например, перевод на свой счёт физлица. Пока так никто не может и эта функции полезна только тем, у кого уже нормально построена бухгалтерия.
  • Графики, диаграммы, траты по статьям — всё что пытаются сделать, чтобы вывести какую-то аналитику предпринимателю. Обычно не работает по той же причине, что и предыдущий пункт, а еще потому что банк думает что он один-единственный у предпринимателя. Как ревнивая девушка: “Ты будешь проводить время только со мной! Оставь все свои деньги мне! Не храни деньги больше ни у кого другого! Как ты посмел?”

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

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

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

Как использовать эту статью?

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

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

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

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

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

Логика

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

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

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

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

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

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

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

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

Какие есть ограничения?

  • В статье мы на всё смотрели только с точки зрения пользовательского опыта. Мы про то, чтобы всё было удобно, понятно и быстро-обучаемо. Не смотрели с точки зрения бизнеса и денег, не пытались решать эту задачу, хотя и понимаем, что без этого никак. И прекрасно осознаем, что в каждом конкретном случае эти цели и задачи разные.
  • Вы не увидите глубокой проработки элементов, и мельчайших функций. Опять же, у всех отличаются и гайдлайны, и функции, и скорее всего ваши дизайнеры знают как работать с любыми элементами.
  • Здесь только портрет малого бизнеса — предпринимателя, не бухгалтера. Про средний и крупный бизнес не говорим — там всё несколько иначе, да и пользователь уже качественно другой.
  • UX — это про удобство. Здесь нет цели придумать нечто инновационное и качественно новое.

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

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

0
18 комментариев
Написать комментарий...
Сослан Сакшин

Разве удобство веб-интерфейса является приоритетным параметром при определении идеальности банка для бизнеса?

Ответить
Развернуть ветку
Natalya Sturza
Автор

конечно же нет, но это является важным критерием при выборе и сравнении

Ответить
Развернуть ветку
Николай Черных

Это когда нехер делать и нужно показать работу

Ответить
Развернуть ветку
Георгий

Британские ученые и не такой херней занимаются.

Ответить
Развернуть ветку
Da Apricot

Я бы обратил внимание на еще два момента.
1) Быстрый и удобный поиск по прошлым платежам. Здесь у многих недоработки, хотя технически реализовать не трудно. К примеру я помню, что платил компании "Антек Про Сервис" или как-то так, и мне нужно чтобы при вводе в строку поиска (которая всегда на главной!) достаточно было ввести либо "Ант" либо "Про" либо "Серв" и он вывел бы моментально все подобные платежи либо получения средств хотя бы за год. Нечто подобное было в Модуле, но 2 месяца назад они эту систему улучшили так что поиск ищет секунд по 20-30.
2) Настраиваемый фильтр. Возможность вывести все платежи за неделю, месяц - это ок. Но очень полезно вывести все платежи за определенный квартал определенного года. Вообщем пусть фильтр будет немного более замороченным внешне, зато для работы станет более функциональным.

Ответить
Развернуть ветку
Natalya Sturza
Автор

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

Ответить
Развернуть ветку
Natalya Sturza
Автор

А вот поиском пользуются всего 5-10% пользователей, и очень простыми критериями. А замороченность настроек поиска нужна единицам. Обычно тем, кто глубоко в бухгалтерии и налогах хорошо понимает и сам что-то делает.

Улучшили и скорость упала, я правильно поняла? ))

Ответить
Развернуть ветку
Da Apricot

Забыл поставить кавычки. Разумеется "улучшили", стало медленно и неудобно.

Вы говорит 5-10% пользователей, а каких именно пользователей? Если это ООО-шка с 5-ю контрагентами, тогда понятно. У меня в среднем в месяц около 400-500 платежей, я не представляю как быть без поиска. Если речь идет об универсальном интерфейсе для банков - важно структурировать пользователей, у всех банков свой контингент.

Ответить
Развернуть ветку
Natalya Sturza
Автор

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

Да, тут важна не форма компании, а именно поток платежей - входящие/исходящие, кол-во новых/постоянных контрагентов, кол-во в принципе контрагентов.
Пока что банки не дают инструмент для фин.анализа. Но некоторые можно интегрировать с такими.
А зачем ищете платежи? 400-500 это эквайринг/касса?

Ответить
Развернуть ветку
Da Apricot

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

Ответить
Развернуть ветку
Natalya Sturza
Автор

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

Ответить
Развернуть ветку
Da Apricot

Понятно. Но вообще мне крайне интересно, что такое для Модуля/Точки/Сферы малый, средний и крупный бизнес. И какой скажем средний оборот их среднего клиента. Живу с Модулем уже 2 года, и как только у нас пошел какой-то рост в начале 2018, их СБ подняла панику, начав требовать доки. После двух продолжительных разбирательств, мы вроде как подружились и живем в согласии :) При этом никак не считаю себя крупным клиентом и даже средним (по меркам РФ)

Ответить
Развернуть ветку
Natalya Sturza
Автор

Это же комплаенс - там всё очень странно и у всех по-разному.

Ответить
Развернуть ветку
Цой жив

Почему в России до сих пор думают, что банк, это приложение?

Ответить
Развернуть ветку
Natalya Sturza
Автор

потому что законодательство?

Ответить
Развернуть ветку
Artem Belov

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

Ответить
Развернуть ветку
Natalya Sturza
Автор

спасибо, приятно :) много времени в неё вложили

Ответить
Развернуть ветку
Shumskiy Igor

Где картинки из поста? )

Ответить
Развернуть ветку
15 комментариев
Раскрывать всегда