As with anything, in the past year, web design trends have already changed. As we all keep updating our mobile devices with new technology, so does our idea of what constitutes good aesthetics and user interface. As the technology keeps expanding, so does a website’s need to keep improving.
With each new round of studies that consultants and developers do on how we best experience a website, what was cool and trendy last year is old, outdated, and downright useless this year.
Out with old and on to the new!
So what is the biggest change I’ve seen when it comes to web design these past few months?
These might surprise you!
Sliders with meaningless calls to action.
Keep it simple and to the point. Folks just don’t watch these anymore. It’s like white noise. Often times they scroll too fast that you miss the message. They can be so bad that only 1% of your visitors are actually clicking on them.
You lose valuable space here if this section keeps rotating. It’s the same issue that I talk about in my eBook, 8 Things You Can Do With Your Website Now To Improve Conversions.
A couple of things wrong with your slider: (1) too much happening and (2) no clear call to actions.
The website below had several images with a lot to say.
Illuminea had the right idea with their video on how sliders are bad for you: https://illuminea.com/sliders-bad-for-website-health/
Big, huge hero images.
On the flip side, a hero image is defined as “a large, featured image or series of images prominently displayed on the homepage.” The problem is, like all trends, they tend to take over and be the band aid. “Well, all I need is a super cool photo and a button.” But there is more to it than that.
I prefer to keep these hero images within the top section of your monitor but not take over the entire screen. Most of my clients even tell me to make these sections smaller. That was a big indicator to me. As designers, we love the imagery but from a user’s perspective, it pushes the important content further down.
Yes, you need a single goal and call to action but most companies are more than a single action. Spotify, Dropbox, Evernote have a single purpose for visitors.. get them to subscribe.
But a home contractor or pipeline company might have 2 – 3 goals for their website. Yes, focus on the primary and that should be represented your hero image but don’t forget the other 45% of traffic that might have a different purpose of being there.
This HR website, kinhr.com, did it right, keeping the call to actions minimal and in front of you. But they also let users know that there is more below the image by using the arrow.
Flat, boring graphics.
First, we had Geocities where every color of the rainbow was used. Then, in 2007, we had sites like The Food Network with its big buttons and 3D gradients and shadows.
To counteract this design overload, we the progressed to a flat design. A Flat design is a feature that was only meant to be used sparingly but somehow it caught on and spread to fill websites. The problem with a flat design is we couldn’t figure out what was a button. It all started to blend together and nothing gave you an indication that something was interactive. Microsoft took this to the extreme with Windows 8’s Metro.
Google established what is called ‘material design.’ A concept that incorporates a “three-dimensional environment containing light, material, and cast shadows.” As our technology from mobile devices and touch screens allow for more 3-dimensional interaction with a website, utilizing thickness and shadows allow for a better user experience.
Remember that “accessible design allows users of all abilities to navigate, understand, and use your UI (website) successfully.”
The Montere.it website uses a combination flat-design but it incorporate cues for the user like hover-effect and shading. This lets the user know that this is an active area and clickable.
Hamburger menus are out.
Yes, mobile design is important but please keep your mobile design on a mobile devise. Many of us still use a desktop or laptop to surf the internet. If I can’t find your menu because you hid it behind a hamburger menu, like any mystery navigation, you’ve already frustrated me.
Even for mobile devices, I prefer to include the word ‘Menu’ to make it very clear what this little button does when you touch it.
The Nielsen Norman Group go into much further detail about the effectiveness of hamburger menus. “Navigation on mobile (whether hidden under a menu or partially visible) takes a larger proportion of the screen space than on the desktop, simply because the screen is smaller. Thus, people are more likely to notice it and use it.”
Notice the Cnn.com website’s hamburger menu and the lost ‘Home’ link. CNN navigation is lost here as it confuses users with the ‘Home’ text.
Now this depends on the topic and the purpose of the page, but I’ve started removing sidebars on certain pages. I switch back and forth between them to watch the interaction. Blog posts tend to have sidebars to help traffic move between different topics. But I will remove sidebars from my specific service pages to focus the user on that topic scrolling down the page to learn more. The top menu and footer have enough distraction to get clients to visit other areas of my website.
Then I have internal links and buttons that might guide my users along a path that I have designated. A sidebar might take them away from that path.
Check out the FoxNews.com website. Talk about overkill. Do you really need the weather on your sidebar? It’s even showing New York weather. I am in Houston! Then they clutter it with 2 sidebars of content. No wonder news sites are struggling. Let’s not even go into the fact that their website is not responsive so the sidebars are not even visible on mobile devices.
In contrast, NBC news keeps it fairly simple. The issue though is that their related posts are clickbait.
Another reason that sidebars tend to lose their effectiveness is on mobile. Sidebars are moved to the bottom of the screen anyway.
With the growth of Google fonts, your options to utilize a better typography is limitless. I am not saying you need to have 10 different web fonts on your page, but you can go beyond the basic Arial, Helvetica, Times New Roman options. Makes it more fun and interesting.
Even Suzanne Collins, the Author of the Hunger Games, could use some help with a more varied use of typography. But, let’s be honest, there is a lot missing here.
But, be careful of not taking too many fonts on your website to the extreme as with this restaurant website.
In addition, you no longer have to rely on images with text because you want to use a specific font. This is good news for accessibility as well as content. The text below is all text but uses Google fonts as real text.
Here is a great history of typography on the web: https://instapage.com/blog/what-are-google-fonts
Actually, this is one feature I wish would go away. Call me old school but I like to go to a topic by clicking or touching a button or link and having it send me to that page. Scrolling to helpfully find what I need or clicking a menu item that all of a sudden sends me to the bottom of the page is disconcerting and tells me that you are lazy.
For god sake! Create a page for that content.
Another case of websites with infinite scrolling that never let users reach the footer. For example, the Onnit.com website (to left) kept scrolling and loading. I wondered if it would ever end. Talk about not having a purpose or goal.
Design Lessons Learned
A lesson learned from me is to listen to my customers who are website users. I can’t assume that my notion of great design cannot be challenged. yes, I’ve been building websites for 20 years but if I didn’t listen to my customers and their customers, I’d still be stuck with animated gifs.