dapp-usability-checklist

A dapp usability checklist

This is a checklist of usability items that dapp product teams can use as a quick reference when designing and building their products. This is not meant to be a list of requirements. Your dapp may not require certain items. This is also not an exhaustive list. Please send pull requests with contributions!

Onboarding Support

• If you decide to not support mobile browsers, ensure you are checking for this and warning users of mobile browsers
• Warn the user when they are in an unsupported browser
• Warn the user when they do not have a wallet -- e.g. MetaMask -- installed
• Tell the user they need to unlock their wallet
• Tell the user they need to authorize their wallet (EIP-1102)
• Make sure user is on the right network
• Make sure the user has Ether

Transaction Support

• Notify the user if there is a transaction in MetaMask's queue waiting for confirmation or rejection
• Notify the user if they reject the transaction from the MetaMask window
• Warn the user when it appears they are about to execute a duplicate transaction
• Warn on insufficient funds

Transaction Notifications

• Notify a user when a transaction is pending
• Notify a user when a transaction has succeeded
• Notify a user when a transaction has failed
• Notify a user when a transaction is taking longer than expected

Gas Estimation

• Give users a choice in plain english for what their gas price should be in terms of how long the transaction will take
• Warn users if their gas is set much higher than needed (i.e. helping prevent against a developer bug that adds a few zeros to the gas price by accident, for example)
• Warn users if their gas is set super low during times of high network congestion (i.e. so that future, higher nonce, transactions are not blocked)

Error Handling

• Catch & parse MetaMask errors, and alert users what is happening in easy to understand language

Mobile Support

• If your dapp supports mobile, make sure you don't tell people to install MetaMask

Network Status

• Tell users the overall state of the network (e.g. red/yellow/green notificaton)

Resources

• Ryan Angilly's slides on Dapp Usability from ETHDenver 2019: https://docs.google.com/presentation/d/1vHNpSVCDwIbdpjA-zlBvSvsCjK7uikcLvaCcz3PglqQ/edit?usp=sharing

Contributions

Have ideas? Please send us a pull request!