Розробка UX/UI дизайну DeFi-протоколу
DeFi вбиває користувачів не смарт-контрактами — інтерфейсом. Людина бачить поле «slippage tolerance», вводить 49% замість 0.49%, втрачає половину свопу на MEV-бота. Або не розуміє різницю між «supply» та «borrow» у лендингу, случайно бере кредит замість депозиту. Це не гіпотетика — це систематичні паттерни поведінки реальних користувачів.
DeFi-дизайн складніше звичайного web-дизайну: потрібно зробити зрозумілим продукт, що працює з грошима, має необоротні дії та вимагає розуміння концепцій, яких немає в традиційних фінансах.
Де DeFi-інтерфейси ломають користувачів
Терминологічна прірва
«Collateral ratio», «utilization rate», «impermanent loss», «ve-tokenomics» — для криптонативного користувача це знайомі концепції. Для людини, що прийшла з tradfi або взагалі без досвіду — непрохідний бар'єр.
Рішення не в тому, щоб убрати терміни (вони точні та потрібні), а дати контекст прямо в інтерфейсі. Health factor 1.2 — це не просто число, це «ваша позиція буде ліквідирована при падінні ETH на 17%». Цю цифру (17%) потрібно показувати поруч з health factor. Уберіть абстракцію там, де є конкретна цифра.
Необоротні дії без контексту
Submit транзакції — не «Зберегти» у вебі. Це необоротно та коштує грошей. Інтерфейс повинен перед кожною транзакцією показувати: що саме відбудеться, скільки газу це коштує, який worst case при поточному slippage. Uniswap робить це добре — confirmation modal з повним розбором.
Але багато протоколів показують тільки «Confirm». Результат: користувач підтверджує транзакцію, не розуміючи, що вона з'їсть 3% на MEV при його налаштуваннях.
Ключові екрани та їх специфіка
Trading / Swap інтерфейс
Головна задача — убрати когнітивне навантаження з механіки, залишити фокус на рішенні: що та скільки міняю.
Критичні елементи:
- Price impact — показувати завжди, підсвічувати червоним при >1%
- Minimum received — не «slippage tolerance», а конкретна сума в токенах
- Gas estimate у USD, обновляємий у реальному часі
- Route visualization — через які пулы йде своп, особливо для multi-hop
Slippage tolerance — поле, яке більшість користувачів не повинні трогати. Default 0.5% для стейблкоинів, 1% для інших токенів. Попередження при вводі >5%. Блокування при >50% (майже напевне помилка).
Позиції у лендингу (Aave/Compound-style)
Головний екран — дашборд ризиків, а не список транзакцій. Потрібно бачити:
- Health factor з візуальним індикатором (зелений/жовтий/червоний)
- При якому значенню базового активу відбудеться ліквідація (у USD та %)
- Поточний borrow APY проти supply APY — net позиція
- Collateral та борг по кожному активу
Liquidation price потрібно показувати в термінах знайомих активів: «ваш ETH буде частково ліквідований при ціні нижче $1,847». Не «при LTV 82.5%».
Управління позицією на perpetual DEX
Perpetual DEX (GMX-style, dYdX-style) — найскладніший case для UX. Користувач управляє:
- Розміром позиції та плечем
- Take profit / Stop loss
- Funding rate (що постійно змінюється)
- Margin requirements
Тут ошибка дизайну коштує дороже за все. Обов'язково: симулятор PnL при різних цінах прямо на екрані відкриття позиції, візуалізація liquidation price на ціновому графіку, відображення поточного funding rate з прогнозом на 8 годин.
Analytics Dashboard
Окремий екран для аналітики — не опція, а необхідність для протоколів з реальними засобами. Користувач повинен бачити:
- Історичну доходність у % та USD
- Порівняння з бенчмарком (ETH HODL, BTC HODL, USDC yield)
- Усі транзакції з деталями
- Реалізовані та нереалізовані PnL
Дизайн-система для DeFi
Не потрібно винаходити компоненти з нуля. Розумна основа — адаптація Radix UI або shadcn/ui під DeFi-специфіку: темна тема як дефолт (Web3 очікування), monospace шрифти для числових значень (допомагає порівнювати цифри), кольорова система з трьох станів (safe/warning/danger) для risk-індикаторів.
Числа у DeFi вимагають особливої уваги:
- Баланс 0.000000123 WBTC → показуємо «< 0.001 WBTC» або в USD еквіваленті
- Великі числа з розділювачами: 1,234,567.89
- APY: «12.4%» а не «12.394812%» — округління до 1-2 знаків достатньо
- Адреси гаманців: завжди truncated з повною адресою в tooltip + copy button
Онбординг для Web3-новичків
Підключення гаманця — перший бар'єр. Багато хто йде на кроці «Install MetaMask». Паттерн: пояснити, що таке гаманець (2 речення), показати підтримувані опції (MetaMask, WalletConnect, Coinbase Wallet), додати «Що таке Web3-гаманець?» з inline поясненням.
Після підключення — показати баланс у USD одразу, не вимагати додаткових дій.
Процес роботи
Discovery (2-3 дні). Аудит конкурентів (Uniswap, Aave, GMX, Curve), аналіз user flows, складання списку edge cases та risk-сценаріїв. Технічне брифування з командою розробки — зрозуміти які дані доступні on-chain у реальному часі.
Wireframes та user flows (3-5 днів). Всі основні сценарії в низькій деталізації. Фокус на інформаційній архітектурі та логіці взаємодій.
UI дизайн (5-7 днів). High-fidelity макети в Figma, дизайн-система з компонентами, темна та світла тема, адаптивність (mobile trading — реальний use case).
Прототип та ітерації (2-3 дні). Кликабельний прототип в Figma для тестування основних flows. Ітерації за результатами фідбеку.
Орієнтири за часом: базовий набір екранів (swap + позиції + дашборд) — 1-1.5 тижня. Повна дизайн-система з онбордингом та analytics — 2-3 тижні. Вартість розраховується після уточнення кількості екранів та функціональності.