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 до запуска?
Кликабельным прототипом, в котором есть промежуточные состояния: выбор сети, ожидающая и неудачная транзакция, экраны успеха. Дизайн стоит проверить и на телефоне, потому что широкие таблицы и длинные адреса ломаются там первыми.
