UX-дизайн в финтехе: 9 паттернов, благодаря которым люди доверяют финансовому приложению

UX-дизайн в финтехе — это проектирование интерфейсов финансовых продуктов: банкинга, платежей, кошельков и трейдинга. Люди доверяют финансовому приложению, когда оно никогда не заставляет их гадать, сколько у них денег, сколько будет стоить действие, что случилось с их деньгами и как они защищены. Девять паттернов ниже дают именно это, и каждый показан на экранах, которые мы спроектировали для Solid, Banxe, Souq и BANKEX.

Девять паттернов коротко

Паттерн	На какой вопрос пользователя он отвечает	Где показан
1. Один баланс во главе экрана	Сколько у меня денег?	Solid, BANKEX
2. История операций, понятная с первого взгляда	Куда ушли мои деньги?	Solid
3. Комиссии до кнопки подтверждения	Сколько это мне будет стоить?	Souq, Banxe
4. Проверка, подтверждение, затем квитанция	Прошел ли перевод?	Solid, BANKEX, Banxe
5. Один вопрос на экран в онбординге	Зачем вам мой документ и сколько это займет?	Solid
6. Безопасность, которую видно	Защищен ли мой счет?	BANKEX, Banxe
7. Цвет только там, где он что-то значит	Это хорошая новость или плохая?	Solid
8. Сигналы доверия там, где принимают решение	Можно ли доверять другой стороне сделки?	Banxe
9. Одна дизайн-система для всех экранов	Это действительно та же компания?	Banxe

Чем UX в финтехе отличается от других приложений?

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

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

1. Начните с одного баланса и подпишите, что это за баланс

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

В приложении Solid Wallet счета сгруппированы по владельцу — человеку или компании — с итогом для каждой группы, поэтому личные и корпоративные деньги никогда не смешиваются в одном списке. На десктопе вкладки вверху переключают счета, например Receivables и Purchase, каждый со своим балансом, а обзор открывается черной карточкой баланса. Кошелек BANKEX Crypto Wallet открывается общей суммой в долларах, а под ней — карточка каждого монетного кошелька с ценой, изменением и балансом.

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

2. Сделайте каждую операцию понятной с первого взгляда

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

Solid делит историю по месяцам, а каждая строка несет тонированную метку платежного канала: ACH, Card, Wire или Check. Списания — красным, поступления — зеленым. На десктопе страница Transactions добавляет поиск, фильтры и экспорт, потому что бизнес-пользователь сверяет платежи со счетами и должен найти одну строку среди сотен.

3. Показывайте комиссии и курсы до кнопки подтверждения

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

В Souq, финансовом рынке для экономик web3-игр, каждое действие со стейкинг-хранилищем заканчивается окном подтверждения, и мы спроектировали их как одно семейство. Порядок всегда одинаковый: название хранилища вверху, суммы в темных плитках, затем расписанные комиссии до кнопки (депозит, выкуп, газ, комиссия DEX, проскальзывание, влияние на цену) и одна кнопка подтверждения в конце. На бирже Banxe страницы пополнения и вывода ставят выбор сети (ERC20, BEP20 или BEP2) рядом с QR-кодом, потому что сеть определяет и стоимость, и то, дойдут ли деньги вообще.

4. Проверка, подтверждение, затем квитанция, которая повторяет, что произошло

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

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

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

5. В онбординге и KYC спрашивайте одно на экран

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

Solid делит открытие счета на короткие этапы. Сначала настройка кошелька с переключателем, отправлять ли карту почтой; дальше адрес, личные данные и проверка личности, где пунктирный овал показывает, куда поместить лицо. Последний экран дает то, ради чего все начиналось: номер нового счета и routing number. Раскрытие информации о банке-партнере остается под формой мелким шрифтом: его можно прочитать, но оно не отвлекает от задачи.

6. Сделайте безопасность видимой и спокойной

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

В кошельке BANKEX приложение защищает шестизначный PIN-код, а неверный ввод получает собственное сообщение вместо общей ошибки. При создании нового кошелька есть проверка seed-фразы: приложение показывает слова для восстановления, потом просит ввести их снова, и любая ошибка подсвечивается красным. Каждый шаг сопровождает линейный персонаж, и задача, которую большинство считает технической, становится менее напряженной. Настройки карты в Banxe — простой список строк: Change PIN, Re-create card, Block card и Close card, и красным тонированы только две, которые нельзя отменить.

7. Используйте цвет только там, где он что-то значит

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

