Website Design

11 Design Trends & Habits You Need to Nix Before 2017

Joe Rinaldi

Designer, HubSpot Design & GDD Certified, Designer for 70+ Sites for HubSpot and Various CMSs

About |

  • Connect:
11 Design Trends & Habits You Need to Nix Before 2017 Blog Feature

Published on December 26th, 2016

Print this Page/Save it as a PDF

Trends are a funny thing. When they are at their height of popularity, nobody questions whether or not they makes sense. Everyone’s just doing it so it can’t be that crazy, right?

It’s when a trend starts to become stale that people think twice.

A perfect example from my childhood was POGs.

My friends and I went crazy collecting the circular pieces of cardboard, but it wasn’t until months into the trend that we realized we didn’t really have any idea of what we were supposed to do with them (they turned out to be game pieces by the way).

Needless to say we eventually got bored of them and moved on to the next big thing. The web works in the same way.

When it comes to implementing a new web design trend, companies tend to overlook some of the more important details, like its effect on usability for example.

So, as 2016 comes to a close, we decided to look at some of the years biggest conversion killing web design trends that should be on their way out before the new year:

1. The Use of Flash

I’m going to kick this list off with what most people would probably consider the king?...queen?...Emperor of Dying Trends -- Flash Media content.

Flash is one of those trends that took the industry by storm years ago and gave people the ability to create nifty animations and games for the web that, at the time, were pretty cutting-edge.

However, when the honeymoon phase ended, Flash’s major flaws became more apparent to users.

Flash became a notorious security risk within enterprise companies and its software also required constant updating due to bugs and glitches.

The once-industry leader has been on its way out since about 2010 when Steve Jobs denounced it in his “Thoughts on Flash” letter and blocked the software on all Apple devices.

Then, most recently, Google put the final stake in the coffin by announcing it would begin blocking Adobe Flash Player content on Chrome and defaulting to HTML5.

So what does that mean? An article written by The Verge, said “unless a website has an HTML5 content player, video content will not automatically display. All Flash content will be blocked, unless users manually enable it on a site-by-site basis.”

If you’re one of the few with content still lingering in a Flash player format, look into making the switch to an HTML5 player.

cnet-flash.png

2. Desktop Hamburger Menus

There’s a time and place for everything.

Take ponytails for example. A ponytail on the backside of a horse -- perfectly fine. On the backside of my dad’s head -- not ok. The same applies for hamburger menus.

These menus appeared when the rise of mobile browsing created a need for designers to simplify elements, like navigation menus, to save screen real estate on mobile phones.

When done correctly on mobile, this simple icon helps reduce clutter and keep user’s attention focused on a page’s content, but still keep essential links nearby.

With the “mobile first” mindset becoming a popular trend amongst designers, however, we’re starting to see the hamburger menu being implemented onto desktop sites.

This is where the “time and place” argument comes into play.

With more screen real estate on desktop, there’s no need to hide your navigation.

Desktop hamburger menus add an unnecessary step to the process of finding the information they need, creating friction. Assuming your users are going to notice the small icon on your site and know how to interact with it is always a gamble when it comes to a desktop user’s journey.

time-hamburger.png

In fact, a study done by the Nielsen Norman Group found that people presented with a hamburger menus used it only 27% of the time, while those presented with a visible menu used it 48% of the time.

3. Homepage Hero Carousels

C’mon people, really?! If any of you have tuned in to our Website Throwdown,  you know that one of the most frequently repeated pieces of advice is “DITCH THE CAROUSEL.”

Seriously though. Your users will thank you. If you still need some convincing visit www.shouldiuseacarousel.com.

4. JavaScript Overkill

Almost all of the sites you visit on an average day contain some sort of JavaScript.

It’s everywhere -- the social media plugins you embed, the WordPress plugin you just installed, that pop-up offer on your site.

It’s an incredibly powerful and versatile tool, but it can be easy to go overboard.

