Меньше доверия, больше правды: лучшие практики и шаблоны дизайна Web3

Опубликовано: 2022-07-22

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

Web3 объяснил

Чтобы понять Web3, полезно знать краткую историю Интернета:

  • Web 1.0 был децентрализован, а это означало, что право собственности и контроль над контентом и платформами были распределены между многими людьми и компаниями.
  • Web 2.0, текущая итерация Интернета, развилась благодаря небольшому количеству компаний-разработчиков программного обеспечения с удобными для пользователя платформами, такими как Apple, Google, Facebook (теперь Meta) и Twitter. По мере того, как все больше людей становились активными создателями и потребителями в Интернете, сеть становилась все более централизованной, в значительной степени принадлежащей и контролируемой несколькими корпорациями.

С помощью Web3 разработчики снова делают Интернет децентрализованным. Технологические монополии больше не будут владеть и распоряжаться контентом и платформами, которые создают пользователи. Web3 также стремится решить проблемы безопасности и конфиденциальности в Интернете.

Веб3 это:

  • Отсутствие доверия: разработчики, создатели контента и другие пользователи сохраняют контроль над тем, как создаются и поддерживаются платформы Web3 и DApps — децентрализованные приложения, а также над тем, какой контент можно публиковать. Они имеют полное представление о коде и способах запуска служб. Это отличается от Web 2.0, где корпорации и правительства имеют контроль, а пользователи не могут самостоятельно проверять информацию о том, как разрабатываются приложения и управляются ими.
  • Без разрешения : пользователи могут входить в любое приложение Web3 без разрешения компании или государственного учреждения. Они входят в систему с помощью цифровых криптокошельков, в которых хранятся их закрытые ключи, пароли, которые они используют для доступа к цифровым валютам. Кошельки могут быть аппаратными, похожими на USB-накопители, или мобильными приложениями, такими как MetaMask и TrustWallet.
  • Распределение: власть и контроль над интернет-продуктами и услугами не сосредоточены в руках инвесторов или генеральных директоров, а равномерно распределены между пользователями, которые зарабатывают доли собственности на основе своего вклада в разработку и обслуживание платформ Web3.
  • Открытый: Web3 работает на блокчейне, который хранит данные в отдельных группах, известных как блоки. Как только блок наполняется информацией, он связывается с предыдущим, образуя цепочку в хронологическом порядке. Блокчейн — это открытая книга, которая чаще всего используется для записи финансовых транзакций.

Многие приложения Web3 создаются небольшими командами, в основном состоящими из разработчиков и возглавляемыми ими. Некоторые команды независимы; другие используются компаниями, включая торговые площадки NFT (non-fungible token) и криптобиржи. Часто именно разработчики нанимают дизайнеров для работы над продуктами Web3. Во многих случаях предпочтение отдается дизайнерам с опытом работы в Web3 из-за крутой кривой обучения в этом быстро меняющемся пространстве.

Варианты использования Web3 и препятствия для расширения

В Web3 преобладают финансовые приложения: криптовалюта, криптобиржи для торговли (децентрализованные биржи или DEX) и NFT, которые используются для обозначения владения уникальными цифровыми или физическими предметами. Кроме того, децентрализованные финансы, или DeFi, позволяют пользователям обходить банки и получать доступ к одноранговым финансовым услугам, таким как заимствование, кредитование, получение процентов и торговля активами.

Распространение Web3 на другие сектора оказалось трудным. Например, невозможно отличить законный сайт Web3 от мошеннического — проблема усугубляется тем, что пользователи должны вводить свои учетные данные криптокошелька, чтобы получить доступ к платформам Web3. Если сайт Web3 является мошенническим, любой пользователь, который войдет на него, потенциально может потерять все свои деньги.

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

В видеоиграх Web3 NFT могут представлять аватары игроков и купленные предметы, но часто невозможно перенести эти активы в другие игры или приложения, что уменьшает инвестиции игроков и отпугивает их от игр Web3.

