Practical Ecommerce

5 Ecommerce Site Design Trends for 2016

In 2016, ecommerce websites may start to look a lot more alike as designers use a similar set of user interface design patterns, employ cards and card-like layouts, and even use similar ways to get new email subscribers.

Often changes in site design are the result of changes in site usage. In 2016, mobile site use is driving nearly every trend on this list. Design patterns are providing shoppers with similar and convenient shopping experiences. Card layouts work as well on a smartphone as they do on a large screen, and even dynamic content may improve experiences across devices.

1. Common User Interface Design Patterns

In software development, and by extension ecommerce site design and development, a design pattern is a reusable solution to a common problem. User interface design patterns, more specifically, are possible solutions to common user interface challenges, like how to make a navigation menu that is easy to use on a smartphone.

In the past few years, site designers have been settling, in a sense, on several widely used design patterns. This is particularly true for responsive designs displayed on smartphones or for sites that rely on CSS frameworks like Bootstrap or Foundation.

This trend toward design pattern continuity could have two possible impacts on ecommerce site design.

First, sites may start to look a lot alike. Page designs will be variations on a theme, not dramatically different layouts.

Second, shoppers may find that the similarities between ecommerce sites make them easier to use and navigate. Following these patterns may make for a better shopping experience, particularly on mobile devices.

Notice that several common user interface design patterns can be seen on each site.

Several common user interface design patterns can be seen on each site.

As an example of this trend, look on a smartphone at the ecommerce websites in the image above: Chuck Levin’s, an online music store; Collared Greens, a clothing store; and Di Bruno Bros., a gourmet food store. Notice that each site places a “hamburger” menu, featuring three horizontal lines at the top of the interface. Each site has a search in the header behind a magnifying glass icon, and each site has a shopping cart icon in the header. And all three sites show a graphic of a featured item.

In 2016, expect to see common user interface design patterns even more frequently.

2. Card and Card-like Layouts

In the website design vernacular, a “card” encapsulates images, text, and other resources associated with a single topic. Cards are a way of organizing different topics in a way that is at once pleasing to the eye and easy to use. Card layouts also lend themselves well to responsive designs.

Cards are, in fact, a design pattern as described above. This particular pattern is just starting to heat up, if you will, and could become much more prevalent in ecommerce design in 2016.

As background, cards and card layouts appear in a few different design guidelines, but their inclusion as a component in Google’s Material Design (and, therefore, in Android) may have helped this design pattern’s popularity.

Many ecommerce examples can be found. On the Lord & Taylor website, cards are used to featured categories or products.

On the Lord & Taylor website, cards are used to feature categories or products.

On the Lord & Taylor website, cards are used to feature categories or products.

In a similar way, Rejuvenation uses a card-like layout, featuring large product images, to organize its home page.

Rejuvenation uses a card-like layout, featuring large product images, to organize its home page.

Rejuvenation uses a card-like layout, featuring large product images, to organize its home page.

As a final example, Belk uses cards for various sale items.

Belk uses a card layout to promote sales.

Belk uses a card layout to promote sales.

3. Pop-ups and Interruption Merchandising

So-called pop-up advertising was, perhaps, one of the most hated forms of online promotion ever. The first pop-ups, in the 1990s, opened new browser windows with ads or even whole websites in them. Many pop-ups were deceptive. Consumers generally hated these ads. Pop-up blocking services became common and, before long, web browsers were blocking these disruptive ads too.

Interestingly, this sort of interruption marketing is making a comeback in website design. In its present form, the pop-up is a modal, typically offering a discount in exchange for joining an email list or following the site’s various social media profiles.

The Ann Taylor site is just one example of a large, omni-channel retailer using modals on site to promote email subscriptions.

The Ann Taylor site is just one example of a large, omni-channel retailer using modals on-site to promote email subscriptions.

The driver is the fact that email marketing is one of the most powerful tools available to online sellers. Marketers understand that if they can get more email subscribers, they can get more sales. Thus, they use any means, seemingly, to attract subscribers.

In 2016, these pop-ups will become so common that perhaps as many as a third of the National Retail Federation’s top retailers will use them. Marketers will be selective though. Pop-ups probably won’t show up every time you visit the site. In some cases, you will have to take some action, like scrolling, to display the modal.

Big Lots also uses a pop-up to promote email subscriptions.

Big Lots also uses a pop-up to promote email subscriptions.

4. Large Photography and Videos

“A picture is worth a thousand words,” and a video might be worth a few million words. In 2016, ecommerce sites will feature large pictures and an increasing number of videos. What’s more, designers and developers will optimize how these rich materials are delivered to boost site performance on all platforms.

