13 UI Elements That Make Bad Websites Worse

Buckle up and enjoy my rant about every terrible UI design decision I regularly see on bad websites. It’s not going to be pretty.

I am an old man in internet terms, having worked on the web for over 25 years. And like all grumpy old men, I enjoy a good rant, especially when it comes to bad websites, of which there are many.

With Lockdown in full effect, I am as grumpy as hell and so I thought in this weeks post I would have a little fun and let out some of my festering frustrations with the web.

Please note, this is all meant in fun. Do not take me too seriously. Also, I should warn you; the language might get a little ripe.

Okay, I am going to skip right past dark patterns, because I have written about these before. Instead, I am going to focus on the little things that piss me off. These are things that seem to occur with regular frequency on bad websites everywhere.

So, let’s jump in with overlays.

On Load Overlays

I am not one of those zealots that claim all overlays are bad. There is a time and a place for everything, even the accursed overlay. But overlays that you shove in my face the minute a webpage loads can bugger right off.

Overlay offering $20 off your first order.
How do I know if I want $20 off my first order if I haven’t seen any products yet?

Let’s face it, there is only one reason to display an overlay on load, and that is to scream in my face about some promotion or another. However, there is no way I am going to be interested in whatever you have to sell until I have at least looked around your site a bit, so stop shouting at me the minute I turn up!

Oh, and by the way, I include those annoying little chat things that pop up in the corner of my browser. Sure, offer chat. Sure, you can even put it as a tiny icon or bar at the bottom. But, don’t pop it up as if you are initiating a conversation. That is the virtual equivalent of being pounced on by a salesperson the minute you walk into a shop.

The chat notification on Hey Summit is a great example of a bad website in action.
Just because your overlay is a chat box doesn’t make it any less annoying!

Finally, I want to make a special mention of those ass-covering cookie overlays!

They say, “the road to hell is paved with good intentions”, and the European Commission’s cookie legislation is a poster child for that particular phrase.

The resulting shit storm is a veritable tsunami of popups and overlays on every sodding website I visit, demanding that I approve cookies before using the site.

Cookie Disclaimer on Design Daily.
Despite knowing how annoying they are, many site’s add cookie overlays simply because that is what everybody else does.

The annoying thing is that they are unnecessary. Yes, you need to inform users how you are using their data, but I would argue there isn’t a single person on the planet who has read every cookie notification on every website they visit. It’s the iTunes terms and conditions all over again.

The only reason organisations use cookie popups is that is what everybody else does, and so you can’t get sued for doing the same as everybody else. It is the herd mentality at its worst. It is about protecting your organisation’s liability, not keeping users informed about how you use their data. A clearly written and accessible privacy statement is a much better way of doing that.

Right, next!

Bloody Background Video

Who woke up one day and thought to themselves, you know those ubiquitous hero images, how can I make them more annoying? Because whoever it was, invented the idea of playing a background video in them.

I mean, how am I supposed to read the copy that overlays these background videos when there is all this shit stuttering around behind them? Are you trying to cause me to have a seizure?

Background video makes it almost impossible to read any text overlayed on it.

Oh and that reminds me about those pointless looping animations.

Distracting Animation

Look, I like animations on a website. I think animation can play an essential role in drawing attention and creating engagement. But don’t bloody have in continually looping in my peripheral vision.

If I am trying to read a piece of your carefully crafted copy and there is a looping animation on the page somewhere, it is like one of those in-field news reports when some idiot is pulling faces and being stupid in the background.

Looping animation.
I bet you are having trouble concentrating on my copy with this animation looping.

But, I am not entirely done with video yet.

Panic Inducing Video and Audio

Like many people, I sit in bed at night, looking at websites on my smartphone. My angelic wife is peacefully sleeping next to me when I click through to a new webpage. Suddenly, as if from nowhere, sound starts blasting from some video or audio file that has been set to play automatically. Terror grips me as the leviathan next to me awakes. In a moment, she transforms from an angel sent from heaven to the devil incarnate. All of the pain that is then heaped upon my weary brow is because of some dumb website.

Your website is destroying my marriage! But I digress, I am not done with bad design decisions yet.

Purposeless Imagery

I want to take a moment to teach designers how to design because apparently, they don’t know.

You don’t add imagery just to make the page look more ‘interesting’. If you need imagery to do that, then your user interface sucks, and imagery is not going to fix that. Excellent typography and use of colour can add interest to any webpage.

No, imagery plays exactly two roles. First, it should support the content by demonstrating a point or communicating information directly. Second, it should elicit a particular feeling in users.

Pointless stock imagery does elicit a feeling in me, but I can pretty much guarantee it is not the feeling you want.

Stop adding imagery for the sake of it. Not only does it add visual clutter, but it also slows down your site, and you do not want to make me wait around. I have long since lost any patience online.

Bad Stock Photograph
If you are adding images like this for visual interest, you have bigger problems with your interface!

Talking of making me wait around, let’s talk about those sodding social media icons.

Sodding Social Media Icons

Look, I am okay with you asking me to follow you on social media, although for what it is worth, I will never do that. However, do not use some dodgy plugin or third party tool to provide a set of social media icons all neatly lined up on your website.

