Розробка UX/UI дизайну криптокошелька
Дизайн криптокошелька — спеціалізована дисципліна на перетині фінтех UX та Web3. Користувачі одночасно бояться втратити гроші через помилку й хочуть швидко виконувати операції. Хороший дизайн зменшує когнітивне навантаження, запобігає дорогим помилкам і будує довіру.
Ключові UX-паттерни
Адреси й їхнє відображення
Ethereum адреса — 42 символи hex. Користувач не читає їх, він порівнює перші 4 й останні 4 символи. Дизайн повинен це враховувати:
- Завжди показувати checksum адресу (EIP-55 змішаний регістр) — зменшує ризик typosquatting
- Візуальний blockie/jazzicon поряд з адресою — швидка ідентифікація
- Кнопка копіювання з feedback (галочка на 2 секунди)
- При відображенні в тексті — формат
0x1234...5678(ніколи не обрізати на початку) - QR-код для адреси отримання — обов'язковий
Адресна книга. Користувачі часто відправляють на одні й ті ж адреси. Збережені контакти з іменами й аватарами кардинально зменшують помилки. Верифікація адреси при додаванні (запропонувати відправити тестову транзакцію малої суми).
Підтвердження транзакцій
Екран підтвердження — найкритичніший у кошельку. Користувач повинен зрозуміти що відбувається без знання технічних деталей:
- Отримувач: ім'я з адресної книги або ENS, або адреса з іконкою верифікації
- Сума: у токенах І у USD (оновлюється в реальному часі)
- Gas fee: у USD, не у gwei. "Комісія: $2.40" замість "Gas: 21000 @ 85 gwei"
- Total: сума + комісія
- Час підтвердження: "~15 секунд" або "~5 хвилин" (на основі газ-ціни)
- Попередження для контрактних транзакцій: пояснення що робить вызов
⚠️ Взаємодія з контрактом
Contract: Uniswap V3 Router (verified ✓)
Action: Swap 1 ETH → USDC
Min received: 3,412 USDC
Slippage: 0.5%
Fee: $3.20
Gas й управління комісіями
Більшість користувачів не розуміють gas. Три режими:
- Slow (базова ціна): дешево, повільно
- Normal (рекомендовано): хороший баланс
- Fast (пріоритет): швидке включення в блок
Для досвідчених — кастомний режим з полями maxFeePerGas й maxPriorityFeePerGas.
Оцінка газу повинна відбуватися автоматично й оновлюватися кожні 10-15 секунд. Показувати користувачеві якщо ціна різко виросла між його відкриттям форми й відправленням.
Онбординг й створення кошелька
Створення seed phrase — найстресовіший момент для новачків. Паттерни зниження тривоги:
- Пояснення до показу. "Ми покажемо вам 12 слів. Це ваш головний ключ. Запишіть їх у правильному порядку."
- Показувати по одному або по 4. Не всі 12 разом — це приголомшує.
- Тест після запису. Попросити ввести кілька слів у довільному порядку — підтверджує що користувач записав.
- Пояснити що НЕ робити. Не робити скриншот, не зберігати в нотатках, не відправляти нікому.
Для кошельків з embedded wallet (без seed phrase) — онбординг радикально простіше: email/Google → готово.
Токени й баланси
Головний екран баланса:
- Загальний баланс у USD велико
- Список токенів з іконками, назвами, балансами у токенах і USD
- Зміна за 24ч (% й абсолютне значення) — з кольором (зелений/червоний)
- Приховування токенів з нульовим балансом (або малим, нижче порога)
- Spam токени: токени, що не запрошувалися — приховувати за замовчуванням
NFT вкладка:
- Grid вид з попередглядом зображень
- Немає зображення = показувати заглушку, не broken image icon
- Lazy loading для колекцій з великою кількістю токенів
Дизайн для мобільних
50-70% користувачів кошельків — на мобільних. Специфіка:
- Усі інтерактивні елементи мінімум 44x44pt (Apple HIG) / 48x48dp (Material)
- Thumb zone: основні дії в нижній частині екрану
- Bottom sheet замість модальних вікон
- Haptic feedback для критичних дій (відправлення транзакції)
- Face ID / Touch ID для аутентифікації замість PIN-коду
Доступність
- Контрастність кольорів: мінімум 4.5:1 для звичайного тексту (WCAG AA)
- Не використовувати лише колір як сигнал (червоний/зелений для P&L повинен мати й -/+ символ)
- Сумісність з читачем екрану для ключових flоwів
- Розмір шрифту: підтримка системного масштабування
Дизайн-система
Кошелек вимагає послідовної дизайн-системи з tokens:
| Елемент | Значення |
|---|---|
| Spacing | 4px сітка |
| Radius | 8px стандарт, 16px карточки |
| Font | Inter або SF Pro (системний) |
| Colors | Primary, Destructive, Warning, Success + нейтральні |
| Shadows | Мінімальні (flat design краще для фінтех) |
Компоненти: AddressInput (з валідацією + ENS resolution), TokenAmount (з конвертацією), TransactionItem (історія), NetworkBadge (іконка + назва).
Типовий терміну дизайну UX/UI для кошелька — 3-5 тижнів. Включає: дослідження (2-3 конкуренти, user flow mapping), wireframes, високодетальні макети у Figma, прототип для user testing, передачу до розробки з design tokens.