Icons in Menus Everywhere – Send Help
blog.jim-nielsen.com823 points by ArmageddonIt 2 days ago
823 points by ArmageddonIt 2 days ago
Pictograms in the interface are not decoration. Their purpose is to convey information in limited space. (The information should be that could be conveyed this way.) Currently they are often used as decorations or these two uses are mixed up. This is a mistake.
(It is interesting and saddening to see how years of UI research just went down the drain after Apple "resurrection". In my impression Apple was the first that started to lose their carefully collected UI expertise and replace it something that was original for the time, but that was all. E.g. I remember the very first ads after Jobs' comeback. They still had the beige Macintoshes, but their ads changed. Instead of a typical computer ad that showed a computer with a turned on screen and some desktop picture Apple's ads pictured turned off computers photographed from unusual angles or in unusual positions, like keyboard standing on its side leaning on the box, mouse hanging on its wire and so on. It was different, indeed, it stood out. Thing is, to always strive for that is harmful. Especially for user interface, where the motto is: do not make it original, make it right.)
So the rule of thumb is that: if the pictogram is always same, then as in Shannon's model, it conveys no information, and thus is decorative. Discard it.
One of first programs that put pictograms in menus was Microsoft Word. But the way Word did it was entirely different from what we do now. Microsoft Word had toolbars and their buttons, of course, were mostly pictorial. Toolbars could be turned on and off and users could assemble their own toolbars. Microsoft Word's menus displayed pictograms only for the commands that could also be called with currently visible toolbars. Have a toolbar visible? Its pictograms will appear in the menu. Closed that toolbar? The pictograms disappeared. The pictogram did not merely decorate a command, but also provided a hint that the user could call the command with a toolbar. This is informational. This is the right use.
Pictograms let you parse a lot of information at a glance, because you can pattern match a group of differing symbols much faster than you can a block of text which all looks uniform. It lets you skip reading all the text when you're familiar with a dialogue, and you can short circuit what you need to click on without having to read
That's the reason why pictographic additions are so useful. Its the reason why we distinguish different kinds of UI elements at all, because colour and graphics are incredibly powerful shortcuts for parsing information
This. If I'm out looking for a "Save" button, I'm going to pattern match "ancient disk icon" without even thinking about it.
It's also the reason why some menu entries get icons and others don't.
If the icon doesn't convey information by itself (like a "move to top" icon example), then it's there as a visual anchor - and you don't really need to have 4 of the same "delete" icon if a menu has 4 different "delete" options next to each other. Just one is enough of an anchor to draw your attention to the "delete group", and having just one keeps the visual noise low.
Likewise, you don't need visual anchors for every single option - just the commonly used ones, the ones you expect people to be looking for, and the ones that already have established pictography.
> "ancient disk icon"
Even though floppy disks were a bit before my time and I rarely ever used them, seeing them be called ancient disk makes me wanna find the nearest coffin and just go lie down. :D
What may be added is that some people have a hard time reading words by their 'total shape'. I can imagine that for them, the difference between pattern matching symbols and strings of letters is even more profound.
> Pictograms let you parse a lot of information at a glance, because you can pattern match a group of differing symbols much faster than you can a block of text which all looks uniform
No you can’t.
I'd disagree but either way throw another factor in: non-native speakers and cross-language usability.
If your software is in some language and you are looking at docs or a videotutorial or something in another language, it's often hard to translate specific terms, Icons don't change language. They also help if you have to do something in another machine that uses a different language for some reason.
Look at the traffic signs. You have very limited time to read the sign. That's the reason they have distinct patterns and rarely (except in USA) rely on blocks of text.
So do I want the button with the three horizontal lines, three horizontal dots, three vertical dots, nine dots arranged in a grid, the point-down triangle, or the point-right chevron? Generally these convey no information and I have to try each one to find the option I want. If it exists.
hamburger icon: originally, in older Android UI guidelines, provides access to a list of items that can be used to navigate between parts of a large UI. But at this point, pretty much evolved to mean "click to access a menu" on UIs that don't have a menu bar.
Three vertical dots: "More stuff that doesn't fit on a toolbar because the display on your current device isn't wide enough".
Three horizontal dots: click this item to access a dialog.
Point-down triangle: Select an value from a list.
There may be slight variations depending on the UI guidelines for the platform you are using (or designing for).
All enormously useful icons that provide specific context and meaning. I can't say that I've ever seen a piece of serious software that abuses those conventions.
> if the pictogram is always same, then as in Shannon's model, it conveys no information, and thus is decorative. Discard it.
If the text on the button is always the same, then as in Shannon's model, it conveys no information, and thus is decorative. Discard it. Just use the position.
And if the position is always the same, it is decorative, and we'd pretty much rather discard it too and use time, which does not stay the same by definition, and make them stupids click anywhere spatially but on precise time: t % 2 == 0 => action 1, t % 3 == 0 => action 2 etc - but that would be too much of a disrespect towards users, however stupid - and we have no choice but randomize those iconless textless positions dynamically.
> thus is decorative. Discard it.
Or keep it since decoration makes interfaces feel more alive.
Not everything NEEDS to be useful
Classic Mac OS window headers had striped or dot patterns that were kind of similar to rugged parts of various physical tool handles. So they were both decorative in a way and informational: this is a part you can hold and drag around. A typical interface will have a lot of such parts that are both functional and decorative, so it will feel just right.
Purely decorative parts are also possible (and even desirable), but they should be personal. A set of colors chosen by the user, a background texture, a picture that the user keeps on the desktop and so on.
That’s a very subjective view of design, and I strongly disagree with it. I don’t want everything to be too uniform
Everything in a UI needs to not hinder usefulness. Adding more information signals (icons) which don't actually convey meaning is clutter that makes the UI harder to parse. That factor is far more important than whether it feels "alive".
A decorative element can be fine in a design model, but 1) a good design tends to have no purely decorative elements, and 2) it becomes problematic when the decorative element looks like a meaningful element but does not actually carry meaning (or the intended meaning).
We all recognise an icon in a menu as a meaningful element. Treating it as a decorative element is wrong and adds mental overhead, as we tend to scan every one of those icons (putting it at the beginning of menu text, i.e., to the left for LTR languages, makes it worse). It is well-known we do tend to scan these icons because that is the reason icons work: repeated exposure creates intuition. If this intuition is not put to use, then all such icons are a waste of our attention.
For example, a bullet in a list: fine (differentiates where each list item starts), window shadow or the 3D effect on window close buttons: fine (meaningful in terms if differentiating areas in the GUI, not pretending to do more); whitespace to set apart one thing more from another thing than from the third thing: fine (if that reflects the relationship between those things).
This is all somewhat simplified.
I tend to follow the "no form without function" design philosophy. Your comment makes me rethink that. thanks
You remind me of my favourite bit of Windows software ever[0]. It made the desktop feel really alive with things like can-can girls and humanoid fish flying around your "living wallpaper".
Then again it was named Monty Python's Complete Waste of Time, so maybe it's not such a good idea for the default environment of a general-purpose operating system.
[0] https://www.mobygames.com/game/1975/monty-pythons-complete-w...
> Not everything NEEDS to be useful
... until the not-useful becomes distracting and/or causes information overload.
In the case of Apple, I've been a user of the Accessibility menu ever since they introduced the stupid parallax wiggling of the icons. Right now i use: reduce motion, bold text and reduce transparency. Because I want to see what I'm looking for when using the phone and not squint through pointless effects.
Menus should not feel alive. Because they are menus, at any given point they mostly contain things the user does not want to interact with right now. Menu icons that serve as visual anchors are good, they help the task of finding the desired action, as well as building a visual memory. Icons everywhere achieve the opposite, for the spurious benefit of visual consistency. Menu items are not consistent affordances, they perform very different actions that are at best related, but oftentimes they are there because they need to be somewhere.
in that case, they should make it optional. What some might find as eye candy, other finds as nuisance (case in point, animation).
> Their purpose is to convey information in limited space.
No, that's only one of their purposes. Another one is faster visual parsing of shape recognition instead of reading even if space is not an issue (just like with all of these menus, they waste so much space on padding they could fit command names 3 more times)
Right; but this is also information. The Civilization game used little pictures of wheat and shields, I think, to indicate the production levels. Here the pictures are better than numbers because they feel more like actual things and allow to express all the details we need. We understand smaller numbers differently, three vs five is not just arithmetical for us, it is more substantial to actually see three vs five items than a different shape of a digit.
Yes, and as much as I hate to defend modern UI designers, I believe the icons in the menus here are actually extremely helpful (even when duplicated).
In the first example, when I want to find the option to add or delete a row in this massive menu, the icons clearly convey the purpose. I can instantly filter a huge list of possibilities down to a few relevant entries.
yes; I think it depends a lot on how accepted the icon is. Every few months when I have to open ST's CubeProgrammer, my brain substantially deteriorates because they don't use text and the icons for their main tabs are not always understandable to me. (and the thing's otherwise a relic from 20+ years ago)
X, volume & mute icon, disk icon, upload/download icon -- these are all fine and good; you don't need to spell those out for me because their use is so widespread that even if I didn't know what they meant, it'd be very useful to learn. I have no idea what a generic "integrated circuit" icon means, though, and I doubt anyone will use it elsewhere to mean the same thing, so I just click around randomly until I find what I'm looking for, like I'd do with the previously-unlabeled 6-switch panel in my living room where the positioning of the switches have no obvious relation to the physical placement of the ceiling lights.
I think Apple's menu actually shows exactly what I want and expect; show icons if it'll help me, don't show them if they wouldn't; though in come cases, I think Apple could apply some more icons (like for "Stop", there are a few good choices for that).
I disagree, pictures are easier to remember than words and I'm much faster (several hundred miliseconds) at quickly spotting an icon in the 12th place down a list and clicking it because I memorized it visually than reading the actual words.
So icons make power users faster. It's not "clutter". Your argument about "don't use it for aesthetics" is ironic because you're making it because of aesthetics. For me it's about user speed.
>I'm much faster at quickly spotting an icon
Using the label-less example in the article with the 10x10 monochrome icons I doubt many other people feel the same.
> 10x10 monochrome icons
I don't mind the size, but lack of colors is annoying. If common icons where color-coded, like green to save, blue to download/print/export, red to delete, UI would be friendlier to use.
> If common icons where color-coded... UI would be friendlier to use
As a colour-blind person, this sounds like accessibility hell. Don't forget your UIs still need to be friendly in what amounts to monochrome
I think it is important to stress that both, color _and_ shape should be visible distinctive, and as you say it is important that the color palette is chosen in a way that even if the color does not stand out for a the color-blind person, the contrast stays visible.
Making everything monochrome is surly not more accessible, because there sure are people who find it easier to distinguish by color than shape.
And also in some cultural contexts in which red and green do not carry the same meanings.
Why in the world would colors discomfort you if you can't discern between them? Icons have until recently always been color coded. That doesn't make them a problem for the color-blind. You can look at the shape of the icons and read the text next to them. Would a pedestrian traffic light be better if it wasn't color coded? Would a white car be preferable to a red car?
> Why in the world would colors discomfort you if you can't discern between them?
Because pretty much as soon as one starts colour coding items in the UI, people start using the specific colours to encode meaning. If your UI requires someone to discern between the red and green versions of the same icon in your UI twice, congrats, you just lost 8% of male users!
> Would a pedestrian traffic light be better if it wasn't color coded?
If they weren't colour-coded, they would have to be differentiated by shape, and then when I traveled to Canada, I wouldn't have to guess whether the fancy horizontal traffic lights are ordered left-to-right or right-to-left
> Would a white car be preferable to a red car?
Even fully colour-sighted folks can't see red very well at night, so yes, white car > red car
Personal anecdote re the traffic lights: I thought "green light" was a metaphor until sometime my twenties, when a friend explained that the 3rd light actually is green to other people. It's always been a white light to me
With that line of reasoning we arrive at the conclusion that all graphical elements of an interface should be removed, as the blind cannot see icons.
> If your UI requires someone to discern between the red and green versions of the same icon
Color coding has never been about this, only when implemented wrongly. It is just an extra differentiator for GUI elements which are already differentiated by icon shape and text labels.
> Color coding... is just an extra differentiator for GUI elements which are already differentiated by icon shape and text labels.
In principle, I agree, but I do not believe I have ever used a software package that follows this philosophy. In practice, once you give people a tool, they are inclined to use it, and most projects only try and address accessibility concerns post-ship
Monochrome is a strange complaint, the text is also monochrome. Regarding what most people think I don't know, I'm definitely faster at spotting a specific pictogram in the start of a line than having to read multiple lower information-density pictograms (alphabet characters) in order (reading a full word or sentence). This seems obvious to me, 1 thing is faster to parse than multiple things.
The monotone ones in Windows 11 that jump around in order or menu position (I think both of these have been addressed in 24h2 or something?) where they hop to the top or bottom of the menu or dont show so the order is wrong if they are disabled for some object are insanely bad UX.
I say this because I agree, the pictogram icon is much easier for me to find. I also like having a word there though, if they change the picture on me. If its not color, almost all bets are off, since I dont even look at the icon, just look for a color and go for it if thats available.
There was a point where a significant amount of menus in windows and office used only icons. It made it basically unusable for anyone over 60.
an icon for "save" will suffice to help me find the portion of the menu with "save as", "save a copy", and "export". when all four have the same icon, or slight variations, i'm back to reading each one to discern the difference.
Speak for yourself. I remember words. That disk icon stands for "Save". "Save" is what I remember. I also remember location, but the spatial component applies independent from icons or words.
I hate the monotone ones - I get it, its easy to tick the box that they are colorblind safe or whatever, and its modern design, but man the colors really help me identify what the hell I'm going at in the menu. Brown thingy (clipboard) is copy, black square is save. I'm a simple creature.
Same. Most people identify a blob of color far earlier than they distinguish one monochrome shape from another.
> the motto is: do not make it original, make it right.)
Agreed. It just doesn’t sell.
Limited space seems like a surprising thing to lean on, especially when put next to a text label, with the increase pixel count/resolution on devices over the last 5-10-15 years.
Words create better beginners than icons alone.
UI/UX can evolve as the baseline digital literacy of users evolves usually very slowly, to remain maximally inclusive.
One thing that I'd consider is start with text labels, and the more they are used, start showing an icon. Just hold a left bar for them to start appearing so that learning can happen.
The screenshot where there was only some menu items with icons feels more memorable for that reason.
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 used to manage a team working on the news feed at Facebook (main page).
We did extensive experimentation, and later user studies to find out that there are roughly three classes of people:
1) Those that use interface items with text 2) Those that use interface items with icons 3) Those that use interface items with both text and icons.
I forget details on the user research, but the mental model I walked away with this that these items increase "legibility" for people, and by leaving either off, you make that element harder to use.
If you want an interface that is truly usable, you should strive to use both wherever possible, and ideally when not, try to save in ways that reduce the mental load less (e.g. grouping interface by theme, and cutting elements from only some of the elements in that theme, to so that some of the extra "legibility" carries over from other elements in the group)
Sounds like me: 1. For new UI/tool, I depend on text to navigate. 2. Once I'm more familiar, I scan using icons first then text to confirm. 3. With enough time, I use just icons. 4. Why the ** do they keep moving it/changing the icons?
> Those that use interface items with icons
This is the bane of my existence since icons aren't standardized* and the vast majority of people suck at designing intuitive ones. (*there are ISO standard symbols but most designers are too "good" to use them)
Cite cliché about the only intuitive user interface is the nipple; everything else is learned.
Having done my share of UI work, my value system transitioned from esthetics to practicalities. Such as "can you describe it?" Because siloed UI, independent of docs, training and tech supp, is awful.
All validated by usability testing, natch. It's hard to maintain strong opinions UI after users shred your best efforts. Humilitating.
Having said all that... If stock icons work (with target user base), I'm all for using them.
PS I do have one strong opinion: less is more.
Hooray, actual user research and data!! This is what I tell all my clients: "We can speculate all day long, but we don't have to. The users will tell us the correct answer in about 5 minutes."
It's amazing that even in a space like this, of ostensibly highly analytical folks, people still get caught up arguing over things that can be settled immediately with just a little evidence.
After my stroke 3 years ago, I find myself in a place meeting accessibility. So the icons are helpful. I cannot necessarily read the text.
What isn't so helpful though is the classic Google Sheets example where it has three different options (Delete Row, Delete Column, etc.) but all with an identical "trashcan" icon.
I immediately see that block as something to do with deleting stuff. If I don't need deleting is ski if i need i look closer
Can you associate the symbols shown in the post with the text blurred out to their individual meaning?
Genuinely curious if the item types in as shown in the article are that helpful though. They seem small, fiddly, hard to distinguish between, and not especially intuitive.
did not undergo a stroke, but I find myself often navigating menu by memorizing the location in the menu, I also use the icons for memorizing and then I can speed up by not reading.
The first time I noticed that is the time I needed to operate a Finnish Windows machine and I could get it working pretty good by sheer memory
Then I'd argue that not having icons on every item in the menu, and having groups/separators helps more than just having nearly indistinguishable icons everywhere
Yes, I agree. Maybe if you’re a fast reader icons don’t do much, but for people who are illiterate (20% of America) they figure out how to use tech by memorizing the icons and locations of buttons.
There's illiteracy, and there's functional illiteracy. They're not the same, and people often confuse the two. A literally illiterate person (ha!) wouldn't make headway with almost any realistic computer interface, icons or not.
The 20% statistic is about people who have great trouble reading and comprehending simple sentences, not discerning individual words. It's tragic and debilitating, but such people could muddle through a simple interface with textual labels. A truly illiterate person couldn't.
Is this just your belief presented as fact, or do you have some data to back this up?
(Not the literacy stat but the fact that illiterate people "figure out how to use tech by memorizing the icons and locations of buttons").
Well, if you're unable to read, you're not going to figure out what the buttons do by reading the textual labels :p
Further, if you have difficulty reading, it's easier to parse the meaning of an abstract symbol, so you'd use that instead of a textual label when available. (I say this as someone who is a really slow reader. I use icons when I can)
I feel like icons subconsciously turn O(n*m) into O(log n).
Without icons, you have to read many or most of the words.
Without text labels, icons are difficult or even impossible to interpret.
But with both icons and text, you have quick visual search and filtering that involves the whole brain.
But also from an accessibility stand point, providing users with affordances to remove distractions (animations, transitions, and yes, icons) should be an option. But I disagree with the author that the default should be less icons.
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.
I believe Microsoft Office 97 for Windows was the first time I saw icons next to menu items. Office 97 had highly customizable menus and toolbars. Each menu item and toolbar item could be thought of as an action with an icon and a label, and that action could be placed in either a menu or a toolbar. Not every menu item had an icon associated with it. Additionally, each icon was colored and was clearly distinct.
Office 97 went pretty overboard on customization. It could be awesome if you know what you're doing, but I saw countless examples of where somebody had accidentally changed something and got stuck. Deleted the file menu? tough luck!
This is definitely where I would this pattern - MS Office 97’s customizable toolbars necessitated this model where every single thing you could do in the application had an icon.
It then got copied into Visual Studio, where making all of the thousands of things you could do and put into custom toolbars or menus have visually meaningful icons was clearly an impossible task, but it didn’t stop Microsoft trying.
I assume Adobe, with their toolbar-centric application suite, participated in the same UI cycle.
By the time of Office 2007 Microsoft were backing off the completely customizable toolbar model with their new ‘Ribbon’ model, which was icon-heavy, but much more deliberately so.
I still regard Office '97 as the best UI it ever had. I spent a lot of time inside it, including a couple of years at a bank reconciling corporate actions before I got my first programming job. The ribbon version was awful in comparison.
2003 was the best/final iteration of it - I still miss old excel
new excel is just garbage instead in virtually every way
I believe some programs used to let you even drag menu items to the toolbar.
Many KDE apps (Dolphin, Kate, Okular, etc.) let you configure their tool bars (or get rid of them entirely) and set them to show just icons, text, or both (with the text to the side or below). It's the kind of thing most people won't bother with, but for frequently used applications it's nice to be able to customize it to suit your needs. It's done via a config option though, not by dragging menu items to the toolbar (which strikes me as something you could initiate by mistake).
MS Office’s fully customisable toolbars, complete with built-in icon editor.
…ripped out when the Office Ribbon was introduced in 2007; the now-limited customisation is now considered an improvement because of the IT support problems caused by users messing up their own toolbars.
I mean, yes; but that’s what Group Policy is for! And the removal of the icon editor is just being downright mean to bored school kids.
I agree with the author. I understand many of the reasons others give here for why icons could be beneficial- localization, literacy, vision issues, etc. all are great reasons to supplement text with icons, theoretically. But I disagree that these icons, I mean those shown as examples in the Apple menu, Safari menu, or Google Docs menus- actually convey anything useful and really do prove the authors point that they’re poorly implemented.
I realize it may be generational and privilege based, as I can read English and have a good deal of computer literacy. To my eyes the icon trend of flat, minimal icons paradoxically ask a user to possess a higher degree of computer fluency to successfully parse the artistic intent of the icon and map it to its function. When these icons don’t accurately convey their function (the Paste icon is a blank clipboard. What’s that do?) and when the design language is inconsistent within the same application and OS (do cogs mean Preferences? Services? you’re building a very confusing world for most of the user group types you claim to be helping.
It doesn't actually matter that much what the icon is. It's impossible to creat icons people would fully understand - otherwise you wouldn't need a label at all.
The function of the icon is to have distinct shape so you are able to visually distinguish menu items quickly in future (more you use the app).
There are other factors like consistent placement that can help. This icon approach is good especially if you have common shared menu items over the OS or they change their placement throughout the app.
> The function of the icon is to have distinct shape so you are able to visually distinguish menu items quickly in future (more you use the app).
In theory, yes. But if you look at the examples in the article, the shapes are basically all similarly-sized circles.
In the Apple example, "System Settings" is circle (A gear with barely discernible teeth.) "Recent Items" is a circle (a clock.) "Force Quit" is a circle (a rounded! octagon.) "Sleep" is...a circle with a line through the bottom third. "Log Out" is...a human silhouette in a circle! (Why?)
It doesn't matter what the icon is as long as the icons are distinct, and today's icons aren't.
The IKEA instructions are generally regarded as a triumph of simplicity. Yet on more than one occasion I've come across cases where a few words in a call out would have prevented having to redo some step after later realising that some features had to be oriented a particular way - the pictures not quite conveying their intention until it was obvious in hindsight.
Others have brought up the Office 97 style for good reason. Everything has an icon, on an icon toolbar. Every command can also be on a file menu but most of them there don’t have an icon. The ones that do are special or intended to draw your attention.
And there’s a consistent metaphor: for example the web browser is represented by a globe for the world wide web. So the “hyperlink” function is a globe with a chain. This the “preview as web page” is a globe with a magnifying glass (whereas the print preview command is a sheet of paper with a magnifying glass.).
This icon language hints at function through its form and helps serve as a cue, a reminder, or a visual representation of its function.
And it all worked on 640x480 256 color screens. They are thoughtful and useful. These plain flat uninformative icons are just rude.
Sure. There are also icons that are plain flat and don't use metaphor and work great. Play, share, hamburger, bluetooth, power... i am sure there are more. Icons are more about familiarity than anything.
I assume you were very familiar with Office 97. I can tell you people born in 97 are probably not. High chance they might not like and understand the icons because they aren't familiar with them.
It's like when everybody wants to design logo as unforgettable as Nike. But in reality anything people see 20 times a day people will remember.
> The function of the icon is to have distinct shape so you are able to visually distinguish menu items quickly in future (more you use the app).
I wrote it in a different comment elsewhere: this is exactly why you don't want icons on every menu item. When everything tries to be stand out, nothing does. It's much easier to distinguish groups and "it's the third item below the icon" than "out of these identical looking icons one of them points to a menu item that does what I want".
Sure! I agree. My comment above probably seems like i think this new Apple design direction is good. I don't. Tahoe seems like amateur hour.
What i was mainly saying is that the icon does not have to describe the label for it to be effective. That doesn't mean that usage/quality of the icon suddenly doesn't matter.
Similar is the save icon, though for a different reason. It conveys its function well, but one first needs to know what a floppy disk even is!
Nah, people especially younger ones associate the floppy disk with the save button
A lot of apps people use these days are cloud-first and automatically save all the time, so there's not even a save button to have a floppy icon for! The icon to say that it's synced looks like a cloud, and if you're using a web browser it'll probably have a Download button with a download icon. No floppy disks in sight.
I wouldn't be surprised if there's computer users out there that wouldn't recognise the "save icon".
RIP in peace
I disagree. Not all it's "autosave on cloud", and some apps keeps having an explicit save something button or option.
I recently had a discussion about replacing the "save icon" (IE. the old floppy disk icon) for an icon with an arrow pointing down, for a button that saves (don't download!) a custom query of the user in the system. Perhaps it could be replaced with another icon, but not by someone that everyone would think is "Download".
My daughter understood what the Chrome icon was for before she could even spell ‘Chrome’.
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.
I imagine Steve Jobs would've asked to see whoever designed those menues, picked up their laptop and thrown it out the window...
That would indeed be the myth. The reality is what you see on the screen
Hard for Steve Jobs to have done this for the changes of the last ~14 years...
but trivial for all the similar changes before that while the laptops were still flying out
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.
macOS Tahoe has declared war on app icons with distinctive shapes.
No silhouettes. If your icon isn't a squircle, it will be shrunk to fit inside a default shape. The penalty box.
https://lapcatsoftware.com/articles/2025/6/2.html
The loss of icon silhouettes is a big step down in usability. Erases decades of design guidelines.
https://pxlnv.com/blog/roundrect-dictator/
Frankly it's senseless.
https://www.flarup.email/p/through-the-liquid-glass
Insane but still working legacy workaround:
https://simonbs.dev/posts/how-to-bring-back-oddly-shaped-app...
…
macOS isn't fun anymore.
First we lost the pinstripes, then brushed aluminium; then we lost colors in the sidebar icons. Then they made everything flat.
Finally we lost the background and legibility.
Pepe prayge now than Alan is out that things will improve.
We need to get back to Dieter Rams 10 principles for good design.
MacOS was never fun. I've been using MacOS at work for five years and it's never been fun nor intuitive. I always explained this to myself "that's because I grew up with Windows" but three months ago I switched to KDE on my private machine and it's miles ahead of MacOS. Just a week ago I got a new company Macbook and the UX is even clunkier than before. Shit just doesn't work.
I feel like the older versions had much more of a personality. OS 8-9, OS X (10.0-10.9). Once they (and Windows) started with flat design (which was over 10 years ago!) everything just converged and now all UIs look very similar to each other. MacOS Big Sur and Tahoe look quite similar to various 3rd party KDE and Gnome skins that predate them.
> macOS isn't fun anymore.
It was always closed source. That hasn’t changed. That should be a hint.
Responding to myself to add: If AWS is bad at this, Atlassian is worse. I cannot scan the tab bar in my browser and find what tab I was in three minutes ago because they are all too uniform. They're more concerned that I know that a tab is an Atlassian Tab than whether I can get my work done.
> 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.
I have this issue with Google apps on my phone. Once they decided that all icons should have the same four blurred colors with low contrast, you just can't tell which app you're looking at without the text label below. And I'm not visually impaired.
The trend towards monochrome, unhinted (blurry) icons certainly doesn’t help.
> You can see that some designers care about accessibility. This type has both a distinct color AND shape so colorblind people can see it […]
This is something visual artists usually learn and are good at and it's not primarily for accessibility, it's simply good design. Accessibility improves as a side effect.
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.
But someone got lazy and all the "Delete" or "Add" icons are identical... There's probably a ticket somewhere to "improve the icons" being ignored..
But that's the point. The icons help you find the "delete" section.
Icons aren't large enough to then also distinguish between deleting a row or column or table. That's what the label is for.
It's not laziness, it's good design.
Agreed, compare that to Quit Safari and Force Quit Safari below. One is X in a square, the other is X in a circle. Very confusing.
No. It's laziness and bad design. It's the most generic trash icon from the most generic icon set.
Same with "add row above/below" or the completely distinct action Create Filter/Filter by cell value.
They can be trivially improved with about 1 millisecond of conscious thought. Especially given the fact that these actions have been around in office software for literal decades, and more often than not with their own distinct icons.
I don't know how they can be trivially improved.
I vaguely recall seeing some product with toolbar icons that attempted to depict a cell as part of a row, or column, with an "x" in the corner to indicate delete. I could never decipher them. It was all too small. Plus the "x" looked just like the "+" at a glance since it was so small. Even though every icon was distinct and meaningful, each icon was also ultimately a complicated jumble that took longer to decipher than just reading the label next to it.
So when you say "They can be trivially improved with about 1 millisecond of conscious thought," I completely disagree. It's actually really hard and there's a good reason they choose not to. And maybe don't be so insulting?
> It's actually really hard and there's a good reason they choose not to.
No. No, there's no good reason. Google is institutionally incapable of making good designs. Forget good, they can't make sensible designs.
So they whipped out the most generic icon set. Typed "delete" or "add" or "filter" and chose the first icon that popped up for all actions.
Top to bottom:
- Insert column before. left arrow, column (three stacked squares), green plus sign
- Insert row after: green plus sign (in the same position as previous item), row (three squares in a row), arrow down
- Insert cells. Doesn't need an icon, since it's already in the obvious insert group. Or: a single square, green plus sign
-------
- Delete column: column, red cross
- Delete row: row, red cross
- Delete cells: doesn't need an icon. Or: single square, red cross
--------
- Create a filter. Same filter icon with a green plus. This one is so obvious, that only a moron could think it's hard, or there's some reason they didn't do it.
- Filter by cell value. Same icon, or better still a square with filter because there are other filters elsewhere.
---
And that's before we actually ask people to think about the designs: https://www.flaticon.com/packs/tables-82 or https://www.flaticon.com/packs/spreadsheet or https://www.flaticon.com/packs/ecommerce-266
You don't need to use language like "moron". It doesn't help the conversation and it's not appropriate. Trying to convince people you are right because you think other people are less intelligent is generally not a strategy that works.
And yes, all of the icons you are describing and linked to can be drawn. I even described these types of combinations myself. The point you're missing is that they are nearly impossible to visually distinguish at a quick glance. When I look at your first link, I just see a ton of icons that look like variations on a grid. They're difficult to decipher. You have to stop and think about what they actually mean and hope you don't make a mistake.
I think you're missing the purpose of menu item icons. They are not too distinguish every single item. That's what the text is for. They are to help identify either the basic type of verb or the basic type of noun or adjective at a glance. Without having to think about it. Which is why it's a feature, not a bug, even when multiple many items share the same icon if they perform the same action. At a glance, you can see that all of the plus icons mean insert something and all of the trashcan icons mean to delete something, and then you look at the text to see what is being inserted or deleted. Trying to cram all of that information into a tiny icon is bad design because it makes it slower to figure out the right item, not faster.
Design is full of these kinds of trade-offs. These trade-offs are the kinds of things you learn when you study design, and a huge part of graphic design is getting the trade-offs right in a given context.
> I even described these types of combinations myself.
Not exactly. Re-read what I wrote
> When I look at your first link, I just see a ton of icons that look like variations on a grid.
1. It was just an example, out of potentially thousands of possible variations. And I described a much simpler one
2. You're complaining about "variations of a grid" and at the same time praise how Google uses literally the same icon for completely different actions
> I think you're missing the purpose of menu item icons. They are not too distinguish every single item. That's what the text is for.
So why does Google use an icon for every single item? It's enough to have just a single icon on the first item in the group, the rest will naturally be associated with it.
> They are to help identify either the basic type of verb or the basic type of noun or adjective at a glance. Without having to think about it... even when multiple many items share the same icon if they perform the same action.
Ah yes, you don't have to think about checks notes that "Create filter" and "Apply filter from cell value" are actually completely different actions with completely different modes of operation, that's why they get a single generic filter icon.
> At a glance, you can see that all of the plus icons mean insert something and all of the trashcan icons mean to delete something, and then you look at the text to see what is being inserted or deleted.
Oh, "read text between identical icons and hope you didn't misread the action you needed" is good, but "read text between similar icons if they are not distinct enough" is bad. Got you
> Trying to cram all of that information into a tiny icon
So don't cram it. I literally described the most minimal icons that don't cram much info.
Also, there's literally no "crammin of info" in, say, adding a plus sign to a filter icon to designate "create" and to differentiate it from "apply".
Just a few examples of minimal icons. They are from different packs, so their styles and approaches will be different, these are just to illustrate the idea. Also, as you said, not every menu item needs an icon:
- "insert column": https://www.flaticon.com/free-icon/edit-tool_7601880?related... and https://www.flaticon.com/free-icon/edit-tool_7601881?related...
- "insert row": https://www.flaticon.com/free-icon/row_7043663?related_id=70...
- delete can follow the same principle
- create filter can use the same pattern as this remove filter icon: https://www.flaticon.com/free-icon/clear-filter_6134093?rela...
etc. etc.
Google "designers" literally took a generic icon set, searched for terms "insert", "delete", "filter" and chose the first ones that came up in search. That's it. That's the "hard decision" they had to make.
Which is ironic given that they went out of their way to create varied distinct icons for the top-level menu, but not for the context menu. Or that Google Docs (not Sheets) manages to do all that, and use slightly different icons than Sheets (e.g. for Paste Without Formatting)
> Design is full of these kinds of trade-offs.
What Google shows is not a trade-off. It's either incompetence or non-caring, and I don't know which is worse.
I don't know what to tell you.
You seem pretty convinced that each menu item needs its own unique icon, and it doesn't seem like anything I say is going to lead you to understand why others would see that as overly complex and less helpful.
Good luck with your own UX!