Is there some research/articles worth checking abo...
# thinking-together
a
Is there some research/articles worth checking about the usage of icons in user interfaces? Looking at 3D softwares like Maya, or VS Code's right panel icons; I sometimes have a hard time understanding why we've come to rely on icons so much when they're almost never readable without an extra effort of hovering on them or clicking on them to know more about them. Photoshop is the guiltiest of all in this category, and you also have softwares like Figma, where all possible operations tend to be grouped under just a few icons, and clicking on those icons opens a dropdown that contains icon + description, which makes everything really easy to understand. Could there be some reasonable explanation beyond lack of space? In contrast, Windows Explorer took a different approach, where it occupies more space, but every single option is cristal clear even for the most untrained eye. Not sure how close this is to the FoC; but definitely close enough to the future of software visual design I believe.
m
I was searching for the rationale behing the Ribbon UI redesign at microsoft, they should explain pros and cons of each approach somewhere, I found this:

https://www.youtube.com/watch?v=Tl9kD693ie4&list=PLjCU_7jji6Ch8l9YAJVBfdOQUk6k_ve5D

😮 1
d
It’s worth watching (or re-watching) Alan Kay’s Doing with Images Makes Symbols

https://www.youtube.com/watch?v=p2LZLYcu_JY

which gives a lot of insight into how they were thinking about representation, language, etc in the early GUI (and Smalltalk) work
👍 1
f
Using text labels with icons is always better and more clear. It’s hard to say why a specific interface relies on icons exclusively. It may be: lack of usability testing, graphic designers doing interface design, ignorance, lack of time to come up with better solutions, preferring aesthetics over accessibility. Of course, using only icons can be okay in some cases: The longer one uses a tool and the more familiar one becomes with a tool, it might make sense to hide labels for less noise and more space. macOS toolbars provide users the option to choose between “text and icons”, “icons only”, “text only”. There have been attempts to design user interfaces that adapt with time and usage: from high information density in the beginning that slowly hide labels the more often you use a feature. General rule of thumb: except for arrows and handful very common icons, most icons will not be understood by users and text will always work better.
👍 2
r
This is the classic, "beginner user vs. professional user" dichotomy. What is good for one is not necessarily good for the other. Instruments are the classic example. Pianos don't come labeled with the notes on the keys. Though students will often add that kind of thing when learning the instrument, as they become more advanced, they remove those kinds of aids. All the examples you listed are what I would consider "professional software". They are designed for people that already have a lot of experience in their respective fields. With that extra background context, those icons probably carry much more information. In fact, for many professional software packages, the users don't use the GUI, often preferring keyboard shortcuts. For the professional, "discoverability" is not a problem, speed and intuitive workflow is.
👍 1
f
Here’s the post about “Progressive Reduction” that I had in mind: https://layervault.tumblr.com/post/42361566927/progressive-reduction And here’s a detailed article on the topic of icon usability: https://www.nngroup.com/articles/icon-usability/ It all comes down to learned familiarity. If you think about signs (pictograms) at an airport or train station, they are not only large in size but also represent the real world (planes, food, bath room, people, …) which makes it easier to understand those pictures. But icons in software often need to represent abstract or novel features that don’t have a real world metaphor. And worse: they are often displayed in small size and too many of them nearby. Another example that comes to my mind are traffic signs that may not come with labels but which need to be learned in driving school. Traffic signs come with color coding which can certainly help to convey additional meaning. @Adnan Chaumette The toolbar on the right side of Pixelmator shows icons only, but once you hover over an icon, labels for all other icons are shown as well. https://www.pixelmator.com/support/guide/pixelmator-pro/1218
And btw I think it is important to never assume a design is good and tested just because it appears in a widely used product. You mentioned VSCode and here you can see that they have been working on labels earlier this year: https://github.com/microsoft/vscode/issues/115641 I don’t think those improvements should be labeled for ”new users but would make the product better for seasoned users too