Принципы дизайна под Web 3.0

2022-03-17T04:35:06.564Z

Это перевод статьи от Angela Ching — дизайнера из quantium.

Сейчас все говорят про блокчейн. Самое важное, что технология попала под радары больших компаний, а мы знаем, что где деньги, там и развитие. Для меня, как для дизайнера, важно знать как это повлияет на пользовательский опыт и дизайн для web3. Чтобы это понимать, я концентрируюсь на блокчейн сфере, в основном, дизайне dApps (децентрализованных приложений) и приложений, какими мы их знаем, но построенными на Ethereum.

Что нужно знать для дизайна под web3? Какие практики следует перенять из web2.0? Какие новые задачи и сложности предстоит преодолеть дизайнеру? Как подготовить себя к новой технологической революции?

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

Интернет развивается — web 1.0, web 2.0, web 3.0

Зная эволюцию чего-то и характеристики каждой фазы этого объекта может быть хорошим подспорьем для понимания того, с какими задачами сталкивались создатели в то время. Возьмём, для примера, первый автомобиль, выпущенный в 1886 году и сегодняшние самоуправляемые Теслы. Задачи дизайнеров в том и другом примере сильно различались, так как находились в разных контекстах. То же самое применимо и для веба.

Web 1.0 — в нём пользователи пассивно потребляли контент, не взаимодействуя с ним. Тогда было ограниченное число создателей контента, а страницы проектировались статичными.

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

Благодаря успеху небольшого количества компаний (Twitter, Facebook, Instagram), пользователи получили возможность эффективно пользоваться интернетом. С тем, как всё больше людей стало пользоваться интернетом для разных целей, дизайн стал приобретать большее значение в вебе. Большие компании стали заинтересованными не только в визуальной части их сервисов, а в том, какой опыт получают пользователи от их продукта. Сфокусировавшись на росте числа пользователей и монетизации их действий, интернет стал более централизованным. Большая часть трафика приходится на сервисы-монополисты, это заставило нас задуматься о безопасности и этике использования данных о пользователях.

Web 3.0 (вокруг которого столько хайпа) направлен решить проблемы монополий с помощью децентрализации. Многие приложения, спроектированные на блокчейне (dApps) вобрали в себя такие характеристики как: открытость, безопасность, честное распространение, ориентация на комьюнити, и саморегуляция. Не углубляясь, это пространство, в котором не будет концентрированной власти. Мы движемся от платформ, управляемыми компаниями, к платформам, управляемыми сообществом.

Что это значит для дизайнера?

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

Аналогично с приложениями для web 2.0, дизайн решения будут отличаться в зависимости от сути приложения (финтех, гейминг, арт и коллеционирование). В любом случае, на данном этапе адаптации пользователей к блокчейну, мы уже можем вывести главные дизайн-принципы:

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

1. Развивайте блокчейн-грамотность пользователей.

Очевидно, что на данный момент, web3 требует паттернов мышления, которых пользователи, в основной массе, ещё не приобрели. По мере того как люди изучают блокчейн и его потенциал, дизайнерам важно помогать людям в понимании блокчейна. Настолько же, насколько важно донесение ценности SaaS продуктов или сервисов в простой форме, важно и донесение фундаментальных знаний о переходе из web 2.0 в web 3.0 с его принципами защищённости и процессами. Как говорит Даниэль Диксон, глава Stellar XRP:

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

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

Источник: Ethereu

Как дизайнеры, мы можем помочь в обучении пользователей следующими методами:

Отсылать пользователя к тому, что он уже знает, чтобы восполнить недостаток знаний. Этопоказывает отчёт decenpatterns.xyz, «Прислушиваясь к пользователям, понимая их привычки и ментальные модели... итеративно проводя пользовательские исследования, мы пришли к пониманию, что метафоры и истории лучше всего описывают новые технологии в доступной форме.»
Лучший пример это видео от MetaMask, которое использует простой язык: «...интернет небезопасен: данные кредитных карт воруют, аккаунты взламывают...».

