4 ms·

The title is misleading. The message is really: Stop using unlabeled icons in data tables. It says, "Norman Nielson argues that text + icon has the highest co

by rrherr 8mo ago

The title is misleading. The message is really: Stop using unlabeled icons in data tables. It says, "Norman Nielson argues that text + icon has the highest cognitive recall and lowest error rate" Here's what the Nielsen Norman Group says about Icon Usability: https://www.nngroup.com/articles/icon-usability/ https://www.nngroup.com/articles/icon-usability/ The conclusion: "Always include a visible text label. As Bruce Tognazzini once said, 'a word is worth a thousand pictures.'" Here's the quote in context: https://www.asktog.com/columns/038MacUITrends.html https://www.asktog.com/columns/038MacUITrends.html "In 1985, after a year of finding that pretty but unlabeled icons confused customers, the Apple human interface group took on the motto 'A word is worth a thousand pictures.' This still holds true."

ljm 8mo ago
WCAG is a standard designed around the web and web-adjacent apps. Am I missing something here? Because accessibility standards are much easier to adhere to now. So the text label always has to be there, but you can also make it visible in the design and it's accessible by default. This is a lesson to be learned by people who want minimalist UIs.
MomsAVoxell 8mo ago
It should be noted that the example given by the OP contains ‘poor’ icons which are more a consequence of the nature of the source - i.e. a HR headshot does not an effective workflow make ..
catlifeonmars 8mo ago
I took away from the article that I should probably get rid of icons in data tables. I think the reference to Norman Nielsen was confusing. At the end of the article the author likens icons to visual speed bumps in a data table. The implication being to avoid them or at the very least use sparingly.
jfengel 8mo ago
The problem for me is when an icon is repeated many times on a page, such as once per row. The word quickly becomes redundant, and the repetition looks ugly. Tables are supposed to be information-dense and wasting screen real estate interferes with the user's task. I haven't found a good general solution to that. Hover doesn't work on mobile. A legend map is hard to locate. "Expert mode" introduces new problems. Sometimes I'll just use an unlabeled button and make whatever it is undoable, so that users can just click and discover. But that's hostile to completely new users.
deleted 8mo ago
[deleted]
RupertSalt 8mo ago
In the days of Windows 3.1 and prior Macintosh art, we sort of took it for granted that menus were labeled with English words to reflect the actions taken. Icons provided additional information, like "Hold down Command to do this" or something. As computer OSes became globalized, i18n and l10n began to demand that we abandon English words to describe GUI actions. I believe this was the correct decision. So I viewed icons+text in a GUI as transitional, a learning period. I learned to recognize the icons for what they represent, the skeumorphism of it all, while the icons plus text were displayed on my screen (I mostly used Ubuntu and KDE.) When the time was right, I toggled the setting to remove the text altogether. I was ready to spread my wings and fly through an icon-rich UX that no longer relied on words or text to convey rich meanings. Now this means that I can make mistakes or I need to experiment in terms of "What does THIS button do?!" in order to learn new icon vocabulary. But I definitely prefer it now to the English text, and really if anyone uses a modern device proficiently, they've picked up a decent vocabulary for this already. Many people neglect to take into account that, for example, an app in an app store is represented more strongly by its chosen icon and branding than its title! Google Play lets us search by name, but that is not very efficient when I'm searching for a particular icon by description! It also presents challenges to verbal tech support, whether by phone, by Meet, or over the shoulder, because how do you describe graphical icons and gestures? How to translate them back into English words? UI/UX designers have a hidden vocabulary for controls and widgets that aren't common knowledge, but can really enhance understanding once we can name them the same way the pros do. Yes, icons can be used badly. Yes, people who are still learning may lean on text labels too. But graphical UIs are mature and we all need to acquire a vocabulary for these, so that information is conveyed across national and linguistic barriers.
- n8cpdx 8mo ago
  > But graphical UIs are mature and we all need to acquire a vocabulary for these, so that information is conveyed across national and linguistic barriers. Or we could just translate the text? Colors and pictures aren’t exactly free of cultural baggage, either.
  - st_goliath 8mo ago
jrochkind1 8mo ago
I was confused what OP is talking about, becuase in all the screenshots I don't see any unlabelled icons, I just see icons next to words. I was wondering... is OP in fact saying it should be just words, without the icons next to them? Which is an opinion you could have, I think it's not entirely unreasonable (although as you say Nielson contradicts), but I wasn't entirely confident it is the point OP is making... or are they just talking about unlabelled icons (few if any? I'm not sure?) in those screenshots? I still am not totally sure what OP is arguing.
- Sjeiti 8mo ago
  There is the trahscan icon in the first image, but that is hardly a cognitive hurdle. I agree icons are not always the best option, but I'd need better arguments (and bad examples) than this to stop using them altogether.
