Consistent error designs

[omnat]

Why?

• Error recovery: When the app behaves in an unexpected way, the user should know what is happening and how to get unstuck and reach their initial goal.
• Error prevention: When a user is doing unusual actions, the app should nudge the user towards the expected behavior, or at least alert them gently.

Designs/ Figma file: https://www.figma.com/file/aWgwMrzdAuv9VuPdtst64uuw/MetaMask-Design-System?node-id=4218%3A3234

List of errors: https://docs.google.com/spreadsheets/d/195Vw7sJcAeIzJFrpH1mE7MNVtb8tyPTJXADUvv4GQ3A/edit#gid=0

Archive

Scenarios

• How to avoid sending transactions which will likely be blocked (not getting confirmation for long because another transaction is first in queue)
• (Alert) When user is paying too high gas amounts (e.g., $1 gas for $1 amount)
• (Alert) When user sending tx to themselves
• (Alert) When user sending tx to a token / contract address #338
• (Constraint) When user sending tx to invalid address #5587
• When a tx fails #321
• When there's a system error, like offline #293

[omnat]

Useful guide to define errors by severity by @bahnju here: https://docs.google.com/document/d/1H1SlFYHN_ocB3AwjoBklJ2YrBVjeW8S69EX96m0SApY/edit

Could be used to decide whether a certain user action needs to be prevented (high severity) or gently alerted before action (moderate severity). For low severity errors, we could design for helping user to recover after an error is made.

[estebanmino]

Other two possible scenarios:

• Sync with extension fails
• User adding collectible that doesn't own

[omnat]

@cjeria based on our discussion, some notes: In general, these designs should inform users in context, timely, and guide them to desirable action.

1. Influence user's erroneous actions

   • Design Risky: actions that aren't in users' best interest, but user is unaware of it Example scenarios: phishing warning, gas unnecessarily high, sending 'Max' funds Suggestion: Add extra friction.
   • Invalid: actions that are likely to fail, but user is unaware of it Example scenarios: too low gas, a previous pending transaction will block this tx, trying to send a tx when no funds, sending tx to themselves/ a contract/ an invalid address Suggestion: Constraint when surely an invalid action & give rationale. Alert gently in-context for the rest.

2. Inform users about system errors / reactions

   • MetaMask specific action: Reactions that are detected by MetaMask and can be surfaced up Example scenarios: Pending transaction that needs speeding up in MM UI, pending signatures, sync failure, offline Suggestion: Timed error screens with call to action (e.g., Check internet connection, Re-scan QR / Try again in a few minutes, Action needed: tx pending)

• External: Errors from dapps that Metamask can't control Example scenarios: Dapp not responding / connecting (don't know if MetaMask can have knowledge of this) Suggestion: Troubleshooting option 'Help': Can't connect to Dapp? Not responding? Check 1-2-3 of MetaMask. If doesn't work, this could be a dapp issue.

Design request for mobile: 1 design per bullet point (customizable to specific scenario with copy)

[estebanmino]

We have a new scenario that would need this. We're allowing to choose IPFS gateways to resolve ENS IPFS hash in the browser. It will resolve correctly unless that selected gateway is down, in which case we'd need an error message or component to advice the user to change the IPFS gateway.

[omnat]

https://github.com/MetaMask/metamask-extension/issues/10332

^ extension error design issue

[jakehaugen]

Figma file: https://www.figma.com/file/aWgwMrzdAuv9VuPdtst64uuw/MetaMask-Design-System?node-id=4218%3A3234

[mobularay]

Closing due to move to Notion page: https://www.notion.so/7af6f9afb8634469ac881acb0c9fd9b4?v=ed13daa0b65543a5b045c4fb998510d0&p=6678cbbdd72547ca9f84f5e07fc4b1e2