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.
> 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.
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.
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.
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.
"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."
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 literally can't tell what the author is arguing against or for.
All the example table images seem fine, and have no captions saying whether they're supposed to be examples of good usage or bad usage.
So either I have no idea what "bad" examples of icon usage are because the author doesn't show any, or the author thinks some or all of them are bad when, to me, the icon+text+color examples seem great (and one figure caption indicates icons+labels are best)?
Yet the author continues to argue against icons and to use text instead? But never says whether icons+labels are actually better than just text, so we should use them in combination?
I'm baffled. For an article arguing for greater clarity, the article itself couldn't be less clear.
In a data grid or table the relative cognitive load of the page is already very high. Adding iconography to the table body content is often unnecessary and increases visual noise, processing requirements, and generally reduces readability/scanability.
I've always felt that icons in this context are a risk or liability instead of a strength. I decided to info dump my findings to my team then published it as an article.
I probably could use a good editor to help me next time!
I agree that your screenshots doesn't make any sense in relation with the content of your text.
It's like image randomly spread along the text without no meaningful relation.
So much that I was wondering if it was not an AI generated article or partially.
Everyone would expect that you show example of good and bad UX for each point that you are making.
Making me see confirm by myself with example that doing X is clearly looking nicer to understand than doing Y.
…What? I suppose, if the OP feels he can give you imperative commands, so can I. I'll spare you the pretentious text elaborating the command — it carries as much substance as no text at all, anyway. And, seriously, if you don't use icons in data tables, you should try and see how it feels. For me personally it's the magic trick that often makes all the difference between an unreadable wall of numbers and a vivid, crystal clear picture.
For comparison tables and dense information, overuse of detail is noise. Text is required to avoid a legend, and color is useful to distinguish among many, but icons add no distinction. This is not universal. The classic comparison involves only two icons: green box checked white and red x or red container crossed white. In this case text is unhelpful.
I have never found text plus icon useful in a table that has colour.
I agree with the article. What the author doesn't answer is why we're seeing so many visually noisy tables. He seems to imply that designers don't know any better.
There are two different "modes" of looking at a table. One is just "superficially glancing" (like you look at a picture), the other is more like reading, because you look for some specific piece of information. When glancing at a table, the one with more colors and icons looks more pleasing, while plain text looks boring. But when reading the table to get information out of it, the "boring" one (if it's well done) is probably more efficient and a better experience.
And here is the problem: when presenting designs to stakeholders, 100% of stakeholders just glance at the table and always prefer the more colorful table with many icons — they don't realize that actual users, who need to get information from the table, would be better off with the "boring" table.
> 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.
This is not how the brain processes icons. Icons have their meanings embedded through related patterns. If you rely on common icons such as x, checkmark, plus, shopping cart, arrows, three dots, etc. the user already associates certain meaning/behaviors with these icons (and will be surprised if they act differently in your application). Introducing new icons is more challenging, because you have to convey their meaning to the user. At no point does the user have to stare at an icon and try to "parse" it pixel-by-pixel.
In all of OP's provided examples, the icons are supported by both labels and colors, which removes all ambiguity. You can argue that the icons are pointless in this case, but they certainly do not increase any cognitive load. Is it harder to identify a tiger than a lion, because his fur is covered in stripes?
The same could be said for color, just to then go into detail that using color codes on too many columns and with unclear associations are the problem. This is just a weird way to frame an article. Colors and icons are indeed essential to quickly parse and use big amounts of tabular data. All the criticisms the author brings forward are specific problems of some implementations or just poor choices. All this is solved by putting a few key icons in their own column next to the text field they belong to, so users can hide and show them as needed depending on the task. I have eg. a basic indicator that is a red exclamation mark or yellow question mark or green checkmark and another one with a colored icon representation of a category field. Its 100 times easier to get a quick impression and find something than without those. if someone has a problem its 2 clicks to hide the columns, thats the universality of a table ui! Don’t let absolutist click bait articles fool you.
26 comments
[ 3.8 ms ] story [ 52.0 ms ] threadWhat 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.
I imagine this could similarly be an issue with screen readers, but haven't tested it.
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...
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.
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."
All the example table images seem fine, and have no captions saying whether they're supposed to be examples of good usage or bad usage.
So either I have no idea what "bad" examples of icon usage are because the author doesn't show any, or the author thinks some or all of them are bad when, to me, the icon+text+color examples seem great (and one figure caption indicates icons+labels are best)?
Yet the author continues to argue against icons and to use text instead? But never says whether icons+labels are actually better than just text, so we should use them in combination?
I'm baffled. For an article arguing for greater clarity, the article itself couldn't be less clear.
In a data grid or table the relative cognitive load of the page is already very high. Adding iconography to the table body content is often unnecessary and increases visual noise, processing requirements, and generally reduces readability/scanability.
I've always felt that icons in this context are a risk or liability instead of a strength. I decided to info dump my findings to my team then published it as an article.
I probably could use a good editor to help me next time!
Everyone would expect that you show example of good and bad UX for each point that you are making.
Making me see confirm by myself with example that doing X is clearly looking nicer to understand than doing Y.
Nobody with a brain is reacting to this (me excluded).
Grow up.
…What? I suppose, if the OP feels he can give you imperative commands, so can I. I'll spare you the pretentious text elaborating the command — it carries as much substance as no text at all, anyway. And, seriously, if you don't use icons in data tables, you should try and see how it feels. For me personally it's the magic trick that often makes all the difference between an unreadable wall of numbers and a vivid, crystal clear picture.
I have never found text plus icon useful in a table that has colour.
And no, medium is not the last site in the universe to host at.
There are two different "modes" of looking at a table. One is just "superficially glancing" (like you look at a picture), the other is more like reading, because you look for some specific piece of information. When glancing at a table, the one with more colors and icons looks more pleasing, while plain text looks boring. But when reading the table to get information out of it, the "boring" one (if it's well done) is probably more efficient and a better experience.
And here is the problem: when presenting designs to stakeholders, 100% of stakeholders just glance at the table and always prefer the more colorful table with many icons — they don't realize that actual users, who need to get information from the table, would be better off with the "boring" table.
Stop using images that I can't zoom in to.
> 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.
This is not how the brain processes icons. Icons have their meanings embedded through related patterns. If you rely on common icons such as x, checkmark, plus, shopping cart, arrows, three dots, etc. the user already associates certain meaning/behaviors with these icons (and will be surprised if they act differently in your application). Introducing new icons is more challenging, because you have to convey their meaning to the user. At no point does the user have to stare at an icon and try to "parse" it pixel-by-pixel.
In all of OP's provided examples, the icons are supported by both labels and colors, which removes all ambiguity. You can argue that the icons are pointless in this case, but they certainly do not increase any cognitive load. Is it harder to identify a tiger than a lion, because his fur is covered in stripes?