- dnpls 8mo ago
  OP is talking about the third example image, where there are these "stars" icons in the title row of the table. It does look like what people are using to mean AI-something, but indeed.. AI what?
  - materialpoint 8mo ago
    It doesn't matter if the icon is ever so slightly ambigious compared to other systems, the label text next to it removes any ambiguity and makes the message perfectly clear, as long as it is consistent within a product. To any newcomer to a new system, most icons don't make sense, so the text next to it is an invaluable hidden tutorial. OP didn't stop to see that the circled checkmarks look like clocks, so it just highly opinionated.
  - jrochkind1 8mo ago
    What is the first image supposed to demonstrate? Very confusing post to me. Other people in the thread I see are arguing the OP is saying the icons next to text would be better off as just text without icons, the icons still make things messy and increase cognitive load. (which again, I think is worth considering at least, sure!) But you don't think it is? I think I'm just going to put this away concluding it's a very unsuccesful article at whatever it's trying to do.
tobr 8mo ago
> Norman Nielson Is this just a very strange typo or is it a person unrelated to Jakob Nielsen and Don Norman?
- jhy 8mo ago
  It's perhaps a confused reference to their old company, Nielsen Norman Group (NN/g). https://www.nngroup.com/about/ https://www.nngroup.com/about/
atoav 8mo ago
No that is not the message. The message is that icons take cognitive energy to parse even if there is a label next to it. If you have many text options, highlighting some specific ones with an icon is benefitial, as you have an easy way to differenciate it from the "less important" ones without icon. If everything has an icon, that benefit goes away and you could just as well use text.
masswerk 8mo ago
I think, while icon + label is good for things like UI buttons, this is not that great for tables. There are a few reasons for this: - icons really work only as a small set (e.g. checkmarks versus crosses or similar) – so the only useful application is also in a context which is already highly selective and with low ambiguity. (Familiarity helps and should be a major concern.) - icons are useful for scanning for rows with a given property – however, to scan icon + label we must not only scan horizontally as well as vertically, but have also to scan items with varying column alignment, which isn't favorable for a vertical scan, either. So, if it is a case for icons, say, each row has a state out of a set of three, there shouldn't be need for an accompanying text label (this can be learned from a tooltip or a legend), which is also apt to destroys most of the advantages of having icons in the first place. Having both just introduces a mode change, which isn't helpful for scanning, either. If you must have both, put them in separate (adjacent) columns. (In this context, we may note that tables are really about reducing redundancy, though.) Moreover, to be meaningful in tables (or menus – yes, I'm speaking of recent macOS), icons should only be used to represent state or to represent actions that modify state. There are, of course, exceptions to this, but this may be still a viable starting point…

by rrherr 8mo ago

ljm 8mo ago

WCAG is a standard designed around the web and web-adjacent apps. Am I missing something here? Because accessibility standards are much easier to adhere to now. So the text label always has to be there, but you can also make it visible in the design and it's accessible by default. This is a lesson to be learned by people who want minimalist UIs.

MomsAVoxell 8mo ago

It should be noted that the example given by the OP contains ‘poor’ icons which are more a consequence of the nature of the source - i.e. a HR headshot does not an effective workflow make ..

catlifeonmars 8mo ago

I took away from the article that I should probably get rid of icons in data tables. I think the reference to Norman Nielsen was confusing. At the end of the article the author likens icons to visual speed bumps in a data table. The implication being to avoid them or at the very least use sparingly.

jfengel 8mo ago

The problem for me is when an icon is repeated many times on a page, such as once per row. The word quickly becomes redundant, and the repetition looks ugly. Tables are supposed to be information-dense and wasting screen real estate interferes with the user's task. I haven't found a good general solution to that. Hover doesn't work on mobile. A legend map is hard to locate. "Expert mode" introduces new problems. Sometimes I'll just use an unlabeled button and make whatever it is undoable, so that users can just click and discover. But that's hostile to completely new users.

deleted 8mo ago

[deleted]

RupertSalt 8mo ago

