Originally published at: https://community.envato.com/4-ecommerce-design-trends-that-will-make-your-conversion-rate-pop-in-2016/
Introduction
The beginning of any new year brings with it countless articles on web design trends, but deciphering which ones are worth paying attention to is difficult.
So, I’ve picked out the best ones that can help explode conversions and revenue for online shop owners. This article contains statistics, real-life situations, as well as the pros and cons of each trend that can effect an eCommerce website’s performance.
1. Lazy-loading
Infinite scrolling, auto-paging, auto-scrolling and other features like this are all about lazy-loading, which means that certain content only appears when users need it.Scenario
Let’s step into the shoes of a buyer. Imagine that you need to buy a smartphone as a New Years gift. You enter an online mobile phone store and scroll down continuously in the “smartphone” category until you find one that seems to match with your needs. From here, there are two possible scenarios that can arise:
- You find what you're looking for: You go directly to the shopping cart, then checkout, and submit your order. Hurrah!!! Your new smartphone is now being delivered to your house in 12 hours.
- You don't find what you're looking for: You go back to the top of the product category pageand have to scroll all the way down to where you were before. This is annoying and time-consuming. “Why do I have to go back to the beginning instead of going to where I left off?”. You just want to resume your searching process, while the shop owner wants you to start all over again.
Lazy-loading does speed up page’s loading time: By loading fewer resources in the initial request, you can bypass the need for customers refreshing web pages, waiting for content to load.
Lazy-loading makes perfect sense for photos and videos, unlike text, as they don’t hurt your web rankings.
Cons
Lazy-loading can degrade your site’s rankings on Google search:
Don’t get too fancy. Googlebot doesn’t crawl JavaScript, frames, DHTML, Flash, and Ajax content as well as good ol’ HTML.
Google hasn’t been forthcoming on how well or how much Googlebot parses JavaScript and Ajax. Since the jury is out — and opinions run the gamut — you’re probably best off not consigning most of your important site elements and/or content into Ajax/JavaScript.
Lazy loading uses AJAX, while Google search doesn’t. Therefore, Google’s search engine can’t index or search initial content on the page. Despite Google allowing AJAX content to be crawled, AJAX sites still have low rankings versus non-AJAX ones. Therefore, it takes much more effort and expense to maintain stable web rankings.
Takeaway
Remember that text is quick to render, while photos and videos are not. Furthermore, text is essential to your SEO rankings, so it should be easy to index. So you should try and be more selective when applying lazy-loading on your eCommerce website.
2. One-page design
One-page, or single product design is a really long webpage that aims toward a specific purpose that lists 1-3 products.Some users on Dribbble call it a “landing page”, but personally from the eCommerce perspective, I think that “one-page” or “single-product page” make more sense. The goal of this page is to sell a specific product, rather than to be a multipurpose landing page.
A great marketplace that uses a one-page design is OnePageLove. OnePageLove even has a category for eCommerce single-product pages.
On Dribbble, Eldin Heric uploaded a one-page website about potatoes (View his full shot here). This shot receive more than 60,000 views and 2,684 likes. His concept here is super simple: a one-page website that sells potatoes in 3 packages. Every section on this site represents the look as well as healthy facts about potatoes for customers.
Potato landing page by Eldin Heric
The aim of this Potato landing page is to sell 3 different potato packagesWe are also collecting best one-page eCommerce site designs from 441,000,000+ unfiltered Dribbble shots.
Another advantage of one-page design is that it’s great for storytelling. And storytelling does boost sales.Stories resonate because of how human brains function, cognitive neuroscientist (and Sperry’s student), Michael Gazzaniga has noted. Gazzaniga has researched the way our brains process stories - including how the left hemisphere fills in gaps for the right hemisphere. Our brains desire narrative continuity, which draws us to stories. We naturally want to fill in gaps of information that we need to know to process it.
Some pitfalls
First and foremost, a one-page site needs high-quality images and videos, which means that the shop owners need to put in a lot of time, effort, and expense in producing product graphics for their eCommerce website. Below are some authenticated statistics for that investment.
According to MarketingProfs, visitors who watch product videos multiple times are more likely to make a purchase than those who do not.
According to a recent study by Invodo and the e-tailing group, half of all online consumers are more confident about their purchase decisions after viewing a product video. The conversion power of video is further demonstrated by the fact that two-thirds of consumers who watch product videos multiple times ultimately buy the product
Another acclamation for the effectiveness of product videos and images is from a press release in Mar 2012 from comScore**. The Share of Choice* of those who have exposed to product videos is higher than those who do not. It means that the number of customers who make buying decision tremendously accumulate after viewing product videos.
(* Share of Choice is a metric of comScore to calculate the effectiveness of each type of advertising - including sales.
**comScore is an American leading internet technology company with the aim to measure customer behavior in digital world)
Using high-definition product images, especially images that describe a product from various angles, is another simple way to lift revenue:
Take Apple’s ubiquitous iPhone product, for example. Would you buy an iPhone from a webpage that was missing an image of the device itself? I sure wouldn’t, even though I already know exactly what the phone looks like. That’s besides the point – the lack of a photo makes me distrust the retailer.
From these three illustrations, it is apparent that investing in juicy images or videos can help increase conversion rate. In the long run, it eventually provides long-term benefits for your online business.
Secondly, we can’t add too many products (e.g: over 10 products) onto a one-page site. One-page eCommerce websites work best with one or at the very most, 4 products. So if you are planning to sell various products, getting started with a multi-page website would be a better choice.
Additional information: For those who are interested in one-page design, Envato Community is running “Single Product eCommerce Themes” contest. Click here to join the contest.
3. Hover effects
In 2016, a lot of eCommerce websites will be rejuvenated with hover effects (or mouseover effects). A hover effect is a CSS-based technique that allows developers to change certain element(s) and some of their attributes when a mouse arrow hovers over it. The purpose of the hover effect on an eCommerce website is to allow customers to purchase a product right within a search results page, or after entering into a product details page, and learn more about a specific product. Another advantage of the hover effect is that the UI elements only appear when you hover your mouse over them, so the site will be kept lightweight and simple.WooPress by 8theme is an eCommerce theme with hover effects built into the product page, with “Add to Wishlist" and “Quick View" only appearing as you hover your mouse.
Nike’s online store is also using hover effects on their product page, with small product images displaying that product from different angles/other product variations (color). Small product pages appear in that main preview when you hover your mouse cursor over a specific one.
Land’s End offers more than one hover effect, from product angles to showing variations of the same item (instance another color).
Although hover effects shorten the buying flow, they also comes with some drawbacks. For example, hiding the price may confuse buyers, because they think it’s a necessary element at first glance on a product category or search results page. The takeaway here is to be more selective when choosing which information to show or hide by default.
4. Vertical split screens
Breaking the whole web page into two allows eCommerce websites to deliver two messages instead of only one.One practice of vertical split screens is to display different product categories on the one homepage. Peugeot separates their homepage by putting two car product lines with sub-categories within the two splits.
Bellroy - an accessories store for men is another successful example of vertical split screens with more than two product categories. Using image blocks in different sizes, Bellroy categorizes products by purpose and style. Each image redirects to a product details page.
Split screens also ignite the imagination of web designers, since separated content blocks can vary, and aren’t necessarily dictated by a single aesthetic tone. In Bellroy’s case, it uses both images and stop-motion videos to introduce the designs and functions of the Note Sleeve Wallet. The image on the left side shows the wallet in a real-life situation with the link to the product details page, while the video on the right hand side represents how slim and travel-friendly the wallet is.
Final words
In general terms, it is affirmed that eCommerce Design in 2016 is not merely for design purpose, but also aims to bring in more sales and optimize the buying flow of every online shop. Keeping an eye and giving feedback on the latest and most popular eCommerce designs is one effective way of staying ahead of trends.If you have any ideas to share on eCommerce Design Trends (including “WHY” it impacts a site’s conversion rate), or want to hear more about the eCommerce Trends of 2016, please let us know in the comments. Thank you. 
Check out WooRocket's profile on ThemeForest, Dribbble and Twitter
Further readings for eCommerce Design Addicts
Web design trends- 6 web design trends you must know for 2015 and 2016 - Awwwards
- 10 web design trends can expect to see in 2016 - The Next Web
- 8 ecommerce design trends 2016 to ignite your selling potential store
- Web design predictions for 2016 - The good, the bad, the ugly - Wix
- 15 web design trends to look for in 2016 - Adobe
- Learn how lazy-loading can speed up WordPress page load time - GoDaddy
- How to allow Google to crawl AJAX content - Moz
- Google bot optimization - Kissmetrics Blog
- The benefits of a single-page WordPress website and how to create one
- How images can boost your conversion rate - ConversionXL
- Tell Stories & You'll Boost Sales (Because of How Human Brains Are Wired)
We are exploring eCommerce Design solutions to help online shop owners boost up conversions and revenue. This research is for Nitro — our upcoming WooCommerce theme.
Find us on Dribbble or Twitter
