2015-08-19 Stupidity around the Web

Sometimes I stumble upon pages with stuff that looks like this:

These are actually links.

I'm not sure who did that (most likely the author of this website just used some library or engine which already had this), but this problem is very common nowadays.

So, let me help you to understand what these circles actually stand for:

First circle stands for “ignorance”

I have no idea what were they thinking, perhaps they are not thinking at all (brain death is a common reason to become a UI designer). When you are creating an interface, there are several things you have to think about:

• Color-blind people
• Blind people
• Text-based browsers

And much more, actually. But these ones are actually essential if you want your website not to suck. Color-blind people might not see your flat buttons in the way you are seeing it. They might confuse it with decorative elements or even not see it at all.

Blind people might have better luck, since some screen readers will read the link out loud.

And it does not matter if you style your circles differently or not. Text-based browsers don't understand this shit at all, because there is no text to represent these circles. These circles, however, are rendered… as circles! At least that's how it looks like in w3m:

You can actually follow these links! Either place your cursor into the right spot or use tab to get to it.

Second circle stands for “inefficiency”

Although I prefer textual buttons, I'm OK with all kinds of pictograms or other visual elements.

But this is just complete nonsense, I have to hover over every button to find one that I actually need. I don't even know which links are there before I hover over all of the links.

This is just nuts.

Third circle stands for “insanity”

The first question that pops up in your mind when you see this – what is going to happen if I hover over these buttons? Maybe the icon will appear?

This does not really help to find the right link you are looking for, since you still have to hover over these buttons. But it could make your life a little bit easier, right?

This is what happens when you put your mouse over one of the buttons:

Now guess what happens when you hover over other buttons.

…

Yes, they become yellow.

Please design your websites consciously.

UPDATE

It seems like there was a bug when the icons were not being loaded if you used https. That's good. It means that the author did not do that shit on purpose – it's just a bug! This, however, does not really make it better. See HTML Hell section “menus made entirely from image maps”. You see, today even text-based browsers can display images. BUT NO, NOW WE DO ICONS WITH CSS. And what this CSS does? Sure, it loads a custom font! Nothing has changed… In other words, if every icon on that website had a little text near to it, then there would be no such blog post.

“You really should research something like that before writing an entire article on bashing someone.” says the author. And he is right! He is so right that I've even deleted this post. But it is a wiki, so someone reverted it back. I find this post funny so I would not delete it again. :)

UPDATE (2017-04-30)

1.5 years later and the problem is still not fixed. That being said, if you have an ad blocker (and you're retarded if you don't), then you will see “AROUND THE WEB” without any circles. Nothing around the web.

stupidity

Comments: