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.
One thing that struck me immediately is that while I remember the blinking GiFs as terribly annoying they seem tame compared to todays web without an ad-blocker.
Agreed! Also, while i think i used it once and then never again (for no real reason), i remember there used to be some scripts, or rather a suite of scripts named, like, Greasemonkey or GreaseScripts or something...that allowed you to block certain actions from happenineg on websites, as well as customize many other elements of your experience on websites...conceptually like web extensions can provide ad blocking nowadays...anyway, as i recall, some of these scripts/functions allowed for semi-blocking blink and other features that users might have found annoying...like i noted, i used it once since blink and other banner add-like things didn't bother me too much...but this and your comments here reminded me of that suite of scripts - and how much power they granted users within their browser and browsing experience.
I love it. Note that despite a good attempt to use the aesthetic of the time, some modern sensibilities are still there like the narrow layout (I was in there in the late 90s and we used all the screen because the resolution on a 15" monitor -if you were lucky- wasn't that great).
Modern sensibilities like narrow layouts are I feel like a massive downgrade compared to full-width (or almost full-width) layouts. If the user wants less text, they can just resize the browser window, it's simple. But with those layouts, the text takes up way more vertical space than what's needed, even if you have a large screen, leading to lots of scrolling.
HN has a good layout - there are some (quite small) margins but it otherwise uses most of your screen. More websites should follow this pattern, IMO.
There comes a point where the eye has trouble jumping to the start of the next line. It probably differs per style (space between lines, font, contrast, etc.), but long paragraphs will be troublesome.
Requiring the user to resize the window is not a great alternative, IMO. It feels cumbersome, and people with many tabs will hate it. And doesn't work on mobile devices.
Dunno, I feel the opposite way. It's comfortable for me to read one line for longer, then to jump to the next one. I think this is just "what you are used to" - I don't see how either are inherently better or more comfortable to read.
This kind of thing has been an issue for long before computers. Typesetting in newspapers also needed to use line width constraints for better readability. That's why long newspieces are often split across multiple columns. I have never heard if someone who prefers one long line so that's interesting!
Brain prefers longer lines with less next-line jumps, but people are used otherwise, so they overwork their brain while trying to keep their eye muscles happy.
Where are you pulling this info you're stating like fact from? I can say for sure that it becomes harder for me to accurately jump to the next line of text the longer a line gets. Sometimes missing a line or starting the same line again even makes sense for a handful of words so it's not immediately obvious that I've messed up finding the start of the correct line.
> If long line length was common then browsers would have a similar feature built-in.
I wouldn't be so sure. It was common for a long time (and still is on older sites) and browsers never got that feature. They also haven't bothered with a dark/light mode switch even though that is a much simpler feature since the setting is already there.
I think the inclusion of the scroll wheel on modern mice helped fuel this trend. Scrolling was a lot more onerous when you only had 2 (or 1!) button mice, and you had to actually go navigate to the scrollbar in order to scroll (or switch to your keyboard and use the page up/down keys). The other thing in this vein that is annoying is when scroll bars are so small users don't notice the content in the pane they're viewing can scroll, and will then claim the content isn't there. It is -- you just have to scroll for it. But you can hardly be blamed for not knowing that, because some moron decided to play hide and seek with the content.
100% agreed. It also doesn't help how modern programs hide/minimise the scroll bar, so you can't accurately judge the size of the content and where you are in it.
> some modern sensibilities are still there like the narrow layout
I prefer that be left to me to size the column for my reading preference, by setting browser size accordingly, though I appreciate a great many users browse full-screen at all times and designers need to account for that lest they be blamed for the users choices.
If you make users resize the browser window to make a single column of text comfortable to read then websites with multiple columns or sidebar will be cramped. Unfortunately there is no setting to communicate text width preference without also limiting the total viewport space so websites are left to make their own assumptions.
The design considerations for a single column and multiple are quite different though – no need to not do something for one because of the existence of the other.
> Unfortunately there is no setting to communicate text width preference
Many sites have an explicit dark/light mode toggle, either instead of or as well as respecting prefers-color-scheme. Perhaps a “constrain width” toggle could similarly be implemented.
We need more toys so sometimes instead of posting a drawing or an essay, I build little toy websites, e.g. https://meat-gpt.sonnet.io or the footer on days.sonnet.io
The traffic might be low for some/most of them, but then the interactions with people who found me through them are so much more interesting and meaningful
> Nowadays most websites are cut from a template which is as boring as design can get.
We need to be efficient, please. Who cares if everyone is using it. Faster we tick all the boxes, the better. So we can get a new sheet of unticked todo list. /s.
I miss the “Under Construction” banners. It was ok to tell your visitors your site was a work in progress! (Also you generally had to publish and debug live.)
Lately I've run across a few of these--perhaps through HN--and I couldn't help but feel that they all exaggerated the "feel" of a 90s website, more of a caricature of our stereotypes of the era than a recreation of what an actual indication of what most actual personal pages looked like (the non-blank ones anyway).
If anything, a lot of these sites are more readable and toned down than many of that era, considering they’re not using a blue bubble pattern background with bright red Comic Sans text and spinning gifs everywhere. It taps into the nostalgia but of course it’s never going to feel exactly the same.
I'll admit I'm not totally sure what this is? Satire? Art project?
It looks to me like what would happen if you tried to verbally describe some kind of fan-based web site from 1996 to someone else who hadn't experienced the web pre-Web 2.0, and then they went off and did their best with it.
I will say, I did enjoy the web a lot more back when it felt more like a carnival than a shopping mall.
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"!