metamask
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:
我知道 ,要使软件(尤其是在区块链上)既强大又有用,就很难。 有时,我们计划了很多UI,但是增加了新功能,在实现中进行了一些更改,并且尽管我们对如何改善它有想法,但它们却被拖入了很长的积压之中。 因此,这并不是要赞美MetaMask团队所做的出色工作。 我希望这种分析是有用的,并且由于MetaMask目前在我的生活中具有巨大的实用性,我想与大家分享一下。 因此,让我们在应用程序上专门讨论一下:
Arguably, the most important piece of real estate of the app is the header and menu and it contains the following elements:
可以说,应用程序最重要的部分是标题和菜单,它包含以下元素:
A MetaMask logo. Despite looking like an icon and being the first thing we see, it is not clickable nor provides any information
MetaMask徽标。 尽管它看起来像一个图标,并且是我们首先看到的东西,但它不可点击也不提供任何信息
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.
连接状态 (8.0.0上的新增功能)会告诉您有关哪些应用程序可以看到您的帐户的信息。
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)
帐户菜单 ,其中包含以下选项:展开(在选项卡中打开MetaMask应用程序),帐户详细信息页面(稍后会详细介绍),在etherscan中打开以及指向连接菜单的链接(与单击连接状态栏相同的操作)
So, in a diagram format:
因此,以图表格式:
![Image for post](https://miro.medium.com/max/9999/1*ecaKMIuLKyi-18SPGq6CvQ.png)
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.
因此, 我们在顶部栏上有六个单击区域,可打开四个菜单。 但是, 最贵的区域(左上方)不提供任何信息或功能 , 而顶部的最大点击区域提供的功能可能仅用于更高级的用户 (有多少dapp用户想要设置自定义rpc或一个本地主机节点?)。 帐户切换可能是由用户更频繁地执行的(出于隐私考虑,我们应该鼓励他们这样做!),但隐藏在一个看起来更中立的标识中。 它们的行为也相当不一致 ,因为其中一些会创建动作,而另一些会扩展菜单。 假设用户需要查看他的种子短语,这条路径并不是从右上角的怪异的抽象绿色艺术开始的,这不是很明显。
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.
同样,“帐户详细信息”窗格很有趣,它提供了四个操作,其中两个将打开一个新选项卡(展开,etherscan),其中一个将打开您通过单击“已连接的应用程序”菜单获得的菜单。最后,将打开“帐户详细信息”窗格。
![Image for post](https://miro.medium.com/max/9999/1*Tt0ac1n1eqqPVQhPnhdhfA.png)
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
identicon:请注意,您现在看到了两次,因为它在背景中仍然可见
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!
在etherscan上查看:请注意,它也是上一个菜单操作的重复!
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”.
此窗格可从许多地方打开,包括单击“存款”按钮并选择“加密”。
建议1:用内联扩展替换“详细信息”菜单 (Suggestion #1: replace the “details” menu with an inline expansion)
![Image for post](https://miro.medium.com/max/9999/1*HDVP8vrvrbumRrfy8Ixo7A.png)
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.
单击标识图标,名称或白条上的任意位置(连接按钮和地址除外)时,可能会发生扩展视图。 这将消除“帐户详细信息”菜单和“帐户视图”覆盖。 减少菜单和覆盖的数量也减少了用户的认知覆盖,减少记住导航位置的地方也减少了。 这也保持了一致性,因为我们只显示了以前显示的相同信息,只是“更大”。 只需单击两下鼠标,即可完成诸如在etherscan中打开 “ 展开 ”之类的操作。 单击该顶部栏上的任意位置都会展开它,除了直接单击“连接”按钮或地址(保留复制链接的当前行为)外。
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.
我们还将绿色的小朋友图标移动到了此栏中,因为identicons是帐户的功能,而不是整个应用程序的功能。 当然,这意味着顶层菜单上现在有一个洞。 让我们探索一下。
建议2:统一“切换台”菜单 (Suggestion #2: unify the “switchers” menus)
There are three main actions accessible on the top menus:
顶部菜单上可访问三个主要操作:
Switch: change your current account or network
切换 :更改您当前的帐户或网络
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”
设置 :由于“信息和帮助”位于主设置菜单的深一层,因此这意味着该按钮与“设置”基本相同
Visually this could be divided like this:
在视觉上,可以这样划分:
![Image for post](https://miro.medium.com/max/9999/1*7_-Rsbb2T3X6tQr0pt8rxQ.png)
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.
我要捍卫的第一个重大变化是: 统一交换帐户和网络。 这不仅可以消除应用程序的混乱情况,而且还是一个好习惯 。 您不想使用您的主帐户在测试网络中签署交易,这会引发错误(“帮助,我不小心将其发送到我的测试帐户!”),可能会导致重播问题并降低隐私,因为网络之间的活动现在可以进行被链接。 切换到新的网络还应该切换您的帐户(当然,反之亦然)。 这也将帮助用户将哪些帐户用于什么目的以及与用户的常见行为相符,从而使您可以更轻松地从说(例如)切换到主要网络应用程序,然后快速切换到测试帐户中。另一个标签。 添加新帐户时,用户还应该选择该帐户用于哪个网络,这也有助于隐藏更多高级选项,例如“ localhost:8545”。 在极少数情况下,用户可能希望在两个不同的网络中使用同一帐户,因此应允许将其作为高级功能使用,并且在首次导入新帐户时,应用程序最好检查一下哪些帐户具有余额或测试网络上的随机数。
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的新钱包中执行得非常漂亮:
![Image for post](https://miro.medium.com/freeze/max/9999/1*8KlKskHlp38TEZvg3JoHpA.gif)
Applying the concepts of cards to MetaMask we would have an interface similar to the following:
将卡片的概念应用于MetaMask,我们将拥有类似于以下内容的界面:
![Image for post](https://miro.medium.com/max/9999/1*M6EO4jlpuL-84528DVw0zw.png)
The same functionality is present in the start, but we eliminated all intermediary modal menus, except for a much shorter “add account” menu. Clicking anywhere on the card header will expand it and show more options, clicking on the floating cards (and MetaMask logo) will expand them to allow a picker. Settings and Add account have clear icons. Not only the MetaMask logo is now in an even more important real estate, it serves an important functionality that is on-brand (access to your ethereum cards).
一开始具有相同的功能,但我们删除了所有中间模式菜单,只是“添加帐户”菜单的时间短得多。 单击卡头上的任意位置将其展开并显示更多选项,单击浮动卡(和MetaMask徽标)将其展开以允许选择器。 设置和添加帐户具有清晰的图标。 现在,不仅MetaMask徽标位于更为重要的位置,而且还具有品牌上的重要功能(访问以太坊卡)。
Some use of color can make the cards even more distinguishable. Colors can either be based on card type (main net, testnet, hardware wallet), random based on the address or they can be derived from the identicon itself (below right, we’re just expanding the icon and blurring it, so it works for any type of identicon including blockies)
某些颜色的使用可以使卡片更具特色。 颜色可以基于卡片类型(主网,测试网,硬件钱包),也可以基于地址随机,或者可以从identicon本身获取颜色(在右下方,我们只是扩展图标并将其模糊,所以它可以工作)适用于任何类型的identicon(包括方块)
![Image for post](https://miro.medium.com/max/9999/1*crBSTe1b0TfPG2mqzZtsjg.png)
I hope this exercise has been as useful for you to read it as it has been fun for me to work on it. I believe doing these changes would make the main navigation much more consistent, reduce the mental overhead required for users to figure out where stuff is and make the app experience even more interesting. Of course, the final design itself can be tweaked, animation can add another interesting navigation layer and it’s easy to see how it can be converted to mobile. Some tweaks can be done to show more relevant information, like if it’s a “MetaMask account” (derived from seed) or a hardware wallet. This reduces clicks, increases functionality and IMHO looks a lot more interesting.
我希望本练习对您阅读有帮助,对我来说很有趣。 我相信进行这些更改将使主导航更加一致,减少用户弄清楚东西在哪里所需的精神开销,并使应用程序体验更加有趣。 当然,最终设计本身可以进行调整,动画可以添加另一个有趣的导航层,并且很容易看到如何将其转换为移动设备。 可以做一些调整以显示更多相关信息,例如,它是“ MetaMask帐户”(源自种子)还是硬件钱包。 这样可以减少点击次数,增强功能,恕我直言,看起来更有趣。
![Image for post](https://miro.medium.com/max/9999/1*-6ehlpDryvdXYgU2YLYexQ.png)
Cheers and thanks for all your work, MetaMask team! Let’s keep building it together for a better and nicer ethereum!
欢呼,感谢您所做的所有工作,MetaMask团队! 让我们继续构建它,以获得更好,更好的以太坊!
翻译自: https://medium.com/@avsa/on-metamask-main-navigation-ac8b756599b1
metamask