Solid держит экраны монохромными, черное и белое на светло-сером фоне, и тратит цвет только там, где он что-то значит. Зеленый обозначает поступления и завершенные действия, красный — деньги, которые уходят со счета, пастельные метки называют тип платежа, а оранжевый означает тестовый режим. Даже аватары — серые квадраты с инициалами, а не фото. Прежде всего приложение спрашивает, в каком режиме начать, TEST или LIVE, и маленькая оранжевая или зеленая точка все время напоминает о выборе, поэтому бизнес не спутает тестовый платеж с настоящим. Для контраста: dEquity, платформа токенизации недвижимости, которую мы спроектировали, сочетает светлый инвестиционный сайт с темным торговым интерфейсом для токенов недвижимости.

Добавляйте к цвету знак или слово (минус, «Не удалось», «В обработке»), чтобы смысл сохранился для людей, которые не различают красный и зеленый.

8. Ставьте сигналы доверия там, где принимают решение

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

Экран P2P-сделки на бирже Banxe несет больше всего логики во всем продукте. Четырехшаговый степпер отслеживает сделку, а фиолетовый таймер показывает, когда предложение отменится само. Рядом панель контрагента показывает дату регистрации, число операций, рейтинг и уровень верификации с кнопкой Chat, поэтому проверка доверия происходит, не покидая заказ.

9. Держите одну дизайн-систему для приложения, сайта и бренда

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

Banxe объединяет фиатные и криптосервисы в одной платформе, и правила для экранов записаны в ее брендбуке. У каждого из пяти продуктов — Crypto, Trading, Business, Ecology и Fiat Money — есть шестиугольник с собственным градиентом. Цифры и заголовки набраны Druk Wide, текст — Gilroy, поэтому балансы выглядят широкими и тяжелыми, а формы вокруг них остаются спокойными. У палитры есть бюджет: графитовый и лавандовый занимают 70–80 процентов макета, фиолетовые акценты — 10–20, а зеленому и красному информационным цветам достается совсем немного. Биржа, приложение и питч-дек берут все из этого одного набора.

Как проверить, что финтех-интерфейс вызывает доверие?

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

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

Как thelegacy работает с финтех-продуктами

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

Кейсы, на которых построена эта статья: Solid (бизнес-банкинг: веб-дашборд и приложение Wallet), Banxe (фиатная и крипто-платформа: биржа, приложение и бренд), Souq (стейкинг-хранилища для экономик web3-игр) и BANKEX (криптокошелек). Больше — в портфолио UX/UI и веб-дизайна и мобильных приложений. Если вы создаете финансовый продукт, расскажите нам о нем.

Главное

• UX-дизайн в финтехе — это проектирование интерфейсов финансовых продуктов, и его первая задача — убрать неопределенность насчет денег пользователя.
• Финансовое приложение, которому доверяют, начинается с одного подписанного баланса, делает каждую операцию понятной с первого взгляда и показывает каждую комиссию до кнопки подтверждения.
• Движению денег нужны шаг проверки, одно действие подтверждения и квитанция, которая повторяет, что, куда и когда ушло; ошибка должна говорить, что случилось с деньгами.
• KYC-онбординг лучше всего работает с одним вопросом на экран, объяснением для каждого запрошенного поля и раскрытием информации, которое есть, но не мешает.
• Цвет должен нести только смысл, безопасность — быть видимой, но спокойной, а одна дизайн-система для приложения, сайта и бренда делает настоящий продукт узнаваемым.

Частые вопросы

Что такое UX-дизайн в финтехе?

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

Что делает финтех-приложение заслуживающим доверия?

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

Как финтех-приложение должно показывать комиссии?

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

Как спроектировать KYC-онбординг, который люди проходят до конца?

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

Нужна ли финтех-приложению темная тема?

Зависит от задачи. Темные интерфейсы подходят для экранов, за которыми долго следят и где много меняющихся данных, например торговых терминалов; светлые — для форм, онбординга и чтения. dEquity, платформа токенизации недвижимости, которую мы спроектировали, имеет оба: светлый инвестиционный сайт и темный торговый интерфейс.

Проектирует ли thelegacy финтех-приложения?

Да. Финтех и крипто-продукты составляют большую часть наших опубликованных работ, среди них Solid (бизнес-банкинг), Banxe (фиатная и крипто-платформа), Souq (стейкинг-хранилища для экономик web3-игр) и BANKEX (криптокошелек). Мы проектируем веб-дашборды, мобильные приложения, айдентику бренда и питч-деки.