Что стоит за удобным интерфейсом: как ОТП Банк улучшили историю операций для бизнеса

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

В этой статье команда ОТП Банка на примере обновления истории операций для бизнеса расскажет, как сделать интерфейс не только визуально выверенным, но и по-настоящему удобным для пользователя.

В 2023 году ОТП Банк запустил масштабный ребрендинг, в ходе которого обновился визуальный стиль, изменилась цветовая палитра и пересмотрели коммуникационную стратегию. Цифровые продукты, включая интернет-банк, тоже не остались в стороне, новые принципы потребовали пересмотра UI и UX. И одним из первых изменений стала переработка истории операций, самого частотного и «рабочего» раздела. Тогда команда заметила, что искать нужную транзакцию бывает неудобно, особенно если она скрыта за цепочкой фильтров. Чтобы разобраться, как пользователи взаимодействуют с этим разделом и что можно улучшить, мы начали с исследования.

Исследование, исследование и ещё раз исследование

Первый этап

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

Хотя интерфейсы на первый взгляд казались разными, в них часто повторялись одни и те же элементы. Мы составили список всех встречающихся фильтров и проранжировали их по частоте использования. Самыми часто встречающимися стали «Поиск», «Входящие», «Исходящие» и «Период».

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

Второй этап

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

Наша команда выдвинула несколько гипотез:

Избыток фильтров сбивает с толку и мешает быстро ориентироваться;
Наиболее востребованные фильтры:«Входящие», «Исходящие» и «Период». Они должны находиться в главной зоне интерфейса;
Строка поиска не ключевой элемент;
Остальные фильтры можно свернуть.

Чтобы проверить это, мы провели серию глубинных интервью с тремя прототипами:

В первом изменили минимум: убрали вкладки вроде «Картотека» и «Отклонённые»;

Во втором отказались от боковых фильтров, оставив только самые частотные и объединив их в выпадающие табы;

Третий соответствовал гипотезам: остались «Поиск», «Период», «Входящие», «Исходящие» и «На подпись», а остальные фильтры переместили в боковое выпадающее меню.

Результаты

Наше исследование показало, что:

Более половины респондентов не смогли сразу найти нужные фильтры. Это показало, что ключевые элементы должны находиться в зоне первичного внимания;
Поиск используют 75% участников, но его расположение оказалось неинтуитивным. Мы решили переместить строку поиска над лентой операций;
90% ограничиваются четырьмя фильтрами: «Поиск», «Период», «Входящие» и «Исходящие». Практически все респонденты назвали их самыми важными;
Пользователи также ждут, что система будет подсказывать платежи «На подпись». Для многих это критически важный статус;
60% отметили, что разделение фильтров на верхние и боковые только усложняет взаимодействие. Мы пришли к выводу, что структуру нужно упростить;
Обилие фильтров мешает сфокусироваться. Вместо удобства пользователи сталкиваются с визуальным шумом.

Итоговый интерфейс

При разработке финального макета мы опирались не только на данные исследований, но и на комментарии пользователей, которые работают с большим объёмом платежей.

В результате в новом интерфейсе:

Фильтры размещены над лентой операций, так как это самый привычный способ навигации;
В основе только самые частотные фильтры;
Вкладка «На подпись» теперь отображается сразу, чтобы такие платежи не терялись;
Остальные фильтры свернуты в кнопку «Фильтры», чтобы не перегружать внимание и дать возможность тонкой настройки;
Добавлены кнопки сортировки по дате, сумме и контрагенту, это помогает ориентироваться в ленте при большом количестве операций;
Появилась кнопка для одновременного сброса фильтров и сортировки;
Мы увеличили ширину ленты операций, сократив боковую область;
Пространство, где раньше были боковые фильтры, теперь используется под обороты;
Все дополнительные настройки собраны в модальном окне, которое открывается по клику и позволяет точно отфильтровать ленту.

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