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 (криптогаманець). Ми проєктуємо веб-дашборди, мобільні застосунки, айдентику бренду й пітч-деки.