Design Matters: Maximizing E-Commerce User Experience

Online sales don't just happen — they occur by design. That's why user experience and design go hand in hand when it comes to e-commerce. In order for users to pick out items, toss them in the cart and proceed through the checkout process, you've got to carefully cultivate every step of their navigation through your website. This takes time, effort and artful intelligence in the way your design your many site pages.

Today we'll discuss some of the more important aspects of design and user experience, and how you can make the most of the insights offered.

What Works for User Experience and Design

Proper design in regard to usability boils down to easy navigation. When applied to shopping, that means your customers should be able to quickly find the products that interest them, and navigate to the product pages easily. Once at the product pages, they need to see a clear and concise path to the checkout. Keep these important aspects in mind when arranging your visitors' movement from one page to the next. The first is "findability."

Find, Click and Go

To make your products find-able, you have to ensure that your website is well organized within categories and subcategories. This is often best accomplished through drop down menus. Unfortunately, even having such menus doesn't make any guarantees in the realm of usability. There are two important rules for drop down menus:

  1. They must be comprehensive.
  2. They must be clickable.

Assuming you have a large website and plenty of product pages to shop through, you'll need to categorize your inventory in detail, much like Amazon does:

Image Categories

Where Amazon falls short (yes even Amazon make mistakes) is refusing to make parent categories clickable. Neither the orange headings in the category page nor the category headings on the drop down "Shop by Category" menu are clickable. This is extra trouble for users who haven't quite narrowed down their intentions for the day's shopping session.

Amazon is big enough to where it can afford to cause users a little frustration, albeit unintentionally. For all those e-commerce entrepreneurs who aren't multinational corporate giants, it's better to keep things as simple and navigable as possible.

Speaking of simple, it's probably best to keep your page layouts that way as well. You should take advantage of the well known pattern of online reading habits to aid you in this process. To put it simply, most users give higher priority to the top left of the page and their attention spans decrease as they read down and to the right. Take a look at this heat map with user attention measured by following eye movement:

Eye tracking study charts

As you can see, the typical user's eye movement creates an F-shaped pattern across the web pages, with the majority of focus devoted to the tops of pages. These F-shape layouts are very common throughout the web, and serve a dual purpose: 

One, to prioritize the most important content at the top of the page, be it imagery or text;

Two, to direct the user's attention to a CTA, usually at either the bottom or far right of the page.

This way, as a user's focus dwindles while they progress through your page, you can grab it back with a highly visible, and clickable CTA.

In addition to a clickable CTA, categories, and subcategories, you'll also want your home page's images to be clickable if they feature your products. Nothing can be more frustrating to a user than to see exactly what they want right off the bat, but to still have to search your website for it. Any featured imagery showcasing your products should lead directly to that product's landing page.

On the Product Page

Usability is by no means limited to the home page of your website.Once the user gets to your product pages, the fun really begins. Not only do you have to have an intuitive user flow toward your checkout process, but you need to include sales copy, product imagery, social media buttons, product reviews, item alternatives as well as possible cross-sells to tempt your customer with.

Sales copy should be short and sweet, no more than 400 words — and that's pushing it. A big block of text isn't an attractive setup for a sale. Break these word bubbles up into bite-sized bits to avoid overwhelming your readership. The product imagery should be the focus instead.

Then you have your add-ons. A product review can really sell your users if they're on the fence. According to, 61 percent of online consumers read customer reviews before deciding whether to purchase, and furthermore 63 percent are more inclined to make a purchase after reading the reviews. Social media buttons can also go a long way in increasing the trendiness or popularity of certain items, so they're usually a good addition.

Likewise, incorporate similar items, complementary items, and previously viewed items on your page. All three of these can lead to cross-sales. It's always better to have four items in the customer's cart than one.

What Doesn't Work for User Experience and Design?

Now that you've got a few pointers as to what you should include in your design for a good e-commerce user experience, let's take a look at a few cardinal sins.

Many of these are obvious, so we'll just go through a few rapid-fire:

  • Overly busy with content.
  • No white space.
  • Tiny product images.
  • Hard-to-see or negligible product descriptions.
  • Slow page load times.

Slow page load times are a devious culprit in the killing of conversion rates, in particular. They can cause frustration for users like few other factors in your web design are capable of.

Frustration vs. Page Load Times

Google guidelines cite a 4-second page load time as being ideal for most e-commerce sites. If you want to keep your consumers calm and more importantly on your pages, then try to stay beneath that limit. To test your site's load times, use a Chrome extension like Page Load Time.

Some things you might not think about when designing an effective user flow, however, can clog up your revenue stream just as easily.

Irrelevant Content

Users are getting more and more used to the idea of an intelligent web. They acknowledge the fact that cookies are tracking their behavior, and have thus become far more intolerant of that which doesn't concern them popping up while they're browsing. In fact, 74 percent of users claim frustration when they see advertisements or promotions that don't appeal to their personal interests.

Moreover, another 73 percent don't even pay attention to your banner ads anymore (something called "banner blindness"). They've simply learned to filter it out, much like a family may mute the television during the commercial breaks. Once advertisements become too "noisy," the general viewing (or in this case, browsing) public develop filters to compensate for the constant media bombardment. The trick to circumventing these filters is by offering them what they want, and doing so in an attractive presentation.

I'm Not Sure About the Color

This is where psychology comes into play. In particular, color psychology can be very powerful — or conversely, very detrimental. More than 85 percent of online buyers claim that they can be swayed toward a product based on its color alone.

The Importance of Color

This is an overwhelming emphasis placed on a seemingly superficial choice. Make sure you give your color scheme plenty of thought before committing to a design.

So there you have it: a comprehensive guide to keep you on the straight and narrow for user experience and design. If you'd like to find out more about testing your e-commerce website's usability, take a look at this informative blog post.


Related posts you may be interested in...


  Already a member? Login to comment


Want to fast-track your dropshipping success?

Free webinar
min sec
Popular Posts
Blog Categories




SaleHoo helps over 137,216 online business owners
find reliable low cost suppliers

Find out how