Webinar SignUp

Effective Product Page Design – Best Practices for Optimizing Conversion

The goal of any e-commerce website is conversion.

Emphasis on the Product Page in particular, and how it affects conversion rate, shows us that the user experience is VITAL to the success of your online store – to your business.

Here we will cover three (of many) great best practices for improving conversions from product pages.

Three Great Best Practice Tips:

  • First Impressions Mean Everything
  • Define the Action Path
  • Action Outcome
– This entry is a follow up to the Savvy Merchant Challenge. To see the original LittleSupply.com product page review, click here

Plus, find out how LittleSupply.com improved conversion and reduced bounce rates based on these three tips!

The importance of the success of your Product Page becomes even greater now with the changes we are seeing in Online Marketing, specifically with respect to Google’s recent changes (see Jo Benson’s webinar “Google Points The Way: Trusted Stores, Commerce Search, Product Ads, Organic SEO and More” for more).

Your Product Page may often times be the first page your visitor sees, and therefore MUST seal the deal. Especially now that you will be paying to have your products seen on Google, visual impact has never been more critical for online merchants.

We are pleased with the success our friends at LittleSupply.com have seen as a result of the Savvy Merchant Challenge they volunteered for in April. This contest, as you might recall,  brought forth numerous suggestions to the voluntary merchant by placing their featured Product Page in the “Hot Seat” for all the community to comment on.  This prompted LittleSupply.com to make some changes to their product page design.

Here are some of their results:

  • An increase of shoppers going from the product page to the shopping cart went up by 14.6%
  • Overall site conversion rate went up 8.64%
  • Site bounce rate dropped by nearly 7%

Best Practice Tip #1:

First Impressions Mean Everything – Refining the First Three Seconds

The first three seconds impact your visitors’ emotions, and determine whether or not they feel like staying or bouncing. Within this limited time, they must feel comfortable and safe. They must be able to answer for themselves… Who Are You? Where Am I? Is this Legit?

The Company Logo/Brand Identity needs to be clearly visible and should reflect the mission of your business (for example, a site selling yoga products would benefit from invoking a sense of serenity and strength, while a site selling tools will want to spark a more industrial and powerful feeling.).

To answer the Where Am I? question, presentation of the purpose of the page must be absolutely clear at first glance. Use of clear, clean product images, along with easy-to-find price and availability are key factors for a successful product page.

Not enough can be said for trust and security. Presentation of how and why the consumer can trust that their purchase with your store will be a success can make or break a conversion. Placement of a trust seal, security badge, as well as payment choices will ease the mind of your visitors, so do make sure those can be seen well, but are not the highlight of the page.

The case study examines the “before” and “after” changes LittleSupply.com applied to their online store and it’s apparant that they have effectively improved the visual  impact of their product page.

Noteworthy changes to LittleSupply.com, within the first three seconds are:

  • Less red color, overall, both in the header and the body of the page, combined with moving the multiple, colorful promotions along the right side of the page, give the visitor a calm sense organization (perfect for their target audience) rather the previous clutter on the page.
  • Simplification and clean, clear imagery gives the visitor the sense of the purpose they have arrived on the product page.
  • Their trust seal and payment methods are visible, yet not overly obvious, giving an ever-present sense of trust.

Best Practice Tip #2:

Define the Action Path – Prioritize Your Visitors’ Eye Path

Guiding the eye path of the visitor is another vital consideration in the design of your product page. You will need to take into consideration the use of color, spacing, size, image quality as well as white space when rendering the design for your product page. You will want to be aware of and in control of where the average person’s eye will go first, second, third, and so on.

Numerous studies have been conducted to determine “hot spots” of a web pages. We recommend searching on “eye path heatmap generator” to find tools available where you can submit your site for an automated generation of the eye-path of your page.

LittleSupply.com has done well with making changes to their product page layout with respect to action path. Their identity and purpose are well recognized, and it is easy for the visitor to locate where/how to purchase their product. They have done well with drawing attention to their “add to cart” button (where previously, it was in competition with “add to wish list”) – Well done, LittleSupply.com!

Best Practice Tip #3:

Action Outcome – Don’t Leave Them Wondering

“Did I just add this to my cart or not?” – If the result of clicking your ultimate Call-to-Action button leaves your visitor wondering if something happened or not, you’ve got some work ahead of you. Wonder leaves room for discomfort, insecurity, and confusion.

Conversion-increasing best practices call for a visible indication that the click of a button actually did something. We highly recommend Smart Mini-Cart for AspDotNetStorefront online stores – product image dynamically glides into the mini-cart as it expands (either briefly or until the user collapses it) and shows that the product has been added to the visitors’ shopping cart.

Although LittleSupply.com features an out-of-box mini-cart, which simply shows quantity of items in the cart, they have plans of incorporating the Smart Mini-Cart into their site in the foreseeable future.  An improvement we hope they will adopt sooner rather than later.

Obviously, there’s more to it than just 3 Tips…

That’s right, it’s really quite complicated, and will likely take some experimentation over time. According to the numbers we saw for LittleSupply.com, however, it’s well worth the time and effort. Of course there’s professional help out there too… in small or large amounts and we’re happy to share referrals should you be interested – just post a comment below and we’ll reply accordingly!

- – - – - – - – - – - – - – - – - – - – - – - – - – -

Let the Experts review YOUR product page and find out where you can improve your conversion rate. Our Expert Product Page Review is available to online merchants – no matter which shopping cart software you’re currently using! Learn more now!

- – - – - – - – - – - – - – - – - – - – - – - – - – -

We all thought that product page was important before. But, now Google is making massive changes to how they index your product pages that make conversion absolutely critical. So, we are turning our Savvy Merchant Challenge campaign into an ongoing program to help you thrive despite the changing e-commerce landscape.  Membership is free. Take a look here.

 

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Posted in Contests, Design & Layout, The Challenges, User Experience | 1 Comment

One Response to Effective Product Page Design – Best Practices for Optimizing Conversion

  1. Ven Hudson says:

    Thanks for sharing your idea. I want to add one point in it. You can also use heatmap tool and a/b testing tool to design a effective product page.

Leave a Reply

Your email address will not be published. Required fields are marked *


1 + = 2

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>