3 Usability Tips for E-commerce Checkouts

3 usability tips for e-commerce checkouts

Your website’s usability can make or break your online shopping cart as a success – and this goes beyond having a pretty design. The number one way to fight back against cart abandonment (which plagues e-commmerce websites) may not be to lower your prices, but rather to offer a better experience during checkout. I have laid out 3 tips which can instantly improve the usability of your online shopping cart interfaces.

Tip #1: Organized Form Fields


American Eagle – click to enlarge

Form fields should be separated and categorized on a single page. Yes, this takes more effort to develop. Yes, this is worth it. By introducting smart logic, the interface will only display the segments immediately required for the current step. Fewer form fields to look at makes for less work,  which makes it easier to fill out, and in turn results in a greater chance the visitor will convert to a sale by completing their purchase. The American Eagle example above has 3 checkout steps which are clearly indicated, so the shopper feels a sense of progress and has an understanding of the endpoint. The entire process is done on the same interface. There is less to get accustomed to, or get distracted with. This leaves your shopper in a familiar place and with one thing to do: convert.

Tip #2: Inline / Unobtrusive Error Handling


Banana Republic

A visitor’s frustration is triggered when met with an error page, indicating they have done something wrong. Consider this a virtual slap-on-the-wrist; this certainly isn’t pleasant for online shoppers. The main point of frustration could stem from 2 main points:
a) it feels as though the user has not made any progress to the next step,  although they had spent the time filling out the form.
b) the visitor has trouble finding where the errors were. Surely they feel they filled out the form correctly the first time, so they won’t inherently know where to look.

To address these two sore points, a website’s checkout page should have inline error messages and stay on the same page.

Inline error messages are well-defined, highlighting only the area which needs to be corrected. In the Banana Republic example (above), the email/password criteria supplied by the visitor was incorrect, so these two fields were outlined with a tool tip message with a brief description of the problem. It is not too much of a tag that restricts use of the page otherwise (in case or cases of multiple errors). Rather, it acts as a polite “tap on the shoulder” to help guide and assist the visitor through to completion.

These unobtrusive error messages do not take the user away from the page (no page reload), immediately showing the problem before the user gets a false sense of completion. This gives them the opportunity to correct any potential issues before they feel it is complete – which differs from if they submitted the page to see the errors – allowing the shopper to keep their focus through to conversion.

Tip #3: Obvious Order Items


Roots – click to enlarge

Roots does a great job of using visual identification during checkout. On their website, order items are clearly displayed, and include attribute information (size/colour), quantity, and price. All of this while having an identifying image so there is less to interpret (why make them read?). The shopper has a quick reference to all details of their order, including an immediate cost summary. If they have doubts about what is in their cart for whatever reason (maybe they want to make sure they are ordering the right size), then they do not need to leave the sales funnel to check. This keeps them moving forward through the process without interference, and ultimately converting to a sale.

Try these tips for yourself

Ensuring your website design is focused on usability, with conversion goals in mind, you can instantly reduce the number of sales you do not get from visitors being overwhelmed and walking away. If your sales process isn’t clear-as-day and simple to use, what may be a few hours of experience-backed interface prototyping, could cost your business money in lost sales and opportunity.

Tagged with: , ,
Posted in E-commerce

Warning: count(): Parameter must be an array or an object that implements Countable in /home/wesleyal/public_html/blog/wp-includes/class-wp-comment-query.php on line 405