In Defense of Text Labels
chrbutler.com
chrbutler.com
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...
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.
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
The commenter said that adding distinct colors to icons help users tell them apart.
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.
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.
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.
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 ---
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.
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?
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.
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.
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.
"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
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
I also immediately ignore the icons and scan the text on the latter one.
I guess it's mostly from not trusting icons, the only ground truth comes from the text where there's no possible alternative meaning.
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.
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.
1. Search (across the application)
2. Find on page
3. Adjust zoom
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.
As someone who uses emojis to a degree that is embarrasing, I agree tgat often are amazing to convey things tgat words have harder time, but I still have to accept that there is ambiguity in their meanings, yes, a bunch of conventions have rooted enough that most people would undertand the same, but get out of those or simply present them in a different environment and things change. Labels are way less ambiguous.
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.
Fun fact, the original icon for this was more like:
/-----\
| --- |
| --- |
Similarly in some DOS TUIs: https://retrocomputing.stackexchange.com/a/23921
I definitely agree. I just think that it's just been so common in GUIs for long enough to be one of the few that's probably safe to just assume will be understood. Sort of like the two vertical bars for 'pause' on a media player.
On modern Android menus are (more) often I under a button with 3 dots.
Occasionally horizontal, usually vertical.
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...
> 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.
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.
Pixelmator Pro shows you the names of the tool buttons, once, when you first launch the app. They disappear the moment you click a button. Nice. a whole 10 seconds to memorize all two dozen of them.
And they chose not to use the system tooltip on hover, so I have to wait for some humungous pictorial tooltip to load in when all I want to know is the goddamn hotkey.
The initial claim was that text is strictly superior to icons, which means that icons have not a single thing they’re better at then text. That’s just plainly false.
I use dozens of apps regularly enough to not be a beginner but not so much that I know their keyboard shortcuts. Icons have a role.
A handful of Chinese characters are pictograms. As far as I recall, it is by far the smallest class of characters, and all of them, including the ones that started as pictograms, are treated by modern readers as phonetic indicators.
Compare e.g. 象 to https://img.zdic.net/zy/jinwen/33_E87E.svg .
They are the same character. Does that help you if you're looking at 象?
But we all know many modern designers don't know the value of giving the user choice (or aren't given the agency to do so by their employers).
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.
"Could I guide my Nana through your app over the phone?"
- Beattie's Law of UI
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.
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.
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 :)
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.
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.
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.
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.
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
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.
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
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.
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.
I remember reading an article some time ago about European vs North American traffic signs. The article was praising the European system that relies more heavily on icons over the North American system which is more text-heavy. I can't remember the details now, but I remember disagreeing vehemently with the article.
I find many of the traffic icons (particularly the ones indicating something about parking, stopping and one-way streets) very unintuitive. I strongly prefer the text-heavy signage that I see in the US.
That's why they are not confusing. If people take courses on the meaning of the icons on your software's menu, and you need to save every millisecond from them recognizing the items, that's the way to go.
If both don't apply to you, you should do something different.
Where the US is one big area with a single language, that's not the case in the rest of the world. Processing words in a foreign language takes longer than just seeing the same traffic signs in a slight variation.
As for intuitiveness. I don't know, I kind of subscribe to the notion that the only intuitive interface is the nipple. Everything else is learned. What people call intuitive is just familiarity. The traffic signs are easy to get familiar with if you grow up with them. A systems-minded (or traffic-interested) kid can easily learn the meaning of most traffic signs long before they can read fast enough.
Yes, it does mean that you have to learn those meanings as part of your driver ed. When you get your license, the theory exam covers that.
North America can just get away with text labels because en_US is dominant in NA and learning curve for HMIs in English is flat as it gets.
0: Naturally, means emergency. If you think that's odd, English "emergency" is also just "arising" if taken literal. Emerging what?
Notable examples would be MS Teams and the YouTube app, but almost every modern app seems to do that to some degree.
One hamburger menu on the top left, with things related to your account, like repositories or the GitHub marketplace.
One hamburger menu on the top right (using your profile picture instead of the hamburger icon), with things related to your account, like repositories or the GitHub website.
And between those two menus there's no-man's-land.
So when a user first starts using an app, they might leave it on the default of text+icons, but once they’ve used it long enough to build familiarity they can elect to hide the text and shrink the icons to save screen real estate if they want to.
Unfortunately it’s become the norm for toolbars to have zero adjustability, a trend that I feel was mostly popularized by Chrome, which has had a mostly static toolbar since its inception.
A lot of times, if the dev didn't put the text only option in, you can force it by setting the NSToolbar's prefs in that app's CFPreferences plist.
And tooltips should show up without delay, so I can go through the icons at my own pace by just hovering over them.
I feel that the idea that tooltips only show after a delay was a grave mistake, which has become cemented and is relentlessly perpetuated.
In the 1990s, "..." was reserved as part of text labels, and it had a clear meaning: "save" without "..." saved a file immediately, whereas "save as..." with the three dots indicated there was another dialog coming once clicked (to determine the file name). The new uses of "..." (alone) don't mean much, as far as I can see.
Even the icons aren't very good most of the time, seemingly aiming for anything but simplifying use.
They do make a nice square target to tap compared to text, but the same effect could be achieved by using the first letter capitalized as icon or something similar.
I sometimes dream of Lisp machine/SmallTalk like mobile interfaces, is there anything going on in that area?
It also depends on how common and recognizable your icons and functions are. If you are doing new/open/save/settings/help, and the icons are resembling the usual standards everyone is used to, fine. If you either draw your own icons, or your functions are frobnicate/somnambulate/fart/discombombulate/deflagrate, then plain icons are insufficient, you need text labels as well.
>The more icons we have to scan over, the more brain power we put toward making sense of them rather than using the tools they represent
While we're talking about brains, it's my personal theory that the monochrome icons like those in the screenshots are the bane of all GUI design. Humans were born with the ability to see all colors (that humans can see). Limiting icons to a single color effectively restricts the ability of the icon to convey visual information. If each icon was a distinctive color, we wouldn't even need to look at their shape.
Physical keys, on the other hand, engage a completely different part of the brain that is capable of "muscle memory". Ever seen someone knitting and watching TV at the same time? Or controlling a car while simultaneously watching other traffic and following road signs? It's the same thing. A keyboard allows you to express your intention to the computer without actually engaging the "thinking" part of your brain at all.
I think both are needed as we are varied people, and empathy for the need for both is important.
Finally... The UI that drives me mad for this is the Discord server list in its left bar. You can't turn on text! It slows me down and makes it hard for me to deal with - especially as I'm slow to learn the icons of new servers. The list changes and they have no coherent design! (And no, the hover tooltip doesn't solve the problem)
I say this as a developer, and as someone that’s never identified or worked on paper as a ‘designer’.
I lead a team of developers, and we usually have no designer input unfortunately. It’s all us. My team OFTEN tries to “just use an icon” for something, and I almost always pull the back from this. It seldom works. It’s almost always confusing for people. Text all the way.
But there's no reason not to have both icons and text on desktop/tablets. I don't get what people see in GNOME and W10+ style taskbars with grouped icons where you can't tell shit about fuck about what's actually open. Labelled non-grouped tabs reduce the amount of steps and clicks needed to switch and it's not like we're running out of screen space to display them on 16:9 monitors.
It's a flabby pentagon with slightly rounded corners and a short horizontal line in the lower middle. I guess the old familiar house shape wasn't modern enough? So is this what modern houses look like, wider at the top than the bottom? The line, presumably, represents a door, in a stylish, minimal, modern way.
In Google's defense, text labels are hard for i18n, but icons without text is low effort, bad UX too.
The problem language is usually German, so if you have copy like "share screen", you have to find a way to fit in 12 (2x English) 'M' characters comfortably.
$ aspell dump master | egrep -i '^i.{18}n$'
institutionalization
internationalizationUsing this now, this embraces the new design but fixes poor UI decisions. It even has a one liner install/update script !:
There's a reason why every pictographic language evolved into a phonetic language.
> a trash can icon reliably communicates “delete,”
Only because Jobs popularized it. Manny iphone apps use "delete".
The trouble with pictures is they can indicate objects (though not very reliably), they cannot indicate verbs reliably at all.
Every action in the app would be listed somewhere in the menu, spelled out in text and with the icon and keyboard shortcut listed next to it if available.
That user interface tradition was eventually lost, first with ribbons, and then with web apps.
There seems to be a lot rehashing of debates that I always regarded as mostly settled.
More broadly, unless your pictograms are very clear (e.g. IKEA) then it's still better to add text because then at least the information is there.
I can't count the number of instruction manuals I've read where the authors have clearly thought they were IKEA and could avoid using text, only to make incomprehensible diagrams that confuse more than help. If only they had used text in any language! I don't care if it's Swahili, at least then I would be able to translate it.