Be Careful About These Web Design Trends

Do Hamburger Menus, Parallax Scrolling, and Complex Typography help or hurt your website?

We all know that trends in website designs, like other trends, come and go. Sometimes trends are mandated by evolving technology (like responsive design for smart phones). Sometimes trends reflect shifts in the industry like the change to flat design.

Your web design decisions, especially if you design websites for small businesses should never be based only on what the popular sites are doing. A site solely designed on trends can quickly become passe.

Bearing these thoughts in mind, let’s look at some of the latest trends that you might want to reconsider using.

Placing All Navigation Under a Hamburger Menu

Smart Phones and other mobile devices are now part of the norm. And some designers started simplifying navigation and hiding it under a hamburger menu. While it may make sense on a phone, It’s a trend that’s also made its way onto the desktop version of websites.

We understand the appeal. Placing navigation under a hamburger menu can give your business website a cleaner, sleeker look, And most people recognize enough with the pattern. This isn’t something that works for every site and can reduce the depth your visitors access on your site.

This can be especially harmful to e-com sites, news sites or other websites where the ability to discover topics is critical to the experience. As explained in Web Design Trends 2015 & 2016, forcing users to open the navigation menu in this situation may create unnecessary friction.
On Time’s website, you’ll find a variety of news topics hidden in the hamburger menu. Time combats the discoverability issue with a ticker on the side of recent news stories. There’s also a search feature prominently atop the ticker.

Both writers Jennifer Cardello and Kathryn Whitenton pointed out:

“Even if the global navigation is difficult to design and hard to maintain, most sites will still be better off showing top-level categories to users right away. It’s simply one of the most effective ways of helping users quickly understand what the site is about.”

As they mention, here are a couple of tips to tell if hiding total site navigation is for you:

Very high bounce rates on your landing page. Most users won’t stick around if your website navigation isn’t obvious and easy to use. This makes it hard for them to browse the site.

Where users are actually clicking. Do they really click the hamburger menu? If not (and especially combined with high bounce rates), then you know something is not quite right. You can check the clicks with heat mapping tools from sites like CrazyEgg and Usability Tools.

In reality, user behavior determines whether you should use a hidden navigation drawer on a full desktop site. Don’t sacrifice usability and content discover-ability purely for aesthetic reasons.

Home Page or Landing Page Carousels

in 2016, sliders and carousels are evrywhere. Often times they can add visual interest and reduce clutter. But with their overwhelming use, they’ve made a lot of sites look like cookie cutter duplicates. Not to mention, there’s an argument that this is one trend we should put to rest so as not to hinder page loading times.

A few things to consider:

The lack of content means that it’s difficult to get all the meta information you need into a page. Of course, you can add word count below the carousel, in the body of the page.

Adversely affect performance. Very often carousels contain very high resolution images that are not optimized correctly. And because of that, they can slow down the load time of your home page. And your homepage should load as quickly as possible. Sliders also take advantage of JavaScript or jQuery, which can also add to poor performance headaches.

Pushes Content down below the fold. While above the fold content is perhaps not as important as it once was (we all know how to scroll in these times), it’s still not recommended by Google that you push content lower down the page. While the search giant’s recommendations are based on ad content above the fold, a carousel really doesn’t add much value to the user– it’s just pretty to look at.

Has the tendency to be inaccessible. Even the most robust frameworks in existence often are not able to fully solve the accessibility issues that surround carousels because there are so many to address.
More to this, a 2014 study showed that just 1% of people click on carousels. And many website viewers simply ignore them and don’t remember the content, due to the phenomenon is known as “banner blindness”.

But wait a second… This doesn’t mean that you should never use carousels at all in your designs. You should focus on having a valid reason to include them besides the fact that some clients like them. Carousels really can work, but they should be carefully designed and then optimized to ensure that they don’t compromise the user experience or site accessibility.
The sliding animation that drives carousels, as an example, can certainly be a useful tool for additional design elements. For instance, you might try adding a sliding menu drawer for your mobile viewport. As shown in the image below with the no-code animations editor, the sliding animation allows the user to hide it and reveal content as needed.

Unlike a carousel, a sliding animation won’t require a user to scroll through multiple frames. The content simply comes in and out of view as required.

Parallax Scrolling

We have all seen more sites utilizing parallax scrolling in recent years.

This technique allows the foreground and background content of a webpage to scroll at different speeds. This creates an illusion of depth. It can be used to very good effect, but it’s debatable if it can be described as having a solid user experience. ¬†This is especially true on mobile.

There are a few potential issues with parallax scrolling:

It may be bad for SEO. Many sites that utilize parallax scrolling tend to be made up of just one page. That means there’s usually not much content that can be crawled by the search engines. And this can be especially true with text that is embedded in graphics.

Because of the very heavy use of graphics and JavaScript, a page can get clogged up on initial loading. And load times on mobile tends to be extremely poor when parallax effects are used due to the necessity of a lot of JavaScript.