We’ve all been to that site that just had too much going on; social media sharing popping up, a chat option in the corner, images and text are fading in as you scroll. Something this busy is a strain on the eyes and creates a negative user experience.

Another thing about pages with too much JavaScript is that they take FOREVER to load.

The typical visitor expects a webpage to load in two seconds, and after three seconds 40% of visitors will abandon your site -- so be cautious.

Don’t get me wrong, there’s nothing wrong with JavaScript in general; Just be smart with your use of it.

When using it, take advantage of page performance tools such as Pingdom or Google’s PageSpeed Insights to make sure your loading times don’t get bogged down.

5. The Use of Lorem Ipsum

If you’re in marketing, you’ve heard the saying “Content is king.” You probably even mutter those words in your sleep.

But if content is truly king, it should never be left for the last stage of design. Content is the backbone of a page and needs to be developed alongside of a page’s design.

Using lorem ipsum in lieu of content enforces the idea that content is an afterthought. This type of mindset leads to the creation of mediocre content that won’t fully resonate with visitors or even a design that is misaligned with the content.

Using realistic content earlier in the design process also saves you time and resources when it comes to revisions.

What happens when you design a layout to perfectly fit lorem ipsum text, and then the actual content you receive is too long? You end up spending additional time adjusting your design to fit the new text. As a designer, I know this problem far too well.

When it comes to embracing a content-first approach, remember that you don’t need perfect content in the early stages, you just need something better than Latin gibberish.

Liam King suggests using these 3 tactics to get your proto-content started:

  • Design with the current site’s content. If you’re redesigning a website, the old site’s content will be a much better placeholder than meaningless lorem ipsum.
  • Write your own content. This takes a little longer, but you should understand a project enough to get a couple paragraphs of proto-content written. A professional copywriter or the content lead on your team can edit the text later on.
  • Design with Competitor Content. If you’re not up for writing your own content, try borrowing some from a competitor's site. It will give you something quick to work with, and give you an idea for how they designed for a similar problem.

6. The “Dribbblisation” of Design

The term “Dribbblisation” comes from an article written by Paul Adams, VP of Product at Intercom.

In his article, he describes the effect social networks, such as Dribbble (a social network where designers can share, like, and comment on each other’s work), have on design in general. The term is used to describe the mindset of designing for peer approval versus designing to solve a project's specific goals, which as marketers, we know can be trouble in the long-run.  

Design communities are powerful resources for inspiration, feedback, and networking with fellow designers, but it’s also easy to get drunk on peer likes and positive comments which can lead to clouded judgement of what’s really right for the project at hand.

Designers need to remind themselves that, depending on the industry, the most effective solutions aren’t always the sexiest. They might not match the “flat” design style and vibrant colors that we’re accustomed to on Dribbble, but in the end, they deliver the most results.

When posting on design communities, designers should get into the habit of describing the problem their design solved for in the project details. This will help keep project goals front of mind and enable peers to offer more effective feedback.

7. Large Background Videos

In 2015, a lot of popular brands began showcasing background videos on their sites.

Since then, the trend has begun to slow down and some companies, like PayPal for example, have opted to switch back to a static background image.

From an aesthetic point of view, background videos look flashy and innovative, but from a UX standpoint you may be better off without them.

Here a few things to consider about background videos:

  • Effects on Site Load Times: A few seconds of added load time is enough to turn visitors away. There are tricks you can use to reduce the load time of a background video will add, but at the end of the day it will still take its toll.

  • Effects on Text Legibility: Written content placed on top of a video becomes tougher to read and digest. The movement of the video mixed with a static text color makes legibility inconsistent.

background-videos.gif

8. Squeezing All Content Above-The-Fold

Misconceptions about designing for above-the-fold is one of my biggest pet peeves.

The general theory is that we need to squeeze everything we possibly can above the fold because users won’t scroll, but this isn’t true -- at least, not anymore.

This is an outdated idea that’s been carried over from the early days of web design when users weren’t accustomed to scrolling.

