Как разрабатывать ориентированные на пользователя приложения Web3 (DApps): советы и рекомендации

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

Тем не менее, традиционные принципы UX/UI (т. е. единообразные элементы интерфейса, плавное взаимодействие с пользователем, лаконичный язык) по-прежнему сохраняют свою ценность; с другой стороны, существуют уникальные проблемы, с которыми сталкиваются дизайнеры и разработчики UX/UI, стремящиеся создать увлекательный пользовательский опыт в dApps.

Фактически, статистика показывает, что только 25% пользователей Web3 уверены в использовании децентрализованных приложений.

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

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

Что движет пользователем Web3?

В отличие от традиционных веб-приложений, Web3 рассчитан на разнообразную аудиторию: от опытных криптоэнтузиастов до новичков, делающих первые шаги в DeFi . При проектировании dApp учитывайте эти различные уровни технического понимания.

• Крипто-аборигены : Эти пользователи чувствуют себя комфортно с такими концепциями, как кошельки, закрытые ключи и сборы за газ. Они могут отдавать приоритет расширенным функциям и параметрам настройки.

  
  

• Новички : Эти пользователи могут быть незнакомы с терминологией блокчейна и требуют четких объяснений и руководства. Простота и удобство использования имеют первостепенное значение для этой группы.

Ключевые принципы интуитивного дизайна для Web3

При погружении в интуитивный дизайн для Web3 и блокчейн dApps понимание мышления и пути пользователя становится первостепенным. Начните с рассмотрения ментальной модели вашей аудитории. Они новички в технологиях блокчейна или ветераны этой области?

Проектирование с учетом уровня знаний пользователей может значительно повысить удобство использования.

1. Привнесите узнаваемость Web2 в Web3

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

2. Меньше значит больше

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

3. Цикл обратной связи

Другим важным аспектом является обратная связь. В dApp каждое действие, например, транзакция обмена или ввод данных, должно подтверждаться обратной связью, например, очевидными экранами подтверждения или анимацией. В том же духе должна быть мгновенная обратная связь и предложения решений, когда пользователи сталкиваются с сообщениями об ошибках (или, на языке UX/UI, «неудачными путями»).

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

4. Единообразный опыт использования на всех типах устройств

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

Это также устраняет ненужную паранойю во время определенных транзакционных действий, таких как использование двух разных устройств для сканирования QR-кодов и ввода адресов кошельков.

5. Безопасность и конфиденциальность

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

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

Практические советы по дизайну UX/UI Web3

Давайте превратим эти принципы в действенные стратегии дизайна:

1. Адаптация

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

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

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

2. Интеграция кошелька Web3

Подключение криптокошелька часто является первым реальным взаимодействием пользователя с dApp. Неуклюжий процесс интеграции кошелька может привести к разочарованию и отказу. Вот несколько способов сделать его бесшовным:

• Подключение в один клик: везде, где это возможно, стремитесь к подключению «в один клик». Используйте WalletConnect или аналогичные протоколы, чтобы минимизировать количество необходимых шагов.

  
  

• Обнаружение кошелька: автоматическое обнаружение установленных пользователем кошельков и отображение предпочитаемых вариантов на видном месте

  
  

• Поддержка QR-кода: предлагайте сканирование QR-кода как альтернативный метод подключения, особенно для мобильных пользователей.

  
  

• Поддержка нескольких кошельков: подходит широкому кругу пользователей, поддерживая такие популярные кошельки, как MetaMask, Coinbase Wallet, Trust Wallet, Argent, Rainbow и, конечно же, Portkey , кошелек абстракции аккаунта (AA), созданный на основе экосистемы aelf.

  
  

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

  
  

• Напоминания о безопасности: отображайте понятные и краткие напоминания о безопасности во время процесса подключения, подчеркивая важность защиты закрытых ключей.

3. Интеграция «Знай своего клиента» (KYC)

Хотя децентрализация является основным принципом Web3, многим dApps, особенно тем, которые имеют дело с финансовыми транзакциями или конфиденциальными данными, требуются процессы «Знай своего клиента» (KYC) для соблюдения нормативных требований и обеспечения безопасности.

• Прозрачность и ясность: четко объясните, почему требуется KYC и как будут обрабатываться данные пользователей. Будьте честны относительно информации, которая будет собираться, и того, как она будет использоваться.

  
  

• Оптимизированный процесс: Сделайте процесс KYC максимально эффективным. Минимизируйте количество шагов и объем необходимой информации.

  
  

• Безопасная обработка данных: Подчеркните меры безопасности, применяемые для защиты данных пользователей. Рассмотрите возможность использования децентрализованных решений идентификации для повышения конфиденциальности.

  
  

