{"id":14279,"url":"\/distributions\/14279\/click?bit=1&hash=4408d97a995353c62a7353088166cda4ded361bf29df096e086ea0bbb9c1b2fc","title":"\u0427\u0442\u043e \u0432\u044b\u0431\u0435\u0440\u0435\u0442\u0435: \u0432\u044b\u0435\u0445\u0430\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u0438\u043b\u0438 \u0437\u0430\u0435\u0445\u0430\u0442\u044c \u0440\u0430\u043d\u044c\u0448\u0435?","buttonText":"","imageUuid":""}

Основы проектирования UX в Web 3.0

Привет, это Артем Суслов.У дизайнеров в Web 3.0 по сути сейчас огромная ответственность, так как от части именно на наших плечах лежит популяризация криптовалют и их будущее.

Почему? Если у нас не получится одновременно “учить” пользователей во время использования продуктов в Web 3.0, то они будут ошибаться вновь и вновь, до тех пор пока не уйдут из сферы.

В этой статье я хочу поделиться некоторыми необходимыми условиями проектирования так называемого dApp (decentralized application) - децентрализированного приложения. По сути это тоже самое, что и обычное приложение, только в Web 3.0 😀

Буду рад видеть в своем Телеграм-канале. Там я рассказываю про UI/UX-дизайн, публикую интересные находки, и участвую в различных активностях в крипте. Welcome!

Вы где работаете?

Термины из статьи

Web 2.0 — интернет, который есть сейчас. Пользователи имеют возможность создавать контент и делиться им. Но встает проблема конфиденциальности, то есть передача ваших данных третьим лицам.

Web 3.0 — следующая стадия интернета. Основные принципы — децентрализация, открытость и безопасность.

MetaMask, Phantom — самые популярные кошельки.

Кошелек — ваш главный инструмент для работы в криптовалюте. Логин в сервисы, перевод средств, оплата — все это делается через него.

Технический жаргон

В Web 3.0 достаточно много понятий, которые используют и понимают только продвинутые юзеры. Но как же быть новичкам? Ведь как только он заходит на любую биржу, тут же его встречают такие термины как стейкинг, приватный ключ, NFT, лаунчпад, токен, пул ликвидности, газ и так далее.

Конечно, эта проблема решится сама собой спустя время, но также это можно решить некими подсказами. Например, один из вариантов решения это всплывающие тултипы, как это делают в Phantom Wallet.

Тултипы в Phantom Wallet объясняют термины на понятном языке

Состояние системы и обратная связь

Пользователь всегда должен знать, что происходит, что только что произошло и что будет дальше. В отличии от интернет-банкинга, где транзакции проходят практически всегда молниеносно, в блокчейне требуется время для перевода. Чтобы не вызывать у пользователя паники и ощущения “скама”, можно показывать прогресс перевода валюты в реальном времени, как это делают в Via Exchange и затем уведомлять об окончании операции.

Продвинутые юзеры скажут, что ты всегда можешь перейти на Etherscan и тому подобное. Да, но там столько различных параметров, в которых пока разберешься и найдешь, что тебе нужно, транзакция уже пройдет.

Также круто, когда кошельки присылают уведомление, что перевод завершен, чтобы пользователь спокойно шел делать свои дела дальше.

Отображение комиссий как в криптовалюте так и в фиате

При переводе денег, комиссии часто показывают в нативной валюте того или иного блокчейна. Но юзер должен понимать, сколько он тратит “человеческих” денег на тот или иной перевод, так как криптовалюты достаточно волатильные активы и в один момент 1 ETH может стоить $3500, а через пару минут уже $3000.

Metamask показывает комиссию как в эфире, так и в долларах

Онбординг критически-важных флоу

Под критически-важными флоу я понимаю перевод валюты, подписание транзакций, переводы из одной сети в другую. Когда пользователь сталкивается с этим впервые, у него возникают вопросы на подобие «А где мне найти эти деньги потом?», «Как долго будет идти транзакция?», «Что будет, если я отменю транзакцию?» и тому подобное.

