This updated post was originally published on September 7, 2016.
Let's get theological for a second. The 10 commandments were created as a quick list of ironclad rules to help a group of confused and disorganized people live happier lives. Fast forward a few thousand years to modern times, when design guru Jakob Nielsen published his acclaimed book Usability Engineering, in which he lists the 10 most useful heuristics for usability... to help a group of confused and disorganized people live happier lives.
And who better to hand down a list of design commandments than Dr. Jakob Nielsen. With a Ph.D in Human Computer Interaction and a seat on the board of an Interactive Technologies book publisher, Nielsen got his start at IBM before founding his own usability consultancy, Nielsen Norman Group. To date, he has 79 U.S patents pertaining to the web.
Nielsen focuses mainly on heuristic evaluation, the inspection method for computer software that helps to identify usability problems in the user interface (UI) design. While this applies to all aspects of web design, for eCommerce specifically these heuristic guidelines can be directly applied to checkout, the most sensitive area of online stores.
With Baymard Institute putting shopping cart abandonment rates at 68.8%, checkout design is directly related to your bottom line. Nielsen's 10 heuristic guidelines can help you retrieve some of that lost revenue. If you optimize the UI and UX design of your checkout process with the 10 heuristic commandments below, you'll see biblical returns on your profit margins as well.
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
When talking about eCommerce checkout optimization, simple additions like a progress bar or clearly marked steps on each page can satisfy this first heuristic. This ensures your customer knows exactly where they are in the process, what comes next, and how much longer it will take them.
Below is an example from Filson, an outdoor watch and apparel company. They do a great job of utilizing a plainly labeled and numbered multi-step checkout process.
The system should speak your buyer's language, with words, phrases, and concepts familiar to the shopper, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
To put it in layman's terms, use layman's terms.
The checkout page is not the time to get clever. Use comprehensive, simple language so as not to confuse your customers. You want to streamline the entire checkout process by trimming as much crud as possible; if your shoppers have to pause even for a moment to decipher the meaning of a field label or button copy, it will drag down the whole experience.
Take a look at the Threadless example below. In general, Threadless has an admirable checkout design that you can reference if you ever want guidance. Here, you can see their succinct and straightforward form labels — they save their humour for before and after checkout.
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
When a customer is browsing your online store, it's not uncommon for them to accidentally add something to their shopping cart, choose the wrong size, or enter the wrong number of items. This is why functions like Undo and Cancel are so crucial.
Women's clothing retailer, Aritzia demonstrates this heuristics perfectly. Their shopping cart ("bag") includes subtle but noticeable options for deleting or editing each item.
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Shoppers around the world already know the terms "add to bag", "add to cart", "buy now", and "check out." Always keep standard eCommerce web conventions in mind and mimic the same verbiage and call-to-action buttons that the big players use.
Of course, maintaining consistency goes beyond word choice and into the realm of usability. You're free to rename your cart a whatever you want, and as long as you the "Add To" functionality is the same as other sites, shoppers will know what to do.
Once you decide on a label title, make sure you use it throughout the entire site. Failing to do so, i.e., calling your cart a bag on one or two pages, will complicate the learning process of your site and create a more frustrating UX.
Apple is always a great benchmark to model after in this regard. Throughout their store they've made sure to keep wording consistent, never interchanging "bag" and "cart."
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Errors seem to occur most often when shoppers are filling out checkout forms — all those fields for shipping, billing, inputting credit card information etc. Nielsen's advice in this aspect harkens the classic adage, "an ounce of prevention is worth a pound of cure."
Simple labels, marking mandatory fields, and pointing out mistakes immediately instead of after submission can all go a long way in deterring your customers from bouncing.
The important thing is to stop errors before they start. If you've ever done any online shopping you know how annoying it can be when you've incurred an error prompting you to go back and fill out all your details again.
When it comes to user experience, the smallest details have the ability to delight your customers… and Amazon knows it. One thing that eCommerce goliath does well for error prevention is including a warning label when the shopper adds two or more of the same product to your shopping cart:
Minimize the user's memory load by making objects, actions, and options visible. Customers shouldn't have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
If Steve Krug's usability masterwork Don't Make Me Think has taught us nothing else, it's that users don't want to think. Period. It's not that they're lazy or stupid; it's just that they have a million other things on their minds both in their shopping goals and personal lives, that extra effort in areas like checkout tend to be a frustrating and unnecessary annoyance.
It works both ways, though. Anything you can do to minimize thought during the checkout (or anywhere on your site) is appreciated, and increases the likelihood that they'll complete their purchase.
For instance, if you offer free shipping, keep that at the forefront of a customer's mind throughout the checkout journey. Shipping is one of the biggest culprits when it comes to shopping cart abandonment. If you're able to keep your customer's mind fixated on free shipping, there could be a greater chance in converting them.
Daniel Wellington is a great example. Their checkout pages have a static summary column that acts as an ever-present reminder the customer won't have to pay for shipping.
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Repeat loyal customers is the end goal, even if you're not actively aiming for that just yet. If a customer has already purchased something from you once before, show your appreciation by sparing them from inputting their details again.
As explained by Hubspot's principal marketing manager Pamela Vaughan, implement progressive profiling on your forms to recognize a returning customer and help them with pre-filled forms.
For new customers, you also want to spare them from filling out unnecessary forms. For this, it's best to enable guest checkouts. The same Baymard Institute study mentioned above also cites that 35% of your shoppers will abandon their cart if forced to create an account. If you want to keep a third of your business, offer guest checkout.
Amazon has perfected this heuristic as well by creating a one-click buy option on their checkout process.
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
As you examine the previously shared checkout examples above you'll notice very simple design aesthetics. Any distraction to a customer during the checkout process can cause them to abandon the sale. Limit the amount of links on the checkout pages and remove unnecessary images, the main navigation, and form fields. You can take this a step further by adopting a minimalist design scheme: only the essential elements over a plain background.
Like most online fashion stores, Three Stones pays special attention to their appearance. They demonstrate minimalism well, with easy-to-read sans serif typography and a plain white background.
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
This sister commandment to #5 safeguards against bad UX by addressing the errors you can't avoid. The key here is to help your users with usable and friendly error messages: descriptive language that makes it easy for them to fix their mistakes.
Huckberry prompts a user to fix the error before proceeding to the next stage in their checkout process and gives a reasonable answer as to why.
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
The last heuristic ensures the customer can find what they're looking for and resolves any issues they might have with easy-to-access help options.
For this design heuristic, it's easier to show than to tell. Let's use two examples we've already mentioned before.
First, Aritzia offers their assistance by way of links to the FAQ and their customer service email address to immediately address a customer's concerns.
Where Daniel Wellington offers a more immediate response to customer queries by offering live chat on their checkout pages.
While the technology may have changed over the last 25 years since Usability Engineering was first published, the heart of these guidelines remains just as prevalent today despite its age… much like the original 10 commandments.
Checkout optimization is something you always need to keep your eye on, even if you don't have real user data to draw from. That's where Nielsen's heuristic commandments come in handy — they're best practices for checkout design that apply to every online store, no matter the specialization.
Have you ever completed an evaluation using Nielsen's heuristics? Do you have any questions? We want to hear your thoughts, so tell us your opinions below in the comments section now.