Last month, I showed you how to fix five of the most-common 10 usability issues found in order flows.
So with the printer cartridge example still intact, let’s examine the user experience and five other common usability issues a typical user may find when shopping for and purchasing a product online:
1) Follow the typical steps of a buy-flow (Example)
The example here is of a site that has buy-flow steps that do not map to the mental model most users have, which can cause confusion.
In general, most buy-flow data input steps follow this order: Product information; Customer information; Billing/shipping information; Payment information; Summary display and submit; Post-purchase confirmation.
In the example above, the shipping information is out of order, coming before the customer entry information. Forcing potential customers to consider shipping charges at this early stage could result in unnecessary abandonments. This is especially true if the customer has not yet “committed” mentally to the purchase by entering their customer information.
Placing the shipping information in the proper order ensures that you match the mental map most users have for the buy-flow process, increasing the number of conversions and ultimately sales.
2) Don’t place extraneous non-sales content between users and products (Example)
In this example, I typed in “replacement printer cartridge” on Google, and one of the links in the search results page led me to this page. Here’s the problem, the content on this page, although search engine friendly, is not friendly to a user finding a replacement cartridge. None of this content helps a customer complete a task, which in this example is finding the correct cartridge for an HP printer.
An alternative to just a page of rather generic content would be to also include brands of printer cartridges available either above or below the content, so that the user who lands on this page could see the content plus immediately begin the process of shopping.
3) Always show product photos (Example)
Pictures are worth more than a thousand words–they are worth thousands of sales. Visually presenting the product using clear photographs helps reinforce that the customer has indeed found the correct product.
In this example, the photos are available, but they are “hidden” so to speak with the green camera icons, forcing an extra (unnecessary) click. This causes the customer to stop what they are doing (purchasing the product!), plus the extra visual “noise” (the icons) can pull the customer’s eyes away from the task on hand (choosing a cartridge).
With minimal effort and minor movement of the table column widths, the icon could be replaced with the actual product photo reducing extra clicks, increasing the user’s confidence that they are finding the right product and helping to move the purchase process along.
4) Always show price discount savings (Example)
Walk into any retail store and you’ll see price tags with large, bright text on sale items. What do all these tags have in common? They all have the amount of savings clearly marked (Examples include, “Save $3.99!” You Save $2.00″ “$40.00 Off!”). Calling attention to the savings speeds up purchase decisions, because it saves the customer having to do the mental math of how much savings a discounted price offers.
As demonstrated in the example above, the sales discount is missing for the six- pack (which is $6 off in this case). Not calling attention to the savings forces customers to have to do the mental math of determining the amount of savings. Many customers will not bother to take the extra effort and will miss this, causing missed opportunities for making more sales of the higher priced items.
By adding a large visual display of the amount of savings to the pricing information, e-commerce sites can easily and simply increase the number of sales of the sale items.
5) Remove obvious errors and omissions (Example) (Example)
Anything that distracts a customer and causes them to lose focus on their task in an e-commerce site must be removed. This includes obvious errors or strange messages.
The two examples above demonstrate sites that have errors or omissions that most likely are causing missed sales opportunities.
In the first example, there was no obvious information earlier in the order flow regarding a minimum $20 order. Now here, deep in the buy flow an error message indicates, “You have not reached the $20 minimum order value.”
This is confusing as the reason for the need for a minimum $20 is missing. There should be a clear explanation as to why the $20 minimum is necessary, for example:
“You have not reached the $20 minimum order value needed for free shipping.” Or “You have not reached the $20 minimum order value we require in order to purchase items from our store.”
Omitting essential information customers need in order to complete a sale causes missed sales opportunities. Adding the information helps increase sales.
Likewise, as demonstrated in both examples above obvious errors such as text that clearly is overlapped (top screenshot) or action buttons with no apparent labeling or function (bottom screenshot) causes not only visual distractions, but potential confidence concerns about the e-commerce site. Users may wonder about how their order will be handled if the site itself displays obvious errors.
Causing your users to have doubts because of obvious errors and omissions on the site can easily be fixed. Simply check your site monthly with the latest popular browsers, and add missing information from error messages that help explain to your users “why” they are receiving an error, and what they can do to fix it.
W. Craig Tomlin ([email protected] is a certified usability analyst and a member of the Usability Professional’s Association. Twitter: ctomlin.