溢出内容菜单

by Daniel Burka

丹尼尔·伯卡(Daniel Burka)

停止过度使用溢出菜单 (Stop the overuse of overflow menus)

You know those obscure menu buttons on apps and websites that reveal even more menu options? They usually have an ellipsis “…” or an arrow ▼ icon on them and sometimes they’ll even have a More label. Or, better yet, a More with a ▼! These are called overflow menus. Overflow menus are a scourge that should be rooted out, crushed underfoot, and drowned in a sea of toxic sludge.

您知道应用程序和网站上那些晦涩的菜单按钮会显示更多菜单选项吗？ 它们通常在其上带有省略号“ … ”或箭头▼图标，有时甚至还会带有“ 更多”标签。 或者，更好的是，带有▼的“ 更多” ！ 这些称为溢出菜单。 溢出菜单是一种祸害，应根除，压碎脚下并淹没在有毒污泥海中。

Overflow menus are really enticing to user interface designers. It’s been drilled into designers’ heads for years that the pinnacle of achievement is a “clean” user interface. Designers blindly stumble over each other to heed the old adage:

溢出菜单确实吸引了用户界面设计人员。 多年以来，设计师的头脑一直在钻研，成就的顶峰是“干净”的用户界面。 设计师盲目相撞以听从古老的格言：

…perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away. — Antoine de Saint-Exupery

……最终的完美不是在没有任何东西可添加时，而是在没有任何东西可取时。 — 圣艾修伯里·安托万

Overflow menus seem like the perfect solution. Designers can “take away” complexity and leave just the really important bits. You can quickly and easily create a clean looking user interface. The trouble with overflow menus is that you didn’t actually take anything away, you just obnoxiously obfuscated it.

溢出菜单似乎是完美的解决方案。 设计师可以“消除”复杂性，只保留真正重要的部分。 您可以快速轻松地创建外观简洁的用户界面。 溢出菜单的麻烦在于您实际上并没有带走任何东西，只是令人讨厌地对其进行了混淆。

The crux of the issue is that overflow menus let designers, engineers, and product people off the hook from making tough choices. Instead of prioritizing, we just sweep complexity under the rug and pretend that it doesn’t exist. Software with overflow menus is often still hard to use, even if the complexity is now beneath the surface. In fact, because users can’t discern all of the available options, overflow menus frequently make interfaces even more difficult to use.

问题的症结在于，溢出菜单使设计师，工程师和产品人员不必做出艰难的选择。 除了优先考虑之外，我们只是简单地将复杂性扫一扫，并假装它不存在。 带有溢出菜单的软件通常仍然很难使用，即使其复杂性已经浮出水面。 实际上，由于用户无法识别所有可用选项，因此溢出菜单经常使界面更加难以使用。

Just look at Google Image search. Instead of choosing whether to have a very simple interface or to have a set of powerful tools, the team split the difference. You can just imagine someone making the compelling argument:

只需查看Google图片搜索即可。 团队没有选择是拥有一个非常简单的界面还是拥有一组强大的工具，而是将差异化了。 您可以想象有人提出令人信服的论点：

Hey guys, I’ve got the ultimate solution. By hiding the advanced options using an overflow menu called Search tools, Google Image search will be both powerful and easy-to-use! Also, people feel overwhelmed by all of our search options, so we’ll intelligently hide the Books, Flights, and Apps ones under a More▼ menu. A perfect compromise.

大家好，我有最终的解决方案。 通过使用称为搜索工具的溢出菜单隐藏高级选项，Google Image搜索将既强大又易于使用！ 此外，人们对我们所有的搜索选项感到不知所措，因此我们将在“ 更多 ▼”菜单下智能地隐藏“图书”，“航班”和“应用”。 完美的折衷方案。

Sounds great. In reality, after years of daily use, I still can’t reliably choose the correct option. I just want to filter my images for big file sizes, and I know that there is a menu hidden away here somewhere, but I constantly click More when I guess I should click Search tools. Argghhh!

