Найкращі практики проєктування децентралізованих бірж (DEX)

З моменту запуску Uniswap у 2018 році були запущені сотні децентралізованих бірж у десятках різних мереж. Багато з них представили нові елементи або додали власну родзинку, але інтерфейс загалом залишився тим самим.

Однією з причин цього є Закон Якоба (opens in a new tab):

Користувачі проводять більшу частину свого часу на інших сайтах. Це означає, що користувачі віддають перевагу, щоб ваш сайт працював так само, як і всі інші сайти, які вони вже знають.

Завдяки раннім інноваторам, таким як Uniswap, Pancakeswap та Sushiswap, користувачі DeFi мають колективне уявлення про те, як виглядає DEX. З цієї причини зараз з'являється щось на зразок «найкращої практики». Ми бачимо, що все більше і більше дизайнерських рішень стандартизуються на різних сайтах. Ви можете розглядати еволюцію DEX як гігантський приклад тестування в реальному часі. Те, що працювало, залишилося, а те, що ні, було відкинуто. Ще є місце для індивідуальності, але існують певні стандарти, яким повинна відповідати DEX.

Ця стаття є резюме:

• що включити
• як зробити його якомога зручнішим для використання
• основні способи налаштування дизайну

Усі приклади каркасів були створені спеціально для цієї статті, хоча всі вони засновані на реальних проєктах.

Набір Figma також додається внизу — не соромтеся використовувати його та прискорювати створення власних каркасів!

Основна анатомія DEX

Інтерфейс користувача зазвичай містить три елементи:

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

Варіації

Це буде загальною темою цієї статті, але існують різні способи організації цих елементів. «Панель деталей» може бути:

• Над кнопкою
• Під кнопкою
• Прихованою в панелі-акордеоні
• Та/або в модальному вікні «попереднього перегляду»

N.B. Модальне вікно «попереднього перегляду» є необов'язковим, але якщо ви показуєте дуже мало деталей в основному інтерфейсі, воно стає важливим.

Структура основної форми

Це поле, де ви фактично вибираєте, який токен ви хочете обміняти. Компонент складається з поля введення та невеликої кнопки в одному рядку.

DEX зазвичай відображають додаткові деталі в одному рядку вище та одному рядку нижче, хоча це можна налаштувати по-різному.

Варіації

Тут показано дві варіації інтерфейсу; одна без будь-яких рамок, що створює дуже відкритий дизайн, та інша, де рядок введення має рамку, що створює фокус на цьому елементі.

Ця базова структура дозволяє показувати в дизайні чотири ключові елементи інформації: по одному в кожному куті. Якщо є тільки один верхній/нижній рядок, то є тільки два місця.

Під час еволюції DeFi сюди включали багато різних речей.

Ключова інформація для включення

• Баланс у гаманці
• Кнопка «Максимум»
• Фіатний еквівалент
• Вплив на ціну «отриманої» суми

На зорі DeFi фіатний еквівалент часто був відсутній. Якщо ви створюєте будь-який проєкт Web3, важливо, щоб відображався фіатний еквівалент. Користувачі все ще думають у місцевих валютах, тому, щоб відповідати реальним ментальним моделям, це слід включити.

У другому полі (де ви вибираєте токен, на який обмінюєте) ви також можете включити вплив на ціну поруч із сумою у фіатній валюті, обчисливши різницю між введеною сумою та очікуваною сумою на виході. Це досить корисна деталь для включення.

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

Додаткові деталі можуть бути показані під основною формою. Оскільки цей тип інформації переважно для професійних користувачів, має сенс або:

• зробити його якомога мінімалістичнішим; або
• приховати його в панелі-акордеоні

Додаткова інформація для включення

• Ціною токена
• Slippage
• Мінімум до отримання
• Очікувана сума
• Вплив на ціну
• Оцінка вартості газу
• Інші комісії
• Маршрутизація ордерів

Можна стверджувати, що деякі з цих деталей можуть бути необов'язковими.

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

Деякі інші деталі просто по-різному повторюють одне й те саме. Наприклад, «мінімум до отримання» та «Slippage» — це дві сторони однієї медалі. Якщо у вас встановлено Slippage в 1%, то мінімум, який ви можете очікувати отримати = очікувана сума - 1%. Деякі інтерфейси показують очікувану суму, мінімальну суму та Slippage… Що є корисним, але, можливо, надмірним.

Більшість користувачів все одно залишать Slippage за замовчуванням.

«Вплив на ціну» часто показують у дужках поруч із фіатним еквівалентом у полі «кому». Це чудова деталь UX для додавання, але якщо її показано тут, чи дійсно її потрібно показувати знову нижче? А потім знову на екрані попереднього перегляду?

Багатьох користувачів (особливо тих, хто обмінює невеликі суми) не турбуватимуть ці деталі; вони просто введуть число та натиснуть «Обміняти».

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

Якщо ви включаєте допуск Slippage в панель деталей, ви також повинні зробити його редагованим безпосередньо звідси. Це хороший приклад «прискорювача»; хитрий трюк 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 продовжуватиме розвиватися, і завжди є місце для вдосконалення.

Успіхів!