DeFi-продукти — лідери за кількістю концептів на один екран. Liquidity pools, APY, impermanent loss, стейкінг, farming, governance голосування — і все це треба показати так, щоб новий користувач не закрив вкладку після першого погляду.
Розберемо ключові принципи UX для DeFi-дашборду — від ієрархії інформації до конкретних компонентів.
Принцип 1: Progressive disclosure
Головна проблема DeFi UX — намагання показати все на одному екрані. Натомість — progressive disclosure: користувач бачить тільки те, що потрібно на поточному рівні розуміння.
Структура дашборду за рівнями:
- Рівень 1 (Overview): загальний портфель у USD, основні показники PnL, топ-позиції
- Рівень 2 (Position detail): деталі конкретної позиції — pool, APY, ваша частка
- Рівень 3 (Advanced): ончейн деталі, транзакції, технічні параметри
Принцип 2: Контекст для числа
APY 48.7% — це добре чи погано? Без контексту — незрозуміло. Хороший UX завжди показує число разом з контекстом: порівняння з попереднім тижнем, середнє по ринку або мінімальний/максимальний діапазон.
Правило: кожна ключова метрика повинна мати хоча б один з контекстів: трендовий індикатор (↑↓), порівняльне значення або пояснювальний тултіп. Голе число без контексту — це не інформація.
Ієрархія інформації на головному екрані
Рекомендована структура для DeFi-дашборду:
- Hero area: загальна вартість портфеля + PnL за 24h/7d
- Quick actions: Deposit / Withdraw / Swap — найчастіші дії
- Active positions: список активних позицій з ключовими показниками
- Rewards: нараховані, але не claimed нагороди
- Market overview: курси токенів, які є у портфелі
Термінологія: пояснюй або уникай
Impermanent loss, slippage, gas optimization — терміни, які зрозумілі досвідченим користувачам, але лякають новачків. Два підходи:
- Підхід 1: замінити на простіше формулювання ("Тимчасова різниця вартості активів" замість "Impermanent loss")
- Підхід 2: зберегти термін + додати тултіп з поясненням і посиланням на FAQ
Для нативних DeFi-продуктів (орієнтованих на досвідчених) — підхід 2. Для продуктів з масовою аудиторією — підхід 1 для основного UI, підхід 2 для advanced секцій.
Кольори: смислове навантаження
У фінансових продуктах кольори несуть семантику. Важливо дотримуватися конвенцій:
- Зелений — позитивна динаміка, прибуток
- Червоний — негативна динаміка, збиток, ризик
- Жовтий/оранжевий — попередження, нейтральний стан
Не використовуйте зелений і червоний для декоративних цілей — це дезорієнтує користувача.
Мобайл: спрощення без втрати функції
На мобайлі DeFi-дашборд потребує серйозного спрощення. Показуйте тільки критичні дії (Claim, Deposit, Withdraw) і ключові числа. Складні таблиці і графіки — тільки на десктопі або за скролом.
Будуємо дизайн-системи для DeFi і крипто-продуктів — з компонентами, які враховують специфіку фінансових інтерфейсів.