Live data from Hacker News

Icons in Menus Everywhere – Send Help

blog.jim-nielsen.com

271–280 of 340 posts

Re: Icons in Menus Everywhere – Send Help

#271

Earlier quoted context omitted.

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

Re: Icons in Menus Everywhere – Send Help

#272

Earlier quoted context omitted.

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.

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.

Re: Icons in Menus Everywhere – Send Help

#273

Earlier quoted context omitted.

Flat, monochrome icons might look nice, but they are only useful if used sparingly. If you're going to use many icons, then they need to be visually distinctive. That means ditching the flat designs, and embracing colour again.

Color icons needs to done twice - once for light mode and again for dark mode. It is the reason for removing colors and shadings from all icons.

So in your opinion, monochrome icons are a sign of laziness, rather than an aesthetic choice. Got it.

Re: Icons in Menus Everywhere – Send Help

#274
I'd suggest a simple test: remix menu items and icons and test, if this has significant impact on usability. If not, the icons are just arbitrary decoration and ultimately add clutter.

Referring to the examples provided in the article, I'd suggest that the impact on the Safari app menu should be minimal (so these are non-functional icons), while the impact on the Move & Resize submenu would be devastating and should result in confusion (so these are essential).

If you can remix with minimal impact, don't do icons. (In the case of the app menu, these are apparently meant to add structure, which is already established by other means like menu separators, so you have now two – or, including indentation, three – systems of structure and visual hierarchy that are fighting each other.)

Moreover, if you put icons everywhere, you're forgoing the facility to convey state, like active state checkmarks, since these, instead of standing out and signalling change, would be just drowned in the decorative clutter. (So what's next? Add color and/or animation, like swirling checkmarks?) And this, BTW, is also why the icons in the Move & Resize menu are effective: they are conveying and illustrating state (in terms of a preview), while most of the other menu icons (mostly referring to activities) do not. So, as a rule of thumb: icons referring to state may be useful and even desirable, while icons referring to activities are probably better left out. (And, if you feel the need for something like bullet points to mark your most important menu items, there's probably a deeper problem with your menu structure.)

Re: Icons in Menus Everywhere – Send Help

#275
Slightly off topic, or at least tangential, Zapier has one of the most user-unfriendly interfaces I have seen in a while. When you log in, they have a left hand toolbar that runs down vertically, and it is icon only. I understand why they do this, being on the left hand side you don't want to take up much space. But unlike other user interfaces that employ this type of toolbar, you CAN'T see what each item is by expanding the toolbar or even hovering over the item! The only way to see what each one is is to click on it. This is a pinnacle of terrible UX. I love Zapier, but it makes me question their product offering if they can get this so wrong.

Re: Icons in Menus Everywhere – Send Help

#276
post #272

Earlier quoted context omitted.

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.

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…

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?

Re: Icons in Menus Everywhere – Send Help

#277
post #125
post #43

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…

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 t…

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.

Re: Icons in Menus Everywhere – Send Help

#278
In most elevators around the world, there are buttons to keep the doors open and also to get them to close. I've only seen symbols on them. Once, however, in the US, one gentleman got in, and instead of pressing the close button, pressed on the open button. So the doors, which were just going to close, opened again.

He complained - Why do they have these symbols, why can't they they just write Open and Close?

I've wondered about this every since - is it an American thing to have an expectation to have text everywhere? I have never heard anyone complain about those symbols before or since!

Re: Icons in Menus Everywhere – Send Help

#279

In most elevators around the world, there are buttons to keep the doors open and also to get them to close. I've only seen symbols on them. Once, however, in the US, one gentleman got in, and instead of pressing the close button, pressed on the open button. So the doors, which were just going to close, opened again. He complained - Why do they have these symbols, why can't they they just write Open and Close? I've wo…

The open button looks like closed doors and the close button looks like open doors. I have to look at the symbols carefully and interpret the arrows every time. Or tell myself that the buttons do the opposite of what they look like at a glance. "open" and "close" would be easier.

Re: Icons in Menus Everywhere – Send Help

#280
post #174

Earlier quoted context omitted.

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…

> thus is decorative. Discard it. Or keep it since decoration makes interfaces feel more alive. Not everything NEEDS to be useful

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.

Post reply on HN