In the days of Windows 3.1 and prior Macintosh art, we sort of took it for granted that menus were labeled with English words to reflect the actions taken. Icons provided additional information, like "Hold down Command to do this" or something. As computer OSes became globalized, i18n and l10n began to demand that we abandon English words to describe GUI actions. I believe this was the correct decision. So I viewed icons+text in a GUI as transitional, a learning period. I learned to recognize the icons for what they represent, the skeumorphism of it all, while the icons plus text were displayed on my screen (I mostly used Ubuntu and KDE.) When the time was right, I toggled the setting to remove the text altogether. I was ready to spread my wings and fly through an icon-rich UX that no longer relied on words or text to convey rich meanings. Now this means that I can make mistakes or I need to experiment in terms of "What does THIS button do?!" in order to learn new icon vocabulary. But I definitely prefer it now to the English text, and really if anyone uses a modern device proficiently, they've picked up a decent vocabulary for this already. Many people neglect to take into account that, for example, an app in an app store is represented more strongly by its chosen icon and branding than its title! Google Play lets us search by name, but that is not very efficient when I'm searching for a particular icon by description! It also presents challenges to verbal tech support, whether by phone, by Meet, or over the shoulder, because how do you describe graphical icons and gestures? How to translate them back into English words? UI/UX designers have a hidden vocabulary for controls and widgets that aren't common knowledge, but can really enhance understanding once we can name them the same way the pros do. Yes, icons can be used badly. Yes, people who are still learning may lean on text labels too. But graphical UIs are mature and we all need to acquire a vocabulary for these, so that information is conveyed across national and linguistic barriers.

n8cpdx 8mo ago
> But graphical UIs are mature and we all need to acquire a vocabulary for these, so that information is conveyed across national and linguistic barriers. Or we could just translate the text? Colors and pictures aren’t exactly free of cultural baggage, either.
- st_goliath 8mo ago

jrochkind1 8mo ago

I was confused what OP is talking about, becuase in all the screenshots I don't see any unlabelled icons, I just see icons next to words. I was wondering... is OP in fact saying it should be just words, without the icons next to them? Which is an opinion you could have, I think it's not entirely unreasonable (although as you say Nielson contradicts), but I wasn't entirely confident it is the point OP is making... or are they just talking about unlabelled icons (few if any? I'm not sure?) in those screenshots? I still am not totally sure what OP is arguing.

Sjeiti 8mo ago
There is the trahscan icon in the first image, but that is hardly a cognitive hurdle. I agree icons are not always the best option, but I'd need better arguments (and bad examples) than this to stop using them altogether.
dnpls 8mo ago
OP is talking about the third example image, where there are these "stars" icons in the title row of the table. It does look like what people are using to mean AI-something, but indeed.. AI what?
- materialpoint 8mo ago
  It doesn't matter if the icon is ever so slightly ambigious compared to other systems, the label text next to it removes any ambiguity and makes the message perfectly clear, as long as it is consistent within a product. To any newcomer to a new system, most icons don't make sense, so the text next to it is an invaluable hidden tutorial. OP didn't stop to see that the circled checkmarks look like clocks, so it just highly opinionated.
- jrochkind1 8mo ago
  What is the first image supposed to demonstrate? Very confusing post to me. Other people in the thread I see are arguing the OP is saying the icons next to text would be better off as just text without icons, the icons still make things messy and increase cognitive load. (which again, I think is worth considering at least, sure!) But you don't think it is? I think I'm just going to put this away concluding it's a very unsuccesful article at whatever it's trying to do.

tobr 8mo ago

> Norman Nielson Is this just a very strange typo or is it a person unrelated to Jakob Nielsen and Don Norman?

jhy 8mo ago
It's perhaps a confused reference to their old company, Nielsen Norman Group (NN/g). https://www.nngroup.com/about/ https://www.nngroup.com/about/

atoav 8mo ago

No that is not the message. The message is that icons take cognitive energy to parse even if there is a label next to it. If you have many text options, highlighting some specific ones with an icon is benefitial, as you have an easy way to differenciate it from the "less important" ones without icon. If everything has an icon, that benefit goes away and you could just as well use text.

masswerk 8mo ago

I think, while icon + label is good for things like UI buttons, this is not that great for tables. There are a few reasons for this: - icons really work only as a small set (e.g. checkmarks versus crosses or similar) – so the only useful application is also in a context which is already highly selective and with low ambiguity. (Familiarity helps and should be a major concern.) - icons are useful for scanning for rows with a given property – however, to scan icon + label we must not only scan horizontally as well as vertically, but have also to scan items with varying column alignment, which isn't favorable for a vertical scan, either. So, if it is a case for icons, say, each row has a state out of a set of three, there shouldn't be need for an accompanying text label (this can be learned from a tooltip or a legend), which is also apt to destroys most of the advantages of having icons in the first place. Having both just introduces a mode change, which isn't helpful for scanning, either. If you must have both, put them in separate (adjacent) columns. (In this context, we may note that tables are really about reducing redundancy, though.) Moreover, to be meaningful in tables (or menus – yes, I'm speaking of recent macOS), icons should only be used to represent state or to represent actions that modify state. There are, of course, exceptions to this, but this may be still a viable starting point…