Simple Tips for Improving the User Experience of Your Web3 Products
Diego Rivas
22 Dec 2022
To improve the user experience of web3 products, designers and developers should consider the challenges users face when interacting with blockchains and other distributed ledger technologies. Strategies for improving the user experience include providing contextual feedback and anticipating potential issues.
Creating products that leverage blockchains or other types of distributed ledger technologies comes with many advantages (composability, privacy, resistance to censorship via decentralization, verifiability and trustlessness). However, it's important for web3 product designers and developers to consider the challenges that appear when users interact with blockchains, wallets and other specific aspects of these technologies. Asynchronous transactions, context switching between windows and wallet management creates confusion and friction if not handled properly. In this blog post, we'll explore some simple tips for solving these pain points. From incorporating contextual feedback to anticipating what can go wrong, these tips will help you create web3 products with intuitive and enjoyable user experiences.
First experience and empty states
Don’t launch the wallet request immediately.
We’ve all been there: you want to see what this new DEX is about, you open the app and (bam!) your browser jumps to a different window asking you to enter your Metamask password. This experience is frustrating. You just want to take a look. You still don’t trust your wallet to be connected to that product.
Wait until the user has had a chance to explore your product and understand what it is about. You can then prompt the user to connect their wallet at a natural point in the user flow, such as when they are ready to perform a transaction or access a feature that requires a wallet. This can help to build trust and give users a sense of what they can expect from your product.
Show data that doesn’t require a wallet
Treat this as an opportunity to present your product in the best possible way. If possible, populate it with data that doesn't require a wallet to be connected, like token prices, volumes or anything available directly from the blockchain or other sources. For the sections that require the wallet to be connected, show a barebones structure, with thoughtful empty states. This is your chance to pique their interest.
An ingenious way to show what your product is about before the user connects their wallet is to “watch another wallet”. By entering an address, you’ll be able to see how the product behaves, in a read-only mode. Aave does it masterfully.
Give them time to explore your product and understand what it is about. Once they are ready, they’ll be more likely to connect their precious wallet and interact with your product.
Contextual and timely feedback
Show what happened, what’s happening, and what will happen.
When a user initiates a blockchain transaction, it can take some time for the transaction to be processed. This depends on the network being used by the protocol. Not knowing how long the transaction will take or whether it has been successful is a perfect formula for creating FUD in your users.
To address this, you just need to walk your users through the transaction process. For example, you can display a loading indicator to let users know that their transaction is being processed. You can also provide updates on the transaction status, such as “sent”, "pending" or "complete". And if the transaction fails for any reason, you can provide a human-readable error message about what the problem was, and ideally, clear instructions on how to resolve the issue. A common practice is to provide a link to the transaction details in a blockchain explorer.
Most of the interactions with smart contracts, especially token-related ones (approve, swap, stake, deposit, withdraw, etc) can be solved following this common pattern:
It’s important to remember that you don’t need to prevent users from navigating away from this flow. You can create a “pending transaction” indicator somewhere in the UI, and then update it when the transaction is confirmed. Just don’t keep your users twiddling their thumbs while they stare at a loading screen.
Chain feedback loops for complex transactions
There are more complex smart contract interactions that might require extra context for the user, but it all boils down to the same core principle. For example, when multiple interactions with the wallet are required to complete an action, this pattern can be chained using a stepper. It will allow the user to anticipate the number of interactions with the wallet, and provide an easy way to identify the steps that are still required to go.
Estimate cost and time of arrival
If possible, giving an indication of time is also a great way to reduce the anxiety produced by not knowing how long the transaction will take. Even when an exact countdown can’t be provided, an estimated or average time to completion might be enough to reassure someone that their transaction wasn’t “lost” in the ether (no pun intended).
Finally, before sending the transaction, show the estimated fees. This will reduce uncertainty and potential rejected transactions. A simple breakdown of the different fees (blockchain, protocol, royalties, etc) will go a long way to provide enough transparency for the user to complete the action.
Consider what can go wrong in the journey
Take care of potential "unhappy paths" gracefully.
This could be part of the previous section, but it gets so often overlooked that it deserves its own space. The key idea is to anticipate and address potential problems that may arise in a user journey. Think of failed or rejected transactions, network discrepancies between your product and the user’s wallet, etc.
The first course of action is to enumerate all these potential pitfalls. Then, craft the recovery experience, including error or alert prompts with human-readable messages. The idea here is to inform users about what went wrong, and provide them with instructions on how to resolve the issue. For example, if a transaction fails, you can display an error message that explains why the transaction failed, what needs to be changed and how to try again.
Avoid preventable errors.
These preventable errors are transactions that are going to fail on the blockchain side because the smart contract requirements are not met. First, check these requirements. Then, validate them in the frontend. If there is a minimum or maximum amount, you need to have some fields selected, or you need a certain token to perform an action, the interface should prevent the user from initiating the transaction. You don’t have control over the users that interact directly with the smart contracts, but if the transaction is going to fail, it shouldn’t happen because the UI didn’t have enough checks. Don’t forget to provide enough context about what’s missing to meet said requirements.
Facilitate wallet interactions from the UI
If you require a user to change or add something in their wallet, create a shortcut directly from your product. They will just need to confirm the action in their wallet, and they’re done. You could help them switch networks, add a token to their assets or change accounts.
Summary and checklist
In conclusion, improving the user experience for web3 products can be achieved through these simple and effective techniques. This list is not exhaustive, as general UX and usability practices still apply. Here is a checklist with the different tips mentioned in this article:
- First experience and empty states:
- Don’t launch the wallet request immediately.
- Show data that doesn’t require a wallet.
- Contextual and Timely feedback:
- Show what just happened, what’s happening, and what will happen.
- Chain feedback loops for complex transactions.
- Estimate cost and time of arrival.
- Consider what can go wrong in the journey:
- Take care of potential "unhappy paths" gracefully.
- Avoid preventable errors.
- Facilitate wallet interactions from the UI
Save a ton of hours (and chain fees) in research and benchmarking. Check bestinweb3.com for examples of the most important crypto and web3 products out there.