These can get very tricky, very fast. One of the first things people notice when they start using web3 is that they have to click on a lot of stuff.

But by breaking transactions down into a basic flow, and extrapolating from the seven heuristics, we can define best practice guidelines.

Let’s say you want to perform a DeFi action, such as deposit tokens into a yield-bearing vault, borrow stablecoins against collateral, or withdraw tokens from a contract. It’s possible that each of these actions may involve multiple transactions, which will need confirming in your wallet.

In Web3, there are actions you can take in the UI, and actions you can take in the wallet.

Users can feel uncomfortable if these two strands are not integrated carefully.

Takeaways

• Combine “approval” and “make transaction” into one action
• Show the user how many steps there are
• Tell the user what is happening or what is required
• Design two action states:
  • Action needed in UI
  • Action needed in Wallet
• Design three process states:
  • Pending
  • Success
  • Fail
• Use animations, artwork, and friendly language to humanize the journey
• On the error state, give the user the chance to “try again”
• On the success state, celebrate the moment with fun artwork or animation.

Why are transactions so complicated?

User needs

In general, users want:

• To control from the app, not the wallet