Logo Design

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 technology keeps expanding, so does a website’s need to keep improving.

See my blog post about when you know it’s time to update your website.

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!

1. 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/

Need more? Here is a usability study from Yale University. “Using full-width images on the home screen by comments users make such [on the Yale website] as “it makes me feel like Yale doesn’t want me to do my work.”

Nielsen Norman Group found that, even when a user was looking for a specific piece of content, they couldn’t find it because of an auto-forwarding carousel.

2. 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 for 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.

3. Obvious Stock Photos

You’ve seen them, right? It’s obvious! Those photos are used everywhere. It could be from iStockphoto or Unstock but they show up everywhere. I am not saying not to use stock photos. Heck! I must download 2-3 per day for my business and my customers.

I am saying to find unique photos and photos that might be more realistic. Even better, try to hire your own photographer for branded images. Below is an example of one of our customers, Howell Services, who was able to get a huge stash of photos that we can use for the blog posts we write and social media.

Unstock photos like Unspash.com and DeathToTheStockPhoto.com are becoming overly used now. Don’t get me wrong though. They are great photos and I have a small subscription to one of them. How can you tell they are being overused? For one reason, they are free which lends itself to thousands downloading them and another is that applications are pulling them into their software to use as background images or for easily assessable social media photos.

Here is my list of unstock photo sites.

Then there are the photos that just look, well, out of touch.

If you want a quick laugh see how Vince Vaughn lampooned them.

4. 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 progressed to a flat design. 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 better user experience.

Remember that “accessible design allows users of all abilities to navigate, understand, and use your UI (website) successfully.“
https://material.google.com/usability/accessibility.html

The Montere.it website uses a combination flat-design but it incorporates cues for the user like hover-effect and shading. This lets the user know that this is an active area and clickable.

The Bottomline? If you use flat design include some dimension so you don’t make things difficult for your users.

5. Hamburger menus are out

Yes, mobile design is important but please keep your mobile design on a mobile device. Many of us still use a desktop or a 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.

The Nielsen Norman Group goes 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.

More: https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/

6. Sidebars

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.

7. Stale typography.

With the growth of Google fonts, your options to utilize better typography has expanded. When I started years ago, you were limited to just a few fonts that you could as the actual text. If you wanted anything other than Arial, Helvetica, and Times New Roman you needed to create the text as an image. This wasn’t good for usability. For example, people with sight disabilities use special readers who cannot read or understand an actual image without an alternate text.

Having these great font options makes it a little 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 adding 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 the 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

8. Infinite scrolling web pages

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 is 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.

More information: https://www.webdesignerdepot.com/2015/11/how-infinite-scrolling-breaks-ux/

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, ultimately their customers, I’d still be stuck with animated gifs.

Read More