• Удобная для пользователя проверка: интеграция с надежными поставщиками KYC, которые предлагают простой и удобный для пользователя процесс проверки.

  
  

• Понятная обратная связь и обновления статуса: Информируйте пользователей на протяжении всего процесса KYC. Предоставляйте ясную обратную связь о статусе их проверки и любых требуемых действиях.

4. Потоки транзакций

Транзакции лежат в основе большинства взаимодействий Web3. Упростите потоки транзакций, предоставив понятные объяснения комиссий за газ, предполагаемого времени транзакций и шагов подтверждения.

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

  
  

• Обратная связь в режиме реального времени: используйте загрузчики, индикаторы выполнения или уведомления о статусе, чтобы предоставлять пользователям обновления транзакций в режиме реального времени.

  
  

• Динамические обновления цен: для транзакций, включающих обмены токенами или сделки, отображайте динамические обновления цен, чтобы отражать колебания рынка. Включайте четкие отказы от ответственности о волатильности цен и ее потенциальном влиянии на окончательную сумму транзакции.

  
  

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

  
  

• Шаги подтверждения: Внедрите четкие шаги подтверждения, чтобы предотвратить случайные транзакции. Требуйте от пользователей просматривать и явно подтверждать детали транзакции перед отправкой.

  
  

• История транзакций: Предоставьте подробную историю транзакций, которая легко доступна и доступна для поиска. Позвольте пользователям фильтровать транзакции по дате, типу или статусу.

5. Обработка ошибок

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

• Конкретные и информативные сообщения: Избегайте общих сообщений об ошибках, таких как «Транзакция не удалась». Предоставьте конкретные сведения о том, что пошло не так, например «Недостаточно средств для оплаты газа» или «Ошибка подключения к сети».

  
  

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

  
  

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

  
  

• Механизмы восстановления: Предложите механизмы восстановления для распространенных ошибок. Например, если пользователь инициирует транзакцию с низкой платой за газ, что приводит к задержке, разрешите ему «ускорить» транзакцию, отправив новую с более высокой платой.

  
  

• Дружественный язык: Избегайте технического жаргона (например, Ошибка 404) в сообщениях об ошибках. Используйте ясный, краткий и естественный разговорный язык, который легко понять всем пользователям.

6. Подсказки и пояснения

Не думайте, что пользователи понимают всю терминологию . Рассмотрите щедрое использование подсказок или раскрывающихся информационных вкладок в цифровых точках соприкосновения; объясняйте сложные термины, такие как «газовые сборы», «умные контракты», «сети блокчейнов» или « NFT », лаконично и доступно.

Также хорошей практикой является создание банка знаний или специального раздела часто задаваемых вопросов в dApp для размещения более подробного справочного контента.

7. Тестирование и итерация

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

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

A/B-тестирование и дословный опрос пользователя — два наиболее распространенных метода подтверждения прототипов и предположений дизайна UX/UI. Будьте готовы к повороту на основе результатов и отслеживайте, что работает (а что нет).

Эти шаги должны значительно приблизить вас к «Полярным звездам» вашего творения.

В заключение: бонусный совет

Успех вашего dApp может зависеть от фактора X. Запомнят ли пользователи ваше творение или вернутся к нему?

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

Ориентированные на пользователя интерфейсы и опыт также распространяются на программное обеспечение и платформы, над которыми работают разработчики и дизайнеры, — создатели также сами являются пользователями.

Если вы работаете на aelf , высокопроизводительном блокчейне искусственного интеллекта уровня 1, его набор инструментов искусственного интеллекта и удобство использования интегрированной среды разработки aelf Playground сделают процесс разработки менее утомительным, поэтому вы и ваша команда сможете сосредоточиться исключительно на разработке наилучшего пользовательского опыта.

О эльфе

aelf, пионер блокчейна уровня 1, отличается модульными системами, параллельной обработкой, облачной архитектурой и технологией multi-sidechain для неограниченной масштабируемости. Основанная в 2017 году с глобальным хабом в Сингапуре, aelf является первой в отрасли, которая возглавила Азию в развитии блокчейна с передовой интеграцией ИИ, превращая блокчейн в более умную и саморазвивающуюся экосистему.

aelf упрощает создание, интеграцию и развертывание смарт-контрактов и децентрализованных приложений (dApps) на своем блокчейне уровня 1 с помощью собственного комплекта разработки программного обеспечения (SDK) на C# и SDK на других языках, включая Java, JS, Python и Go. Экосистема aelf также включает ряд dApps для поддержки процветающей сети блокчейнов. aelf стремится содействовать инновациям в своей экосистеме и по-прежнему нацелена на развитие Web3, блокчейна и внедрение технологии ИИ.

Узнайте больше об aelf и оставайтесь на связи с нашим сообществом:

Веб-сайт | X | Telegram | Discord