5 ms·

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

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

Mikhail_Edoshin 11mo ago
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.
- thiht 11mo ago
  > thus is decorative. Discard it. Or keep it since decoration makes interfaces feel more alive. Not everything NEEDS to be useful
  - BaudouinVH 11mo ago
    I tend to follow the "no form without function" design philosophy. Your comment makes me rethink that. thanks
  - bigstrat2003 11mo ago
    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".
    - AndrewOMartin 11mo ago
      Redundancy isn't a dirty word in Information Theory.
  - Mikhail_Edoshin 11mo ago
    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.
    - thiht 11mo ago
      That’s a very subjective view of design, and I strongly disagree with it. I don’t want everything to be too uniform
  - antran22 11mo ago
    in that case, they should make it optional. What some might find as eye candy, other finds as nuisance (case in point, animation).
  - incrudible 11mo ago
- 20k 11mo ago
  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
  - ACCount37 11mo ago
    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.
    - sundarurfriend 11mo ago
      > "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
    - deleted 11mo ago
      [deleted]
  - icoder 11mo ago
    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.
- ragazzina 11mo ago
  > 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.
  - wartywhoa23 11mo ago
    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.
- scoofy 11mo ago
  The pictogram is there for people who can't read English, to help them get by. It's the same reason why Ikea's instruction manuals typically have no words.
- Perepiska 11mo ago
  JetBrains products had colorful and useful pictograms on menu items and panels. One day they replaced them by B&W versions and it was fail. Few years later they introduced purple icons. For promoting some internal AI companion.
vasco 11mo ago
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.
- __del__ 11mo ago
  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.
- alternatex 11mo ago
  >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.
  - stanac 11mo ago
    > 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.
    - swiftcoder 11mo ago
      > 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
      - oracle2025 11mo ago
        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.
eviks 11mo ago
> 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)
- Mikhail_Edoshin 11mo ago
  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.
- alansaber 11mo ago
  Nothing more addictive than adding more padding
- JeremyNT 11mo ago
  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.
  - kldg 11mo ago
    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).
j45 11mo ago
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.
hypercube33 11mo ago
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.
- mopsi 11mo ago
  Same. Most people identify a blob of color far earlier than they distinguish one monochrome shape from another.
illiac786 11mo ago
> the motto is: do not make it original, make it right.) Agreed. It just doesn’t sell.

Mikhail_Edoshin 11mo ago

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.

thiht 11mo ago
> thus is decorative. Discard it. Or keep it since decoration makes interfaces feel more alive. Not everything NEEDS to be useful
- BaudouinVH 11mo ago
  I tend to follow the "no form without function" design philosophy. Your comment makes me rethink that. thanks
- bigstrat2003 11mo ago
  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".
  - AndrewOMartin 11mo ago
    Redundancy isn't a dirty word in Information Theory.
- Mikhail_Edoshin 11mo ago
  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.
  - thiht 11mo ago
    That’s a very subjective view of design, and I strongly disagree with it. I don’t want everything to be too uniform
- antran22 11mo ago
  in that case, they should make it optional. What some might find as eye candy, other finds as nuisance (case in point, animation).
- incrudible 11mo ago
20k 11mo ago
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
- ACCount37 11mo ago
  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.
  - sundarurfriend 11mo ago
    > "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
  - deleted 11mo ago
    [deleted]
- icoder 11mo ago
  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.
ragazzina 11mo ago
> 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.
- wartywhoa23 11mo ago
  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.
scoofy 11mo ago
The pictogram is there for people who can't read English, to help them get by. It's the same reason why Ikea's instruction manuals typically have no words.
Perepiska 11mo ago
JetBrains products had colorful and useful pictograms on menu items and panels. One day they replaced them by B&W versions and it was fail. Few years later they introduced purple icons. For promoting some internal AI companion.

vasco 11mo ago

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.

__del__ 11mo ago
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.
alternatex 11mo ago
>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.
- stanac 11mo ago
  > 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.
  - swiftcoder 11mo ago
    > 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
    - oracle2025 11mo ago
      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.

eviks 11mo ago

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

Mikhail_Edoshin 11mo ago
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.
alansaber 11mo ago
Nothing more addictive than adding more padding
JeremyNT 11mo ago
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.
- kldg 11mo ago
  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).

j45 11mo ago

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.

hypercube33 11mo ago

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.

mopsi 11mo ago
Same. Most people identify a blob of color far earlier than they distinguish one monochrome shape from another.

illiac786 11mo ago

> the motto is: do not make it original, make it right.) Agreed. It just doesn’t sell.