What does your ecommerce store have in common with a magazine? They both the magazine and your website 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.
The difference, however, between a magazine and your store is this: on the web, there is no way to control where the story for any given person begins. 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?
Being able to expertly use effective page layout strategies will bridge this gap, allowing you to combine words and pictures in such a way that your message doesn’t get lost. Here are three ways to sharpen up your store’s layout to maximize your brand’s message and earn you increased customer lifetime value.
A Balanced Approach
You want to be careful to monitor the total amount of those aforementioned words and pictures, the old saying "Less is more" plays a big role on the internet. Having too much of each can overwhelm the customer while having too little can just as easily underwhelm them. To put it another way, think of Goldilocks and the three bears. You down want it to be too hot or too cold, instead, your aiming for that exact amount of balance between images, text, and white space.
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.
Size Always Counts
Remember that your Customer's eye will be attracted to the largest images first, followed by smaller images and finally the text. Think of imagery on your site as a way to bounce the eye around the page to places where you want your customer to be focused. This allows you a bit of control over the flow of the page. Professional web designers use this effect to create intuitive, hierarchical layouts that keep this important principle in mind and drive customers through your sales funnel.
An example of this is that your largest homepage ads should be designed to showcase your most exciting products or specials, followed by smaller ads or featured thumbnails. The most dominant images on your product page should be the main product photo(s) and then the Add to Cart button. In each example, your layout should effectively lead the customer’s eye in a linear fashion down the page to the call to action or add to cart button.
The only real exception to this is the section page, which finds similarly sized product thumbnails listed row after row. On this type of page, the customer expects to compare and contrast individual products based primarily on appearance and the title, price and review stars. In some cases, you can still impact the layout with the proper use of title graphics and featured product areas as well as easy to read fonts.
Minimize Distractions
You need to determine what is more important to your success: 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?
These questions sound like they would be obvious, my team routinely reviews sites with layouts that ignore what the 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 help 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.
As you already know having a solid layout is crucial to the success of any ecommerce store. While best practices related to ecommerce continue to evolve, these three layout principles will help your store stand the test of time.