听起来不错。 实际上，经过多年的日常使用，我仍然无法可靠地选择正确的选项。 我只想为大文件过滤图像，并且我知道这里隐藏了某个菜单，但是当我猜想应该单击“ 搜索工具”时，我会不断单击“ 更多” 。 啊！

Android embraced overflow menus so deeply that it’s a default user interface element in the action bar. On any given screen of an app, you’re likely to get a different grab bag of menu options. Some things like Settings or About might appear in the overflow menu on every screen of an app. And, others like Delete post will be context specific to the screen that you’re looking at. They are all mixed together in a noxious potpourri: it’s a total mess.

Android对溢出菜单的了解如此之深，以至于它是操作栏中的默认用户界面元素。 在应用程序的任何给定屏幕上，您可能会获得不同的菜单选项。 诸如“设置”或“ 关于”之类的内容可能会出现在应用程序每个屏幕的溢出菜单中。 而且，其他类似“ 删除帖子”的内容将特定于您正在查看的屏幕。 它们全都混在有害的花香中：完全是一团糟。

I’m mostly snarking on Google’s implementation of overflow menus because I work at an arm of the company. I know many of Google’s designers are excellent and it’s safer to pick on your friends than to trash strangers. Of course, overflow menus are spread like a plague in apps designed by all kinds of teams, not just at Google. And, it’s not like I have never made compromise decisions that I later regretted, but sometimes it’s good idea to throw stones in glass houses. And, tellingly, some of the default apps on Android have recently moved away from using overflow menus. The Play Store, for instance, used to have zillions of them and I recently opened the app only to notice that the overflows have been nixed in favor of a more intuitive and streamlined interface. Nice.

因为我在公司的一个部门工作，所以我主要是在谈论Google对溢出菜单的实现。 我知道许多Google的设计师都很出色，而且挑选朋友比丢掉陌生人更安全。 当然，溢出菜单会像瘟疫一样在各种团队设计的应用程序中传播，而不仅仅是Google。 而且，这并不是说我从未做出让步的决定，后来我后悔了，但是有时候在玻璃屋里扔石头是个好主意。 而且，可以说的是，最近Android上的某些默认应用已不再使用溢出菜单。 例如，Play商店曾经有成千上万个这样的商店，而我最近打开该应用程序只是为了注意到溢出已被消除，而希望使用更直观，更简化的界面。 真好

So, if Google has some talented designers why have overflow menus often still run amok even here? Let’s look at how bad things happen to good teams and how to avoid it happening to your team:

那么，如果Google有一些才华横溢的设计师，为什么即使在这里溢出菜单仍然经常运行？ 让我们看一下好团队如何发生坏事以及如何避免发生在您的团队中：

Obfuscation ≠ SimplificationDesigners frequently confuse obfuscation with simplification. Simply hiding features seems like you’re creating a “cleaner” and more easy-to-use interface. Sure, your new UI may pass the squint test of simplicity but you’re not dealing with the core complexity of your app.

混淆≠简化设计人员经常将混淆与简化混淆。 简单地隐藏功能就好像您正在创建一个“更清洁”且更易于使用的界面。 当然，您的新UI可能通过了对简单性的严格测试 ，但您没有处理应用程序的核心复杂性。

Instead using obfuscation or sleight of hand, our job as designers is to structure complexity so it’s easily understood. The problem with overflow menus is that there is no information scent — anything from a juicy steak to a gross licorice could be hiding under that menu. Instead of adding an overflow, consider these options:

作为设计者，我们的工作不是使用混淆或手法，而是构造复杂性，以便于理解。 菜单溢出的问题是没有信息味-从多汁的牛排到甘草，任何东西都可能藏在该菜单下。 而不是添加溢出，请考虑以下选项：

1. Remove the feature. If 0.001% of people will find it in an overflow, did you really need it?
   删除功能。 如果0.001％的人会发现它泛滥，您真的需要吗？
2. Add the feature for real. Don’t dither. Put it on the page. Scrolling is the easiest mode of navigation.
   真实添加功能。 不要打扰 将其放在页面上。 滚动是最简单的导航模式。
3. Structure the complexity, don’t just hide it. Use a meaningful icon or clear label to indicate a group of features is available. Seriously though, “More” or “Menu” or “…” are not clear labels.
   构造复杂性，而不仅仅是隐藏它。 使用有意义的图标或清除标签表示一组功能可用。 严重的是，“更多”或“菜单”或“…”不是清晰的标签。

Acknowledge that you’re using a crutchAdmitting you have a problem is the first step to solving it. Many teams don’t acknowledge that using an overflow is a crutch, a way to avoid making a tough choice. I’m sure sometimes you will consciously choose to use an overflow menu (I’ll even grudgingly admit to having used one before) but don’t let the choice become an easy out.

确认您使用拐杖承认有问题是解决问题的第一步。 许多团队不承认使用溢出是拐杖，这是避免做出艰难选择的一种方法。 我敢肯定，有时您会自觉选择使用溢出菜单(我什至会勉强承认曾经使用过一个菜单)，但不要让选择变得容易。

Force yourself and your team to make tough choicesThis is really the point. Instead of pretending to make your product simpler, actually make the tough call to include or not include menu options. If something is important enough to include, show it to customers. One of the best parts of designing mobile-first is that you’re constantly forced to make tough choices about what to include and what to leave out (this is particularly true on iOS, which doesn’t have a built-in overflow menu in its toolkit). Take this as a challenge instead of a hampering constraint.

强迫自己和您的团队做出艰难的选择，这才是重点。 与其假装简化产品，不如说是艰难的选择是否包含菜单选项。 如果重要的东西足以包括在内，请向客户展示。 设计“移动优先”的最佳部分之一是，您经常被迫做出艰难选择，包括哪些内容以及哪些要省略(在iOS中尤其如此，因为iOS中没有内置的溢出菜单其工具包)。 将此作为挑战而不是阻碍约束。

Be contextualOverflow menus are most egregious when they lack context. In Gmail, for instance, the Print function could live under either of two overflow menus. In Android, the persistent overflow menu in the top right of the action bar can contain global or local menu options. In Google Images, two side-by-side, unrelated overflow menus conflict with each other. Overflow menus can work when used really contextually. Consider the example from the Android alarm clock app, left. The overflow menu in the top right lacks context (it could be about anything) but the overflow menus on each individual row gives some indication about what you might find under the surface because it’s contextual to a specific alarm.

当上下文溢出菜单缺少上下文时，它们最糟糕。 例如，在Gmail中，“ 打印” 该功能可以存在于两个溢出菜单之一中。 在Android中，操作栏右上角的持久性溢出菜单可以包含全局或本地菜单选项。 在Google图片中，两个并排的，不相关的溢出菜单相互冲突。 真正在上下文中使用时，溢出菜单可以工作。 考虑左侧Android闹钟应用程序中的示例。 右上角的溢出菜单没有上下文(可能是任何东西)，但是每行上的溢出菜单都会提示您可能在表面下找到的内容，因为它是特定警报的上下文。

Research keeps you honestOne excellent way to stem the tide of overflow menus is to do user research. In the confines of our design studios, solutions like overflow menus seem perfect. Putting your product in the hands of regular human beings and watching them struggle through the interface you designed is the ultimate sobering gut check. Your “clean” user interface likely confuses the hell out of your users. Unless you and your team are a bunch of cold-hearted SOBs, empathizing with your users’ struggles should convince you to find better solutions.

研究使您保持诚实阻止溢出菜单浪潮的一种绝妙方法是进行用户研究。 在我们设计工作室的范围内，溢出菜单之类的解决方案似乎很完美。 将您的产品交到普通人的手中，并看着它们在您设计的界面中挣扎，这才是终极清醒的直觉。 您的“干净”用户界面可能会使您的用户感到困惑。 除非您和您的团队是一堆冷酷的SOB，否则不理会用户的挣扎，应该说服您找到更好的解决方案。

Consider information foragingIf my bombast above is obnoxious to you, consider a more academic perspective on why overflow menus are, uh, suboptimal. There is a popular theory called Information Foraging that is often used to describe why some interfaces are better than others. You can read a thorough and useful explanation of Information Foraging at the Information Design Organization here, but the basic gist is:

考虑信息搜集如果上面的问题令您讨厌，请考虑从更具学术性的角度来探讨为什么溢出菜单次优。 有一种流行的理论称为信息搜寻，通常用来描述为什么某些界面比其他界面更好的原因。 您可以在这里的信息设计组织中阅读有关信息搜寻的详尽而有用的解释，但是基本要点是：

Information foraging theory is based on the analogy of an animal deciding what to eat, where it can be found, the best way to obtain it and how much “energy” (how filling) the meal will (be) provide… Imagine a predator, such as a bird of prey, that faces the recurrent problem of deciding what to eat, and we assume that its fitness, in terms of reproductive success, is dependent on energy intake. Energy flows into the environment and comes to be stored in different forms. For the bird of prey, different types of habitat and prey will yield different amounts of net energy (energetic profitability) if included in the diet. http://bit.ly/InformationForaging

信息觅食理论的依据是类比动物的决定，该动物决定吃什么，在哪里发现，获得它的最佳方法以及餐将提供多少“能量”(如何填充)……想象一下一个捕食者，例如猛禽，面临着决定吃什么的反复性问题，我们认为，就繁殖成功而言，其适应性取决于能量的摄入。 能量流入环境并以不同形式存储。 对于猛禽来说，如果饮食中包括它们，则不同类型的栖息地和猎物将产生不同量的净能量(能量收益率)。 http://bit.ly/InformationForaging

In a gross over-simplification, according to this Information Foraging theory, something either has to be damn worth the effort of seeking it out (high value) if it’s going to be hard to find. Or, if the thing has lower value it has to be presented in a context that makes it easier to locate.

根据这种信息搜寻理论，过分简化是，如果很难找到某种东西，则必须付出努力才能找到它(高价值)。 或者，如果事物的价值较低，则必须将其呈现在易于定位的上下文中。

In a concrete example, consider the hidden options in Google Image Search. I have been using this interface for years to filter for “large” images in search results and yet I have neither learned the interface nor have I given up and used a different image search. Both the frustration and my continued use of Google Image Search can be explained by the Information Foraging theory. On the one hand, the Search tools link is not presented with any real context, so I find it hard to locate and confusing — heck it’s right next to a More link that serves a completely different purpose! On the other hand, I am not so frustrated with the complexity that I give up. I come back and stub my toe at the door time and time again. That’s because the food is so damn tasty. It’s a good search tool and the filter for “large” images is super useful for my work. I wish it didn’t taste so good or, better yet, I wish the tasty food was right at the surface.

在一个具体的示例中，考虑Google图片搜索中的隐藏选项。 多年来，我一直在使用该界面来过滤搜索结果中的“大”图像，但我既没有学会该界面，也没有放弃并使用其他图像搜索。 信息搜寻理论可以解释我对Google图片搜索的不满和继续使用。 一方面，“ 搜索工具”链接没有任何真实的上下文，因此我很难找到它并使其感到困惑-哎呀，它就在“ 更多”链接旁边，该链接用于完全不同的目的！ 另一方面，我对放弃的复杂性并不感到沮丧。 我回来，一次又一次在门口脚。 那是因为食物太美味了。 这是一个很好的搜索工具，“大”图像的过滤器对我的工作非常有用。 我希望它的味道不太好，或者更好，但是我希望美味的食物在表面。

You said never use overflow menus? Like never ever?Like just about anything, overflow menus have a time and a place where they don’t totally suck. But, the appropriate place for an overflow menu is probably not your project and probably not the spot you’re thinking about. So, think long and hard before you resort to using one.

您说过不要使用溢出菜单？ 从未像现在这样？ 就像几乎所有东西一样，溢出菜单在一定时间和位置上并没有完全被吸收。 但是，溢出菜单的适当位置可能不是您的项目，也可能不是您正在考虑的位置。 因此，在使用一种方法之前，请三思而后行。

翻译自: https://www.freecodecamp.org/news/stop-the-overuse-of-overflow-menus-5caa4b54e843/

溢出内容菜单