Решить эту проблему могут помочь онбординги в виде гифок (привет Notion), или полноценных видео. Текстовую информацию мало кто захочет читать, да и без криптожаргона вряд ли получится понятно объяснить все действия и что за ними последует.

Борьба со скамом

Скам в крипте это обыденное дело. Но как с ним бороться? Разберемся на примере недавнего обновления самого популярного кошелька на солане — Phantom.

Пользователям зачастую приходят NFT, которые называются Solana NFT, Unknown token и тому подобное. При взаимодействии с этой NFT вы можете потерять все свои средства. Страшно представить, сколько новичков на это попадались.

Что сделал Phantom? Они внедрили функцию, которая позволяет не только сжигать (удалять) эти NFT из своего кошелька, дак еще и получить денежное вознаграждение за это.

Резюмируя топик: старайтесь всячески оберегать ваших пользователей, запрашивать дополнительные подтверждения, обсуждать эти проблемы совместно с разработчиками и находить решения в зависимости от специфики dApp.

Процесс сжигания NFT-токена в Phantom Wallet

Не запрашивайте автоматическое подключение кошелька

При входе в некоторые приложение в первый раз вас просят сразу же подключиться к нему. С точки зрения безопасности и корректности это может раздражать пользователя, так как он не вызывал кошелек сам. В добавок к этому могут возникнуть лишние подозрения о добросовестности сервиса. В аналогии с Web 2.0 это тоже самое, что и логин через почту и пароль. Правда раздражает, когда ты смотришь каталог какого-то магазина и вдруг всплывает модалка с предложением залогиниться?

Вывод

На наших плечах лежит большая ответственность перед новыми пользователями и их впечатлениях о новых продуктах в Web 3.0.

Дизайнеров ждет достаточно большое количество новых паттернов взаимодействия при проектировании dApp'ов. Но от этого профессия становится только интересней.

***

0
9 комментариев
Написать комментарий...

Комментарий удален модератором

Развернуть ветку
Aleksey Lisun

Автор – редкостный импотент. Между web 3.0 и web 2.0 нет никакой связи.

Ответить
Развернуть ветку
Sergey Klochko

расслабьтесь. криптовалюта не имеет отношения к web 3.0
вас кто-то жестко разыграл.
https://ru.wikipedia.org/wiki/Web_3.0

Ответить
Развернуть ветку
Миша

Да тут вроде никто и не напрягался 🤡

Web3 (also known as Web 3.0) is an idea for a new iteration of the World Wide Web which incorporates concepts such as decentralization, blockchain technologies, and token-based economics.

https://en.wikipedia.org/wiki/Web3

Ответить
Развернуть ветку
Sergey Klochko

Цитата с вашей страницы.

This article is about the concept of a World Wide Web based on public blockchains. For the concept based around machine-readability, also called Web 3.0, see Semantic Web.

Ответить
Развернуть ветку
Max Korolev

Артем, спасибо за статью!
Увидел via.exchange и поставил 3 лайка

Ответить
Развернуть ветку
Grigoriy Malyshev

автор ссыт в уши, не слушайте

Ответить
Развернуть ветку
Alister Brown

Почему вы так говорите

Ответить
Развернуть ветку
Миша

Спасибо за статью!

Интересен вопрос UX дизайна флоу регистрации, когда кроме кошелька надо оставлять ещё какие-то данные, например email, телефон или discord. Для большинства dapp'ов это не спрашивают, поэтому люди к этому не привыкли, но иногда это очень нужно для маркетинга. Как лучше обыграть сбор этих данных для web3-native пользователей?

Ответить
Развернуть ветку
Artem Suslov
Автор

Я думаю, что прежде всего нужно объяснить пользователю для чего именно нужна привязка discord, телефона и т.п и что она дает в будущем.

Например, если это discord, то рассказать, что именно там осуществляется тех. поддержка (как это чаще всего бывает) и выкладываются последние анонсы dApp'а.

Мне это видится так, но конечно же все зависит от специфики.

Ответить
Развернуть ветку
6 комментариев
Раскрывать всегда