Доступен автоматический перевод субтитров

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

Скратить количество используемого жаргона.
Вокруг блокчейна сформировался собственный язык. Те сайты, которые упрощают язык для рядового пользователя будут на несколько ходов опережать конкурентов. В первую очередь это касается de-fi приложений (приложения для децентрализованных финансов) с использованием таких слов, как: майнинг, токены, протоколы, смарт контракты. Если вы только знакомитесь с миром блокчейна, для вас эти слова будут как иероглифы. Использование технического языка делает сложным понимание пользователем ценности вашего приложения. Там, где язык невозможно упростить, следует использовать глоссарии и поясняющие иконки, которые будут иллюстрировать непонятные слова. Само собой, разные децентрализованные приложения будут иметь свой собственный язык, свою интонацию для общения с пользователями. Например, Golem для разработчиков. И всё же большая часть приложений, направленных на взаимодействие с большим количеством разных людей, должны быть понятными и доступными, особенно, на главной странице.

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

Страница о компании dydx.exchange — намного понятнее, чем главная страница.

Показывать достаточно информации, без избытка
Когда пользователь взаимодействует с приложением, его обучение должно быть постепенным, не перегружая его. Он должен чувствовать, что его обучают, а не перегружают информацией. Ещё один способ не перегружать пользователей — разделить их на две категории: начинающих и продвинутых. Отличный пример в донесении ценности показывают Diem (изначально Libra), которые проводят пользователя по трём уровням знаний в своих карточках. Первый уровень — заголовки, второй по ховеру — показывается текстовое пояснение, третий — кнопка «Подробнее» и ссылка на страницу с подробной информацией.

Главная страница Diem

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

В Sushi swap можно включить и выключить режим эксперта.

Доносите ценность, а не то, как это устроено.
Классическое «Лучше один раз увидеть чем сто раз услышать». Не погружайте пользователя глубоко к корням технологии блокчейна, вместо этого донесите, чего с помощью этой технологии можно добиться. К примеру, не рассказывайте о том, как прекрасен Layer 2 (Техническое решение, на котором построены многие приложения. Позволяет ускорить транзакции и понизить комиссию) на своей домашней странице, лучше расскажите об ускорении транзакций и пониженной комиссии.
Показывайте возможные действия/следующие шаги.
Для пользователей, ещё не знакомых с продуктом, следует размещать предполагаемые действия, которые могли бы быть необходимы для пользователя. Питер Рамзи описывает их как «часто используемые» и «наиболее предпочтительные» пути. Например, просматривая серию на Нетфликсе, часто используемым путём будет посмотреть следующую серию или посмотреть другой сериал. Пример, который реализован плохо — POAP, децентрализованное приложение, позволяющее перенести события в реальном мире в виртуальные воспоминания. Так, приложения не имеет предпочтительных путей на главном экране приложения, чтобы пользователь понимал с чего начать. Мне приходится думать — как добавить событие? Могу ли я где-то посмотреть список этих событий? У меня нет действия, чтобы продолжить путь, когда я только начинаю.

Источник: POAP

2. Добивайтесь пользовательского доверия посредством прозрачности.

Прозрачность в политике защищённости, в транзакциях или стоимости валют важна не столько из-за новизны технологии, сколько из-за того, что децентрализация (и как следствие видимость действий, транзакций для всех участников) — ключевая особенность блокчейна.

Понятная политика защищённости

Часто такие слова как "открытый код" и "децентрализованная система" могут создать у пользователя чувство неприступности блокчейна. На самом деле, уровень защищённости приложений зависит от их кода. Хакерские атаки 2016 года доказали, что взлом возможен. Расскажите пользователям о том, как вы проверяли защиту приложения, например, был ли аудит ваших смарт контрактов, это повысит доверие к вашем протоколам. Дайте возможность технически подкованным пользователям углубиться в документацию с описанием мер безопасности, но не забывайте о слабо осведомлённых пользователях, они также должны понять насколько защита безопасна.

