Decentralized finance (DeFi) has gained significant traction in recent years, and Uniswap has emerged as a leading player in the field. However, the platform's user experience has a huge gap. Despite its popularity, this platform is clearly not designed for novice users.
As the largest decentralized exchange operating on the Ethereum blockchain, Uniswap enables traders to trade various cryptocurrencies without intermediaries and invest in liquidity pool to earn trading fees. Uniswap V3, the latest platform version, introduced concentrated liquidity and multiple fee tiers, enabling liquidity providers to specify a price range and users to choose their preferred fee tier.
We evaluate the Uniswap V3 web interface to identify fundamental usability issues. Similar to the previous UX Audit on Zapper, this study aims to share our knowledge with our community and initiate discussion around optimizing the UX of Web3 applications.
Product: Uniswap V3
Platform: Web
Template used: Heuristic Evaluation Checklist
Evaluation flow:
After confirming a swap on Metamask, a modal appears with "Transaction submitted", with options to "Add MATIC" and "view on Block Explorer". It's unclear what is the primary action the user should take on this modal.
#Heuristic violated: Aesthetic and minimalist design
There are four different actions inside the modal window. The information hierarchy is also strange, which can confuse users about the primary action.
#Heuristic violated: Recognition rather recall
The “Add MATIC” action does not promote recognition. Users may not always recall what it means, let alone remember that it's only necessary if they don't already have the token in their wallet.
🚀 Recommendation:
It is helpful to understand the user's workflow when adding a new token to their wallet. Consider reorganizing the hierarchy of options or reducing their number in the modal.
We noticed a confusing user experience. Uniswap shows the error message within the "Call to Action" button. Specifically, when attempting to swap tokens without sufficient funds, Uniswap displays an error message within the disabled button. What is more confusing, the button text sometimes shows "Swap"; sometimes it shows "insufficient MATIC balance" or "Insufficient liquidity for this trade."
#Heuristics Violated: Consistency and Standards
Showing an error message within the CTA button violates the design principles. A button has limited space to explain errors. Mixing the primary button with different error messages and states is confusing.
#Heuristics Violated: Help users recognize, diagnose, and recover from errors
Disabled buttons don't explain what's wrong. They communicate that something is off, but very often, it's just not good enough. Some users may wonder why they can't swap the tokens without an error message.
🚀 Recommendation:
Uniswap places the token swap and liquidity pool investment features at the same level of the information architecture. While the token swap feature is easily accessible, there is no straightforward method to swap tokens and deposit them into the pool.
#Heuristics Violated: Flexibility and efficiency of use
The lack of flexibility for liquidity investors can be frustrating. If they need to swap token during the investment process, they have to redo the entire investment. The whole flow would be disrupted, and the market price and gas fees would be revised.
However, this might be a design compromise considering Uniswap prioritizes token swapping. How can we improve the user experience within this compromise?
🚀 Recommendation:
To enhance the liquidity provider experience, Uniswap can consider implementing the following measures on the pool page:
The "Max" deposit button on the pool page can mislead users. While it allows for a quick and easy way to deposit the maximum amount of funds, users should be mindful to reserve some funds for gas fees.
#Heuristic violated: Flexibility and efficiency of use
There is no information about the "Max" deposit button. The button could lead to errors if users are not careful about reserving funds for gas fees. Additionally, the required amount for gas fees can vary depending on various factors.
🚀 Recommendation:
Remind users to be cautious when using the "max" deposit button. Users should be aware that gas fees can fluctuate and vary based on price range and may not have enough funds for the transaction after maximizing the amount. Providing this information to users can help them avoid costly mistakes.
The token price can change during the liquidity pool investment process, which can cause the pool price to move out of range. As a result, users may face a failed transaction on Uniswap.
#Heuristic violated: Help users recognize, diagnose, and recover from errors
There is no message or warning to inform users clearly of what caused the failed transaction. This can cause frustration and confusion because users must redo the entire process without understanding why.
🚀 Recommendation:
On Uniswap, users can create a new pool if one isn't already available. However, when users select a non-existing pool, it shows an error message. The message reads: "This pool must be initialized before you can add liquidity. To initialize, select a starting price for the pool. Then, enter your liquidity price range and deposit amount. Gas fees will be higher than usual due to the initialization transaction.
#Heuristic violated: Help users recognize, diagnose, and recover from errors
The error message displayed in this scenario is lenghty and not easy to understand.
🚀 Recommendation:
Provide a clear error message that explicitly indicates that the pool is unavailable, and give advice that caters to novice users and users who wish to initiate a pool. In addition, consider using hypertext links to connect users to another page with explanations and steps to create a new pool.
The pool page in Uniswap allows users to set up the price range based on USDC per MATIC, but the pool performance page displays the price range in the format of MATIC per USDC by default.
#Heuristic violated: Consistency and standards
This inconsistency in information display can confuse users.
🚀 Recommendation:
Maintain consistency in showing the information so users can comprehend it easily.
It is common to interpret a graph with a horizontal (X) or vertical (Y) axis. Uniswap removes the Y-axis from the graph to make the interface look minimal.
#Heuristic violated: Match between the system and the real world
This decision could disrupt the common behavior of users interpreting a graph. Users may find it even more challenging to interpret the graphs without these common reference points as they increase the timeframe.
🚀 Recommendation:
Reevaluate the way Uniswap present the graph. Make sure to include all the important elements that users need.
Uniswap caters primarily to experienced users with its minimalist design. There is lack of instructions and proactive help to guide users in navigating its interface. They assume all DeFi users to know way around Uniswap.
#Heuristic violated: Help and documentation
Firstly, this may present challenges for new DeFi users and users who are unfamiliar with Uniswap's features and processes. Without clear instruction and proactive help, Uniswap potentially excluding and frustrating those who need guidance. Even advanced users can encounter issues. They will need in-context help and guidance on the interface.
🚀 Recommendation:
On the homepage, the card components seem to serve as an onboarding, but the component is also serve as navigation.
Onboarding: The "Buy Crypto" and "Build dApps" cards lead to instructions,
Navigation: The "Swap Token", "Trade NFTs", and "Earn" cards direct users to feature pages.
Additionally, the "Build dApps" card is irrelevant to the homepage.
#Heuristic violated: Consistency and standard
Users expect similar elements to behave the same in a website.The inconsistency can cause confusion.
🚀 Recommendation:
To sum up, our analysis revealed specific aspects of Uniswap's design that could be improved to enhance the user experience. While the platform adheres to the minimalist design trend, it falls short of meeting users' needs. To address this, we recommend that Uniswap provide better guidance to its users proactively and reactively. Proactive support would involve offering contextual information when necessary, while reactive support would ensure that users can locate documentation easily when troubleshooting. By implementing these recommendations, Uniswap can enhance its user experience and remain a preferred decentralized trading platform.
✨Thanks to my teammate, Ashley, for providing invaluable designer insights.
Talk to the blockchain UX experts from UXBoost Now!
Read More:
.png)
Valentinie is a UX researcher with a background in Cognitive Science. She has experience researching different industries, from E-government services, credit bureau, UX learning platforms, blockchain, food delivery, etc. For her, there is nothing more rewarding than seeing how user research can inspire and shape products that solve real user problems.
