User-friendly дизайн в финансах: как упростить сложные продукты

Фото: Shutterstock
Фото: Shutterstock
Делимся приемами, которые помогают превратить сложные интерфейсы финансовых продуктов в понятные и удобные для пользователей

Об эксперте: Юлия Немудрова, ведущий менеджер по созданию и развитию цифровых продуктов в международной компании OEConnection.

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

Ключевые принципы user-friendly дизайна

При разработке интерфейса важно придерживаться нескольких правил.

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

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

Фото:Freepik
Экономика инноваций Дизайн с душой: как эмпатия формирует будущее цифровых продуктов

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

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

Функция избранных платежей и переводов особенно актуальна, когда деньги нужно перевести срочно
Функция избранных платежей и переводов особенно актуальна, когда деньги нужно перевести срочно (Фото: приложение «Т-Банк»)

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

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

Например, приложение «Ренессанс Капитала» демонстрирует удобную навигацию и доступ к основным функциям инвестирования.

Приложение «Ренессанс Капитала»
Приложение «Ренессанс Капитала» (Фото: приложение «Ренессанс Капитал»)

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

Говорим с пользователем на простом языке

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

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

В «Т-Инвестициях» есть готовые идеи для инвестирования и истории, которые помогают узнать больше о разных инструментах
В «Т-Инвестициях» есть готовые идеи для инвестирования и истории, которые помогают узнать больше о разных инструментах (Фото: приложение «Т-Инвестиции»)

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

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

Например, из подсказок в приложении «Альфа-Капитала» можно узнать, как продавать активы и в какое время лучше покупать акции.

Подсказки в приложении «Альфа-Капитала»
Подсказки в приложении «Альфа-Капитала» (Фото: приложение «Альфа-Капитал»)

Фото:Shutterstock
Экономика образования Кто такой UX/UI-дизайнер, сколько он зарабатывает и как им стать

Упрощаем функционал без потери ценности

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

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

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

Улучшаем восприятие с помощью визуальных приемов

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

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

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

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

Примеры реальных грузов значительно облегчают восприятие информации и помогают принять осознанное решение
Примеры реальных грузов значительно облегчают восприятие информации и помогают принять осознанное решение (Фото: «Яндекс Доставка»)

Тестируем интерфейс на реальных пользователях

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

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

Фото:Unsplash
Экономика образования Финансовая грамотность: как не потратить всю зарплату и заработать больше

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

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

Регулярные улучшения на основе анализа поведения клиентов и сбор обратной связи — must-have для всех финансовых приложений. Тестирование делает аудиторию лояльнее и формирует продукт, который естественно интегрируется в повседневную жизнь пользователей.

➤ Подписывайтесь на телеграм-канал «РБК Трендов» — будьте в курсе последних тенденций в науке, бизнесе, обществе и технологиях.

Обновлено 22.01.2025
Главная Лента Подписаться Поделиться
Закрыть