Practical Ecommerce

6 Web Design Trends for 2016

Editor’s Note: This article was originally published by Web Marketing Today. Practical Ecommerce acquired Web Marketing Today in 2012. In 2016, we merged the two sites, leaving Practical Ecommerce as the successor.

Web design trends are never static but change constantly. Here are six new trends that you can expect to see in 2016.

1. Death of the Rotating Banner

Many websites have utilized rotating banners over the past few years as a way to provide imagery, movement, and content on a home page while not overwhelming users with too much material on their first view. It is becoming more apparent, however, that people don’t notice the banners and will, consequently, skip the content.

Studies show that a phenomenon known as “banner blindness” has developed in most users as a result of the saturation of online advertising. Expect to see these banners replaced by full-screen backgrounds or videos that focus on providing general context to visitors instead of trying to communicate specific information.

Expect to see rotating banners replaced by full-screen backgrounds or video.

Expect to see rotating banners replaced by full-screen backgrounds or video.

2. Blending Mobile and Desktop Patterns

Many companies spent this past year rolling out responsive websites to ensure users had a consistent experience on desktops, tablets, and mobile devices. If 2015 was the year of mobile growth, 2016 will be the year of blending elements typically seen on mobile devices with desktop designs.

This trend has already begun to appear on DIY web design platforms like Squarespace, through its use of the traditionally mobile-only navigation method known as the “hamburger” menu, which references a menu icon with three horizontal lines. This technique can be useful if your goal is to drive people to a small set of pages while all additional pages are secondary.

Squarespace uses mobile navigation on both desktop and mobile versions.

Squarespace uses mobile navigation on both desktop and mobile versions.

It can also be risky, however, as studies show that some users don’t recognize the hamburger icon as a menu button. You can fix that by adding the word “Menu,” making the icon’s purpose more readily apparent.

3. Long Scrolling

The term “above-the-fold” is a holdover from the newspaper industry to indicate the content that is visible without opening the paper.

This concept has dominated web design for years, but with the advent of responsive web design, many are ignoring this caution in favor of sites that require scrolling.

The Mac Pro site uses long scrolling. Arrow indicates there is more content to view.

The Mac Pro site uses long scrolling. An animated arrow indicates there is more content to view.

Long scrolling sites have become especially popular due to the emergence of countless WordPress themes designed with one-page use in mind. Unfortunately, it is not a concept that we can abandon just yet.

While site visitors will scroll to see more content, they need a compelling reason to do so. This means using a design element or storytelling device to indicate that more information is available below the fold.

(It’s worth noting that a study by Nielsen Norman Group showed that elements above the fold were viewed 102 percent more than the elements just below the fold.)

4. Animations and Micro-interactions

After the drop in usage of Flash on many websites, designers began to seek ways to continue the practice of animations.

CSS has evolved, so many Flash-only animations have become cross-browser supported in CSS3. These small animations paved the way for designers to include more “micro-interactions” on their websites.

Micro-interactions are small actions that a website visitor starts, which triggers an animation or movement that provides feedback to the user. Examples of micro-interactions include a signup form that changes colors to indicate the strength of a password or a paragraph of text that expands when clicking the word “more.”

This signup form uses micro-interactions to indicate password strength.

This signup form uses micro-interactions to indicate password strength.

Many websites have added these types of elements to help users interact with the site and gain better feedback on their actions. Expect more designers to start finding ways to bring animations and interactions into websites, now that it is easier to do.

5. Cookie-cutter Design

One negative trend, brought about by the spread of low-cost templates, is sites that look remarkably similar to each other, except for differences in colors and graphics.

For example, having a large “hero” image (a large banner image, prominently placed on a web page) and three smaller features, located beneath the image, have become standard on so many sites that these patterns are beginning to lose their effectiveness.

Cookie-cutter design themes have lost their effectiveness.

Cookie-cutter design themes have lost their effectiveness.

To stand out visually, many sites have adopted the use of either a full-screen hero image or video background, but it can be very easy to confuse a given site with others that utilize the same technique.

As such, design your site in a way that you don’t fall victim to similar patterns being used over and over.

6. Deeper Focus on Content

Businesses are finding ways to bring quality content to the forefront, to drive engagement.

