Top 10 Web-Design Mistakes of 2021 [VIDEO 21:00]

See Top 10 Web-Design Mistakes of 2021 [VIDEO 21:00] on youtube.com/@NNgroup/

The other day I came across this video on web design mistakes in 2021 by Jakob Neilsen of the Neilsen Norman Group. This is an update on their previous top mistakes, which are:

• 2016
• 2011
• 2005
• 2003
• 2002
• 1999 and
• 1996

I plan on looking through these lists to see what’s changed since it stretches all the way back to 1996. For now though, let’s see what the mistakes are now.

Why UX Sucks

He claims that it’s because of three things: stupid, evil and lazy.

• Evil is intentionally bad, like making it easy to sign up yet difficult to cancel. These aren’t mistakes since they’re intentional.
• Stupid are mistakes from ignorance.
• Lazy is for sites which couldn’t bother to adress issues.

The later two fall under mistakes, though going through the list, some of the “mistakes” can be classified as evil.

The List

To be included in the list, issues have to be harmful and prevalent. Now for the items and my thoughts on them.

1. Mobile design on big screens. The opposite used to be a problem, but now websites are overly optimized for mobile. Looking at you GitHub when you hide functionality on narrow screens. Not the worst thing in the world, but should be improved on.
2. Only a huge hero image above the fold. It’s kinda hard for people to tell if there’s more content you can scroll to. I plan on doing something similar on my site so I’ll need to figure out how.
3. Layout shit on load. Suprised this isn’t higher on the list given how prevalent it is. It can be quite tricky to fix given how developers insist on using JavaScript to do many things which ignore things browsers have considered. We really need progressive enhancement to make a comeback. It doesn’t matter how ugly the site is as long as I can do what needs to be done.
4. Icons without labels. It’s annoying trying to figure out what they mean. I’ll extend this to web accessibility where missing labels render a site unusable.
5. No copy-paste. Looking at you, Facebook Mobile. There are many good reasons to copy-paste text and very few reasons not to allow it¹. I’m scared this will get worse if Flutter gets hold because it’s basically an app in a <canvas>. If disabling copy-paste is to prevent piracy, lol.
6. Inflexible input. This is a big problem, but it’s rather tricky to fix though it’s possible. It would be best to anticipate all the ways a user could enter data and accomodate it. Trim leading white space at the least.
7. Low contrast or small text. Designers who insist on doing this should be banished to the nether realm. Honestly, there’s no reason to do this. You can be minimalist with proper contrast you know?²
8. Misleading links and expectations. I always try to mention if a link is in a different format (like a video with length or a PDF file with size) because it can be annoying to reach a link that uses a lot of data while you’re on a cell plan.
9. Slow response time. Thanks bad framework users! You’ve somehow manage to erase the gains from hardware.
10. Popups/overlays. I totally called it! It’s annoying when you get banner after banner whether it’s for cookies, a promotion or a newletter, it’s too much. More points for particularly misleading overlays which nudge you to what you want. Then again, some say they get higher conversions from doing this, so I’ll classify this as evil. Still, it’s easy for these to get way out of hand.

In all, I mostly agree with this list. Given the insistence on developing sites in a particular way, developers overlook what the browser³ does resulting in most of these issues like slow response times and layout shift. The only thing I’d add is autoplay because most news sites insist on it. It’s so bad that I have to DNS block the video hosts just to prevent autoplay. Then again, this probably falls under evil.

Conclusion and Why These Mistakes Happen

The most inciteful part is the final comment trying to explain why these mistakes happen (paraphrased).

I think that’s one thing that kind of explains why we have all these design mistakes is arrogance.

Arrogance on the side of the website, saying “I am important. I, the website am important. You, the users, the paying customers, are just scum. You don’t matter. You know, you’re unimportant. You’re gonna take it the way we wanna do it.”

And that arrogance really undermines or lowers the pleasantness, the usability and the value actually of the web.

Honestly, I agree with this. Modern web development can really fall into the trap of prioritizing developer experience so much even when it comes to the detrement of user experience. Yeah, this site takes a minute to load, but this framework has everything and the kitchen sink which we need so that I can give a cool tech talk spice up my resume my startup survives.

He then sites this short poem:

His interpretation is that:

• users won’t tell you if your site is shit, they just leave.
• they don’t care why you do something, if they can’t get what they want they leave and
• as a results your site just dies.

One thing I’m optimistic about is that framework developers understand the UX issues and are working to address them.

As I said, I plan on looking at the lists of the previous years and commenting on them. While many things have been fixed, some issues from 30 years ago are still there. Stay tuned to read about that.