Spender Approval UX Pattern Guidance

[agostbiro]

Hi folks,

We talked about creating a Spender Approval UX Pattern Guidance document similar to the FIDO Alliance UX Guidelines for Passkey Creation and Sign-ins on the last call.

You can participate by hashing out one of the top level items from the call notes or proposing a new one.

These are the notes from the call:

Spender Approval UX Pattern Guidance Outline

UX Principles

• We want to have specific ones for spender approval, use Ryan's as starting point
• Challenge: no common iconography
• Accessibility
  • Is pop up occluded in screen readers?
  • Automated testing + accessibility = 🤝
    • part of how Apple gets devs to do their part for accessibility is tying automated testing to accessibility APIs
    • MetaMask already has good automated testing in browsers...
    • accessibility in web standards already to some degree...
    • promote using accessibility APIs instead of DOM APIs like ids for automated testing of browser extensions?
    • what form taken by this? do dapps want a test suite to run against their dapp and get a report card?
      • Randall: quick and dirty level of accessibility for wallets: profiles for LOW, MEDIUM, HIGH with easily-tested things like <meta> tags for all HTML, etc
        • profiles for "visually-impaired support"/screen-reader, non-mouse user support, etc.
    • Randall: what exactly to rate (uniformity or accessibility of flows, versus security across form factors/installs, versus security consequences of unusable or inaccessible designs?)
  • Track approvals and allow revoking from some central place in the wallet and/or dapp
    • Shapes/icons consistency important

Content Principles

• We need common language/vocab: approval versus authZ, persistence, session...
  • Check SEPA terminology that is standardized and has official translations
• Display how to revoke?
  • Should increase willingness to approve
• Display balance in approval pop up?
• What should dapp display before asking for spender approval
  • Has impact on approval rate
  • "Use clear “handshake” messages before and after OS dialogs."
  • "replication" b/w dapp and wallet - some dapps like quickswap tell you what you're about to sign before you sign it
    • exhibit a
    • exhibit b

Helpful Tools

• High level flow diagram
• Figma UI Kit for iconography?

[depatchedmode]

This video about bridging UX from Uma Roy is worth a watch. Key problem slide here:

https://www.youtube.com/watch?v=G0nFyq9DDPw

[agostbiro]

I did some research on how MM and CBW handle approvals: https://hackmd.io/kfRtMgYeTZueJrnAjFmVcw?both

[depatchedmode]

I'm getting a 403 – looks like you need to adjust the permissions on that doc.

[agostbiro]

thanks, fixed!