Примеры дизайна финтех-приложений: платежи, инвестиции, кредитование и банкинг
Основные типы финтеха — платежи, инвестиции, кредитование и банкинг, часто пятым называют страхование. Официального списка нет: исследование 2021 года в Future Studies Research Journal предлагает девять категорий. Ниже — примеры дизайна финтех-приложений для каждого типа на экранах, которые thelegacy сделала для Solid, Banxe, BANKEX и dEquity.
Каждый тип ставит на первый экран другое число, и этот выбор определяет остальной дизайн финтех-приложения. Какое именно — в таблице.
Какие основные типы финтеха и примеры?
Для дизайна продукта четыре типа покрывают большинство приложений, которыми пользуются люди: платежи, инвестиции, кредитование и банкинг. Таксономия 2021 года (Caciatori Jr. и Cherobim) делит сферу мельче: платежи и переводы, обмен, кредитование, страхование, инвестиции, консультирование, B2B, цифровые банки и прочее. Реальные продукты часто попадают в несколько категорий сразу.
| Тип | Первый вопрос пользователя | Что показывает первый экран | Пример из наших кейсов |
|---|---|---|---|
| Платежи и переводы | Дошло? Сколько стоило? | Баланс, получатель, сумма, сеть или комиссия до подтверждения | Кошелёк BANKEX, P2P в Banxe |
| Инвестиции | Сколько это стоит и сколько приносит? | Активы с ценой, доходностью, изменением; отдельная панель заявки | dEquity |
| Кредитование | Сколько можно занять и сколько я должен? | Доступная сумма, остаток долга, дата следующего платежа | Опубликованного кейса нет |
| Банкинг | Где все мои деньги? | Счета с балансами, история по месяцам, карты | Solid |
Что должно показывать платёжное приложение?
Платёжный экран показывает, кто получит деньги, сколько и каким путём, — всё до кнопки подтверждения, а потом квитанцию, которая это повторяет. Всё, что человек узнаёт после списания, воспринимается как ловушка.
Криптокошелёк BANKEX, который мы спроектировали в 2019 году, позволяет отправить токены на адрес, контакту, на никнейм в Telegram или через QR-код. Каждый путь заканчивается одним и тем же экраном Transaction Confirmation: сумма крупно на синей шапке, дальше From и To с фото контакта, дальше одна кнопка Confirm Transaction. Экран информации о транзакции после этого показывает отправителя, хеш, дату и статус Success, Pending или Failed.
Banxe, платформа, объединяющая фиатные и криптосервисы, показывает более сложный случай — P2P-сделку между незнакомыми людьми. Степпер из четырёх шагов ведёт сделку, таймер показывает, когда предложение отменится само, а рядом панель контрагента: дата регистрации, число транзакций, рейтинг и уровень верификации, плюс кнопка Chat. Проверка доверия происходит, не выходя из заявки.
Что должно показывать инвестиционное приложение?
Инвестиционный экран показывает активы так, как это делает брокер: цена, доходность и движение за последнее время в одной строке, а покупка — на отдельной панели. Решение и действие разделены намеренно.
dEquity превращает доходные здания в NFT и даёт инвесторам торговать долями на собственной DEX. Таблица Top offers to invest показывает здания как акции: тип объекта и город, доходность зелёным, цена, спарклайн, тикер, общая эмиссия и кнопка Details. Страница объекта делится на вкладки Information и Trading, поэтому факты о здании не смешиваются с рынком, а Trading сочетает график цены с панелью заявки и зелёной кнопкой Place Buy Order.
Решение дизайнера здесь такое: сайт для новых инвесторов светлый, белый и бледно-голубой, а торговый интерфейс — его тёмный двойник из тех же компонентов. Те, кто присматривается, и те, кто торгует, получают разные поверхности, не изучая два продукта.
Что должно показывать кредитное приложение?
Кредитный экран отвечает на три вопроса в одном виде: сколько доступно, сколько ещё должен и когда следующий платёж. Ставка и полная стоимость должны быть видны до того, как человек примет предложение, а не в документе по ссылке на последнем шаге.
Опубликованного кредитного кейса у нас нет, поэтому вот чек-лист, который мы применили бы, — из тех же паттернов, что выше:
- Доступная сумма и остаток долга — два самых крупных числа на экране
- Сумма и дата следующего платежа на главном экране, а не в меню
- Полная стоимость предложения до кнопки согласия — так же, как комиссия до подтверждения в платежах
- История погашений, которую можно прочитать, не открывая каждую строку, как банковскую выписку
- Цвет только со смыслом: просроченное красным, оплаченное зелёным, остальное нейтрально
Что должно показывать банковское приложение?
Банковское приложение сначала показывает все счета с балансами, потом историю, которую можно прочитать одним взглядом. Когда один человек ведёт личные и корпоративные деньги, они должны выглядеть отдельно.
Solid даёт бизнесу расчётные счета, дебетовые карты Visa и платежи ACH, wire, картой и чеком через банк-спонсор. В приложении Wallet счета сгруппированы по владельцу — человеку или компании — с промежуточным итогом на группу. История разбита по месяцам, у каждой строки цветной тег платёжного канала, а цвет появляется только там, где что-то значит: зелёный для поступлений, красный для списаний.
Больше общих для всех четырёх типов паттернов, от квитанций до комиссии до подтверждения, — в нашем гайде UX-дизайн финтех-продуктов. Как мы работаем с финтех- и криптоприложениями, показано на странице дизайн мобильных приложений.
Главное
- Каждый тип финтеха ставит на первый экран своё число: платежи — сумму и получателя, инвестиции — доходность, кредит — долг и дату платежа, банкинг — балансы счетов.
- Всё, что касается стоимости, должно быть видно до кнопки подтверждения: человек, узнавший о комиссии после списания, перестаёт доверять.
- Решение и действие — на разных панелях: в dEquity факты о здании на вкладке Information, а заявка на покупку — на вкладке Trading.
Частые вопросы
Какие основные типы финтеха и примеры?
Чаще всего называют четыре: платежи и переводы, инвестиции, кредитование и цифровой банкинг, иногда пятым — страхование. Примеры из наших кейсов: криптокошелёк BANKEX для платежей, dEquity для инвестиций в токенизированную недвижимость, Solid для бизнес-банкинга.
Что такое четыре столпа финтеха?
Так обычно называют те же четыре направления: платежи, инвестиции, кредитование и банкинг. Официального стандарта нет, а академические классификации бывают мельче, например девять категорий в исследовании 2021 года.
Назовите пять примеров финтеха.
Платёжное приложение для переводов, криптокошелёк, платформа для инвестиций, цифровой банк с картами и счетами в приложении и сервис онлайн-страхования. Один продукт часто совмещает несколько таких функций.
Криптокошелёк — это финтех-приложение?
Да. Он хранит и переводит деньги, поэтому стоит в той же категории платежей и переводов, что и обычные платёжные приложения, а к дизайну предъявляются те же требования: сумма, получатель и сеть до подтверждения.
Почему торговые интерфейсы часто делают тёмными?
На тёмном фоне графики, зелёные и красные изменения цены и плотные таблицы читаются контрастнее при долгой работе. Поэтому, например, в dEquity сайт для инвесторов светлый, а торговый интерфейс — тёмный двойник из тех же компонентов.
