Stop using icons in data tables(medium.com)
medium.com
Stop using icons in data tables
https://medium.com/@codythistleward/stop-using-icons-in-data-tables-7537af18ea0d
65 comments
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.
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.
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?
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.
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.
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.
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.
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.
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…
- 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…
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.
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.
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.
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.
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.
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.
> 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.
Or we could just translate the text?
Colors and pictures aren’t exactly free of cultural baggage, either.
yes, e.g. the version of Windows 3.x and accompanying office suite that I used as a child had German words next to the icons. The idea of labeling a pictogram with text isn't a concept that suddenly breaks when using a language other than English.
> Colors and pictures aren’t exactly free of cultural baggage, either.
I remember being really confused that I had to click on a picture of a frying pan for "search".
> Colors and pictures aren’t exactly free of cultural baggage, either.
I remember being really confused that I had to click on a picture of a frying pan for "search".
So were you able to learn the skeumorphism eventually and equate the operation with the frying pan?
If I were in E.U. I would be afraid of needing to learn enough of 2 dozen assorted languages vs. learning an icon interface once. It would seem that human languages are not as inclusive or universal as icons.
You can do all the l10n you want, but who translates all of them and keeps current?
If I were in E.U. I would be afraid of needing to learn enough of 2 dozen assorted languages vs. learning an icon interface once. It would seem that human languages are not as inclusive or universal as icons.
You can do all the l10n you want, but who translates all of them and keeps current?
So what does the 3 horizontal lines do ? Or the 3 dots ? Or the exclamation sign ?
Your "app" icon says nothing about the code quality of your app and coming with such ideas: " the user will press the icons to see what they do" means: uninstalling.
"Do you want to delete all your files ? [Yes] Remind me later[]"
Your "app" icon says nothing about the code quality of your app and coming with such ideas: " the user will press the icons to see what they do" means: uninstalling.
"Do you want to delete all your files ? [Yes] Remind me later[]"
[deleted]
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.
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]
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.
This is a lesson to be learned by people who want minimalist UIs.
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 ..
> Norman Nielson
Is this just a very strange typo or is it a person unrelated to Jakob Nielsen and Don Norman?
Is this just a very strange typo or is it a person unrelated to Jakob Nielsen and Don Norman?
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/
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.
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.
Hey, author here, I'll attempt to clarify.
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!
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.
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.
I think you need to show examples of this bad usage, then.
Your first image has zero icons in the rows. It has album covers but those aren't icons.
Your second and third images show very usage that combines text, color, and relatively standard icons like checkmarks, X's, or in-progress. These are good and if you're trying to suggest these reduce readability, scannability, or add noise, then I'm frankly baffled.
Your third image also shows profile images, but again those are not icons.
So what are you arguing against? I can't ever remember coming across icons in a datagrid that "added to the relative cognitive load". And if you're arguing against checkmarks or X's, I don't think your arguments hold up.
But even with "real" icons -- like, I've seen icons to show if a software package is for Windows or Mac or Linux. If a row is a TV show or a movie. If it's one file or an archive. If there's a PDF file download attached. An alarm icon for something past due. But these all seem totally fine and helpful. They're generally linked to a major feature of the platform that everybody understands, and help scannability.
Without clear examples of what you're arguing against, I'm frankly completely lost.
Your first image has zero icons in the rows. It has album covers but those aren't icons.
Your second and third images show very usage that combines text, color, and relatively standard icons like checkmarks, X's, or in-progress. These are good and if you're trying to suggest these reduce readability, scannability, or add noise, then I'm frankly baffled.
Your third image also shows profile images, but again those are not icons.
So what are you arguing against? I can't ever remember coming across icons in a datagrid that "added to the relative cognitive load". And if you're arguing against checkmarks or X's, I don't think your arguments hold up.
But even with "real" icons -- like, I've seen icons to show if a software package is for Windows or Mac or Linux. If a row is a TV show or a movie. If it's one file or an archive. If there's a PDF file download attached. An alarm icon for something past due. But these all seem totally fine and helpful. They're generally linked to a major feature of the platform that everybody understands, and help scannability.
Without clear examples of what you're arguing against, I'm frankly completely lost.
In-line images should almost always include a caption, especially in a "do this and not that" type of piece
> 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.
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.
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.
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.
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.
I agree that certain icons that are common parlance can increase cognition ( vs. x). However I think expanding a users icon lexicon and forcing memorization can actually harm cognitive experience.
Our users are context switching across dozens if not hundreds of digital experiences a day. Forcing memory recall is a tax. The question is always "whats the ROI?"
IMO color and words go just as far as an icon without relying on net new visual language.
As per your comment on horizontal scrolling, I couldn't agree more. Horizontal scrolling is booty. However, depending on the job to be done you can avoid overly wide tables with customizable columns, expandable rows, hover states, and strategic truncation.
I certainly would prefer those strategies over relying on a unique icon language that isn't part of the dozen or so immediately recognizable icon schemas already familiar to users.
Our users are context switching across dozens if not hundreds of digital experiences a day. Forcing memory recall is a tax. The question is always "whats the ROI?"
IMO color and words go just as far as an icon without relying on net new visual language.
As per your comment on horizontal scrolling, I couldn't agree more. Horizontal scrolling is booty. However, depending on the job to be done you can avoid overly wide tables with customizable columns, expandable rows, hover states, and strategic truncation.
I certainly would prefer those strategies over relying on a unique icon language that isn't part of the dozen or so immediately recognizable icon schemas already familiar to users.
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.
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.
Not sure how this is for accessibility in terms of colour selection, but I’m sure this could be fine-tuned.
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...
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...
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?
Valid point. Should I stand up my own blog or should I use a different platform? What recommendations do you have?
No specific recommendations, sorry. Thanks for taking the feedback seriously, though, and good luck with finding a more reader-friendly platform.
If you sign up for free those modals stop showing up.
Closing the window prevents them as well
Anyone who accepts such pattern on read-only website is not authority on UX any longer.
It is like security expert who tells you to use same password everywhere. “If you use TOTP with it, you will be quite safe”. Yes, but recommendation reveals lack of knowledge .
It is like security expert who tells you to use same password everywhere. “If you use TOTP with it, you will be quite safe”. Yes, but recommendation reveals lack of knowledge .
Yeah! Nag success!
ub0 with all the annoyances lists on also hides it
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.
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.
Start using icons in data tables!
…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.
…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 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.
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.
What if I didn't know the words yet? Usage of totally unintuitive icons is obviously wrong. Colors can be helpful too. Colored text - not as concise as recognizable icons.
Another non-negligible advantage of icon is, that it is language agnostic. Not everyone is fluent in language they have to use.
Another non-negligible advantage of icon is, that it is language agnostic. Not everyone is fluent in language they have to use.
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.
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.
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 have never found text plus icon useful in a table that has colour.
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.
No, this is wrong.
> 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?
> 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?
[deleted]
Is there a nitter equivalent for medium? I stopped clicking that domain years ago.
Stop using email newsletter popups.
Stop using images that I can't zoom in to.
Stop using images that I can't zoom in to.
Medium puts unlabelled icons above and below the article. When the author writes all this and puts it on there, he can't be taken seriously.
[deleted]
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 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 certainly wouldn't mind more websites, especially government ones, offering a CSV download option along with their fancy tables.
sounds like people are trying to reinvent hieroglyphs.
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.
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 Stop as a headline.
Nobody with a brain is reacting to this (me excluded).
Grow up.
Nobody with a brain is reacting to this (me excluded).
Grow up.
Stop showing fullscreen popups. Please.
And no, medium is not the last site in the universe to host at.
And no, medium is not the last site in the universe to host at.
That was my first thought. A page that talks about cognitive load waits for you to start reading, then throws a newsletter sign-up dialog in your face? The irony...
Oh, but it gets better:
> We have been sold a lie that icons are the universal language of the modern interface.
... placed directly below a button bar that contains only icons.
Oh, but it gets better:
> We have been sold a lie that icons are the universal language of the modern interface.
... placed directly below a button bar that contains only icons.
[deleted]
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."