Since then, the average user has evolved and scrolling has now become second nature.

Users are actually so used to scrolling that in 2011 Apple removed the scrollbar from Mac OS X (as a default setting) because users no longer needed the visual cue for it.

If people aren’t scrolling, chances are it’s because there’s not enough motivation to continue down a page, not because they don’t know how to.

Instead of focusing on whether or not a CTA or logos of companies you’ve worked with is in the first 600 pixels, focus on whether or not what you put first on a page is engaging enough to get people to continue.

9. Obnoxious Pop-ups

To pop-up or to not pop-up? That is the question that has many inbound marketers divided.

When done right, pop-ups deliver value to your visitors and increase conversions, but when done wrong, they can hurt your brand and scare visitors away for good.

There’s a number of pop-ups out there today that use bad practices and give all pop-ups a bad name. These pop-ups show up before a user even has a chance to interact with a page, are hard to close, and constantly come back on every single page.

Remember, an effective pop-up is supposed to be intuitive.

It should solve for visitors pain points and appear at just the right time. They shouldn’t berate your visitors with offers that aren’t relevant or constantly interrupt their experience on your site.

When it comes to pop-ups, keep the following tips in mind:

Track your pop-ups with cookies so you don’t show users the same one over and over again, even though they keep closing out the pop-up.

  • Make sure your pop-up has value, and isn’t just asking users for their contact information.
  • Make sure that pop-up content is relevant to where the visitor is in their user journey. Keep in mind the page they are currently on or actions they’ve taken.
  • Think carefully about the timing and placement of your pop-up. Many companies see a lot of success with the use of “exit intent.” These are pop-ups that re-engage with users as they are about to exit your site.

10. Too Much Stock Photography

When people visit your site they are looking for a real and unique experience with your company.

A company that uses too many stock photos, fails at this

People simply don’t connect with a photo of a professional stranger in finely-ironed suits holding an iPad. Users have developed blinders to these types of graphics and a study completed by Marketingexperiments even found that stock images get 34.7% lower click-through-rates than original alternatives.

Obviously, in a perfect world we would all have an endless library of original photos to choose from, but sadly that’s not the case. When you find yourself in a pinch for a photo, try using one of these tactics:

  • Make your own: This may not be a time-effective solution, but with tools like Canva creating your own artwork is easier than ever.
  • Edit and Tweak a stock photo: If you don’t have time to take your own photo, try to make an effort to tweak and personalize a stock one. Tweak the colors or add in text and new elements that are related to your company.

11. Going Overboard With Trends

It doesn’t matter what time of the year it is, a new web design trend is always on the rise.

A few years ago, for example, parallax scrolling was the big thing, then long shadow design took over.

Flash-forward to today and we’re seeing a lot card-based layouts and long-scrolling pages.

New trends like this are exciting, but they are also easy to go overboard with, setting you up for a major headache down the road.

When you work too many untested trends into your site and it then goes out of style (or worse stops generating leads, you’re left with a site that looks dated and doesn’t deliver results.

Remember, trends are just that -- trends.

Just like acid wash jeans, bowl cuts, and fanny packs, they’ll come and go and you don’t want to have wasted too much money or energy on them.

Save yourself the headache. When you see a new trend that piques your interest, test it out in small batches. Use a software, such as Hotjar or Optimizely to test variations and see how your buyer persona reacts. Then, use this data to turn a trend into a timeless solution for your visitors.

Conclusion

Trends are either created by necessity, such as hamburger menus for mobile browsing, or by industry shifts, like background videos. There’s nothing wrong with following a trend if it has purpose, but they should never be used excessively or without consideration for the user.

Start your 2017 off right and see if your site uses any of these dated trends. If so, review your sites analytics and data to determine whether or not these trends add value to the site, or if it’s time for them to go.

Evaluating and think it’s time for a website redesign? Talk to us!

Are there other design trends that you think are on their way out? Let us know in the comments below!

New Call-to-action