Not only are companies developing more text content for people to read but are also focusing on content that users seek out, such as “explainer” videos, which demonstrate how to best use their products. Other forms of content include whitepapers, case studies, infographics, research studies, and, in the example below, recipes.

Tabasco includes recipes on its site, to increase loyalty.

Tabasco includes recipes on its site, to increase loyalty.

The ultimate goal is to provide users with information that they are already looking for, to increase brand loyalty and affinity. This also means that website design will need to adjust to provide better reading experiences through the use of larger type or the creation of landing pages where users can request content.

Daniel Kedinger
Daniel Kedinger
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comments ( 8 )

  1. Carlos Rivera January 19, 2016 Reply

    I really enjoyed this article, and I agree with many of your points! Never thought the day would come where hero images and three images below becomes bland, but it is true.

    • Daniel Kedinger January 19, 2016 Reply

      Thanks! I think the hero image and promo images has worked so well that it has just become commonplace and people don’t notice them anymore. It is a common issue we see in design called “banner-blindness” in which people start to visually ignore information because they feel it is an ad or non-critical information.

  2. Bob Meetin January 20, 2016 Reply

    I don’t think I”m entirely alone in recognizing that using a “hamburger” menu on both desktop and smaller devices can be annoying. In addition to having to recognize it, it adds another action that the visitor must take to do something, i.e. another hop. Web developers tend to be intrigured by new gadgets. Sometimes this gadgets take the design community by storm simply because they’re new, not because they are provide good usability. Many design shops follow bad trends out of fear of falling behind without thinking about the effects on the visitor.

    Nauseating – that is the term I use for some really annoying trends, like moving backgrounds with content layered on top.

    Is the website about the designer’s ego or the business owner’s needs and his/her visitors?

    Regarding Cookie Cutter Design, first of all I agree 100% with the point about the Rotating Banner. At first I found them intriguing and fun, but looking at it from the perspective of the visitor and business owner, ultimately ineffective and perhaps even counter-effective.

    With them out of the picture it reduces some of the options for the home page intro/banner. If the business has 3 primary focus areas then it makes sense to display some sort of arrangement of 3 spotlights and really there are only so many ways you can make this happen. Tasteful but not annoying interactions can help. However, there is a little too much “lazy” amongst us. Grab a theme and plug in the new content and set it loose because it’s easy – and in some case you don’t need much/any design/development skills to make it happen.

    • Daniel Kedinger January 22, 2016 Reply

      Thanks for the comment Bob. I mostly agree with you on the hamburger menu. I think that design patterns start to emerge and people latch on to them but ultimately users need much more time develop muscle memory for those patterns. I think blending mobile and desktop interfaces is going to be a fact of life in web design for a long time, but the hamburger isn’t necessarily the end all to menu interfaces

      I think templates have been great for many people who are just getting started online. In some ways these cookie cutter themes worked, but they have become so standard that people are starting to visually ignore those elements that are too similar to every other site they have seen.

      Thanks again for your comment.

  3. Deon Christie January 24, 2016 Reply

    A lot to take in, but excellent post. Thanks for sharing such useful content…

    • Daniel Kedinger February 2, 2016 Reply

      Thanks Deon and glad you enjoyed it.

  4. Rskeats February 5, 2016 Reply

    How about that annoying menu on this very site “navigationborder” that sticks to the top of browser when scrolling down.

    Every website seems to be doing that since late last year followed by menus that popout irriate upon hover no click required and I have to adblock the elements as well as auto suggest/complete.

    Ebay, Amazon and yesterday Linkedin. All designed in yer face like the user is somewhat stupid and confused and can’t navigate that they need it put in front of them.

    I don’t normally use Adblock to block the adverts but now I have to use it to block the annoying elements like that. It appears that these tactics most of which I have seen used in the past by aggressive advertising companies are now beng employed by the web designers themselves but to display the ordinary content.

  5. Shyamala June 2, 2016 Reply

    The parallax resign makes the credit for long scrolling with interest what to be next, Using parallax with long scrolling is not a boring one.

Email Newsletter Signup

Sign up to receive EcommerceNotes, our acclaimed email newsletter.
And receive a free copy of our ebook
50 Great Ecommerce Ideas