Some web design trends catch on for the right reasons: because they improve usability or the overall experience of a website. Unfortunately, that’s not true for the vast majority of cases and most trends become popular for all the wrong reasons.
The worst part about bad design trends isn’t anything to do with the visuals – they often look great. It’s how bad design trends affect performance and cause website localisation issues further down the road that’s the problem. Here are some common examples you’ll see all over the web.
Yes, they often look the part but they slow your site down and distract users from navigating to the more important parts of your site. Do you want them to read about your products or services or watch a video of your staff making a cuppa?
Aside from sluggish performance, you also have localisation to think about. The golden rule is if you use video, use local people, settings and themes to engage each audience individually. This involves programming to select from a variety of videos based on user location – all of which means more code and slower performance. There are cleaner, more effective ways to make an impression on users.
Parallax scrolling is perhaps the best/worst example of web design trends in recent years. Designers fell in love with the idea of creative, animated scrolling effects where objects move at a different speed to a background.
Companies created some pretty websites using this but nothing of any real substance. The real problem with parallax is that it simply doesn’t work on mobile devices, which, considering smartphones are the most common form of internet access around the world now, this doesn’t get you off to a very good start with localisation.
Loading screens have made an unwanted comeback in recent years, mostly because designers have been cramming too many fancy tricks like parallax into their sites. It’s one bad design trend leading to an even worse one.
Here’s the deal: if your site needs a loading screen, it’s too slow; it’s as simple as that. Besides, if you have an international audience to cater for, you need to be more resourceful with your code. Spend it on location detection and language selection so users can access your site in their language with the fewest number of clicks.
So you have a WordPress theme that promises support for 65 different languages – you’re ready to take on the world, right? Well, no. That simply means your content will be put through Google Translate or some other third-party API and come out the other end as complete gibberish in any language. That’s not a good way to convince overseas consumers you’re a serious firm worth doing business with. It’s essential to get your client facing content translated via humans if you want any chance of success.
Hidden navigations were born out of the transition to mobile. Unlike parallax design, this was a genuine solution to a difficult problem. Unfortunately, they also created a new problem altogether. Hidden navigations are, well… hidden, so you can’t guarantee users will find them.
There’s also the problem of this “hamburger” icon you see everywhere:
It turns out many people don’t understand what this symbol means – it’s always important to remember how symbols can be interpreted differently across countries and cultures. All this adds up to a lot of potential confusion over how to navigate your website, something you want to try to avoid.
Yes, hover effects look great when a user moves their mouse over parts of the page. A few changes of colour and some text reveals go a long way.
But how do you expect mobile users to hover over elements on their touchscreen? No colour changes for them unfortunately, and now they can’t even read the content you decided to hide. Whoops.
In defence of these design trends, none of them are inherently bad. It’s how designers have used (or overused) them that causes problems. Every design choice should be made with the end user in mind, not what’s trending at the time. This is important for any website but absolutely vital if you have multilingual/cultural audiences – each of which come with different expectations of how a website should function.