You do not need to look too far to see examples of big pictures on ecommerce sites. Open the Best Made site and you are greeted with a full-wide lifestyle photo.

Best Made features a massive lifestyle photo on its home page.

Best Made features a massive lifestyle photo on its home page.

5. Dynamic Views

Many, if not most, online stores display products or lists of products that are static, meaning they are laid out on the server and delivered to the user’s web browser. When the shopper makes a change to an option or filter, the browser contacts the server and gets a new static page.

Watch for this to change in 2016, as more sites begin to use dynamic views that rely on JavaScript and Ajax. To see a compelling example of this, visit the JadoPado site and search for something. Notice that with each new keystroke, the products displayed on the page change dynamically.

JadoPado's site search is dynamic and easy to use.

JadoPado’s site search is dynamic and easy to use.

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Get the Practical Ecommerce RSS feed

Comments ( 12 )

  1. Scott Lindberg November 10, 2015 Reply

    Great article, thanks. However, here’s an example of how the latest greatest functionality is the kiss of death if it’s broken: on the jadopado site, the word “dogs” in the pet section links to https://uae.jadopado.com/new which is the page for all new products, not just dog or even pet products. And a search for “aquarium filter” brings up food processors (Bass-o-Matic anyone?). And why does it think I’m in the United Arab Emirates? Usability is king.

    • Armando Roggio November 10, 2015 Reply

      Scott, I am pleased you liked the post. The query “dogs” works for me. For “aquarium filter,” the trouble is not the search, but that the site does not have any aquarium filters, search was showing you results with the word “filter.” If you search for “aquarium” you will see results for just aquariums.

  2. Ivan Burmistrov November 12, 2015 Reply

    Do you understand that popups, background photos/videos and dynamic views are wrong trends that harm usability and conversion?..

    • Armando Roggio November 14, 2015 Reply

      Ivan, thank you for the comment.

      I certainly respect your expertise in usability. I humbly disagree regarding dynamic views.

      I believe the JadoPado implementation of Algoria search is more usable than most (all) of the other ecommerce site search solutions I have tried.

      Perhaps, what I should have made more clear in the article is that dynamic views are used when the user will be interacting with the page content in some significant way. Not on every page of a site.

      Old Navy and Gap, both use a dynamic view for checkout, which provides the user with a more responsive interface than what you might get if you had to reload the page every time a quantity or option is changed.

      Finally, take a look at https://www.madewithangular.com/#/. I feel like all of these sites are improving usability with dynamic views.

      Thanks.

  3. ranga November 13, 2015 Reply

    The popups in the new form are annoying & in many cases the close option is impossible to see.

    • Armando Roggio November 14, 2015 Reply

      Ranga, I do not disagree with you.

      I looked at more than 200 websites in preparation for this article. These sites represented many of the largest and most design-forward online retailers in the United States.

      More than a third had a modal pop (most with a hard to find close option).

  4. Technocrab November 19, 2015 Reply

    The card like layouts has been seen many times. But I did not know about other trends. So thanks for giving this information. Please keep posting about web design.

  5. On Tap Growth December 23, 2015 Reply

    In 2016, We will see responsive ecommerce store plus companion mobile app to boost profits and connect to potential buyers. We will also see Augmented Reality coming to picture to change the entire buying experience to purchase through smartphone. Please browse this ecommerce solution which can help any retailers to increase sales and profits – http://innomindtech.com/ecommerce-services/

  6. IMT December 28, 2015 Reply

    In 2016, We will see responsive ecommerce store plus companion mobile app to boost profits and connect to potential buyers. We will also see Augmented Reality coming to picture to change the entire buying experience to purchase through smartphone. Please browse this ecommerce solution which can help any retailers to increase sales and profits – http://innomindtech.com/ecommerce-services/

  7. Tarun Roy February 18, 2016 Reply

    First of all, I would like to thank you for sharing some effective points through this article. Yes, it is right that eCommerce is the new face of today’s business, and you have to do something unique to attract more people towards your website. So, I think, no matter what you do to improve the look and feel of your website, it must be able to create some effective difference, and otherwise you have to wait in the queue. I would like to know your opinion on this blog as well: http://weavers-web.com/trends-that-can-influence-the-ecommerce-industry-in-2016/

  8. MArlin Doe July 20, 2016 Reply

    Thanks a lot for sharing these just amazing website design for ecommerce website. This is just what I was searching for. Thanks a lot. Being in the same business you might wish to have a look at our portfolio designs at

  9. jessica November 19, 2016 Reply

    i found best way of creation of website with valuable CMS functionality. currently am doing service for school website design uk based and i am looking about best designing features. it more valuable to design my site and for career steps. keep share more information for us.