? Вначале был Uniswap…
Когда розово-белый единорог ворвался в мир криптовалют, он украл наши сердца и наши кошельки. Мы с трепетом смотрели на децентрализованную биржу.
С тех пор бесчисленные подражатели скопировали его код и дизайн.
С точки зрения UX это палка о двух концах. С одной стороны, подобное подражание следует закону Якоба, и представляет пользователям знакомый опыт. С другой стороны, это означает, что никто не задавался вопросом, что можно сделать по-другому.
Пользователи проводят большую часть своего времени на других сайтах. Это означает, что они предпочитают, чтобы ваш сайт работал так же, как и все другие уже известные им сайты.
– Закон Якоба
Дьявол кроется в деталях
Но децентрализованные финансовые сервисы (DeFi) больше не ограничиваются киптовалютой Ethereum. Появились BSC и Pancakeswap. Затем Polygon и Quickswap. Потом Avalanche и Pangolin. А затем… множество других сервисов. Но если вы являетесь пользователем DeFi и хорошо разбираетесь в Uniswap, то можете без особых проблем подключиться к любой другой сети.
Существует много децентрализованных бирж, и все они немного похожи на Uniswap.
Похожи, но не идентичны. Что интересно, в каждой версии есть небольшие незначительные изменения.
Возникает вопрос: почему?
И что еще более важно: какие паттерны самые лучшие?
Чтобы ответить на эти вопросы, я посетил ведущие децентрализованные биржи по объему торгов.
Затем я из 20 лучших выбрал пять:
- Quickswap
- Sushiswap
- Pancakeswap
- TraderJoe
- Spookyswap
Я посмотрел на UX обмена валют каждой из них, а затем сравнил все интерфейсы с Uniswap.
Uniswap
Оригинал, который мы все знаем и любим. Здесь особо нечего сказать. Но это базовый уровень, к которому мы можем вернуться.
- Чистый
- Минималистичный
- Заметные аффордансы – выпадающие списки токенов выглядят как кликабельные кнопки.
- Может немного плотный интерфейс?
Quickswap
Quickswap входит в сеть Polygon. На первый взгляд он похож на Uniswap, но на самом деле они изменили положение почти всех элементов.
Поскольку большинство (западных) пользователей читают слева направо и сверху вниз, вы можете возразить, что имеет смысл располагать раскрывающиеся списки справа, поскольку на этом этапе сканирование прерывается. Люди также склонны ожидать, что самый важный текст будет слева.
Кроме того, (мобильным пользователям правшам) не нужно тянуться большим пальцем, чтобы управлять раскрывающимся списком токенов.
Однако это все догадки, и без надлежащих исследований (отслеживание взгляда, анализ времени на задачу и т. д.) трудно сказать, какой макет на самом деле лучше.
Ключевые отличия:
- выбор токена и их количество поменяли местами!
- выпадающие списки токенов представляют собой текстовые кнопки (невидимые кнопки, пока пользователь не наведет курсор)
- баланс отображается над токеном
- tx информация появляется внизу, а не только в модальном окне подтверждения
- больше пустого пространства
Помимо существенной разницы в том, что кнопки поменяли местами, Quickswap также немного уже и имеет большее разделение между полями From и To.
Информационная иерархия более логична, но можно улучшить использование пустого пространства. Невидимые кнопки и тонкие границы оставляют отдельные элементы плавающими.
Sushiswap
Sushiswap внесли несколько существенных изменений. К сожалению, я не уверен, что все они работают.
Они немного изменили интерфейс, добавив анимацию и градиенты. Большие поля для токенов – это круто, а большую кнопку обмена ⇅ легко найти слева. Но при этом размер шрифта небольшой, а контраст ужасен, что затрудняет чтение ключевой информации. Эквивалент в долларах США полезен, но он находится прямо под балансом. Гештальт-принцип близости означает, что мы воспринимаем эти предметы как связанные, даже если это не так. В этом случае эквивалент в долларах США связан с обмениваемой суммой, которая указана на другой стороне поля.
Ключевые отличия:
- Выпадающие списки токенов находятся за пределами основных полей.
- Цена на газ – новое дополнение
- Кнопка Max слева, которая действительно находится в центре интерфейса
- Баланс над эквивалентом в долларах США, поэтому они выглядят связанными
Размещение выпадающих списков токенов за пределами основного поля – это серьезное отличие от других децентрализованных бирж. Это упрощает их выбор – большая целевая область – но также означает, что команда Sushi может использовать нативные компоненты, которые, как правило, более доступны. Выпадающие списки токенов, которые вы видите внутри компонентов в других приложениях, кастомные и не были созданы с учетом доступности. Это не проблема для десктопных пользователей, но может быть более важно для мобильных устройств, где положение пальцев и область касания являются основными проблемами. Доступность для мобильных устройств – слишком большая тема, чтобы разбирать ее в этой статье, но с технической точки зрения лучшее, что вы можете сделать – это как можно больше использовать нативные компоненты.
– Спасибо Габриэле Рохас за ее проницательные комментарии о нативных компонентах и доступности.
Pancakeswap
Pancakeswap – это основная биржа для сети Binance Smart Chain. BSC добился успеха в первом квартале 2021 года, предложив значительно более низкие комиссии, чем Ethereum, что снизило входной барьер для новых пользователей.
BSC считался более удобным для новичков, и Pancakeswap создан для этих пользователей. Это единственная крупная децентрализованная биржа из тех, что я видел) с пояснительным текстом. Хорошо, там написано только «обменяйте токены в одно мгновение», но это само по себе может успокоить новичка. Использование более округлого и тяжелого текста также более привлекательно и менее серьезно. Кнопка обмена имеет небольшую возвышенность, что делает ее более очевидной, а модальное окно подтверждения огромно.
Ключевые отличия:
- Пояснительный текст
- Информация о влиянии цены и т. д. появляется ниже, поэтому вы можете просмотреть ее перед модальным окном с подтверждением операции.
- Текст немного мелковат, но достаточно контрастный
- Токен раскрывается справа, но в виде текстовой кнопки, а не как кнопка с фоном
TraderJoe
TraderJoe на Avalanche стали новаторами. Они единственные (из просмотренных мной бирж), кто добавили ценовой график. Было бы интересно протестировать графики или посмотреть на ряд данных, чтобы увидеть, как пользователи взаимодействуют с ними...
Дизайн открытый и читабельный. Интерфейс довольно легкий и тонкий, но дополнительное пустое пространство означает, что он по-прежнему удобочитаем. Текст с важной информацией темный и создает хороший контраст. Но у заголовков «from» и «to» очень низкий коэффициент контрастности – всего 2,16.
Ключевые отличия:
- График цен для каждой пары
- Выбор токена технически находится в том же поле, что и количество токенов, но отделен тонким разделителем. Не видел ранее ничего подобного.
- Баланс находится за пределами поля, справа и над токеном
- Стрелки ⇅ соответствуют примеру Sushiswap и позволяют пользователям легко взаимодействовать и переключать направление, вместо того, чтобы просто показывать направление обмена.
- Влияние цены и т. д. отображается на той же панели, а не в отдельном всплывающем окне.
Мы также заметили кое-что странное... Если вы посмотрите на выпадающий список токенов в поле «to», нижний шеврон на некоторых токенах изменится! У одних он становится меньше, у других просто исчезает:
Лол, что?
Spookyswap
Spookyswap находится в сети Fantom и действительно проникся фантомной / странной / жуткой атмосферой. У них есть иллюстрации на каждой странице и анимация на каждом этапе процесса. Это не только добавляет небольшие «моменты восторга», но также убеждает пользователя, что что-то происходит.
Этот стиль может понравится не всем, но лично мне нравится кот-волшебник и его крутая остроконечная шляпа. На пентаграмме даже есть маленькие отпечатки лап! Децентрализованные финансовые сервисы приближаются к традиционным, но по-прежнему сохраняют индивидуальность. Криптовалюта предназначена для тех, кто любит риск, мятежников, тех, кто хочет жить вне существующей системы и немного повеселиться. Было бы очень обидно, если бы мы стали такими же скучными, как банки.
Ключевые отличия
- Арты создают сильную визуальную идентичность
- Кнопка 50% - полезна для создания LP
- Три уровня информации в полях
- Странная маленькая кнопка Swap
Мне очень нравится атмосфера Spookyswap. Кнопка 50% и анимация – отличное дополнение для улучшения UX. Но опять же маленькие кнопки, мелкий текст, низкая контрастность…
? Вывод
Это еще только начало. Мы выясняем, что работает, что выглядит лучше всего, что может быть лучше.
Честно говоря, на данном этапе довольно сложно сказать что-либо определенное. Я просмотрел много децентрализованных бирж. Я рассмотрел их более детально, чем большинство людей. И я все еще неохотно говорю, какие паттерны дизайна являются лучшими.
Вот анализ ключевой информации:
Теперь вы понимаете, насколько мало единства в дизайне децентрализованных бирж.
Если бы меня заставили сделать какие-то выводы на основе общих знаний о передовой практике, я бы сказал следующее:
- Размер шрифта для отображения количества токенов должен быть 20–24.
- Кнопка должна быть такого же размера как шрифт
- Всегда следует указывать эквивалент в долларах США
- Коэффициент контрастности должен соответствовать стандартам доступности AA
- Выпадающий список токенов, вероятно, должен быть справа
- Кнопка 50% полезна (хорошо реализована у SpookySwap)
- Желательно больше пустого пространства, чем у Uniswap
? Следующие шаги
Однако, чтобы придать вес этим гипотезам, вам нужно будет провести крупномасштабное пользовательское тестирование. Это именно то, что нужно децентрализованным биржам, чтобы перейти на следующий уровень ...
Оставляйте свои идеи в комментариях ниже.
В качестве бонуса все шесть интерфейсов:
Большое спасибо Gaby Rojas и 0xSlenderman за ценный фидбек.
Перевод статьи uxdesign.cc
Найновіші коментарі (0)