Can affect users negatively. One study carried out research on parallax effects and determined that while the parallax site was considered to be more enjoyable than non-parallax web sites, a few users experienced

“Motion sickness and experienced significant usability issues when interacting with the parallax website.”

But make no mistake, parallax scrolling can add additional dimensions to a business website design and allow it to stand out. As we listed above, there are trade-offs. And if your goal is to create a site that works on both desktop and mobile, then parallax probably is not the best solution for you.

And it can be, even if it’s a little cartoonish, very well done and can tell a story as you move down the page. This is the tru strength of parallax scrolling; it allows you to effectively tell a story with primarily graphical elements.

GTMetrix pointed out that the site should also, among other things, try to avoid character sets in the meta tag,

“The following resources have a character set specified in a meta tag. Specifying a character set in a meta tag disables the lookahead downloader in IE8. To improve resource download parallelization, move the character set to the HTTP Content-Type response header.”

Some additional tips include:

Defer parsing of JavaScript so as to help reduce “blocking of page rendering”.

YSlow also recommends that a website should minify CSS and JavaScript where possible. Many sites would also benefit from the use of a CDN

If you’re contemplating creating a website with parallax features, you might ask yourself if the story you want to tell is worth the potenail loss of visitors due to a reduction in performance. Parallax effects need to be done correctly and must have the ability to capture and hold the attention of your site visitor.

Complex Load Screens

Remember back then when you might hit a website only to be greeted with a Flash animated load screen that you were forced to sit through before you could enter a site? Users will bolt from a site that takes greater than 10 seconds, and could affect your bottom line.

Too Much JavaScript

Do a good proportion of WordPress plugins from a UX perspective, however, JavaScript can slow down a good site. And like we said earlier, users won’t stick around if a site is too slow.

JavaScript can be highly functional in that it can be used for many things that other languages can’t. It can help you create great load screens, for example, and other styling elements such as sliders, adding functionality.

JavaScript can be found in many of the modern libraries and frameworks for instance Angular.js, Backbone.js, and Knockout.js. The latter is an MVVM (Model-View-View) framework which is written entirely in JavaScript.

There are numerous reasons that over using JavaScript can hurt your site and these include:

Load times. This is due to plugins and sliders that create lots of different JavaScript files and CSS. It’s far more efficient to ensure that they all load from one file (of each type) by minifying.
Mobile browsing is adversely affected. This is due to load speeds.

Easily affects functionality and ‘breaks’ parts of a site due to a bug. You can learn more about bugs and how to avoid and fix them using web resources such as PluralSight.

JavaScript, like many web languages/scripts, can be exploited if it’s improperly implemented. This is often because it calls to other sites in order to make it work properly (think social plugins).
SEO, JavaScript isn’t crawled by search engines and so if your site has a lot then you may miss out on some keyword rankings.

Be judicious with your use of JavaScript.

If you use it with your responsive site, you’ll only want to load the script you’ll actually need on a mobile device. JavaScript doesn’t always render well on mobile devices, which can clog up the speed of your page load. You should also use web fonts for social follow icons on your site in order to reduce JavaScript and check out how much is used in any other plugins that you use.

Now don’t get us wrong– there’s nothing wrong with JavaScript as a whole. It has a lot of great uses and allows us to do some nifty things on the web. However, you should reduce the amount of JavaScript you use to make sure that it doesn’t make your site painful to view on a mobile device.

Complex Typography

While you can use multiple typefaces, I generally wouldn’t recommend greater than two.

Several typefaces create a confusing and cluttered looking site, which reduces legibility and readability.
Rules are made to be broken and there’s nothing to say that you can’t use more than two typefaces to good effect.

Here’re a few tips:

Try out fonts. Aim for clean and clear presentation that also reflects the brand’s visual style.

Stick to fonts and typefaces that complement each other or are different enough to provide an interesting contrast. Consider too what the font/typeface says to the user on a psychological level. People have similar responses to certain fonts as they do to colors. Believe it or not, emotions and feelings are also tied to typography. A serif has an air of formality. A sans-serif feels reliable. A script can be haughty.

If you want your business to be seen as traditional, go with a serif. If you want it to be taken stable, a sans-serif is your best choice.

Good Designers Are Good Skeptics

Some fantastic trends have emerged as best practices recently.

Minimalism inspired a raft of sites that are clean, fast and easy-to-use. Meanwhile, responsive web design helps many businesses worry less about designing for a constant stream of new devices. Good trends come along and tend to stick, but there will always be some that are ill thought out.

Above all else, user needs must inform your design the most. When a new trend pops up, always consider it from every angle before following the crowd.

For advice on the 10 most useful web design trends, check out the free e-book Web Design Trends 2015 and 2016. The book includes 100 resources and analysis of 166 examples from companies like Google, Apple, Reebok, Intercom, Adidas, Dropbox, and others.