UX-дизайн web3: гаманці, DEX і стейкінг, якими справді можна користуватися
UX-дизайн web3 — це проєктування моментів, у які криптопродукт просить людину довіритися: підключити гаманець, обрати мережу, підписати депозит, прочитати угоду. thelegacy проєктує такі сценарії для DeFi- і крипто-команд. Нижче — патерни, які ми застосували у Flex, Souq, Optix і dEquity, і ризик, який прибирає кожен із них.
Ця робота входить у нашу послугу UX/UI і веб-дизайну; стаття — оглядова, докладні розбори гаманців і дашбордів — за посиланнями в кінці.
Чим UX у web3 відрізняється від звичайного застосунку?
Трьома речами. Гаманець і є акаунтом, тож відновити пароль не вийде; мережу користувач обирає сам; а підписану транзакцію не скасувати. Кожен патерн нижче існує через один із цих трьох фактів.
Звичайний банківський застосунок може дати людині роздивитися все й виправити помилку пізніше. DeFi-застосунок мусить показати вартість і наслідок до підпису, бо після нього екран уже нічим не допоможе. Тому основна робота дизайнера зміщується з дашборда на проміжні моменти: вибір мережі, вікно підтвердження, пояснення перед блокуванням коштів.
| Момент сценарію | Що йде не так | Патерн з наших кейсів |
|---|---|---|
| Перший візит | Людина не розуміє, чого від неї хоче продукт | Souq: вітальний екран з однією дією — Connect your Wallet |
| Вибір мережі | Активи надіслано не в ту мережу | Souq: мережі списком з назвами, кнопка Connect Wallet неактивна, доки мережу не обрано |
| Кілька гаманців | Активи здаються меншими, ніж є | Souq: у Profile Settings кожен підключений гаманець має власну кнопку Disconnect |
| Перед депозитом | Блокування коштів стає неприємною несподіванкою | Souq: пояснення вольта в п’ять кроків; Optix: правила блокування й комісій у тонованих примітках біля форми |
| Підтвердження | Комісії видно лише після підпису | Souq: кожну комісію розписано над єдиною кнопкою підтвердження |
| Лендинг DEX | Сторінка читається як реклама, а не торговий продукт | Flex: торговий термінал на першому екрані |
| Незнайомий актив | Жаргон приховує, що саме купують | dEquity: будинки в таблиці, як акції в брокера |
| На телефоні | Широкі таблиці не вміщаються | Optix: рядки таблиці стають картками «підпис — значення» |
Як web3-продукту попросити підключити гаманець?
Просити по одній речі: спершу мережу, потім гаманець — і більше нічого на цьому екрані. У Souq, платформі для економік web3-ігор, вітальний екран — неоновий тунель зі словесним знаком Souq і однією м’ятною кнопкою Connect your Wallet. Жодне меню з нею не конкурує.
Наступне вікно вибору мережі показує блокчейни назвою та іконкою. Доки мережу не обрано, кнопка Connect Wallet намальована неактивною; щойно людина обирає Ethereum чи іншу мережу, цей рядок і кнопка отримують однаковий контур із градієнтом від синього до пурпурового. Зв’язок між двома виборами видно без жодного рядка підказки.
Гравці web3-ігор часто тримають предмети в кількох гаманцях, тому в Profile Settings Souq кожен підключений гаманець має власну кнопку Disconnect, а портфель потім їх підсумовує. Якщо продукт розрахований на кілька гаманців в однієї людини, список гаманців має бути повноцінним екраном, а не випадним меню в шапці.
Як спроєктувати інтерфейс DEX, якому довіряють?
Показати продукт раніше за обіцянку. Відвідувач біржі шукає доказ, що за сторінкою є живий ринок, і справжній термінал каже це швидше за будь-який заголовок.
Flex — децентралізована біржа на блокчейні Everscale з повністю ончейн-книгою лімітних ордерів. На її лендингу скриншот торгового термінала зі свічками, книгою ордерів і стрічкою угод стоїть поруч із заголовком на десктопі й опускається під нього на телефоні. Єдина декорація — тонкі контурні лінії на майже чорному темно-синьому тлі, а кнопка Launch Exchange отримує градієнт, яким далі пофарбовано графіки й 3D-об’єкти.
Рішення, яке ми повторили б: сторінку Flex ми спершу зібрали в сірих тонах. Без кольору ієрархія й довжина кожного блоку мусили працювати самі, і лише після цього градієнт ліг на одну кнопку, яка справді важлива.
На централізованій біржі довіру будують інакше — через людей, а не код. На екрані P2P-угоди Banxe степер із чотирьох кроків веде угоду, а таймер показує, коли пропозиція скасується сама; поруч панель контрагента: дата реєстрації, кількість транзакцій, рейтинг, рівень верифікації й кнопка Chat. Перевірка іншої сторони відбувається, не виходячи з ордера.
Як пояснити стейкінг до того, як людина внесе кошти?
Пояснити механіку на тій самій сторінці, де відбувається депозит, — кроками й простими словами, ще до поля для суми. Блокування, про яке людина дізналася після підпису, — найшвидший спосіб її втратити.
Souq перетворив вольти з блокуванням на карусель із п’яти кроків: кошти вносять, створюються позиції стейкінгу, вкладники отримують частки вольта, розподіляються нагороди, а після закінчення блокування частки погашають. Одна схема несе всі п’ять кроків і намальована у дванадцяти станах, тож анімація показує рух грошей, а не описує його.
Optix, ончейн-протокол опціонів, ставить правила просто біля форми ліквідності. Add зелений, Withdraw помаранчевий, а тоновані примітки поруч із полями кажуть, на що людина погоджується: блокування на 14 днів, комісії, коли пул забезпечує проданий опціон, і премії, що звільняються в день експірації.
Вікно підтвердження — останнє місце, щоб це повторити. У Souq кожне модальне вікно сценарію має однаковий порядок і комісії перед кнопкою; докладно це правило розібрано в статті про дизайн DeFi-дашборда.
Як зробити незнайомий криптоактив зрозумілим?
Позичити модель, яку людина вже знає, і вкласти нове всередину неї. Токенізований будинок — дивна річ; таблиця акцій — ні.
dEquity перетворює дохідну нерухомість на NFT, якими торгують на власній DEX платформи. Таблиця Top offers to invest показує будинки так, як брокер показує акції: тип об’єкта й місто, дохідність зеленим, ціна, спарклайн, тікер, загальна емісія та кнопка Details. Сторінка об’єкта ділиться на вкладки Information і Trading, тож рік побудови, кількість квартир і дохідність не змішуються з графіком ціни та панеллю ордерів.
Optix робить те саме для опціонів. Дашборд відкривається чотирма перемикачами настрою ринку й картками стратегій Call, Strap, Bull Call Spread — кожна з ескізом виплати та одним простим рядком. Повна таблиця «ніг» зі страйком, bid і ask нікуди не зникла, вона лише на крок далі.
Що змінюється у web3 UX на телефоні?
Порядок рішень лишається, змінюється форма даних. В Optix вкладки New, Quotes і Trades мають мобільні версії, де рядки таблиці стають картками «підпис — значення». У Flex термінал переїжджає під заголовок, а не стискається поруч із ним.
Навігація потребує тієї ж уваги. На мобільному сайті Qube чотири головні посилання лишаються видимими рядком під логотипом і кнопкою Launch App, а не ховаються в меню, бо на криптоплатформу приходять у кілька відомих місць.
Чек-лист перед запуском web3-сценарію
- Перший екран просить про одну дію — ту, яка потрібна продукту.
- Мережу обирають до гаманця, і обрану мережу видно на наступному екрані.
- Кожен підключений гаманець є в списку, і його можна від’єднати окремо.
- Блокування, нагороди та їхні умови пояснено до поля суми.
- Кожну комісію показано над кнопкою підтвердження, а не під спойлером.
- Продукт (термінал, таблиця, позиція) є на першому екрані лендингу.
- Кожна широка таблиця має карткову версію для телефона.
Якщо ви будуєте гаманець, DEX чи продукт зі стейкінгом, сторінка послуги UX/UI-дизайну показує, як ми працюємо. Глибше — у статтях про UX web3-гаманця і дизайн DeFi-дашборда, а порівняння студій — у статті як обрати web3-дизайн-агенцію.
Головне
- UX у web3 визначають три факти: гаманець і є акаунтом, мережу обирає користувач, а підписану транзакцію не скасувати.
- У Souq кнопка Connect Wallet неактивна, доки не обрано мережу, і має з нею спільний контур, тож зв’язок двох виборів зрозумілий без підказки.
- Блокування й комісії пояснюють там, де відбувається депозит: карусель вольта з п’яти кроків у Souq, тоновані примітки з правилами біля форми ліквідності Optix.
Часті запитання
Що таке UX-дизайн web3?
Це проєктування того, як люди користуються децентралізованими продуктами: підключають гаманець, обирають мережу, підписують транзакції, вносять кошти в пули й читають ончейн-дані. Відмінність від звичайного UX у тому, що помилки зазвичай незворотні, тож вартість і наслідок мають бути зрозумілі до підпису.
Хто має проєктувати UX web3-продукту?
Продуктовий дизайнер, який уже пропрацьовував підключення гаманця, підписи, вибір мережі та стани транзакцій. Маркетингові сторінки може намалювати будь-хто з хорошим смаком, але сценарії, що рухають гроші, потребують людини, яка знає, де вони ламаються.
Чи потрібен web3-продукту власний гаманець?
Не завжди. Багато продуктів, як-от Souq, підключають гаманці, які в людей уже є, і показують їх у профілі. Власний гаманець потрібен, коли зберігання й надсилання активів і є самим продуктом, як у застосунку-гаманці.
Яка найпоширеніша помилка UX у web3?
Показувати вартість чи блокування дії лише після того, як користувач її підписав. Оскільки підписану транзакцію не скасувати, усе, що людина дізналася після підпису, перетворюється на скаргу, а не на рішення.
Як перевірити UX web3 до запуску?
Клікабельним прототипом, у якому є проміжні стани: вибір мережі, транзакція в очікуванні й невдала, екрани успіху. Дизайн варто перевірити й на телефоні, бо широкі таблиці та довгі адреси ламаються там першими.
