DEX UX: a competitive analysis of crypto exchanges
🦄 In the beginning, there was Uniswap…
edit — a Medium.com upgrade has compressed the heck out of these images, rendering them much harder to read. Sorry about that…
When the pink and white unicorn galloped into the crypto world it stole our hearts and our wallets. We gazed in awe at a decentralized exchange.
Ever since, countless imitators have copied the code and copied the design.
From a UX point of view, this is a double-edged sword. On the one hand, this follows Jakob’s Law, and builds familiarity. On the other hand, it means nobody has really asked what they could do differently.
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
– Jakob’s Law
The devil is in the details
But DeFi is no longer confined to Eth. Along came BSC and Pancakeswap. Then Polygon and Quickswap. Then Avalanche and Pangolin. Then… a lot. But if you’re a DeFi user and you know you way around Uniswap, you can pretty much bridge to any other network, find the native equivalent and ape in to whatever degen madness you fancy.
Every chain has a few dexes, and all of them look a bit like Uniswap.
But not exactly the same. What’s interesting is that each version has some small, subtle, changes.
Which begs the question: why?
And more importantly: which patterns are the best?
To answer these questions, I visited Coingecko’s Top Decentralized Exchanges by Trading Volume. Then I selected five from the top 20, trying to get a decent spread from newest to oldest, and across different chains:
- Quickswap
- Sushiswap
- Pancakeswap
- TraderJoe
- Spookyswap
For each one, I looked at the UX for a simple exchange, then compared each interface directly to Uniswap.
Uniswap
The original we all know and love. Not much to say at this point. But it’s the baseline we can come back to.
- Clean
- Minimal
- Perceptible affordances — the token dropdowns look like clickable buttons
- Maybe a bit tight?
Quickswap
Quickswap is on the Polygon network. On first glance it looks like Uniswap, but they have actually changed the placement of nearly every element.
As most (Western) users read left to right and top to bottom, you could argue that it makes more sense to have the dropdowns on the right, as we terminate our scanning at that point. People also tend to expect the most important text on the left. Additionally, (right-handed) mobile users won’t have to reach their thumb so far to control the token dropdown.
This is all intelligent guesswork, however, and without proper research (eye-tracking studies, time on task analysis etc) it’s hard to say which is actually better.
Key differences:
- token selection and amount are flipped!
- token dropdowns are text buttons (invisible buttons until user hovers)
- balance is displayed above token
- tx info pops out underneath, not just in a confirmation modal
- more white space
Aside from the major difference in swapping the buttons to the right and the balance to the top, Quickswap is also slightly narrower and has more separation between the From and To fields.
The information hierarchy is more logical, but the use of white space can be improved. The invisible buttons and subtle borders leave the individual elements floating.
Sushiswap
Sushiswap have made a few significant changes. Unfortunately, I’m not sure they all work.
They’ve pushed the UI quite a bit by adding animations and gradients. The big token boxes are cool, and the large ⇅ swap button is really easy to find on the left. But then the font size is small, and the contrast is terrible, making it hard to read the key info. The USD equivalent is useful, but it’s directly below the balance. The Gestalt principle of proximity means we perceive these items to be connected, even if they’re not. In this case, the USD equivalent is connected to the amount you’re swapping, which is all the way over on the other side of the field.
Key differences:
- The token dropdowns are outside the main fields
- Gas price is a new addition
- Max button on left, which is really the centre of the interface
- Balance is above the USD equivalent, making them look connected
Putting the token dropdowns outside of the main field is a major change from other DEXes. This makes them easier to select — larger target area — but also means the Sushi team can use native components, which are generally more accessible. The token dropdowns you see inside components on other dApps are custom-made, and have not been built with accessibility in mind. This is not such an issue on desktop, but can be more important on mobile where finger position and touch area are major concerns. Mobile accessibility is too big a topic to get into here, but from a technical perspective, the best thing you can do is use native components as much as possible.
–Thank you to Gabriela Rojas for her insightful comments on native components and accessibility.
Pancakeswap
Pancakeswap is the main DEX for the Binance Smart Chain network. BSC found success in Q1 of 2021 by offering significantly lower fees than Eth, which lowered the barrier of entry for new DeFi users.
BSC was seen as more beginner friendly, and Pancakeswap is built for those users. It’s the only major DEX I’ve seen that has some explanation text of what the hell you’re looking at. OK, it only says ‘trade tokens in an instant’, but that alone might be reassuring for a first-time user. The use of rounder, heavier text is also more inviting and less serious. The swap button has a slight elevation on it, making it a more obvious affordance, and the confirmation modal is massive.
Key differences:
- Explanation text
- The info on price impact etc pops out below, so you can review before the confirmation modal
- Text is a bit small, but good contrast
- Token drop down on right, but as a text button, not a filled button
TraderJoe
TraderJoe on Avalanche pushes the envelope. It is the only example I have seen with a price chart. It would be really interesting to actually test this, or look at some data, to see how users are interacting with it…
The design is open and readable. The interface is fairly light and subtle, but the additional white space means it is still readable. The text for important info is dark and creates good contrast. But the ‘from’ and ‘to’ titles have a very low contrast ratio of just 2.16.
Key differences
- A price chart for each pair
- The token select is technically in the same field as the token amount, but is separated with a subtle divider. Not seen this elsewhere.
- Balance is outside the field, on the right and above the token
- The ⇅ arrow follows Sushiswap’s example and makes it easy for users to interact and switch direction, instead of just showing the swap direction
- The price impact etc appears in the same panel, rather than a separate pop-out
We also noticed something odd… If you look at the token dropdown in the ‘to’ field, the down chevron changes on some tokens! For some, it gets smaller, for others it just disappears:
Spookyswap
Spookyswap is on the Fantom network and has really leaned into the whole Phantom/weird/spooky vibe. They have artwork on every page, and animations for each step in the process. Not only does this add little ‘moments of delight’, but it also reassures the user that something is happening.
The style might not be for everyone but, personally, I love the cat magician and her cool, pointy, hat. The pentagram even has little paw prints around it! DeFi is getting closer to TradFi, but it’s still got personality. Crypto is for the risk takers, the rebels, the ones who want to live outside the current system and have some fun. It would be a real shame if we became as boring as the banks.
Key differences
- Artwork creates strong visual identity
- 50% button — useful for making LPs
- Three levels of info in the fields
- Weirdly small swap button
I enjoy the vibe of Spookyswap a lot. The 50% button and the animations a great additions for improving the UX. But again, small buttons, small text, low contrast…
📋 Conclusion
It’s early days. We’re figuring out what works. What looks best. What can be better.
Honestly, it’s quite hard to say anything definitive at this stage. I’ve looked at a lot of DEXes now. I’ve looked a lot closer than most people have. And I’m still a bit reluctant to say what the best design patterns are.
Here is an analysis of some of the key info:
When you look at it like this, you realise how little consensus there is.
If I was pushed to draw some conclusions, based on general knowledge of best practice, they would be:
- 20–24 should be the font size for displaying token amounts
- The button should be the same font size
- USD equivalent should always be shown
- Contrast ratios should meet AA accessibility standards
- The token dropdown should probably be on the right
- A 50% button is useful (nice one SpookySwap)
- More white space than Uniswap is preferable
👀 Next Steps
In order to put some weight behind these hypotheses though, you would need to do some large-scale user testing. Which is exactly what DeFi needs in order to get to the next level…
Any thoughts, leave a comment below.
As a bonus, here are all six interfaces:
Many thanks to Gaby Rojas and 0xSlenderman for their valuable feedback.
