In conducting usability testing and optimization on large and small size e-commerce sites since 1996, I’ve found that there are 10 common usability issues found in order flows.

The good news is, by identifying common usability issues and correcting them on your order flow, you can improve usability and increase sales and revenue – without the expense of a major Website redesign.

To demonstrate these common usability issues, we’ll use a fairly common task a typical user might go through: finding and ordering a replacement inkjet toner cartridge for a printer. Unless you are near your printer when you’re placing the order, you’ll likely need assistance from an e-commerce site to find the correct cartridge part number.

So with the printer cartridge example, let's examine the user experience and common usability issues a typical user may find when shopping for and purchasing a product online—and how to fix five of these 10 usability issues (We'll look address correcting the other five problems in an upcoming article).

1) Assist customers with finding model and part numbers ( example):
As shown in this example, the Website has a "Cartridge Finder" tool, to assist customers with finding the correct part number. That's great for customers who know their part number. Here's a general rule for e-commerce sites: Most know the brand name, many know the model number and some know the part number.
Remember that the more detailed the information, the fewer number of users that know it. So always try to include model and part numbers on search tools that help customers find products, with the understanding more users may know the model number than the part number.
Customers who don't know their part number cannot use the Cartridge Finder tool on the site shown above, and they are forced to scroll down the Web page through a long listing of printer models to find their correct printer.
For this Cartridge Finder tool to be more useful, adding a model number look up field in the Cartridge Finder would help those customers find the correct model of printer much faster, eventually resulting in more sales.
As a side note, the use of a drop-down list when there are many choices can be cumbersome, a helpful tool to consider for the Cartridge Finder would be an automatically completing text entry field, like the auto-complete fields on search engines.

2) Place big-ticket items at the top of product lists ( example):
As shown this example, several big ticket products are listed lower down in the results. Worse, they are below the fold, as can be seen by the screen shot.
Persuasion, emotion and trust studies have demonstrated that best practices for e-commerce sites should always have the higher priced units at the top, and especially above the fold. This helps "adjust" the customer's expectations for costs upwards, resulting in overall higher shopping cart average order price per user.

3) Keep cross-sell suggestions above checkout buttons ( example):
Including a "You may also be interested in..." cross-sell message is a great idea. But as this example shows, the statement does not stand out visually and it’s well below and away from the "Proceed to Checkout" button.
Many e-commerce shoppers are in a hurry, and those who may be rushing might miss this important message because it is removed from the action button. It's quite possible that a fairly large number of additional sales are being lost by customers who are just clicking on the "Proceed to Checkout" button without realizing there is additional products available below.
Some e-commerce Website owners are wary of placing cross-sell or upsell information between a "sure thing" of a product already in a shopping cart and the checkout button. But in the hundreds of usability testing sessions I've conducted on e-commerce sites, I have never heard negative comments about appropriately placed suggestions for other products.
Instead, most of the participants readily accepted that the company was trying to offer them additional items they might need (ala the "do you want fries with that?" approach) and were comfortable with the information being there.
Moving the cross-sell content even with, or above, the "Proceed to Checkout" button is an easy way to add additional incremental sales with minimal effort.

4) Visually separate dense rows of information ( example):
As can be seen in this example, the model numbers for these printers are listed in vertical columns. This might cause some momentary confusion to users, especially those from western countries who are used to information being presented in left to right order. However, once the users acquaint themselves with the formatting the other issue is the visually dense information.
Adding additional white space between each row, and using an alternating background color for each row will help differentiate the information and speed up the customer's ability to find the correct model.
I've underlined the model number needed for our task in the above example, but without the underline you can see the effort a user has to go through to find the correct model number.

5) Reduce shopping cart distractions ( example):
As we can see in this example, customers who are proceeding through the buy-flow can sometimes be presented with visual distractions that could interfere with completing the purchasing task.
Above we see multiple distractions, especially significant being the "Address Accuracy" content, the information about "Shipping Zipcode, Customer Profile and Cookies Enabled," the "Free Shipping" graphics on the left side and even the "Customer Service Quick Links" at the bottom.
If anything, the only information a customer might need is the visual reinforcement of where they are in the steps of the buy-flow ("View Cart, Shipping Cost, Customer Details and Finalize").
The "Address Accuracy" warning could be removed and placed in the Address Entry part of the form, where it would seem more natural to customers who are entering their address information.
Another distraction is the red "Xs" and "Delete" and "Empty Cart" buttons, which are placed on the right-hand side near the product information, a space typically reserved for a "Continue" action button.
Removing the distractions above--or placing them in more appropriate areas of the buy-flow--would help keep customers on track in the process, resulting in a higher percentage of conversions and thus sales.

This article is from Multi Channel Merchant


Biago Media Services is a web design and development company. We build sites tailored to our customers’ needs. No matter if the goal is to promote a business or service. We put your business on the net, fast, efficiently and in a professional manner.

Web Design & SEO Services

1. Marketing your Business on the Net

2. Affordable Web Development Services

Contact Info

Biago Media Webdesign,606 South Hill #1205, Los Angeles, CA. 90014

(310) 402-2243

Monday to Friday
     10 AM to 5 PM
     Saturday & Sunday

Biago Media
5 stars - based on 250 reviews
606 S Hill St, 1205, Los Angeles CA 90014 +1 310-402-2243