Баланс функциональности и простоты: исследование главных экранов банковских приложений

19 июня 2025 года компания UsabilityLab провела вебинар, на котором были представлены результаты нового исследования в рамках проекта «Банковский UX», посвященного анализу главных экранов мобильных приложений и веб-версий 20 российских банков.

Ведущими вебинара выступили Анна Исламова, руководитель направления UX-исследований в UsabilityLab, и Дмитрий Сатин, CEO UsabilityLab.

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

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

В исследовании приняли участие следующие банки:

• Ozon Банк
• Ак Барс Банк
• Альфа-Банк
• Банк «Санкт-Петербург»
• Банк Зенит
• Банк Уралсиб
• ВТБ
• Газпромбанк
• МКБ
• МТС Банк
• ОТП Банк
• Почта Банк
• ПСБ
• Райффайзен Банк
• Россельхозбанк
• СберБанк
• Совкомбанк
• Т-Банк
• УБРиР
• Яндекс Пэй

Методология исследования основывалась на экспертном анализе интерфейсов. Приложения рассматривались на платформе Android, а веб-версии – через браузер Safari. Это позволило не только изучить особенности интерфейсов, но и сравнить согласованность дизайна между разными платформами одного банка.
Материалы эфира «Главные экраны приложений и интернет-банков».

📹 Запись эфира VK Видео | YouTube
📔 Презентация

⚡️ Оставьте заявку на отчет с полными результатами исследования.

Особенности главных экранов

Информация о счетах на оплату

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

Участники вебинара активно обсуждали различные варианты реализации. «Второй вариант подсказывает, от кого счет на оплату. Это здорово», – отметила Елена Петрова. Другие участники выделили третий вариант как «самый хороший, компактный и содержательный», подчеркнув ценность отображения количества счетов.

Елена также подняла интересный вопрос: «Интересно, когда счетов от 5 и больше, как это может выглядеть?» Действительно, большинство тестовых аккаунтов содержат лишь 2-3 счета, что не позволяет оценить, как интерфейс справляется с большим количеством данных.

Различия в визуализации QR-кода

Отдельного внимания заслуживает отсутствие единого стандарта в оформлении иконок QR-кода. Несмотря на универсальность технологии, иконки, используемые для её обозначения в различных интернет-банках, демонстрируют значительные визуальные различия.

Исследователи провели интерактивный опрос среди участников вебинара, предложив определить, какие из представленных иконок не являются сканерами QR-кода. Результаты показали, что большинство выбрали иконку №3, хотя, как выяснилось позже, все представленные варианты действительно обозначали QR-сканеры.

Владимир Китляр, руководитель дизайнеров мобильного приложения Альфа-Банка, предложил интересную идею: «Хорошая идея – договориться о едином подходе к таким иконкам (QR, Face ID, платежи и т.д.), чтобы единый паттерн считывания семантики у клиентов был». Максим Вергель подхватил эту мысль, отметив: «У Альфы и Сбера понятные значки QR. Есть уголки и узнаваемые квадраты кода. Только у Сбера их 4 почему-то».

Реклама долгосрочных сбережений

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

Баланс между маркетинговыми предложениями и необходимыми функциями

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

Один из слушателей в чате отметил: «Это подход Superapp, где приложение становится огромным супермаркетом, а не только банком. Частично это удобно, но иногда напоминает долгое хождение по этому самому супермаркету». Konstantin Savostyuk поднял интересный вопрос: «Интересно было бы узнать, насколько пользователю комфортнее получать дом и гараж в продукте банка или как отдельное приложение».

Эта дискуссия отражает более широкую проблему: с одной стороны, пользователи хотят простые реализации основных функций, а с другой — банкам нужно продвигать новые сервисы и повышать вовлеченность. Как отметила Анна Исламова: «Superapp не грузится, если медленный интернет, усложняется навигация, но тем не менее банк видит аналитику, и если раздел “Город” работает, если раздел “Авто” работает на покупку и продажу страховых продуктов или партнерские предложения по ремонту, то почему нет?»

Тематические разделы

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

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

Кросс-платформенность: сравнение веб-версий и мобильных приложений

Различия в дизайне веб-версии и приложения

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

Екатерина Никитина задала интересный вопрос: «Может быть такое, что разделы не мэтчатся из-за разных метрик на устройствах?» На что Дмитрий Сатин уверенно ответил: «Я просто зуб даю, что они не совпадают вообще никак: Android, iOS-версия, мобильный банк, особенно ещё и с десктопом. Разные команды, разные подрядчики – связи мало наблюдаем».

Другая Екатерина предположила, что различия могут быть связаны с A/B-тестированием: «Может, это подобие A/B-тестов?» – что также является вполне вероятным объяснением.

Различия в таббарах веб-версии и приложения

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

Различия в инфографике

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

Различия в названии разделов

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

Базовые функции главных экранов

Ядро функций

Исследователи выделили “ядро функций” – набор возможностей, которые присутствуют в большинстве банков (15 и более из 20 исследованных). Это:

• Открытие любого продукта с помощью одной кнопки
• Переход к истории операций и платежам в таббаре
• Переход к чату с поддержкой
• Оплата по QR-коду
• Список карт и счетов пользователя
• Переход к разделу бонусов/кешбэка
• Маркетинговые предложения банка

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

Функции, присутствующие у половины банков

Отдельно были выделены функции, встречающиеся у 10-11 банков из 20. Это функции, которые еще не стали общепринятой практикой, но уже активно внедряются:

• Перевод по СБП
• Возможность открыть новый счет или вклад отдельной кнопкой
• Возможность открыть новую карту/карточный счет отдельной кнопкой
• Курсы валют
• Маркетинговые предложения партнеров
• Баланс бонусов/кешбэка
• Возможность свернуть и развернуть разделы главного экрана
• Поиск по сайту

