UX Audit: MetaMask Main Navigation

a UX audit about rethinking metamask menus

Making software—especially on the blockchain—that is both powerful and usable is very hard, I know. And sometimes we plan a lot of our UI but new features get added, some changes are done in the implementation and while we have ideas on how to improve that, they get pushed to our long backlog. So this isn’t intended as anything but praise at what the great work the team at MetaMask has been doing. I hope this analysis could be useful and due to the great utility MetaMask has on my life at the moment, I’d like to share it. So let’s talk about specifically this little bit on the app:

MetaMask version 8.0.0 connected to an app
  • A network switcher, using most of the space of the top bar
  • An account switcher/menu. The same menu also contains links to add new accounts, import an account, connect hardware wallet, settings and info (which is just another menu inside settings menu). That’s a lot for a menu with an abstract icon.
  • A connection status (new on 8.0.0) tells you information about which apps can see your account.
  • Account title and address, clicking it will copy the address to the clipboard.
  • Account menu, with the options to expand (opens MetaMask app in tab), account details page (more on that later), open in etherscan and a link to the connection menu (the same action as clicking on the connection status bar)
  • account name: now it allows editing the name
  • The address: shows more characters and unlike before, clicking on it won’t copy, just select it
  • view on etherscan: notice it’s a duplicate of an action of the previous menu too!
  • a QR code
  • “export private key”: arguably a quite advanced feature, given that most users will just use seed phrases and individual private keys are less useful

Suggestion #1: replace the “details” menu with an inline expansion

Suggestion #2: unify the “switchers” menus

There are three main actions accessible on the top menus:

  • Add: add a new account from seed, import account from file, connect hardware wallet
  • Settings: since “info & help” is one level deep inside the main settings menu, it means this button essentially does the same as “settings”
MEW’s app on the Appstore doesn’t allow Testnets, but it’s Beta program did
A little color goes a long way.

Designer, Ethereum Foundation, Mist Browser.