"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."
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 ..
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.
I wrote about something very similar a long time ago.[0]
The key problem is that most contemporary web design does not follow any idioms. Idioms are conventions of design that are universally understood. Skillful use of idioms makes it much easier to parse what is going on on a given page.
Where we are with most applications is that they try to define their own idioms, i.e. their own icons, their own navigation patterns, etc. But this is very arrogant because they're assuming that the user has the time to build that familiarity with all those idioms. This is never the case.
Every day I use web applications from nominally mature companies, and they have totally different icon sets for the same actions. This is immensely distracting and hard to read. Every company sees an opportunity to define their own icons, when what they should be doing is using the exact same ones as everyone else because that makes it easy to understand.
> When we pack high-density information into a data table or a complex dashboard we are increasing the visual entropy of the entire system. Forcing the brain to decode intricate, non-universal shapes in a tiny 16-pixel footprint, creates a “cognitive tax” that users pay en masse every time they scan the table.
What if it's an icon with a simple shape? How does that compare to noising up the table with long phrases and repetitive words? Is the cognitive tax if icons a lot higher or just a little higher? What if it's an app where the user will be using it for hours, so they'll quickly learn what the icons mean and will appreciate the space they save?
Is a tick icon really that big a deal in place of "Task completed"? Or a pencil instead of "Edit"? Sometimes you don't have a choice because of lack of space too. There's always tradeoffs to make. Obviously try to avoid icons that are hard to guess though but sometimes that's not always possible.
I can't say I've ever felt tired looking at icons in a table, but when designing I have had the experience of replacing wordy repetitive text with some intuitive icons in a complex table and it suddenly looking less intimidating.
My gut feel (personal experience, not research) is that the whole of the icons' nature is important. Them having simple shapes doesn't necessarily solve the problem and could in some cases make it worse.
Imagine for example a set of icons that are monochrome, open-ended glyphs comprised of a single stroke with line weight similar to that of the text. This could complicate visual parsing greatly due to high visual similarity to text.
On the other hand, a 16px checkbox control with subtle gradients, shadows, and depth cues looks absolutely nothing like text and is filtered out by the brain almost automatically (unless of course the checkbox state is pertinent to the user's intent). Same goes for a 16px colorful icon with shading like used to be ubiquitous in desktop operating systems.
The box itself around a data table label could hint at a state, if the goal is to define only a handful of states (green rounded capsule for a completed state; diamond capsule for an in-progress condition; red square for an error; purple parallelogram for some special condition; etc).
Not sure how this is for accessibility in terms of colour selection, but I’m sure this could be fine-tuned.
Right, this article overlooks the difference between a first encounter and regular encounters. The concise representation pays off when you do learn it, as long as it's executed well.
And I'm fine with a bit of cognitive exploration to figure out a green check and red X scheme rather than see a whole table column filled up with words like "active" and "inactive". The former allows more columns on screen at once. Horizontal scrolling is a worse impediment to assimilating information from a table.
I would almost always rather have the words; words are things I can easily search for and manipulate using the text-processing tools in my possession.
Personally, my brain "page faults" whenever it has to interpret an emoji, which makes most use of in-line icons far worse than the text they represent. I expect few people have this problem, but I also expect that I'm not the only one with it.
Stop blogging on medium. I start to read your post and as I'm scrolling down the page, I get a full-page modal nagging me to subscribe. Why should I listen to anything you have to say about user experience?
I had this experience with an app called Copilot Money. Wonderful native osx app, with a nice dark mode, but between the non-optional-emojis-burning-in-your-retinas in everywhere plus a few missing key features I couldn't take it. I asked their customer service if they could be made optional and they referred me to the suggestion tracker of course.
Another issue the author didn't mention, but I sometimes encounter, is that when you copy richly-formatted tables to paste in Excel or some other software, it often includes unwanted HTML tags. I usually have to use regex or at least a search and replace to make the table sortable and filterable.
I imagine this could similarly be an issue with screen readers, but haven't tested it.
Who is actually doing this routinely and how is this even a problem?
For actual data work, any sort of "rich formatting" is no bueno and icons are great for quick reflexive categorization for information-dense habitually used interfaces. They just take a slightly slower learning curve.
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/
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
"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."
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 ..
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.
I wrote about something very similar a long time ago.[0]
The key problem is that most contemporary web design does not follow any idioms. Idioms are conventions of design that are universally understood. Skillful use of idioms makes it much easier to parse what is going on on a given page.
Where we are with most applications is that they try to define their own idioms, i.e. their own icons, their own navigation patterns, etc. But this is very arrogant because they're assuming that the user has the time to build that familiarity with all those idioms. This is never the case.
Every day I use web applications from nominally mature companies, and they have totally different icon sets for the same actions. This is immensely distracting and hard to read. Every company sees an opportunity to define their own icons, when what they should be doing is using the exact same ones as everyone else because that makes it easy to understand.
https://essays.johnloeber.com/p/4-bring-back-idiomatic-desig...
> When we pack high-density information into a data table or a complex dashboard we are increasing the visual entropy of the entire system. Forcing the brain to decode intricate, non-universal shapes in a tiny 16-pixel footprint, creates a “cognitive tax” that users pay en masse every time they scan the table.
What if it's an icon with a simple shape? How does that compare to noising up the table with long phrases and repetitive words? Is the cognitive tax if icons a lot higher or just a little higher? What if it's an app where the user will be using it for hours, so they'll quickly learn what the icons mean and will appreciate the space they save?
Is a tick icon really that big a deal in place of "Task completed"? Or a pencil instead of "Edit"? Sometimes you don't have a choice because of lack of space too. There's always tradeoffs to make. Obviously try to avoid icons that are hard to guess though but sometimes that's not always possible.
I can't say I've ever felt tired looking at icons in a table, but when designing I have had the experience of replacing wordy repetitive text with some intuitive icons in a complex table and it suddenly looking less intimidating.
My gut feel (personal experience, not research) is that the whole of the icons' nature is important. Them having simple shapes doesn't necessarily solve the problem and could in some cases make it worse.
Imagine for example a set of icons that are monochrome, open-ended glyphs comprised of a single stroke with line weight similar to that of the text. This could complicate visual parsing greatly due to high visual similarity to text.
On the other hand, a 16px checkbox control with subtle gradients, shadows, and depth cues looks absolutely nothing like text and is filtered out by the brain almost automatically (unless of course the checkbox state is pertinent to the user's intent). Same goes for a 16px colorful icon with shading like used to be ubiquitous in desktop operating systems.
The box itself around a data table label could hint at a state, if the goal is to define only a handful of states (green rounded capsule for a completed state; diamond capsule for an in-progress condition; red square for an error; purple parallelogram for some special condition; etc).
Not sure how this is for accessibility in terms of colour selection, but I’m sure this could be fine-tuned.
Right, this article overlooks the difference between a first encounter and regular encounters. The concise representation pays off when you do learn it, as long as it's executed well.
And I'm fine with a bit of cognitive exploration to figure out a green check and red X scheme rather than see a whole table column filled up with words like "active" and "inactive". The former allows more columns on screen at once. Horizontal scrolling is a worse impediment to assimilating information from a table.
I would almost always rather have the words; words are things I can easily search for and manipulate using the text-processing tools in my possession.
Personally, my brain "page faults" whenever it has to interpret an emoji, which makes most use of in-line icons far worse than the text they represent. I expect few people have this problem, but I also expect that I'm not the only one with it.
Stop blogging on medium. I start to read your post and as I'm scrolling down the page, I get a full-page modal nagging me to subscribe. Why should I listen to anything you have to say about user experience?
If you sign up for free those modals stop showing up.
I am not sure the author knows what spacial frequency means. Taking a well defined measurement unit and using it as an expression feels pretencious.
I had this experience with an app called Copilot Money. Wonderful native osx app, with a nice dark mode, but between the non-optional-emojis-burning-in-your-retinas in everywhere plus a few missing key features I couldn't take it. I asked their customer service if they could be made optional and they referred me to the suggestion tracker of course.
Another issue the author didn't mention, but I sometimes encounter, is that when you copy richly-formatted tables to paste in Excel or some other software, it often includes unwanted HTML tags. I usually have to use regex or at least a search and replace to make the table sortable and filterable.
I imagine this could similarly be an issue with screen readers, but haven't tested it.
thats why all data should just be presented in an excel pivot table from the start
I disagree completely. I have hard times parsing the text. Simple icons are a life saver for me in big data tables
What if you don't know the icons yet?
And wouldn't colors be just as helpful?
Anyway, they should design for the majority. Or use some configurable approach, like with CSS, to make everybody happy. Opinionated is so last year.
Who is actually doing this routinely and how is this even a problem?
For actual data work, any sort of "rich formatting" is no bueno and icons are great for quick reflexive categorization for information-dense habitually used interfaces. They just take a slightly slower learning curve.