Источник: 1inch

Прозрачность сделок

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

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

Примеры уровней детализации информации о транзакциях

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

~$45,85 отображено в фиатной валюте — USD

Отображайте сумму сервисных сборов и время, затрачиваемое на транзакции.
Многие сервисы включают в себя сборы, в большинстве случаев, цену транзакции. Отображение цены этих сборов, вкупе с объяснением технических моментов, прояснит пользователю процесс оплаты. Для описания цен на просчёт транзакции (в особенности с возможностью выбора скорости просчёта) используйте максимально понятный язык.

Пример мультивыбора сервисного сбора с временем транзакции и ценой. Также отображается цена в USD

3. Необратимость действий

Важная особенность блокчейна заключается в необратимости и саморегуляции.
Для многих действий, который не находятся под контролем самого приложения (так как оно децентрализовано), следует предупреждать о невозможности обратить изменения. Плюсы такого подхода в следующем: 1) Обучение пользователя на повторяющейся основе пониманию необратимости определённых действий; 2) повышение доверия засчёт этичного отношения к сбережениям пользователя. Во избежание ложных действий, используйте взаимодействия с минимальным риском ошибки, например, свайп вместо тапа для кнопки проведения транзакции.

Восстановление аккаунта. Ввиду централизации платформ в web 2.0, многие знакомы с восстановлением потерянных или забытых паролей и аккаунтов.
В web 3.0 потеря защитных ключей — критическая ошибка. Донесите эту мысль пользователям во время онбординга. Отличный пример создания кошелька показываeт MEWwallet. Во время стадий погружения в приложение, они используют комбинацию цветов, начертаний, попапов, мелкого текста для донесения пользователю последствий и полезных советов.
В web 3 данные играют важную роль. Это значит, что данные пользователя и его сущности его аккаунта следуют за ним по его пути — пользователь может перепрыгивать в другие продукты с одним лишь ником (пасскодом или .eth адресом). Сохраняя пасскод защищённым, вы даёте пользователю возможность бесшовно перемещаться между сервисами.

Источник: MEW Wallet

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

Источник: Metamask

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

Тикет транзакции в Metamask

Afterthoughts, and the future

Ещё много тем, которые можно обсудить, касаемо проблем пользовательского опыта в блокчейн технологиях. Многие инновационные компании пытаются решить их прямо сейчас (мои любимые — ребята из Immutable)

Для дизайнеров, так же, как было полезно для web 2.0 понимание проблем и ограничений, с которыми сталкиваются разработчики бекенда и фронтенда, для web 3.0 важно понимание блокчейн механик. Это помогает наладить общение с разработчиками, а также избавляет от необходимости полагаться на них в разработке дизайна.

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

Куда это всё идёт? 2021 год стал американскими горками для web 3.0 и эта статья лишь поверхностно описывает происходящее. Возможности блокчейна заставили нас задуматься о старых методах использования веба, и как по мне, это хорошо.

Для дальнейшего изучения:

Web 3 Дизайн ресурсы:

Deep Work Studio — кейс стади с полным доступом к исследованиям, ссылками на интерфейсы и отчётами.

Beltran — Web3 Design Principles — практически Библия вокруг web3 дизайна (длинная, но того стоит)

Sarah Mills — Blockchain Design Principles — также отличное чтиво от дизайнеров IBM, работающих над блокчейн проектами

ConsenSys Media. Design Tab — компания, стоящая за MetaMask, раздел про дизайн для блокчейна
Про блокчейн
MIT Introduction to Blockchain Course — курс лекций от MIT
3Blue1Brown — But how does bitcoin actually work — отличное 11-минутное видео, лёгкое для понимания.
Crypto Congress 2020 — много разных точек зрения от крупных игроков крипто рынка для тех, кто плохо разбирается