Разработка 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 транзакции — это не «Сохранить» в вебе. Это необратимо и стоит денег. Интерфейс должен перед каждой транзакцией показывать: что именно произойдёт, сколько gas это стоит, каков worst case при текущем slippage. Uniswap делает это хорошо — confirmation modal с полным breakdown.
Но многие протоколы показывают только «Confirm». Результат: пользователь подтверждает транзакцию, не понимая, что она съест 3% на MEV при его настройках.
Ключевые экраны и их специфика
Trading / Swap интерфейс
Главная задача — убрать когнитивную нагрузку с механики, оставить фокус на решении: что и сколько меняю.
Критические элементы:
- Price impact — показывать всегда, подсвечивать красным при >1%
- Minimum received — не «slippage tolerance», а конкретная сумма в токенах
- Gas estimate в USD, обновляемый в реальном времени
- Route visualization — через какие пулы идёт swap, особенно для multi-hop
Slippage tolerance — поле, которое большинство пользователей не должны трогать. Default 0.5% для стейблкоинов, 1% для других токенов. Предупреждение при вводе >5%. Блокировка при >50% (почти наверняка ошибка).
Позиции в лендинге (Aave/Compound-style)
Главный экран — это дашборд рисков, а не список транзакций. Нужно видеть:
- Health factor с визуальным индикатором (зелёный/жёлтый/красный)
- При каком значении базового актива произойдёт ликвидация (в USD и %)
- Текущий бorrow APY vs supply APY — net позиция
- Collateral и долг по каждому активу
Liqidation price нужно показывать в терминах знакомых активов: «ваш ETH будет частично ликвидирован при цене ниже $1,847». Не «при LTV 82.5%».
Управление позицией на perpetual DEX
Perpetual DEX (GMX-style, dYdX-style) — самый сложный кейс для 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) для риск-индикаторов.
Числа в DeFi требуют особого внимания:
- Баланс 0.000000123 WBTC → показываем «< 0.001 WBTC» или в USD эквиваленте
- Большие числа с разделителями: 1,234,567.89
- APY: «12.4%» а не «12.394812%» — округление до 1-2 знаков достаточно
- Адреса кошельков: всегда truncated с full адресом в 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 и риск-сценариев. Техническое брифование с командой разработки — понять какие данные доступны 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 недели. Стоимость рассчитывается после уточнения объёма экранов и функциональности.