Remix.run Logo
Remix clone Hacker News
new | show | ask | jobsGithub
▲ usaphp 2 days ago

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.

▲rozab a day ago | parent | next [-]

All of the Google Docs icons are really thoughtfully designed, with distinctive silhouettes. Instead of making 5 tiny illegible variations on inserting a row/column/etc, they just use the + symbol. Because the symbol is the same, your eye is then drawn to the differing text on the right.

Some of the Apple ones really are ridiculous, like the ones around window management and copy/pasting. Even blown up to fullscreen size, you wouldn't have a chance of guessing what they do. But at display size, they are just plain illegible. Having them there is just a visual distraction.

▲netsharc 2 days ago | parent | prev | next [-]

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..

▲crazygringo 2 days ago | parent [-]

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.

▲empiko 2 days ago | parent | next [-]

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.

▲troupo a day ago | parent | prev [-]

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.

▲crazygringo a day ago | parent [-]

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?

▲troupo a day ago | parent [-]

> 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

▲crazygringo a day ago | parent [-]

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.

▲troupo a day ago | parent [-]

> 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.

▲crazygringo 20 hours ago | parent [-]

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!

▲troupo 14 hours ago | parent [-]

> You seem pretty convinced that each menu item needs its own unique icon

Tell me you didn't read what I wrote without telling me that.

Literal quote: "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."

The rest of my text is showing how your defense of "let's use a generic icon for completely different actions for every menu item" falls apart even with the tiniest of scrutinies

> 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.

Literally every menu in every Google Docs is full with unique icons for every menu item except this context menu BTW.

You'd know that if you weren't so hellbent on defending incompetence.

▲someguyiguess 2 days ago | parent | prev [-]

Same here. I view the text labels as a more detailed description I can read if I don’t understand the icon at first glance. The icons help with decreasing time spent searching for the option I want. Not having to read every single menu item saves some number of milliseconds which adds up over time and reduces cognitive load.