Интересно, что перевод по СБП пока еще не везде доступен на главной странице, хотя система уже достаточно популярна. «Неожиданно, что перевод по СБП пока ещё не везде на главной. Он может быть в платежах достаточно высоко или располагаться при переходе внутрь продукта», – отметила Анна Исламова.

Редкие функции на главных экранах

Частые переводы, отображаемые как шаблоны

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

Вкладки по видам продуктов

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

Екатерина Никитина задала важный вопрос: «А какие минусы, если вводить вкладки, а если у пользователя мало продуктов?» В ходе обсуждения выяснилось, что основной недостаток – это отсутствие экрана, где располагаются все продукты одновременно, что требует дополнительных действий от пользователя.

Общая сумма расходов за текущий месяц

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

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

Переход к полному списку валют с курсами

Пользователь может перейти к полному списку валют с курсами с помощью элемента на главном экране. Обычно на главной странице показаны только 2-3 основные валюты, а переход к полному списку реализован через специальную кнопку или стрелку.

История операций на главном экране

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

Настройка главного экрана в веб-версии

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

Возможность скрыть ненужные предложения

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

Удачные решения

Быстрые операции в области первого экрана

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

Все необходимые данные о счетах на оплату без лишних действий

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

Четкие и понятные названия вкладок для просмотра курсов при разной форме оплаты

Вкладки с курсами валют при разной форме оплаты имеют четкие и понятные названия. Пользователь сразу понимает назначение вкладок и быстро находит нужную информацию.

Возможность скрыть ненужные предложения во вкладках продуктов

Пользователь может скрыть предложения, которые ему неинтересны или неактуальны, что повышает уровень удовлетворенности от взаимодействия с сервисом.

Юзабилити-проблемы

В результате исследования было выявлено 40 юзабилити-проблем разной степени критичности. Каждой проблеме присваивалась одна из трех категорий:

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

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

Визуальное отображение кнопок не передает их назначения

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

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

Крестик закрытия рекламного предложения плохо заметен на цветном фоне

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

Проблема жестов вызвала бурную дискуссию среди участников. Андрей Клёц отметил: «Сокрытие баланса жестом – это топ. Но этот жест редко используется в жизни, он просто очень экзотический, и поэтому про него просто забываешь». Константин Глазков добавил: «Про свайпы – это всегда страшно, надо это влево или вправо делать, и что влево/вправо разные действия делает (как в почте Gmail)».

Название раздела не соответствует его содержимому

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

Слитные вкладки

Названия вкладок «Действия», «Полезное», «Шаблоны» имеют небольшое расстояние между собой, что визуально объединяет их в один сплошной текст. Также нарушен принцип единообразия: отображение вкладки «Шаблоны» отличается по размеру шрифта и имеет подложку, что создает небрежный вид продукта и снижает уровень доверия пользователя.

Многократное размещение одного и того же кредитного предложения

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

Неудачная визуализация кнопки подписки

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

Вводящие в заблуждение предложения новых продуктов

Предодобренная сумма кредитного продукта выглядит как действующий продукт. Пользователь может подумать, что кто-то без его участия оформил для него кредит. Рая в чате отметила: «На предыдущем слайде прям черный паттерн, будто у тебя уже 400 000 на счету».

Аналогично, предложение о дебетовой карте может выглядеть как активная карта пользователя, что также вызывает замешательство.

Тенденции и будущее главных экранов банковских приложений

Исследование позволяет выделить несколько ключевых тенденций в развитии интерфейсов банковских приложений:

1. Движение в сторону суперапп vs. сохранение фокуса на банковских функциях. Банки активно расширяют функционал своих приложений, добавляя небанковские сервисы, но это может усложнять навигацию и отвлекать от основных задач.
2. Баланс между маркетингом и удобством использования. Банки стремятся продвигать новые продукты, но агрессивная реклама может негативно влиять на пользовательский опыт.
3. Потенциал унификации элементов интерфейса. Особенно это касается иконок для стандартных функций, таких как QR-коды или системы быстрых платежей.
4. Развитие тематических разделов и персонализации. Организация функций по жизненным ситуациям («Дом», «Авто») становится все более популярной.

Рекомендации для проектирования главных экранов

На основе проведенного исследования можно сформулировать следующие рекомендации для проектирования главных экранов банковских приложений:

1. Четкое разделение между текущими продуктами и предложениями. Пользователь должен легко отличать свои активные продукты от маркетинговых предложений.
2. Узнаваемость интерфейсных элементов. Иконки и другие визуальные элементы должны быть интуитивно понятными и соответствовать общепринятым паттернам.
3. Последовательность в терминологии и дизайне между платформами. Веб-версия и мобильное приложение должны использовать одинаковые термины и визуальные решения для одних и тех же функций.
4. Предоставление пользователю контроля над интерфейсом. Возможность настраивать главный экран, скрывать ненужные предложения и управлять отображением информации повышает удовлетворенность пользователей.
5. Баланс между информативностью и визуальной чистотой. Главный экран должен предоставлять доступ к ключевой информации и функциям, не перегружая пользователя.

Заключение

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

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

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

Статья подготовлена по материалам вебинара UsabilityLab «Главные экраны приложений и интернет-банков» от 19 июня 2025 года. Спикеры: Анна Исламова, руководитель направления UX-исследований в UsabilityLab, и Дмитрий Сатин, CEO UsabilityLab.

Подписывайтесь на наш Телеграм-канал — анонсы мероприятий, кейсы и статьи, расписание нашей Школы, и многое другое.