One of the things I like from the (g)olden days of the web is how navigation links always had text. They could be accompanied with images or icons (like it is on this website) but the text would definitely be there, often below the icons and sometimes beside them.
Nowadays, more and more websites are moving towards replacing the text links with icons. And some of these icons are so simple and abstract that sometimes it is hard to tell what they even mean! For example, the default GMail web interface once had simple text buttons with options like "Archive", "Report Spam", "Delete", etc. Now it has tiny icons instead. While the bin icon is probably obvious to everyone (if not, it means "Delete"), there is an icon with a tiny down arrow in a tiny box that I would normally guess means "Download" but turns out it is "Archive" instead. There is another icon with a tiny right arrow in a tiny box. I would normally guess that means "Forward" but turns out it is "Move to". (Move to what? Move to a label!)
GitHub too recently adopted this trend. It had very clear and obvious text navigation links earlier. Now we find little icons instead. One of them is an irregular but symmetrical hexagon with three line segments within it. Can you guess what it is? Turns out it is a badly drawn envelope that means "Notifications". There is another one with a little dot in a circle. Until I hovered over it to read its tooltip, I had no idea that it means "Issues"!
You think it's bad; try working a phone support role where part of the job is helping people navigate around on your company's website. Sure, some of us get accustomed to the "hamburger" and "kebab" menus, but those are far from universally recognized terms.
I blame Steve Jobs. "It's intuitive!" my foot.
Even the idea that it's for screen economy on mobile devices doesn't make sense, because if these things are links, they either bring you somewhere else, or they expand something on your screen, presumably, over other content, or displacing other content. NO reason not to just have text that says "Menu" or "Settings."
The reason is because localization is expensive and tedious and discriminatory.
Every instance of text needs to be dynamic. You can't just write "Text", you need to write "$text" (a variable) and have code that refers to a file containing that word in a given language to replace the variable with. It's tons of upkeep work, and you can never cover every single language known to man.
An icon on the other hand? "icon.svg". Done.
Ironically, in an effort to be global and inclusive we are throwing out all the languages and attempting to replace them with a single, universal iconography.
I fucking hate this trend, but I can understand and respect why it happens. People are fucking lazy and this is the course of least resistance overall.
There are still localisation issues with some iconography having quite different meanings by default⁰ to different populations. Also there is the issue of some iconography not making sense to anyone until it is first explained, though I suppose confusing all your users is at least not discriminatory!
“The only "intuitive" interface is the nipple. After that it's all learned.” -- Bruce Ediger¹
And for accessibility reasons the text should still be there in some form² so the icon is just pushing the problem elsewhere, though admittedly accessibility is often forgotten (or actively neglected) making this a moot point.
--
[0] i.e. before the meaning of a particular icon in this context is explained
[1] usually attributed to Bruce Ediger, though there is apparently some room for disagreement on that
[2] as a tooltip, which additionally helps those without extra accessibility needs because it shows on-hover³ for them
[3] or long-press on mobile UAs, where hover events are not present
> Ironically, in an effort to be global and inclusive we are throwing out all the languages and attempting to replace them with a single, universal iconography.
Meanwhile, there is also the opposite trend to enhance languages[0], supposedly also to make them more inclusive. There, too, the "UX" suffers, though for different reasons (readability, additional grammatical complexity, …).
To follow your line of thought, now I'm imagining a world where, in the interest of both gender neutrality and UX, in our languages we start replacing words with icons. :eek.jpg:
Most major websites do choose to keep the tooltips though. So it appears to me that they aren't really solving the localization problem alluded to in the comment I was responding to. If the localization problem is indeed the rationale behind this trend, then they are just moving the problem behind an obscure mouse gesture. Now we need to hover the mouse pointer on the icons to understand what they mean.
my mother gets confused on her tablet. i seriously had to write a little guide on paper, including that triangle means back, circle means home.. square goes right over her head, so i said just ignore that one.
You still have this requirement for your users that depend on screen readers… a segment of users which coincidentally are unlikely to appreciate the fancy icon.svg
Not a defense, I'm curious, what does Steve Jobs have to do with this? I always remember the iPhone having buttons with text before Ice Cream Sandwich or so.
Not a defense, I'm curious, what does Ice Cream Sandwich have to do with this? I always remember Ice Cream Sandwich having been a version of Android or so.
It's funny you say that, because this specific site has images as the only children to the anchor HTML elements. Which renders the text mostly useless from an a11y point of view.
<font size="2">
<a href="dmg_base.htm">
<img src="dmgbase.gif" border="0">
</a>
<br>
Game Boy
</font>
> Nowadays, more and more websites are moving towards replacing the text links with icons. And some of these icons are so simple and abstract that sometimes it is hard to tell what they even mean!
Indeed. Not just websites, either. A similar trend has taken hold in applications, and it's awful.
Nowadays, more and more websites are moving towards replacing the text links with icons. And some of these icons are so simple and abstract that sometimes it is hard to tell what they even mean! For example, the default GMail web interface once had simple text buttons with options like "Archive", "Report Spam", "Delete", etc. Now it has tiny icons instead. While the bin icon is probably obvious to everyone (if not, it means "Delete"), there is an icon with a tiny down arrow in a tiny box that I would normally guess means "Download" but turns out it is "Archive" instead. There is another icon with a tiny right arrow in a tiny box. I would normally guess that means "Forward" but turns out it is "Move to". (Move to what? Move to a label!)
GitHub too recently adopted this trend. It had very clear and obvious text navigation links earlier. Now we find little icons instead. One of them is an irregular but symmetrical hexagon with three line segments within it. Can you guess what it is? Turns out it is a badly drawn envelope that means "Notifications". There is another one with a little dot in a circle. Until I hovered over it to read its tooltip, I had no idea that it means "Issues"!