Что должны знать дизайнеры

Использование следующих шаблонов пользовательского интерфейса и принципов дизайна UX может способствовать росту платформ Web3:

Предоставляйте четкие подсказки и полную информацию

Многие приложения Web3 ошибочно предполагают наличие у пользователей значительного опыта. Вместо этого дизайнеры должны прояснить значение незнакомых функций и действий Web3. Например, прежде чем вносить криптосредства в пул ликвидности, новые инвесторы должны знать, что их деньги могут обесцениться — предупреждение, которое может быть доставлено во всплывающем сообщении на экране депозита.

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

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

Здесь снова дизайнеры могут обеспечить удобство использования контента, предоставив краткое содержание диалога в начале разделов документации, а также ссылки на более технический контент. Всплывающие глоссарии могут быть встроены в текст в виде значков ссылок, позволяя пользователям изучать значения терминов одним щелчком мыши или касанием пальца. А текст можно разбавить изображениями, иллюстрирующими важные концепции Web3.

Используйте знакомые валюты для обмена обменными курсами

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

Сделайте хэши кошельков и транзакций легко читаемыми

По умолчанию каждый адрес в блокчейне представляет собой длинную строку символов — до 42 — известную как идентификатор или хэш. При отправке средств люди должны проверять всю строку. Ошибиться легко, а ставки высоки: все транзакции в блокчейне являются окончательными. Если активы отправлены на неправильный адрес кошелька, восстановить их невозможно. В инвестиционной компании, где я работал, мы выступали посредниками в сделках ICO (первичное размещение монет), отправляя огромные переводы участвующим компаниям, и шесть человек каждый раз проверяли адрес кошелька получателя.

Служба имен Ethereum (ENS) позволяет людям изменять свои хэши на что-то более легкое для чтения и запоминания, например, их имена плюс .eth . Однако не все используют ENS из-за дороговизны.

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

Уточнить время ожидания транзакции

При переводе средств онлайн через банк вы сразу же получаете обновление статуса или подтверждение того, что транзакция прошла. Это не так с Web3 DEX. Минимальное время обработки транзакций в блокчейне составляет около трех минут, но мне приходилось ждать до двух часов. Я пользуюсь этой технологией шесть лет и до сих пор паникую, когда деньги уходят из кошелька, а мне не приходит своевременное подтверждение доставки.

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

На снимке экрана показано уведомление о депозите Tether (USDT), криптовалюты, размещенной в сети Ethereum. Сообщение гласит: «Если ваш депозит не поступает в течение расчетного периода времени, проверьте прогресс с помощью самостоятельной помощи по депозиту» и содержит ссылку. Также есть текст, указывающий, что среднее время прибытия составляет три минуты, а монеты будут депонированы после 12 подтверждений сети. Кроме того, отображается текущий баланс пользователя в размере 0 USDT.
Уведомление о депозите криптовалюты Tether (USDT) в сети Ethereum. Большему количеству бирж Web3 необходимо отображать статус транзакции и среднее время доставки, чтобы повысить комфорт и уверенность пользователей. (Источник: Shetcoiner.com)

Реализуйте кнопку «Отправить макс.»

Биткойн, эфир и другие криптовалюты часто выражаются с большим количеством знаков после запятой, например 0,0000085191. Трудно точно и эффективно ввести общую сумму при отправке денег физическому или юридическому лицу для покупки актива, такого как NFT, или при внесении средств в смарт-контракт. Я рекомендую дизайнерам создать в приложениях кнопку «Отправить макс», позволяющую пользователям одним кликом перевести весь баланс своего кошелька на другой адрес.

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

Объясните, как работают цены на газ

Газ, пожалуй, самая раздражающая и запутанная вещь в Web3, особенно для новичков в криптографии. Цены на газ — это дополнительные сборы, которые пользователи платят, чтобы покрыть стоимость вычислительной мощности, необходимой для обработки транзакций. Пользователи могут выбрать более высокую комиссию для ускорения перевода.

