UX / UI дизайн децентрализованных приложений (dApps).
В этой статье мы рассмотрим ряд общих тем или трендов, присущих этому новому типу приложений, а также хорошие и плохие примеры UX / UI дизайна.
Ранее я обсуждал пользовательский опыт покупки NFT, охвативший различные торговые NFT-площадки, здесь мы рассмотрим общие темы для всех сайтов или приложений, работающих на технологии блокчейн.
Тренды:
- Подключите свой кошелек? – это просто необходимый шаг. Однако, это также самый большой барьер для старта
- Реальные деньги? показаны светло-серым цветом под суммами в ETH
- Общая навигация – Поиск ?, Обзор, Кошелек
- Данные и статистика ? – Статистика часто отображается на навигационной панели
- Черно-белый минималистичный интерфейс ?
- Смелая четкая типографика ?
- Ориентированность на мобильные устройства ? (сайты, к которым часто обращаются через браузеры внутри кошельков)
- Одна задача – часто только одно действие или задача, которую должен выполнить пользователь ✅
- Отсутствие маркетинга – домашняя страница – это приложение, а не маркетинговый сайт, на который вы входите, чтобы получить доступ к приложению. Поскольку все данные общедоступны, приложения являются не личным опытом, а общедоступным ?
- Скорость разработки приложений – новые приложения могут быть созданы быстро и часто имеют похожие репозитории GitHub, поэтому выглядят и ведут себя одинаково ?
- Отсутствие рекламы ? — По крайней мере, сейчас…
Подключите кошелек
Это самый большой барьер для старта.
- Авторизуйтесь с помощью своего кошелька
- Вход в кошелек является явным признаком децентрализованного приложения, любое приложение, требующее, чтобы вы вошли в систему с помощью своей электронной почты, не является анонимным и может связать вашу личность с вашим кошельком.
- Доступ через основной призыв к действию на веб-сайтах, часто посредством раскрывающегося списка или модального окна, если можно подключить много кошельков.
Реальные деньги
Конвертация криптовалюты в доллары США или любую другую выбранную вами местную валюту.
- Реальные деньги — выбранная вами валюта (в этом примере Zapper не поддерживает мою местную валюту).
- Обменный курс к местной валюте часто отображается небольшим серым текстом под суммой в крипте— см. пример обмена.
- Некоторые валюты будут показывать конвертацию в стабильные криптовалюты, а не в фиатные деньги.
Общая навигация
Навигация приложений сочетает в себе макеты поисковой системы с приложениями.
- Заметная панель поиска (не такая, как у Facebook в 2008 году)
- Призыв к действию (CTA) — Подключить кошелек
- Обзор или раскрывающиеся списки позволяют получить доступ к контенту
- Нативные макеты мобильных приложений
Данные и статистика
Стоимость криптомонет колеблется, поэтому визуализация данных является ключом к пониманию многих блокчейн-приложений.
- Визуализация изменений за определенный промежуток времени
- Сортируемые таблицы
- Конвертация процентов и местных валют
Черно-белый миниматистичный интерфейс
Обычно цвета используются только для кнопок.
- Черно-белый интерфейс
- Серый текст
- Цветные всплывающие кнопки (см. кнопку градиента в приложении Foundation)
- Отсутствие контуров границ
- Использование теней и размытия
Смелая четкая типографика
Как на сайтах, так и в приложениях есть примеры привлекательной типографики.
- Полужирный текст
- Крупный текст
- Четкая иерархия
- Оттенки серого
Ориентированность на мобильные устройства
Вы можете просматривать многие из этих сайтов/приложений на своем телефоне или через браузер в своем кошельке.
- Мобильная навигация (липкий футер с иконками)
- Большие зоны нажатия
- Одно действие на страницу
- Большая типографика
Sushiswap, Pooltogether, Zapper
Одна задача
Однажды Amazon запатентовала кнопку покупки в один клик. Когда пользователи входят в систему с помощью своих кошельков, покупка в один клик стала нормой.
- Одна кнопка или действие на странице
- Четкие акцентные цвета используются, чтобы указать, где пользователи должны действовать.
- Проектирование с учетом мобильных устройств
- Покупки в один клик, как у Amazon
Отсутствие маркетинга
Зачем создавать маркетинговый сайт, если можно создать приложение? Любые децентрализованные приложения, использующие маркетинговые сайты, обычно ищут инвестиции, а не пользователей.
- Лучшие децентрализованные приложения позволяют пользователям переходить прямо в приложение, поскольку нет юзерфлоу регистрации, а все данные общедоступны, и нет причин ограничивать к ним доступ
- В децентрализованных приложениях маркетинг часто можно найти во вкладках «О программе» или «Информация».
У всех этих децентрализованных приложений есть маркетинговые веб-сайты… почему?
Скорость разработки приложений
SushiSwap форкнул UniSwap на Github и быстро представил новые функции. Откройте PancakeSwap и BackerySwap, темпы разработки и новых функций ошеломляют.
- Githubпозволяет разработчикам создавать новые децентрализованные приложения на основе существующих, поскольку многие из них общедоступны.
- Пользователи могут голосовать за функции
- Пользователи могут вносить свой вклад через DAO (децентрализованные автономные организации).
Отсутствие рекламы
Это может зависеть от того, что вы считаете рекламой. Чем дальше вы уходите от основных децентрализованных приложений, тем больше размываются границы.
- Рекламные баннеры
- Реклама в дашборде на главной странице
- Объявления о продаже NFT
- Реклама майнинг пулов и ферм
Децентрализованные приложения могут не продавать вам продукты, но они настоятельно рекомендуют вкладывать монеты в их активы. Это странный баланс между покупками и инвестициями. Что-то вроде покупки произведений искусства
SpookySwap использует все очарование, на которое вы могли рассчитывать
Бонус
Несмотря на явные тренды, когда дело доходит до UX, существует много уникальных отличий и опыта, заслуживающих отдельного упоминания.
Наиболее уникальное приложение: Curve ?
Curve выглядит как приложение начала 90-х, и пользователям это нравится
Наиболее уникальная тема: SpookySwap ?
Для каждого найдется тема, SpookySwap зачаровывает… Charmed
Примеры маркетинговых сайтов: ?
Темная тема: ?
Единый тренд среди всех децентрализованных приложений, которые я использовал, сводится к тому, что самые популярные из них часто имеют в своей основе хороший UX-дизайн.
Поскольку многие децентрализованные приложения делятся исходным кодом на GitHub, новые приложения могут наследовать и расширять их UX-паттерны.
В настоящее время мы наблюдаем начало формирования нового языка для нового типа Интернета, где выражение «подключить кошелек» (connect wallet) заменяет «зарегистрироваться» (sign up), а «делать» (doing) заменяет «публиковать / постить» (posting)… лично я не могу дождаться, чтобы увидеть, что мы сможем сделать в Web 3.0.
Перевод статьи medium.muz.li
Топ коментарі (0)