What is the point? I mean, have you looked at your analytics? Has anybody ever actually used them? You don’t even give me a good reason to follow you. You just display a list of flashy icons that look entirely out of place on your website and hope somebody will click on them.

Don’t even get me started on those icons that are tethered to the screen and follow you around like somebody’s eyes in a creepy old painting.

My biggest problem is that they tend to slow down your overly bloated website even more than it is already. It is the wafer-thin mint that causes me to explode.

Mashable Social Media Icons
Thankfully social media plugins seem to be on the decline, but there is still some way to go.

If you are failing to grasp quite how bloated your website has become, ask yourself why you feel the need to display a progress bar!

Fake Progress Bars

You know things have gone wrong when you need to show a progress bar to users. Like they are going to wait while you get your shit together.

However, the worst thing about progress bars is that they are fake. They aren’t showing me how much of your obese website has been downloaded. Heck, they aren’t even confirming that the browser hasn’t hung on your excessive use of Javascript. They are just an animated gif, mindlessly spinning away, oblivious to what is happening in the browser.

Sample Progress Bar
It may look pretty, but it is dumb as shit.

Talking of oblivious to the browser, stop breaking it!

Browser Busting UI Elements

The browser is like a forbearing partner. It takes all of the abuse we throw at it in the form of terrible code and bloated sites, diligently turning our shit into a beautifully rendered website. All it asks in return is that you honour the history of previous pages it keeps. But we can’t even do that, can we? No, we have to break browser history because that is so Web 1.0!

I am sick of websites where the back button doesn’t work, or I can’t even copy and paste the URL and return to the same state on the site I was looking at.

I am so over lazy coders who cannot even build a website that doesn’t undermine the very essence of how the web works.

The Lazy Developers Friend: CAPTCHA

Talking of lazy developers, I could not write a rant like this without turning my wrath on CAPTCHA.

Do you know what? Between the paragraph above and this one, I stopped and stared at the screen for a good five minutes. All of the energy drained out of me as I thought about explaining once again why CAPTCHA sucks. I am fed up with saying it and fed up with people ignoring me, simply because the alternatives need a brain cell and a modicum of effort.

Example of CAPTCHA

Sure, go ahead. Use CAPTCHA. I don’t care anymore. I suppose it is slightly less annoying than once it was. After all, I probably like to identify statues in a grid of tiny images. I just haven’t realised that yet.

CAPTCHA has been irritating me for so long that I am almost oblivious to it now. However, I can still find some venom to direct at passwords.

Patronising Passwords

Remember the good old days when we had one password for everything? Those were good times. Then websites started to ask for numbers in our passwords, so we all did the same thing and added a “1” onto the end of our regular password.

Then it started to get even more complicated. We have to have capital letters, punctuation, and we had to write our passwords in ancient Sanskrit.

Dropbox Password Example

However, what pisses me off the most is when websites tell me my password is too weak! You patronising bastards. Don’t judge me! And anyway, if I want to use an insecure password that is my choice.

Of course, these days I don’t have an excuse. I mean all the browsers have lovely built-in password managers. Except, of course, websites are managing to break those too, because, you know, why not!

Autocomplete Breaking Login

Have you noticed the new trend of splitting login fields across two screens? First, it shows you the username and then after you have entered and submitted that, you have to enter the password.

Amazon's two step login process
Just as password managers took the pain out of passwords, web developers decided to split usernames and passwords across two screens.

Well, that completely breaks password managers. Not completely admittedly. However, it does mean I have to initiate the manager twice, first to autofill the username and then again for the password.

That is especially annoying on mobile devices, but hey, who cares about the usability, as long as it is more secure for the minimal amount of development effort.

Right, I feel like I am almost done…

  • Criticised designers.
  • Slagged off, developers.

Oh, I forgot marketers!

Meaningless Straplines

You people, write some complete bollocks. I am almost unsure of where to start. I could probably write a book on it, but you aren’t worth the effort.

Instead, I shall just pick on one thing, and I am going to go with the meaningless straplines you love to write.

When I arrive on a website, I want to know what the company does and how they can help me. Instead, the description that is supposed to tell me this, is some pretentious and meaningless garbage about transforming the world or using the word synergy for no good reason.

Even when it is understandable, it is typically so generic as to be meaningless. For example, I recently saw the following line…

We pride ourselves on offering outstanding customer service.

I confess I was deeply disappointed on reading this because I was hoping to find a company that offered terrible customer service! Fortunately, I had seen another site that proudly announced that they treated their customers like dirt. I am, of course, being sarcastic.

Every company claims to provide excellent customer service and so what is the point of saying it. It is so generic as to be pointless.

We Should Be Better Than Bad Websites

Yes, I know I am unreasonable. Yes, there are good reasons to do any of the things I have ranted about above. But, as a user, why should I care? Why should I give a damn about your internal politics or your development issues? I’ll just move onto the next website and forget you exist. You are not worth my trouble.

Okay, so I am exaggerating for comic effect, and yes I am enjoying a good rant. However, you would have thought after over 25 years of the web we would have sorted this kind of shit by now. Surely we can do better?

Boagworks Boagworld