Финансовая сфера

Банковское обозрение


  • «БСПБ Бизнес»: нескучные стандарты мобильного приложения
23.05.2024 FinCorpFinTechАналитика

«БСПБ Бизнес»: нескучные стандарты мобильного приложения

Как увязать развитие функциональности мобильного приложения с созданием интуитивно понятного, предсказуемого интерфейса? Как сделать клиентский опыт бизнес-пользователя таким же удобным и привычным, как в приложении для частных клиентов, и при этом обеспечить гибкость для разработчиков в дальнейшем развитии сервисов? На эти непростые вопросы команда цифрового бизнеса банка «Санкт-Петербург» (БСПБ) ответила созданием полноценной дизайн-системы, которая легла в основу обновленного мобильного приложения «БСПБ Бизнес»


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

Комментарий команды БСПБ

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

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

Комментарий команды БСПБ

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

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

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

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

Динамически реализован и дизайн иконки замочка, маркирующей наличие ограничений. Замочек будет малозаметного серого цвета, если средства ограничены операциями, находящимися в обработке. Если случается нештатная блокировка средств (например, ограничения со стороны ФНС), которая требует действий от клиента, замочек становится красным и привлекает внимание. Это сигнал, что стоит зайти в детализацию и посмотреть, по какой причине возникли ограничения.

В блоке «Счета» сохранился быстрый доступ к опциям «Выписка» и «Карты» (продублированы иконкой и надписью), которые клиенты часто используют. Другие действия обозначены только иконками (впрочем, интуитивно понятными): открыть новый счет, сканировать QR-код для создания платежа, поделиться реквизитами счета. Навигация между счетами происходит свайпом вправо-влево, о чем подсказывает соответствующий элемент навигации внизу блока.

Комментарий команды БСПБ

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

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

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

Новый элемент — кнопка подключения продуктов (плюсик, зафиксированный справа внизу экрана): при нажатии на нее происходит переход не к соответствующему разделу, а непосредственно к действию. Например, при выборе пункта «Подключить торговый эквайринг» у клиента сразу открывается форма заявления. Ранее для этого пришлось бы пройти более длинный путь: «Продукты и сервисы» — «Эквайринг» — «Подключить» — выбрать «Торговый эквайринг». Таким образом, путь до целевого действия сокращается вдвое, до двух кликов.

Комментарий команды БСПБ

К редизайну приложения мы подошли с пониманием популярных действий и услуг, которыми пользуется большинство клиентов. При работе со сценариями смотрели на отзывы пользователей, а также на обратную связь в рамках ежегодного замера удовлетворенности клиентов качеством дистанционных услуг: что неудобно, где часто ошибаются, чего не хватает. Мы не стали менять логику коренным образом, чтобы не сломать большинство привычек клиентов и то, что им нравилось в приложении. Точечно улучшили UX, поддержав свежим UI.

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

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

Комментарий команды БСПБ

Чаще всего операционное управление финансами осуществляет бухгалтер в веб-версии интернет-банка, а контроль и визирование — руководитель компании в мобильном приложении.

Блоки «Платежи» и «Иные документы» сделаны именно для удобства руководителя. Теперь не нужно искать по всему приложению документы, ожидающие подписи, — они все собраны в быстром доступе на главном экране. Заходя в приложение, клиент сразу видит, что нужно подписать важные документы: например, пять платежей, заявление на размещение депозита и заявку на электронную справку.

Эти действия выполняются из одного раздела, занимают минимум времени и позволяют руководителю эффективно и комфортно выполнять контрольно-визирующую функцию.

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

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

Комментарий команды БСПБ

Значительные визуальные изменения произошли на экранах, связанных с совершением и просмотром операций. В формах увеличены расстояния между полями и зоны их нажатия до рекомендуемых стандартами Accessibility. Во всем приложении интерактивные элементы приведены к рекомендациям по зоне нажатия и отклику на взаимодействие. Повышена контрастность текста и элементов до уровня стандартов WCAG.

В целом, новый дизайн мобильного приложения «БСПБ Бизнес» вызывает ассоциации с неброским, но дорогим и стильным рабочим инструментом. Благодаря стандартизованному выверенному дизайну работать с приложением очень комфортно — находишь информацию и производишь нужные действия, практически не задумываясь. При этом дизайн нельзя назвать скучным. Такие элементы, как графическая линейка «Всего средств», «Продукты и сервисы», и актуальный формат «сторис» на главном экране оживляют интерфейс, при этом не жертвуя удобством и функциональностью приложения для клиентов, а напротив, усиливая их.

Комментарии команды БСПБ

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

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






Новости Релизы
Сейчас на главной

ПЕРЕЙТИ НА ГЛАВНУЮ