Дизайнеры должны объяснить, что такое газ и как он работает. Если возможно, они должны показывать цену на газ в нативной фиатной валюте, которая наиболее распространена среди пользователей (обычно в долларах США). Разработчики также могли бы предложить жизнеспособное сочетание цены на газ и соответствующей скорости передачи; если транзакции останавливаются или терпят неудачу из-за низких платежей за газ, разработчики должны разрешить пользователям платить более высокие комиссии для ускорения переводов.

Сделайте истории транзакций пользователей легкодоступными

Практически все централизованные веб-сайты электронной коммерции (web 2.0) позволяют пользователям проверять свои полные истории покупок. Получить доступ к такой записи на децентрализованной бирже сложно: кошельки предоставляют историю транзакций, но только для одной учетной записи за раз, и ее сложно или невозможно фильтровать с помощью DApps. Чтобы получить историю, доступную на централизованной платформе, пользователи Web3 должны использовать обозреватель блоков, такой как Etherscan, который не удобен для пользователя и затрудняет поиск конкретной транзакции.

Дизайнеры Web3 должны предоставить людям простой способ просмотра транзакций в сети, которые они совершают в отдельных DApp. Это должно быть размещено в месте, которое легко найти, например, на боковой панели или в меню. Другим вариантом может быть создание режима «просмотра цепочки», активируемого кнопкой: после нажатия на весь пользовательский интерфейс будет помещен фильтр, указывающий на весь контент в DApp, который хранится в блокчейне, включая историю транзакций. . Также было бы полезно разрешить пользователям легко фильтровать и экспортировать записи о транзакциях.

На снимке экрана показана часть истории транзакций пользователя на Zerion, децентрализованной бирже в сети Ethereum. Представлены два депозита криптовалюты — BitTorrent и эфир, а также получение мармеладного мишки NFT. Кроме того, на изображении показан баланс в размере 15 023,99 долларов США, а также варианты цен на газ, конвертации валюты и покупки криптовалюты. Боковое меню показывает, что история так же легко доступна, как и обзор, инвестиции, переводы, NFT и другие параметры.
История транзакций пользователя на платформе DeFi Zerion, размещенной в сети Ethereum. Дизайнеры могут улучшить пользовательский интерфейс многочисленных приложений Web3, упростив доступ к этим записям, их фильтрацию и экспорт. (Источник: Зерион)

Включите простое управление закрытыми ключами

Закрытые ключи, которые позволяют пользователям получать доступ к своим цифровым кошелькам, нелегко хранить. Иногда люди забывают сделать резервную копию или не знают, как это сделать. Эти ключи не могут быть восстановлены после утери: нет возможности «сбросить пароль». Разработчики могут решить эту проблему, следуя примеру MetaMask и предоставляя каждому пользователю сид-фразу — серию слов, которые можно использовать для разблокировки кошелька.

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

Ключевые выводы

Чтобы популярность Web3 росла и расширялась за пределы цифровых кошельков и финансовых платформ, разработчикам необходимо сделать приложения Web3 более последовательными и интуитивно понятными. Они также должны обеспечить более простое обучение пользователей, чтобы помочь познакомить новичков с новыми функциями и взаимодействиями на платформах Web3.

Обеспечение безопасности DApps также должно быть высоким приоритетом. Невозможно контролировать ненадежную и не требующую разрешений природу Web3, но разработчики могут предсказать, что может пойти не так, и помочь предотвратить такие случаи. Более прозрачные предостережения о рисках помогут успокоить опасения людей и убедить их принять Web3.

Дальнейшее чтение в блоге Toptal:

Как проектировать для максимального доверия к продукту

Улучшите свой UX с помощью этих успешных принципов дизайна взаимодействия

Преимущества Webflow для веб-дизайна без кода: пример