40% off for 6 months Let's do this

December 10, 2015
E-commerce  |  5 min read

3 Site Layout Considerations Proven to Increase Sales

Created with Sketch.
Eric Yonge

What does your e-commerce store have in common with a children’s book? They both communicate with words and pictures. Although you may have never thought of it in this exact way, your store is essentially narrating a story to your customers. And, the way in which you tell that story will lead potential customers to decide if doing business with you is in their best interest.

CRM and marketing automation will supercharge your ecommerce business. Find out how.

The difference, however, between a children’s book and your store is this: on the Web, there is no assured story starting point. Customers can enter on your homepage, via a product page, on a campaign-specific landing page or even on your blog. So, how do you ensure that no matter which entry point someone utilizes, your site tells the same narrative, ideally leading to a sale?

The expert use of page layout strategy will bridge this gap, allowing you to combine words and pictures in such a way that your narrative doesn’t get lost. Here are three ways to sharpen up your store’s layout to maximize your brand’s story and earn you increased customer lifetime value.

Attain balance

Be careful to monitor the total amount of those aforementioned words and pictures. Having too much of each can overwhelm the customer, while having too little can just as easily underwhelm them. Think of your site layout similarly to a glass. You don’t want it to be half empty or half full. You want a full glass, just without it overflowing.

One of the ways you can provide balance is through the use of negative space, sometimes referred to as white space. This is defined as any area of the layout not occupied by words or pictures. As a customer scans a layout, they need to be able to rest in specific areas so that they can also take in the elements you want to emphasize.

Take online registry site Kallah, where the team has implemented the use of negative space and complementary colors to showcase quite a bit of information without making the site feel overwhelming.

Example 1 - White Space.bmp

Remember, size matters

The human eye is attracted to the largest images first, followed by smaller images and then text. Think of imagery as a way to bounce the eye around the page, in the order in which you intend. Professional web design creates intuitive, hierarchical layouts that keep this important principle in mind.

For example, your largest homepage ads should call out your most exciting products or specials, followed by smaller ads or featured thumbnails. The dominant images on your product page should be the main product photo(s) and then the Add to Cart button. In each instance, the layout should effectively lead the customer’s eye in a linear fashion.

Example 2 - Direct the Eye.bmp

See how online store Training Mask uses an accent color to draw your eye to the Add to Cart button.

The traditional exception to this is the section page, which finds similarly sized product thumbnails listed row after row. Here, the customer expects to compare and contrast individual products based primarily on appearance and then title, price and review stars. In certain instances, you can still impact this layout with the proper use of title graphics and featured product areas.

Example 3 - Direct the Eye.bmp

See how online store U.S. Patriot clearly assembles their category pages, allowing customers to easily drill down to product level comparisons.

Avoid needless distractions

What’s more important: having a customer complete a successful purchase or having that customer visit your Facebook page? What about getting them to subscribe to your newsletter versus clicking the Add to Cart button?

Although these questions seem to have obvious answers, my team routinely reviews sites with layouts that ignore what a site’s main call to action is (i.e. having a customer check out). Site owners want their customers to buy something without getting distracted—but they often hire site designers who don’t help them to understand that multiple calls to action can cause choice confusion—ultimately leading someone to choose neither.

To avoid this, don’t use any imagery or text unrelated to the task you want a customer to complete. If you have anything on your product page that’s not relevant to that product or to helping a customer find a more suitable product, it needs to go. Every single page of your checkout process should be as streamlined as possible in order to keep your customer in the funnel. Any additional info should only address critical questions or concerns.

Example 4 - Avoid Distractions.bmp

Made 4 Fighters’ streamlined checkout design.

In all, layout is crucial to the success of any e-commerce store. While best practices related to e-commerce continue to evolve, these three layout principles will help your store stand the test of time.

Supercharge Your eCommerce Business With Marketing Automation - Download Now

This article was written by Eric Yonge from Business2Community and was legally licensed through the NewsCred publisher network.

Was this post helpful?

Subscribe to our newsletter

Fresh small business insights and ideas delivered weekly to your inbox, gratis.

You may also like

{{ record.displayCategory | smartCapitalize }} | min read

Before you go...

Get fresh small business insights and ideas delivered weekly to your inbox.

Subscribe to our weekly newsletter!

What you'll get from it:

As a thank you for subscribing, we'll send you a copy of our 2018 Small Business Marketing Trends Report with insights from over 1,000 surveyed business owners. The gifts just keep on coming.

4 Reasons to Subscribe:
  • Weekly tips to dominate sales and marketing

  • Expert small business resources that cost you zero dollars

  • We're focused 100 percent on small business success

  • Righteous GIFs

    GIF of Ferris Bueler principal's assistant

P.S. We'll never give out your information. We'll only use it to send you awesome content and resources, if you're cool with that.