Лучшие практики дизайна децентрализованных бирж (DEX)

С момента запуска Uniswap в 2018 году появились сотни децентрализованных бирж на десятках различных блокчейнов. Многие из них внедрили новые элементы либо добавили свои характерные особенности, однако, в целом интерфейс остался неизменным.

Одной из причин этого является Закон Якоба (opens in a new tab):

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

Благодаря ранним инноваторам, таким как Uniswap, Pancakeswap, и Sushiswap, пользователи DeFi имеют общее представление о том, как должна выглядеть децентрализованная биржа. В связи с этим начали появляться определенные «лучшие практики». Мы все чаще встречаем дизайнерские решения, стандартизируемые на разных сайтах. Эволюцию DEX можно рассматривать как масштабный пример тестирования этих практик в реальном времени. То, что срабатывало, осталось, а то, что не работало, было исключено. Несмотря на то, что еще остались возможности для персонализации сайта, существуют определенные стандарты, которым должна соответствовать децентрализованная биржа.

Данная статья является кратким обобщением следующих тем:

• что следует включить
• как сделать сайт максимально удобным в использовании
• каковы основные способы кастоматизации дизайна

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

В конце публикации вы также найдете комплект Figma — не стесняйтесь использовать его, чтобы ускорить создание собственных каркасных сайтов!

Анатомия DEX

Пользовательский интерфейс (UI) обычно состоит из трех элементов:

1. Основная форма
2. Кнопка
3. Панель описания

Вариации

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

• Над кнопкой
• Под кнопкой
• Быть скрытой в панели-аккордеоне
• И/или находиться в модальном окне «предварительного просмотра»

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

Структура основной формы

Это именно то поле, в котором вы выбираете токен для обмена. Компонент состоит из поля ввода и небольшой кнопки, расположенных в одной строке.

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

Вариации

Здесь показаны два варианта интерфейса: один без границ, что создает открытый дизайн, и один, где строка ввода имеет границу, что акцентирует внимание на этом элементе.

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

В ходе эволюции DeFi сюда было включено множество различных вещей.

Ключевая информация, требующая добавления

• Баланс кошелька
• Кнопка «Максимум»
• Эквивалент в фиатной валюте
• Влияние цены на сумму «получения»

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

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

Кнопки с процентами (например, 25%, 50%, 75%) могут быть полезной функцией, но они занимают больше места, добавляют больше призывов к действию и увеличивают умственную нагрузку. То же самое с процентными ползунками. Некоторые из этих решений по пользовательскому интерфейсу будут зависеть от вашего бренда и типа пользователя.

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

• свести её количество к минимуму, или;
• скрыть её в панели-аккордеоне

Дополнительная информация, требующая добавления

• Ценой токена
• Проскальзывание
• Полученный минимум
• Ожидаемая сумма получения
• Влияние на цену
• Предполагаемая стоимость газа
• Другие комиссии
• Маршрутизация ордера

Возможно, некоторые из этих деталей могут быть необязательными.

Маршрутизация ордеров интересна, но для большинства пользователей не имеет большого значения.

Некоторые другие детали — это просто изложение одного и того же разными способами. Например, «минимально полученное» и «проскальзывание» — это две стороны одной медали. Если у вас установлено проскальзывание в 1%, то минимальная сумма, которую вы можете ожидать получить = ожидаемый результат - 1%. Некоторые пользовательские интерфейсы будут показывать ожидаемую сумму, минимальную сумму и проскальзывание… Что полезно, но, возможно, излишне.

Большинство пользователей в любом случае оставят проскальзывание по умолчанию.

«Влияние на цену» часто указывается в скобках рядом с фиатным эквивалентом в поле «кому». Это отличная деталь UX для добавления, но если она показана здесь, нужно ли ее снова показывать ниже? А затем снова на экране предварительного просмотра?

Многие пользователи (особенно те, кто обменивает небольшие суммы) не будут обращать внимания на эти детали; они просто введут число и нажмут кнопку "Обменять".

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

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

Хорошая идея — тщательно продумать не только один конкретный фрагмент информации на одном экране, но и весь процесс: Ввод чисел в основной форме → сканирование деталей → переход к экрану предварительного просмотра (если у вас есть экран предварительного просмотра). Должна ли панель сведений быть видна постоянно, или пользователю нужно нажать на нее, чтобы развернуть? Стоит ли создавать трение, добавляя экран предварительного просмотра? Это заставляет пользователя замедлиться и обдумать свою сделку, что может быть полезно. Но хотят ли они снова видеть ту же самую информацию? Что для них наиболее полезно в данный момент?

Варианты дизайна

Как уже упоминалось, многое зависит от вашего личного стиля Кто ваш пользователь? Какой у вас бренд? Вы хотите «профессиональный» интерфейс, показывающий каждую деталь, или вы хотите быть минималистом? Даже если вы нацелены на профессиональных пользователей, которые хотят получить всю возможную информацию, вы все равно должны помнить мудрые слова Алана Купера:

Каким бы красивым, каким бы крутым ни был ваш интерфейс, было бы лучше, если бы его было меньше.

Структура

• токены слева или токены справа
• 2 строки или 3
• детали над или под кнопкой
• детали развернуты, свернуты или не показаны

Стиль компонентов

• пустой
• подчеркнутый
• заполненный

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

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

Прилагаемый набор Figma содержит пустые, контурные и заполненные компоненты.

Взгляните на приведенные ниже примеры, чтобы увидеть различные способы, которыми вы можете все это собрать:

Но с какой стороны должен быть токен?

Суть в том, что, вероятно, это не имеет большого значения для удобства использования. Однако есть несколько моментов, которые могут склонить вас в ту или иную сторону.

Было довольно интересно наблюдать, как мода меняется со временем. Изначально в Uniswap токен располагался слева, но затем его переместили вправо. Sushiswap также внес это изменение во время апгрейда дизайна. Большая часть протоколов (если не все) с тех пор поступили также.

Финансовые соглашения традиционно предписывают ставить символ валюты перед числом, например, $50, €50, £50, но мы говорим 50 долларов, 50 евро, 50 фунтов.

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

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

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

В конечном счете, у обоих вариантов есть свои плюсы и минусы, но интересно, как тенденция, по-видимому, склоняется к токену справа.

Поведение кнопки

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

Кнопка как контекстная помощь

Кнопка может выполнять двойную функцию — быть предупреждением!

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

Если основное действие — ОБМЕН — недоступно из-за ошибки, причину можно объяснить с помощью кнопки, например:

• сменить сеть
• подключить кошелек
• различные ошибки

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

Создайте свой собственный с помощью этого файла Figma

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

Если вы хотите поэкспериментировать, не стесняйтесь использовать набор каркасов Figma. Он максимально прост, но обладает достаточной гибкостью для построения базовой структуры различными способами.

Набор каркасов Figma (opens in a new tab)

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

Удачи!