Tips for using current website trends.

Posted May 2, 2017 in by

Spring is here, and we’ve all done our fair share of spring-cleaning. Just last week I stood before my bedroom closet, feeling overwhelmed by the massive amounts of spring and summer clothing that had been sitting idle throughout our long Nebraska winter. I felt eager to dig out my favorite dresses, blouses and skirts. But of course, a new season means updated prints and patterns are waiting for purchase at the nearest department store. I wondered if it was time to update my wardrobe with trendy new outfits.

 

In the same way, each year digital design and development experiences new trends in design and user experience. Some stand the test of time, and some fade as quickly as they gained popularity. Any website update represents a significant investment in time and effort for your brand. It can be tempting to build a cutting-edge site that embraces the latest and greatest in web design; however, user experience should always remain at the center of your efforts. Here are some recent web design trends that can be tempting, just like those new department store styles, but should be used in moderation.

 

Trend 1: Hiding the menu in a hamburger.

No, I’m not making an Inception reference. 2017 is the year to ditch the hamburger menu, especially on desktop websites. With the rise of mobile-first design, website designers and strategists found ways to simplify the navigation by hiding it under an icon or drawer known as the hamburger menu. This trend started appearing first on mobile websites and apps and has since crept into the desktop versions of many websites.

 

It’s understandable why using this form of navigation is tempting. Using a hamburger menu makes the site look simple and clean. However, for many sites, specifically news, content and e-commerce sites, tucking all menu items into a collapsible drawer can cause unnecessary friction and can reduce discoverability. In the Nielsen Norman Group’s article “Killing off the Global Navigation: One Trend to Avoid,” they point out that the hamburger menu or drop-down navigation is a combination of mega menus on desktop and abbreviated global menus for mobile users and that major e-commerce sites like Amazon were the first to implement this design.

 

However popular these menus are, the article also stresses the risk to lower-level pages, such as product pages, that can become lost in stacked drop-down navigation. Web designers should never assume that users are familiar enough with their company to know every product and service and know to look for them in a long list of menu items.


This example from theguardian.com shows how overwhelming the topics in their navigation appear when gathered together under a hamburger menu. 

The reasons for ditching the hamburger extend to mobile usability as well. A post on justinmind.com reported that Spotify dropped the hamburger menu on their mobile after experiencing a 30 percent increase in navigation item clicks. And Facebook found that its mobile engagement metrics went up after dropping the burger; other metrics such as satisfaction, speed perception and revenue upticked as well.

This all makes a pretty strong case for skipping the disappearing menu act. But what can you do to still achieve the sleek and simple visual appeal of a hamburger menu? There are many options, such as tabbed global navigation, exploring 3-D touch menus on mobile, and various creative menu styles. Whichever option you select, it is crucial to test and optimize your menu, navigation and information architecture based on performance to achieve the best experience for the website user.

The exception?
Hamburger menus are still best used for mobile websites. They provide a solution to minimize the menu and allow more real estate for website content. Hamburger menus can also be used on desktop microsites or websites that have small, straightforward menus. The goal is to build a menu experience that allows the user to easily navigate the site and find the information they need to convert.

 

Trend 2: Parallax scrolling.

The parallax scroll is a website trend that has been making waves for several years now. Parallax describes a website effect where the background and foreground scroll at different speeds, which creates an illusion of depth. This visual effect significantly ups the “cool factor” of a website, but there are a few caveats for usability.

 

The first is SEO considerations. Many websites use parallax scrolling to add depth and motion to a one-page website. They house all of their content on a single, long scrolling page and use parallax to create an interactive element that uncovers and reveals sections of content as the user scrolls down the page. Having a one-page website presents a number of usability issues, but we’ll get to that—I promise.

 

The elements of on-page SEO are page title, meta description, keywords, content and other elements such as alt tags and URL. Creating a website that is just one page not only diminishes your SEO real estate to a single page, but it can create confusion for search engines to crawl and understand the content of your site if it is a single page that contains multiple messages. Parallax scroll functionality often includes the heavy use of graphics in the design and scrolling illusion. This can lead to a large amount of JavaScript on the site, which in true dominion fashion creates a headache for load times, especially on mobile. There are ways to combat slow load times, but nearly any site that utilizes parallax scrolling will experience slower load times than standard scrolling webpages.

 

Parallax scroll functionality often includes the heavy use of graphics in the design and scrolling illusion. This can lead to a large amount of JavaScript on the site, which in true dominion fashion creates a headache for load times, especially on mobile. There are ways to combat slow load times, but nearly any site that utilizes parallax scrolling will experience slower load times than standard scrolling webpages.

 

The exception?
Sure, parallax scrolling has its downfalls, but there are also positives. Parallax adds a dimension of storytelling to a website using movement and the scrolling interaction of the user. Web designers and developers have to determine how the message or story their webpage conveys can benefit from parallax and if that benefit is worth the risk of reduced performance in SEO and page speed.

The example above is from The Boat which tells an immersive story using parallax scrolling.

Trend 3: One-page design.

I admit, this trend sort of piggybacks on parallax scroll, but hear me out. The one-page website has grown in popularity over the past two years because of it’s simplicity and easy up-keep. However, housing a full website on one page is not always best for user experience.As discussed above, a one-page website negatively impacts the website’s ability to appear organically in search engine rankings. A one-page website can also fall victim to large page sizes and slow load times. Many one-page websites utilize graphics, parallax and animations to guide users down the page to more content. This increases the size of the page (which is likely already large due to the amount of content), slowing down the load time when a user lands on the page. We live in an age of speed and accessibility. Web users are not willing to wait for a page to load and will likely move on if required to wait longer than a few seconds.

 

As discussed above, a one-page website negatively impacts the website’s ability to appear organically in search engine rankings. A one-page website can also fall victim to large page sizes and slow load times. Many one-page websites utilize graphics, parallax and animations to guide users down the page to more content. This increases the size of the page (which is likely already large due to the amount of content), slowing down the load time when a user lands on the page. We live in an age of speed and accessibility. Web users are not willing to wait for a page to load and will likely move on if required to wait longer than a few seconds.

 

Lack of information architecture or hierarchy on one-page websites can lead to information overload for users. It can be difficult to structure the site correctly so that it is not overwhelming and your content is easy to find and navigate. Multipage sites allow deeper site structure where content and product pages are accessible to users who want to navigate further on specific subjects and take action when ready. Single-page websites also allow limited linking options so users almost always land at the top of the page, even when they’ve clicked on a link that is relevant to unique topic. This frustrates users and can increase your website’s bounce rate.

 

And finally, single-page websites offer fewer options for website analytics. Insights and performance metrics gathered from platforms like Google Analytics are key to optimizing and improving the performance of your website. Without multiple pages, it is difficult to understand user flow, drop-off points and opportunities for optimization.

 

The exception?
Using a single page to display all of the information and content on a website does make sense in some cases. For example, on a one-page microsite, there is less confusion or required action on the user end. Using one-page design also allows the web designer to control the flow of information, and the website’s message is conveyed entirely in one page.

This gym landing page is a great example of a one-page design website that tells a scrolling story but does not attempt to replace a full website with one page.

 

Website design is always unique to the goals and challenges of your business. Attempting to apply a new trend or design element to a site that does not support your website’s user experience will only add complication and confusion for the end user. If it doesn’t fit, don’t force it for fashion’s sake.

Prep for your next website project with this free e-book.

Website Planning Guide

Share on FacebookTweet about this on TwitterShare on LinkedInShare on RedditShare on Google+
Share.