In Defense of Text Labels
157 comments
·February 22, 2025layer8
crazygringo
Agreed, absolutely.
The other thing is that full-color, textured icons help a great deal with immediate recognition as well. It's easy when the "open" icon is a yellow folder.
Sadly, the move to flat design with monochrome icon outlines destroyed that entirely. I'm still waiting for full-color icons to come back in style again. They can still be flat, but being filled with color (not just colored outlines) helps immensely with fast recognition.
y1n0
I absolutely despise color coding. I'm red-green colorblind but that affects all colors that have red or green as part of the mix.
drdec
What the GP is asking for does not affect the color blind. They are not suggesting there should be multiple folder icons of different colors. They just want color included in the existing icons. My understanding of color blindness means that that would be better for people with color blindness as well.
skywhopper
I’m deuteranomolous myself, but I disagree. Color, shape, labels, and location can all combine to be useful for recognition. Using color alone is definitely a mistake, or making color the only difference between two icons. But combine distinct shapes and distinct colors (informed by color-blindness awareness) for the best results.
fedorareis
Why does the folder color matter? Is it just because that is what you are used to from a specific OS?
Color helps for some people but when making an accessible design you have to account for color blindness and other vision issues. Which means the icon needs enough contrast and can’t rely on just color to convey meaning, unless the icon is paired with a text label that also conveys the meaning the color was trying to convey.
So while I agree that color iconography can be extremely helpful for the average user, unless it is supplemented by other techniques it can make a product completely unusable for a subset of users
fmbb
The commenter did not say yellow was important per se, or that the color yellow was the most important property of the icon.
The commenter said that adding distinct colors to icons help users tell them apart.
mlx0x
Folders were always yellow on Windows because people were used to Manilla folders.
layer8
In the example, the folder is recognizable as such from just its shape. The color merely makes it more recognizable (because folders are yellow on Windows — it reinforces that the icon depicts a file folder).
For accessibility reasons, you shouldn’t rely on only the color, but that doesn’t mean that color isn’t a very useful property to apply.
kace91
In your first example, my intuition tells me if some elements are more important than others in away that's worth distinguishing with icons, it's better to think on providing easier access to them (priority at the top?) or hiding the rest.
There's 17 options there, where only 5 are deemed important.
The second example is bad for different reasons. There's no apparent rime or reason to the options other than "places you might want to check", no grouping and no priorisation. It would be a hard to parse with or without icons.
nerdponx
The brilliant thing about the first example is that differentiating "important" items with the icon actually allows multiple forms of categorizing items in the list, whereas your suggestions only allow one. The items in the list are grouped by topic, and important/common ones are highlighted with an icon. Hiding the less important options makes them needlessly harder to find if/when you do need them. Moving important items to the top breaks the topical grouping. In both cases, the application becomes less discoverable.
8n4vidtmkvmk
+1 it would be silly to ungroup all the save actions
layer8
In the first example the items are grouped by topic (such as “printing”), which I think makes sense. When you go select a “frequent” action, it’s useful to see which “less frequent” but related actions exist nearby. And the icons not being all grouped together but being (partially) isolated actually helps in better recognizing them.
It’s from Microsoft Word ('97, I believe), by the way. A later version had “expandable” menus that by default only showed the most frequently used options, and on expansion (or by global setting) then also showed the other options. Many users didn’t like that, however, either because they missed that the menu could be expanded and thus didn’t find the item they were looking for, or because the expansion changed the relative locations of the items, meaning they were at an unexpected position depending on the expansion mode; or just because the expansion required an extra click.
I’m just noting this because Microsoft deemed the topical grouping of items within the menu important enough that they kept it, orthogonal to the expansion mechanism. And they doubled down on the grouping with the later ribbon interface — which I personally dislike because it’s not linearly greppable and feels jumbled, and they felt the need to give every item an icon there, whether memorable or not.
troupo
> it's better to think on providing easier access to them (priority at the top?) or hiding the rest.
Microsoft tried it. Hiding things doesn't work. Because what is unimportant to you is important to someone else.
See Why the UI https://web.archive.org/web/20080316101025/http://blogs.msdn...
--- start quote ---
There was no way to get the default "short" menu right. Although conventional wisdom holds that "everyone only uses the same few features in Office," the reality is that people use an amazingly wide range of functionality. So, one person's ideal default "short" menu was exactly the wrong thing for someone else.
--- end quote ---
XorNot
This is essentially the problem that the average user uses only a few features, but no actual user only uses those features.
vvillena
Hiding parts of the menu hinders discoverability when those options are needed, creates a need for one extra action to show all the available options, and messes with the users' spatial and muscle memory. This particular mistake was already made a quarter of a century ago, in Office 2000.
immibis
The easy access is that there is an icon next to them. Providing a collapsible menu just breaks muscle memory and adds an extra click to the other items. Microsoft tried this once.
ranger207
I prefer every item having both text and an icon. If I don't know what the icon mean, there's text there to explain it. If I do know what the icon means, i can scan just the icons and find what I need faster. In my opinion it's the best of both worlds. That being said, your first example might be even better, because a lot of those things like "close" or "versions" I'm not going to be clicking often, so if they had an icon I'd have to read the text to figure them out every time anyway
radicality
Same for me.
In case it’s useful to someone, in many native Mac apps you can get the main toolbar to show both. Try right-clicking on the toolbar -> Customize Toolbar -> Icon and Text. Doesn’t work everywhere though, but still super useful to me, I enable it whenever I can.
olejorgenb
But it's not as compact as icons only, which to me is the main advantage of icons. All icon buttons should have hover text with the command name of course.
fzeindl
This is an example for something I have always troubling arguing with in technical discussions: Sometimes a solution only works if you apply it partially, "in good measure".
I can imagine the discussions on the issue above with the outcome being either no icons, or icons on every item, but nothing in between.
How go about convincing a group of people about this?
pphysch
When it comes to quantities, point to https://en.wikipedia.org/wiki/Subitizing. Simply put: "1, 2, 3, 4, many". Designers should be conscious when quantities might cross this (approx) subitizing threshold, and consider increasing the dimensionality with nesting or other techniques, rather than allow the size of simple visual sets to become overwhelming to users.
Whether intentional or not, the Windows example has exactly 4 icons in that column, and the rest are blank space. This makes it easy to visually navigate to, and identify, those emphasized options.
Mikhail_Edoshin
The first example was used together with a toolbar. Commands that had buttons on the toolbar also had icons in the menu, so the user could make a connection between the menu and the toolbar.
The second example uses icons merely as a decoration. This is a wrong usage.
Aside from that toolbar example menus normally should not have icons at all. A good use of icons is a list that may have items of different kind, like a list of files that displays a pictogram for each file type or maybe a tiny preview of the file's contents.
aqueueaqueue
I am wondering why I agree with you!
I think because the shape creates landmarks. This is why some cities are easier to navigate than others. You need some stuff to be different.
01HNNWZ0MV43FF
The icons are also used on the most commonly used items.
"Groups" on that Git forge probably isn't used as often as "issues" but they both have vague little grey icons.
"Issues" should just be an icon of a bug
layer8
Yes, it’s the non-uniformity. The icons being colored and having high contrast also helps. They furthermore highlight the most important functions.
atoav
The thing is you should structure your interface the way a good craftsperson would structure their tools.
That means a single-digit number important tools should be directly accessible, ideally in the order in which you usually need them. Other tools sbould be organized in sections that make sense, even if you don't make these sections explicit.
For example in the shown gitlab sidebar you put milestones and activity next to each other as they both are related to project managment. Projects and Groups maybe should just become something like "Dashboard" or "Overview" as having separate pages for them is probably not the most efficient way to get you where you want etc.
Just putting everything in a menu is thr lazy option, the good option is to tbink long and hard how to organize the tools and create good defaults that suit many people
moron4hire
Should have done BitBucket's menu. Every entry has an icon and they are all some variation on arrows pointing at dots. Completely useless.
recursivecaveat
I don't think its too bad (assuming you mean this one, I can't find a higher-level one) https://i.imgur.com/V06bwjJ.png There are a few similar arrow-and-dot ones, but at least they're directly connected to the related git action. The gitlab one... milestones are a clock, but activities are a clock running backwards? Projects and issues are just sets of rectangles in a different rotation. I feel like part of the problem is these concepts are not themselves super coherent already, but they didn't do a great job either. (how about an actual mile marker for mile-stones?)
pavlov
UI research since the 1990s has shown this to be the case. Labels provide much better recognition than icons alone.
Paradoxically we now have much better display technology that allows rendering sharp and legible text in UIs, but design fashion and localization laziness dictate that most UI designers have instead been trying to eliminate all text.
Even when usability guidelines exist, they are ignored because UI design has become a vibes-based profession. For example, Apple’s iOS human interface guidelines unequivocally say that tab bars should include both icons and text labels. It’s been a long time since I met a designer who has actually read these guidelines. They seem to think anything Apple publishes is some kind of checklist for engineers, and can’t be meant to inhibit their Figma freedoms.
Hizonner
Most of the world switched to phonetic scripts a long time ago. That's be because they're strictly superior to pictograms. Icons are optional. Text is required. Sorry if you have to translate it.
crazygringo
This is obviously not true.
You don't need a label to say "Close" next to the "X" on your window. Or "Play" next to a right-facing triangle in your media player. Or the word "Search" next to a text box with a magnifying glass in it. We have certain "pictograms" that are just as widely understood as letters themselves.
There is a spectrum from widely-understood symbols that don't need labels, to totally ambiguous/confusing/custom symbols that are helped greatly by labels.
That said, I agree with the article that right now, a lot of apps could benefit from more labels rather than less.
tsm
A magnifying glass on its own could mean:
1. Search (across the application)
2. Find on page
3. Adjust zoom
null
danielmarkbruce
Try to keep going though. Close. Play. Search. Pause. Stop. Fast forward. I'm guessing you can name a few more, and you might get a group of people to agree about 15 are super obvious and generally accepted. It's a tiny number.
BiteCode_dev
Back arrow, reload sign, house for the home button (all them on most web browsers), +/- signs, trash can to delete, music notes, thumbs up and down, movie clap, compas for navigation, "?" for help, clock for time, lockpad for secured, git wrap for free, speaker for volume, bell for notification, battery, pen to edit, calendar for date, clipboard to copy/past, gear for settings, yellow triangle for warning, red circle carrying an icon for forbidden, check mark for approved...
We are literally living in the era of emoji and there is one for every single one up there. Teens can have all conversations without using words.
It happens because the more we use symbols, the more we attach and spread meaning.
Send "lesser than three" to someone 30 years ago, you'll get a blank reaction.
Send "<3" today, and it's a different game.
mrandish
I agree. Maybe I'd add the three horizontal line 'hamburger' for menu, folder, plus sign for 'create new" and directional arrows for back/forward. Maybe around a dozen all in but that's about it. Anything else should have words.
Instead, I find myself trying to puzzle out what the hell some cryptic pictogram means, very frustrating. I also have really come to despise this trend of not visually signifying that an icon is a pressable button.
hnlmorg
> You don't need a label to say "Close" next to the "X" on your window
A lot of windowing systems will show a tool tip saying “Close” if you hover over that X.
Similarly, any menu items for Close (eg right clicking on the task bar) will have both text and an icon.
> Or "Play" next to a right-facing triangle in your media player.
It’s actually pretty common on hardware devices to have text accompanying those icons.
And particularly on older devices when those icons were less ingrained into everyone’s memory.
For example:
https://www.bhphotovideo.com/images/images2500x2500/coby_cvr...
> Or the word "Search" next to a text box with a magnifying glass in it
And you’d be amazed at the number of nontechnical people who struggle with that.
This is why websites designed for people of varying technical abilities, for example holiday booking sites, have text inside the search box describing what it’s used for.
For example in this picture of EBay, there is text that says “Search for anything”
https://www.lifewire.com/thmb/DwZPyw8OFhQje9EAgEVOtBpUYVM=/1...
:max_bytes(150000):strip_icc()/eBay-5acb902a18ba0100375b9808.jpg){kind=link}
> There is a spectrum from widely-understood symbols that don't need labels
Widely understood by who? People writing the software? Or people actually using the software? ;)
Software engineers sometimes forget that most people don’t use computers nor websites for fun and thus don’t want to learn what a bunch of pictograms mean.
Frankly, I don’t want to memorise icons either and I do use computers for fun. So there has better be some text labels available for when I’m old, eyesight going, and less comfortable with technology than I currently am.
cyberax
> Or "Play" next to a right-facing triangle in your media player.
That's a good example. I love text buttons because they are _larger_.
> Or the word "Search" next to a text box with a magnifying glass in it.
And here I _definitely_ disagree. I hate the search interfaces that are hidden behind a small icon somewhere.
eviks
What are you disagreeing with if the "hidden behind small" is the assumption you've made? Nothing about icons demands hiding anything
echoangle
If it’s your personal opinion and other people disagree, it’s not strictly superior though.
tristramb
Text is in a sense universal. At least within a particular language. It is not tied to a particular app or operating system. You can interpret it using the same mechanism that you use to interpret a book, the label of a bottle of wine, or the name on a gravestone.
greggsy
Also, text is literally just funny shapes that are used to communicate.
echoangle
How are they strictly superior? Here are at least two reasons where icons are better: Speed of recognition and needed Space (especially width).
DecentShoes
But that's just not true. If I have to sit there trying to figure out what an icon means, that's not faster than just reading the word.
echoangle
Not when you first open the program, but for advanced users, absolutely.
crackalamoo
I think the commenter you're replying to might have been referring to pictograms like many Chinese characters, not icons that you have to figure out. Or maybe not
LocalH
I glance at a word and instantly (other than eye-to-brain processing delay) know what the word is. Icons that aren't the absolute most common take longer for me to parse.
echoangle
As long as some people are different that you, it’s still not strictly superior though. If some people are better with icons, you still have to do a tradeoff.
russellbeattie
My rule for user interfaces: A GUI is as good as it is easy to help someone use it verbally. The best interfaces have unique handles, names and minimal hidden features. The interface doesn't necessarily need to have tons of labels, but everything on a screen should be identifiable by name.
If you can guide someone through an app while sitting next to them, or over the phone, it's a good GUI. If you have to say, "The grey thing on the left. No, the other one. In the box. It's a rectangle with a sort of an arrow thing," then that's a sign the UI sucks.
EdwardDiego
That is a brilliant rule for GUI evaluation
"Could I guide my Nana through your app over the phone?"
- Beattie's Law of UI
egeozcan
Every time I'm busy with a topic, the next day it somehow ends up showing up on HN!
I was creating a small drawing app for my 27-month-old son (mostly for me to draw tractors and excavators for him). At first, I only used icons, but they confused him. So, I added text labels, and surprisingly, even though he can't read, the labels helped reduce visual clutter. Suddenly, he could "learn" what each tool does and remember.
drekipus
that's wild. I find that my.... 27-month old daughter (heh, what a coincidence) also recognises the titles of bluey episodes pretty easy..
we can be scrolling a list of bluey episodes, and she knows what they are by the words.. "what episode do you want to watch?" "curry quest!" - sure enough, that's what it's called and that's what the title is
all of the pictures are some form of the characters doing something, so i find them fairly indistinguishable... I haven't tried letting her pick one without the picture, which will be the real test i guess.
egeozcan
Cool, also yeah, what a coincidence! We had the same thing with books. My wife and I really suspected that he was somewhat reading until we figured out that he memorized the shapes of the sentences, so individual words or the same sentence in a different font wouldn't be recognized. It's fascinating to witness how a human brain evolves.
Also, about Bluey... The little guy has limited screen time so he can only see an episode or two per day, but I really want to keep watching even when he can't lol. I literally fell off the sofa laughing in the episode where they are trying to lick each others ice cream while the waltz music from the Nutcracker plays :)
md_rumpf
My guess is a lot of these studies don't replicate as well in Europe vs. US.
Road signs in the US are predominantly text: PED XING. ONE WAY. DO NOT PASS. Where the European equivalents are all pictograms. Europe needs to do it this way, because the countries are so small you'd expect German-speakers driving in France and vice-versa: French-only text signs would be criminal. Similarly, a French-speaker can navigate a German train station without understanding German writing.
Europeans are actually much more attuned to deriving meaning from pictograms than their American counterparts.
fsh
As a European, I cannot make any sense of the low-contrast pictograms in "modern" software (VS Code, Obsidian, etc.).
greenmartian
Ironically, Visual Studio introduced monochrome icons in the early 2010s, and the protestations were so deafening that they introduced colours back in.
Fast-forward a decade, and nobody even bats an eye. I also struggle visually navigating around VSCode when I'm not using a keyboard, but we seem to be a minority.
gary_0
It is standard practice to translate software into many languages, whereas road signs cannot be.
kbrannigan
What if the writings were English only would that be a sin?
I think English speakers have this innate expectation for the world adapt to them.
They Speak their native language and expect signage, menus, conversations, to be in English.
But if a person attempts to only speaks their own non-english native language, that's being rude.
mft_
I totally get your underlying point, but sometimes it comes down to pragmatism.
If one’s goal is for the world to work as efficiently and with as little friction as possible, then things like a single common language make a lot of sense.
For example, in most spheres of international business English is the common language. It’s not a value judgement about the importance of English or the inferiority of other languages – it’s just pragmatism as English is the commonest shared language that most people understand, whether as a first or second+ language.
theandrewbailey
French people don't do anything radically different on French roads and train stations than they do on German ones (and vice-versa for any pair of nationalities), but what one does in one app might be very different to another.
eadmund
I came here to post about European washing machines, which are labelled with inscrutable pictograms instead of words. My own experience is that those pictograms are far less easily understood than words in a foreign language would be, at least to an English speaker who is familiar with cognates from the Germanic and Romance languages.
acc_297
I don’t mind an icon but I am frustrated if hovering the mouse doesn’t show a tooltip or alt-text style label
It makes learning new software much slower and basically requires going to the docs or a video tutorial if the ui design isn’t exactly spot-on and perfectly intuitive which it almost never will be
xboxnolifes
The worst part about this issue, is how does one look up what an icon doe, especially if it's difficult to describe.
hh2222
Accessibility wise, for those people with impaired vision, a larger mouse cursor obscures the tool tip text making it unreadable.
Timwi
That's just a bug then. The tooltip should obviously just appear below the mouse, no matter how large it is, or it could just appear above the element instead of below.
layer8
Tooltips appear below the mouse pointer. By the way, this is an important reason to use OS mechanisms for UI features like that, which take care of such details, and not (having to) roll your own. Another standard feature of tooltips is that they remain on screen for a configurable amount of time (OS setting) and you can move the mouse during that time, should it obscure the tooltip for some reason.
chrismorgan
I don’t know what OS you’re talking about, but that’s basically never been true on Windows. Native tooltips don’t natively try to dodge the cursor, and there’s no configuration of times and such, and not much actually even uses the original native stuff any more, nor should it. And as regards dodging the cursor, I don’t know of a single piece of software that actually queries the cursor in order to dodge it—though my dad told me years ago he’d implemented such a thing personally back somewhere around 2000.
This wasn’t much of a problem in the past, because the largest cursors shipped out of the box were only two or three times as big, and not much would collide. But in I think 2019 Windows 10 gave you a colour and size selector, and it extends the range past 1–3 all the way up to 15, which I think might have been 256×256 or something, which is absolutely huge and I actually had a lot of fun deliberately doing bright orange size 15 cursor for a whole week when that feature first came out, before eventually settling on 4, which is still way bigger than people are used to, and well worth it, in my opinion, except that for size 3 and beyond, tooltips get occluded, and so I’d lose the first couple of letters of tooltips. (I like the way macOS enlarges the cursor if you shake it about, so you can find it if you lost it.)
Huh, just checked the original Firefox bug from 2004, https://bugzilla.mozilla.org/show_bug.cgi?id=248718, and it looks like they’ve finally fixed this after twenty years, in https://bugzilla.mozilla.org/show_bug.cgi?id=1712669. Still took five more years of occasional complaints, but I wonder if Windows making it so easy to get bad tooltips has pushed more software to fix their tooltip placement. Nice to see, even if it’s too late to benefit me any more.
Of course, on the web you can’t do it properly with in-DOM tooltips; only with native tooltips, which are unfortunately very limited and often unsuitable for other reasons.
—⁂—
Now as for Linux + Wayland… ugh. The situation is still laughably bad. I use Sway, `output eDP-1 scale 1.5` and `seat seat0 xcursor_theme Adwaita 96`, and the cursor still appears at at least three different sizes, depending on the app. It used to be five. GTK is just ignoring the size thing so I can’t judge it, Qt seems to be actually positioning tooltips sanely these days, avoiding the cursor, which I don’t think it did four years ago. Good show.
levmiseri
To add to this. UX Myth — Icons enhance usability: https://uxmyths.com/post/715009009/myth-icons-enhance-usabil...
eviks
I'd also defend the text from the emptiness. In the Magnolia evoke example the text label is small while there is plenty of space around.
Also, you can go on the attack with text and make it rich! Bold / emphasising individual letters with colors to make all those visual scan easier.
Though the ultimate solution is allowing easy user choice of both to override whatever mistakes the designers made, and at an "OS level", so that a user could use a single identical icon for "Export" and avoid the mentioned per-app inconsistency. But that will have to wait until the fantasy era of UI design arrives
> We’ve spent our lives learning to recognize words instantly, while most app icons require new visual vocabulary.
Unfortunarely we haven't reached that level of magic reading skills despite spending a part of our early lives learning to... well, also not instant recognition.
> Scanning text is fundamentally easier than scanning icons. A stacked list of text requires only a one-directional scan (top-to-bottom), while icon grids demand bi-directional scanning (top-to-bottom and left-to-right).
But this is a fundamental mistake, besides the fact that icons take less space, so "efficiency" is higher, you can recognize familiar shapes/positioning without full per icon scanning
foobarbecue
I have always hated icons and their proliferation.
I advocate for text, but it usually falls on deaf ears. I've been wondering why and recently hit on a new hypothesis: many people are slow readers.
It takes me about a second to read all of the labels in a typical menu column, if I'm familiar with what sort of things might be in the menu. I'm starting to realize this is not true for everyone.
For me, there is never a time when it's faster to interpret an icon than text. But I'm becoming sympathetic to the fact that we may need to accomodate slow readers in UI design.
I just wish there was a toggle to disable all of the icons in my entire operating system, with the exception of minimize, maximize, and close.
userbinator
I've heard this sentiment phrased as "a picture is worth a thousand words, but often just one is enough."
veltas
A good picture, unfortunately most modern apps are full of meaningless icons.
sillywalk
I very much agree with this.
As an example, I look at the Markup Toolbar in MacOS, and I have no idea what those icons mean until I've tried using the tools. They're so similar, vague and monochrome.
Balance is important. For example, having some icons in a menu provides anchor points and gives the menu a distinct “shape”: http://colfinder.net/materials/Supporting_Distance_Education...
But when every menu item has an icon, it’s all just a blur: https://us1.discourse-cdn.com/gitlab/original/3X/6/3/634da24...