5 Critical Elements of Great eCommerce User Experience (with examples)

User Experience is Everything…duh! This really should go without saying.  Creating great user experiences in eCommerce is one of the most critical things you should be putting energy into.  Just throwing up an online store is hardly enough to succeed these days.  Buying a $40 template and expecting people to start beating down your door is naive at best (note: not all themes are created equal…some are amazing). There are a few key areas that you want to spend your time and money on when it comes to creating great user experiences for your customers:

Product Detail Page

Keep it clean, keep it simple, build it for the shopping-moron. There are a lot of best practices out there for product page design.  Please don’t think that your type of product is “special” and deserves something totally unique and awesome.  Nobody will know what the heck to do with it!

  1. Include a high quality (the larger the better) image of every important angle of the product.
  2. Include a short, concise summary of what the product is above the fold.
  3. Have a visible link to customer reviews above the fold.
  4. Add to Cart button should stand out (but not too much).
  5. If your product has sizes/colors then please dont’ make me hunt for them.  Also, choosing the different size and colors should show me appropriate images (if applicable).
  6. Don’t be afraid of long pages.

Want some examples?  Yah you do!

On-Site Search

Having useful search results is priority #1.  Having search results that are properly laid out and can be easily filtered…JUST as important.  It doesn’t matter how relevant the search result if your users don’t understand how to act on what they are looking at.

  1. Search Filters should be to the left of the results and it should be simple to use.  Yoyo.com is the perfect example of this (screenshot below).
  2. Grid layout seems to work best as a default presentation of product results.  Your type of product may do better with list-view but for most of our tests grid is best.
  3. Clearly mark any items that are on promotion (sale, mark down, new arrival etc…)
  4. If an item qualifies for free shipping, you might want to make mention of it.

As an aside, one of the nice features that we take advantage of in Magento is this idea of common search term re-directs.  For example.  If we see people always searching the site for “car seats”, we can put in an override on the search and have each of those people land on our car seats category landing page.

The Shopping Cart

Many merchants tend to focus heavily on the checkout process, and for really good reason. It’s where so many people drop-off (checkout abandonment). However, the shopping cart is another of those pages that if we spent a little time on the user experience we may not lose so many people (cart abandonment). Great user experience in the cart is a combination of clean layout and clearly visible trust signals. We’ll talk more about the trust signals below when we cover value proposition presentation. To me a great shopping cart is one which has the following elements:

  1. Easily recognized proceed to checkout call to action.
  2. Shipping Estimation so customers can get an accurate estimate of their total purchase amount BEFORE they start the checkout process.
  3. Clearly marked promotion / coupon areas.
  4. Lots of language around security and customer service.
  5. Easy to find company policies and contact information.
  6. Thumbnail images of what the customer is buying (should I even have to say this?)

Each of the following examples showcases the important information customers will look for in each of these sites shopping carts.

Zero-Friction Checkout Process

I could (and should) write a book on creating checkout flows for your customers.  Today I’ll just touch on a few key elements that you should always put effort into continuous refinement. Once a browser makes the decision to move beyond the shopping cart and “Proceed to Checkout” you have next to no margin for error.

One Page Checkout and Multi-Step. There is always going to be debate on which checkout experience is best.  My opinion is to try both and see which one is better for your audience.  We’ve seen it go both ways.  On some sites, one page checkout totally bombed while on others it doubled our conversion rate over multi-step.  It’s all about your users!

Method aside, there are some key elements that I think should be a part of every checkout process:

  1. Mini Cart to show the customer their items and real totals as they move throughout the checkout process.
  2. Clearly show the customer which steps are required leading up to a completed purchase.  You know what it’s like to stand in a line that you can’t see the end of…same thing here!
  3. Requiring registration sounds like a great idea, but Guest Checkout options are proven to lift conversion rate in most cases.

A great example of a clearly defined checkout is on Bentley Leathers website (www.onlinebags.com).

Trust Building Value Propositions Front and Center!

I must sound like a broken record to our customers, partners and friends on this one.  Every piece of language on your site should do it’s best to build trust with your visitors.  Everything from free shipping, to customer service contact numbers, to shipping and return policies.  These should all be clearly visible.

In each of the sections of this post you have an opportunity to build trust with your visitor.  You should be highlighting your security and payment options everywhere it makes sense.

The #1 reason that people abandon buying from a site comes down to trust.  Yes, shipping can kill a potential order too, but most of it comes down to how much trust you’ve built with that visitor.

Take a look at the following Shopping Cart page from Rens Pets.  They are clearly showing you signs of security and by displaying a phone number prominently in the header, that they are willing to help you out should you have any problems!