UX Audit: MetaMask Main Navigation
By: Alex Van De Sande
Tags: Ux Audit, Ethereum, Interface Design, UX Design, Metamask

So, we have six click areas on the topbar opening four menus. However the noblest area, the top-left doesn’t provide any information or functionality and the largest click area on the top offers a functionality that is probably only used for more advanced users (how many dapp users want to set up a custom rpc or a localhost node?). Account switching is probably done more often by users (and we should encourage them to, for privacy!) but is hidden in a more neutral looking identicon. They are rather inconsistent in behavior too as some of these will create actions, others will expand menus. Say a user needs to see his seed phrase, it’s not very obvious that this path starts at the weird abstract green art on the top right corner.

Also the “account details” pane is interesting that it offers four actions, two of these will open a new tab (expand, etherscan), one of them will open the same menu that you get by clicking on the “connected apps” menu and finally one will open the “account details” pane.

And the Account details pane is a thing on its own: it replicates the same information we were looking at before, but now in a modal. It contains the following elements:

the identicon: notice you see it twice now, as it’s still visible on the background

notice you see it twice now, as it’s still visible on the background account name: now it allows editing the name

now it allows editing the name The address: shows more characters and unlike before, clicking on it won’t copy, just select it

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!

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

This pane is opened from many places, including clicking on the “deposit” button and choosing “crypto”.

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

Expanded view could happen when you click the identicon, the name, or anywhere on the white bar (except the connection button and maybe the address). This would eliminate both the “account details” menu and “account view” overlay. Reducing the amounts of menus and overlays also reduces cognitive overlay from the user, as is one less place to remember where to navigate. This also keeps consistency, since we are just showing the same information we were showing before, just “bigger”. Actions like “expand” of “open in etherscan” are still just two clicks away. Clicking anywhere on that top bar would expand it, except clicking directly on the “connect” button or the address, which keeps the current behavior of copying the link.

We’ve also moved our little green friend icon to this bar, since identicons are a feature of an account, not the app as a whole. This of course means the top menu has a hole on it now. Let’s explore that.

Suggestion #2: unify the “switchers” menus

There are three main actions accessible on the top menus:

Switch : change your current account or network

: change your current account or network Add : add a new account from seed, import account from file, connect hardware wallet

: 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”

Visually this could be divided like this:

The first big change I would defend is: unify switching accounts and networks. Not only this removes clutter from the app, but it also is good practice. You don’t want to be using your main account to sign transactions in a test network, this induces errors (“Help, I accidentally sent to my test account!”), can create replaying issues and reduces privacy as activity between networks can now be linked. Switching to a new network should also switch your accounts (but of course not the other way around). This would also help separate to the user what accounts are used for what and is in line with the common behavior of users so that you can more easily switch from say, playing with a main net app and then quickly switching to a test net app in another tab. When adding a new account the user should also select which network it is for, which also helps hide more advanced options like “localhost:8545”. In the very few cases in which a user might want to use the same account in two different networks, it should be allowed as an advanced feature, and upon first importing new accounts, it would be good for the app to check which accounts have balance or nonces on test networks.

Let’s call these concepts of “cards” in which each account is tied to a given network and contains a balance there. This is executed quite beautifully in MEW’s new wallet:

MEW’s app on the Appstore doesn’t allow Testnets, but it’s Beta program did

Applying the concepts of cards to MetaMask we would have an interface similar to the following: