Icons in Menus Everywhere – Send Help

From an accessibility/localization stand point, icons+text everywhere seems to be ideal.

Also, I disagree with:

> This posture lends itself to a practice where designers have an attitude of “I need an icon to fill up this space”

Sure, that does technically happen, but is in no way preventative or mutually exclusive with the follow on thought:

> Does ... the cognitive load of parsing and understanding it, help or hurt how someone would use this menu system?

That still happens, because if they mismatch an icon with text, that can result in far worse cognitive load/misunderstanding than if no icon was present at all. This becomes readily apparent in his follow on thought experiment where you show someone a menu with icons+text, but "censor" the text. Icons+text is also superior to [occasionally icons]+text in the same thought experiment. From my perspective, the author just argued against their own preference there.

I'd argue that the thought process behind determining an appropriate icon is even more important and relevant when being consistent and enforcing icon+text everywhere, not diminished. It also has the broadest possible appeal (to the visual/graphically focused, to the literary focused, to those who either may not speak the language, and/or to those who are viewing the menu with a condensed/restrictive viewport that doesn't have room for the full text). Now, if the argument is predicated on "We aren't willing to pay a designer for this" then yeah, they have a point. Except they used Apple as an example so, doubt that was the premise.

I always thought menus had icons so they could be matched to the same functionality on the toolbar. If a menu lacks an icon, then it's probably not on the toolbar. This falls apart when there is no toolbar. But I have definitely found an action in the menu, looked at the icon, and matched it to a a button elsewhere.

My biggest design peeve of the examples posted is the inconsistent indentation of each section of the menu. Where if any single item in the section has an icon it gets indented, but if none do it doesn't, and seeing them next to each other is jarring. I feel this is especially inconsistent design because if a menu item has a check mark it indents all menu items in the whole menu. I would have thought Apple would have the taste to keep things more consistent across the whole menu than that, as it seems sloppy.

> Hey, unless you can articulate a really good reason to add this, maybe our default posture should be no icons in menus?

Challenge accepted. If a user (esp. one whose cognition generally prefers visual media) uses a menu item frequently, they can remember its icon and that makes it easier to find in the future.

(Doesn't apply to me personally though because I'll instead remember the underlined letter and press it next time. My pet peeve in menus is not icons, but missing or clashing hotkeys.)

There was a comic artist I used to follow when I was doing more front end work, who would blog about his craft. One of the things he said that really hit me was talking about silhouettes. The visual noise in certain eras of comics make them very unapproachable. If you repainted your strip by flood filling everything with black, would people have any clue what's going on?

One of the things I'm seeing in some of these examples is icons with the same silhouette doing nothing or less than nothing for scannability. This is the same problem AWS has. Their dashboard is just noise, because the icons are neither visually distinct nor descriptive of the project.

I've also seen some of this same problem with card and board games as well. You can see that some designers care about accessibility. This type has both a distinct color AND shape so colorblind people can see it, all the icons are big enough that people can make them out sitting upside down in front of the person across the table from them, even if they're over 40.

His first example, Google Sheets, does well by this metric IMO, but the next few are kinda bad.

I actually like the icons from his example of Google Docs, it makes it easy for me to locate an action type I’m looking for (add/delete etc) without reading the labels, then once I narrowed it down - I can read the label to find the precise action I want.

Not sure I agree. It's much easier for me to find the link icon than "Insert Link" in the Google Docs example. It's seem pretty close to a standard icon so, for me at least, it's helpful to find it. Same wit some of the others like increase indent, decrease indent, left, right, center justification, and lots of others.

I can also be helpful for non-English (or non-language of your choice) when you haven't had time to localize or don't have perfect localization. Let's assume the user has Japanese as their second language. It's much easier to find the option you want with icons than without

When only some things have icons, it's almost like a flag that these things are more special/useful/used. I think that is by far more useful than everything having an icon that you have to think about (or see the text next to it) to understand

This a really interesting and persuasive read for me. I've been thinking about this topic as part of brainstorming a simple design system and I had come to the conclusion that the inconsistency of not having icons for every menu item was a big annoyance. After seeing how descriptive the icons are in older menu examples compared to the abstract blobs in newer menus, I have to admit I might be wrong. At the very least, ensuring that the icons themselves are as illustrative as possible about the intended outcome of its selection is necessary.

It also makes me think about the classic Save icon: the floppy disk. That was certainly descriptive at its origination, but is it still so? In the age of natively storing documents in the cloud or copying to a USB drive, it seems like we might want more than one save menu or an appropriate icon for where the file resides on the single Save menu item. Microsoft Office has the Autosave toggle switch that serves some of this purpose, but it could definitely be better.

I also think about the Zune UI where sometimes a menu consisted only of the icons. How do you enable unique menu designs like Zune without icons for everything?

I changed the UX in my mobile app from text only to icon + text by default in menus, buttons, and links.

There are several reasons I made the switch, but the primary reason is that it makes it easier to build a kind of muscle memory for navigating and performing particular actions. In essence, the text is there for new users and the icons are there for experienced users.

I think this is an example of the emojification of communication. I suspect that trend is being sustained, at least, by LLMs who are prone to abusing vapid emojis everywhere.

I think that to a certain superficial level of analysis, a matched set of icons looks "complete" and indeed impressive. Designers and implementers of the interface can fool themselves through customary use that they're creating a language of ideograms. Their users, who interact with their product only a few hours per week, only perceive visual noise and clutter.

Have you seen any specialized software, e.g. AutoCAD by Autodesk?

In the top ribbon menu there are icons only. And not any familiar ones at all.

Icons, text representations of the action behind the menu items…

It's a designer hell in which you have no chance to please everyone. Like someone using a vim editor for 20 years... some people are using icons, other want text and the third group wants combination of both.

I wonder if part of the problem is the lack of color in these examples? I remember Microsoft Office 97 and 2000, which had icons in their menus (albeit only for a few actions, not for every action). However, those icons were colored and appeared visually distinct from each other.

Yesterday I booted my 350MHz Power Mac G4 for the first time in 13 years. I booted into Mac OS 9.2.2. I remember the Apple menu having icons for every item. Once again, though, every icon was in color.

It's extra noise because of the fad for samey B&W icons (instigated by the ease of implementing dark mode). With judicious use of color, there can be more visual distinction where the menus guide you to the intended target by visual memory without having to process the text.

In earlier versions of Apple OSes, you could edit the menus yourself, with the officially supplied resource file editor app and there was nothing really special about it.

There are `ibtool` and `plutil` CLI commands built-in to macOS these days too, but to get some graphical editor, u would need to download 3GB of Xcode and u would invalidate the code signatures, etc...

Plus there is a huge churn in the application versions, so any customizations would need to be applied repeatedly to newer app versions.

Sad, really...

100% disagree. They make finding a group of commands very quickly and it's not like horizontal space in menu is at the premium

Somewhat tangential:

> What I find really interesting about this change on Apple’s part is how it seemingly goes against their own previous human interface guidelines (as pointed out to me by Peter Gassner).

> They have an entire section in their 2005 guidelines titled “Using Symbols in Menus”

2005?? Guidelines evolve.

I agree that there should not be icons in menus (with the exception of those indicating the status, like is shown in the 2005 guidelines). (Arrangements, shapes, etc might also sometimes be useful to indicate, but these should be separate from status indicators if they are present, and should be a part of the text instead in the few cases where they are applicable; in most cases they should not be needed.)

Showing a check mark for if something is active can make sense, and other status indicators, but then it should also indicate if the status is currently absent. (On Windows, some menu items can have a check mark, but if there isn't, it does not tell you if it is one that could have a check mark or not. Indicating this could be useful.)

Another thing that the menus do have, and which they should have because it is good to have, is specifying which keys are used to operate those commands. Windows also has one underlined letter so that you can select it when the menu is displayed, which can also be useful (especially since not all commands have keys assigned normally, so using the keys to activate the menus can be used in this case).

My own programs with menus do not use icons (and do not usually use icons outside of menus either).

Just right-click any file in VSCode/Cursor to see how absolutely chaotic and tedious a long menu is without icons. Now imagine that Google Docs example without icons.

It’s much easier to recognize the funnel icon to make a filter, than to skim all that text.

Two extensions/patches I'd like to see for macOS:

1. Remove all icons from menus.

2. Make mouse-over do nothing - I should be able to move the mouse anywhere on the screen, and nothing should change colour/pop out etc.

Over the years I've noticed something unusual about myself: I don't even see these icons. My brain goes directly to the text. This applies to all visual material, but is most evident in printed advertising.

Apparently other people notice the hot girl and the puppy and the fried chicken sandwich first. Meanwhile, I've already read all the fine print.

No idea why I'm like this.

Interesting take. As a low vision person, the icons help me scan menus like this.

From the article: "What I find really interesting about this change on Apple’s part is how it seemingly goes against their own previous human interface guidelines..."

Welcome to Apple of the last decade. As an avid user of many Apple products, this has been extremely frustrating to experience. Hopefully Alan Dye's departure will see at least partial return to obeying Apple's own HIG.

The disagreement here is interesting. I'm with OP, icons increase cognitive load for me if overused but can help a lot if there are just a few distinct ones.

I wonder how much variance is driven by zoom level (icons may be more distinct when bigger, text is easier to pattern match vs. read when small).

It has always been so since the dawn of modern desktops. I don’t see how/why this is noise. This is like a developer at a standup insisting we can make the app faster adding some micro services, flashy UX, and a few months of work while the - end user will still enter 20 order changes in an 8 hour day because that’s the environment.

What will you gain from removing the icons?

I think that icons hold value so long as they have mostly distinct colors (which none of his examples do, so his point stands). At least for me, colors make vastly superior landmark than words do (once i know the interface).

I think the key in apples guidelines is the word arbitrary. A lot/ most of the icons in apples menus are purpose made for the menu item - so it’s not as big of an issue.

>For example, the “Settings” menu item (third from the top) has an icon. But the other item in its grouping “Privacy Report” does not. I wonder why?

Isn't it obvious? Because compared to "Settings" it is a far less important infrequently used setting.

Simply put: icons in menus are helpful to me.

Deal with it.

The examples he showed, I didn’t mind. From the title, I thought he might be referring to the emojis in READMEs. Those annoy me and don’t add anything. (I assume all vibe-coded)

Don't agree with this take - it's quick to scan for the delete icon.

My best guess for the sparse icons in older MacOS versions: icons only for frequently-used menu items.

Probably this should be configurable, so people who want icons only or text only or both can make that choice. I like that KDE makes that possible.

Perhaps we are witnessing a early shift toward ideographic writing

Former UI guy at Google here.

The explanation for why they do it is pretty simple: localization hinting. From country to country, the text will change but the icon pictures won't. So if you find some how-tos or guidance online that has screenshots but wasn't made in your language, you can still follow along by lining up the icons.

There are other reasons too but that's a big one.

Even worse, Windows now has menus with only icons and no text.

Look how they massacred my boy

I love it for quickly finding items.

Another article in the category of "I am an able-bodied anglophone silicon valley man and I think X should not exist because it doesn't serve ME". Ignoring and ignorant that there are 8 billion people out there, of varying ethnic and linguistic background, with different ableness, of different education and literacy levels.

This is just rage bait or comment bait. Anyone who designs UI for the real world already knows people barely read text, and an icon is worth a thousand words. Also results in less cognitive fatigue.

I like them

His example of great icons from Finder is stolen directly from the Rectangle app. Looks like Apple shamelessly took Rectangle's icons.

Hilarious: I looked at first two examples on the page, showing a menu and contextual menu, and I saw no problem. Icons? What icons?

That's when I realized that, much like advertisements on a web page, my brain had utterly filtered them out.

Wow. Icons in Menus are so useful that I absolutely didn't expect this article is to complain about them. They help me location the item I'm trying to click tremendously.

Come on, could we get back to hating Cloudflare or something?

There are so many reasons to add icons as many have already stated here. One reason i didnt see is for multi lang help. Sometimes the icon is enough when i dont know the language used.

However, i think what may be described here is that apps often deviate from a “universal” standard or reuse something to mean another. This defeats most of the benefits of using icons imo.

I like it.

I always took it as a plus for soft internationalization, e.g. we may not have translated or localized to the current user language, but icons area decent generic hint.