Nielsen’s heuristics framework is an incredibly powerful tool for optimizing your ecommerce store.
It enables you to pinpoint customer experience issues, both large and small. And when you build an exceptional customer experience, your conversion rate will increase. Satisfied customers are eager to buy, refer, and return to your store.
They can be applied to any interface that users interact with in order to achieve a specific set of outcomes.
Because of the issues associated with traditional ecommerce user testing, where sites can have hundreds of unique templates and optimization is ongoing, Nielsen’s straightforward framework has become popular among retailers.
Here’s a quick rundown:
Visibility of system status – Users should receive appropriate feedback so they know what’s happening, what they’re expected to do, and why.
Match between system and the real world – Language and design should replicate a “real-world” experience, using phrases that customers understand and an interface that is intuitive.
User control and freedom – Users should be able to correct mistakes and return to previous parts of the process.
Consistency and standards – Functions should be labeled as clearly as possible, limiting the scope for users to misunderstand words and situations.
Error prevention – The system should prevent errors before they occur. Eliminate problem-prone areas and provide real-time confirmation.
Recognition rather than recall – There should be consistency across the whole process. Users shouldn’t be forced to “work out” how to complete new actions.
Flexibility and efficiency of use – The interface should work for both new and experienced users. Experienced users should be able to customize their experience.
Aesthetic and minimalist design – Pieces of information “compete with each other”. Only include what’s necessary.
Help users recognize, diagnose, and recover from errors – Keep error messages straightforward and simple and include practical instructions about how to rectify the problem.
Help and documentation – Make help documentation readily and easily available.
Get weekly ecommerce tips, strategies and leading industry knowledge. Delivered right into your inbox.
Woohoo! You’ve just signed up. Check your inbox to confirm the subscription.
How to Run a Checkout Heuristic Analysis
With the theoretical aspects out of the way, let’s take a look at some practical ecommerce applications of Nielsen’s heuristics when it comes to checkout.
Treat the following points as a checklist. The closer your checkout process and pages align with them, the stronger and more effective your user experience is likely to be.
1. Visibility of system status
The heuristic “visibility of system status” has two parts. First, customers should have a sense of where they are in the checkout process. Second, they should clearly understand what they’re expected to do after each step.
Here are the main tips:
Show a progress bar or notification – If checkout occurs over more than one page, let customers know where they are in the process. Customers often wrongly assume that checkout is going to take a long time, and consequently abandon their cart. Solve this problem by indicating that only two or three steps remain. You might also want to include labels in the progress bar like, “Confirmation”, “Delivery Address”, “Payment”, etc.
Wiggle clearly informs customers about how long is left in the checkout process.
Use descriptive CTAs – At the end of each form, include a descriptive CTA so customers know where they’re proceeding to. A Call-To-Action (CTA) that reads “Enter Payment Details” is more informative than “Next”.
Explain unexpected steps – If you need to include steps that customers aren’t expecting – such third-party verification of credit card details – then add a short description that explains why.
2. Match between system and the real world
A system that “matches the real world” is one that users intuitively understand. It should use everyday language (without any unnecessarily obscure or technical words or phrases), and information should be presented in a logical, linear fashion.
Here are some practical suggestions:
Opt for commonly-used labels – Choose labels like “First Name”, “Street Name”, “Zip Code”, etc. that users will recognize, rather than inventing new or similar ones.
Match field sizes with the length of the input – If a field only requires a short input, avoid confusion by tailoring the size accordingly.
FIREBOX adjusts its field sizes based on inputs.
Include one field per line – Simplify checkout pages by including only one field per line (rather than two fields next to each other). The exception to this is including two short fields next to each other. Generally, you should follow a single-column format.
3. User control and freedom
“User control and freedom” means that customers are able to return to previous parts of the checkout process (or even to browse further products) with a minimum of fuss and loss of already-inputted information.
You should allow customers to correct self-identified mistakes, whether they have mistyped their address or remembered another product they wanted to buy.
The other side of user control and freedom is letting customers check out in the way that they want to. It’s important not to overload customers with options. But there should be enough features for users to feel they have the freedom to complete the process in their preferred way. Here are some simple options that add control and freedom to the checkout process:
Save information – If a user leaves the page, automatically repopulate information when they return. It won’t be possible to do this with all details (like card information), but it’s usually feasible for the majority of entries.
Include secondary CTAs that allow customers to return to previous pages – Include a secondary CTA somewhere on the page that lets customers return to a previous part of the checkout process or form.
Walmart includes a small “Edit” button in previous sections of the form.
Allow existing customers to save their details – Provide automated options for existing customers. Allow them to keep their addresses and credit card information so they don’t have to re-enter it every time they make a purchase.
Offer a range of payment options – Most customers will have a preferred payment method so offer as many options as possible.
4. Consistency and standards
“Consistency and standards” is about mirroring common features that customers will recognize.
It’s not always a good thing to reinvent the wheel when it comes to user experience, especially during checkout where customers want to complete a task as quickly and efficiently as possible.
Maintaining consistency limits the scope for confusion and the consequent frustration it causes.
Keep the following points in mind:
Use floating labels – Floating labels, which minimize to the corner of the input field, enable users to double-check and confirm their entries.
Schuh includes floating labels on its checkout fields.
Distinguish between optional and mandatory fields – Clearly distinguish between optional and mandatory fields. Customers that aren’t aware of these distinctions may leave out necessary information.
Order fields in the “expected way” – When filling out online forms, especially on mobile devices, users intuitively move down the page.
5. Error prevention
There are two aspects to error prevention. Ideally, the system should be set up to prevent errors before they occur. Retailers can achieve this by pinpointing the most error-prone areas in their checkout process and developing methods to help customers avoid them.
The other aspect relates to when an error does occur. Customers should be prompted to correct mistakes quickly, with clear instructions about how to do so.
Here are some of the best ways to eliminate errors:
Use real-time validation – Don’t validate information when a user submits the form. Verify inputs as they’re entered.
Barnes and Noble highlight incorrect input with a red border.
Validate individual fields with green and red indicators – When a customer correctly inputs information, show a verification mark or turn the border of the field green. Alternatively, display a red mark when they have incorrectly inputted information. Information should be provided about how to rectify the mistake.
Include visual prompts – Include visual explanations, such as for credit card numbers, wherever appropriate.
6. Recognition rather than recall
When a customer lands on your checkout form, they have already interacted extensively with your site. They have “learned” how your interface works and built up expectations about how to use it.
“Recognition rather than recall” means that your checkout is consistent with other site elements that users are already accustomed to.
Here are the key points to keep in mind to ensure recognition rather than recall:
Keep a similar design on checkout forms – Customers shouldn’t feel as though they’ve left your site. Fonts, colors, and layouts should all be the same.
Show your logo – By showing your logo on checkout forms, you maintain a sense of continuity across the whole site.
Zappos shows a logo on the checkout form.
Maintain key navigation links – When minimizing or simplifying the menu, header, footer, etc., make sure the navigation elements you do include correspond with previous links.
Show an order summary alongside the form – Showing an order summary during checkout provides reassurance to customers if they want to double-check the price of the item they’re purchasing or confirm delivery details.
7. Flexibility and efficiency of use
Many visitors to your site will be repeat customers that already have an account. Providing options to streamline checkout will improve the customer experience and reduce the chances of cart abandonment.
Here are a few simple tweaks that you can use to boost “flexibility” and “efficiency of use”:
Enable autofill – Autofill has become increasingly popular, especially on mobile devices. Most browsers are also autofill enabled.
Automatically generate details for users – This feature uses limited information to complete fields in less time than it would take for the user to input their details manually. For example, a customer can enter their zip code and select from a dropdown of addresses. The relevant fields will then automatically populate.
Don’t require registration to complete checkout – Don’t force customers to open an account. Provide an option to “Check Out as a Guest”. It’s good practice to ask for an email address so you can contact visitors if they abandon their cart.
Wiggle lets customers complete checkout as a guest. Only an email address is requested.
Integrate registration into the checkout form – Rather than include an additional step, integrate registration into the checkout form so that customers don’t need to set up an account separately.
8. Aesthetic and minimalist design
The need to create an aesthetic and minimalist design is predicated on a simple principle: units of information compete with each other.
During checkout, you want customers to do one thing: complete their purchase. Any extraneous elements, whether in the form of information, secondary CTAs, or design features that draw attention, reduce the likelihood that this will happen.
The following points will help you create a pared-down and effective design:
Get rid of all unnecessary fields – Only include the fields that are absolutely necessary to limit “buyer fatigue”.
Keep buttons simple and straightforward – Don’t create confusion by displaying clever or vague CTAs. Phrases like “Continue to Payment” and “Complete Your Purchase” are usually the most effective.
Offer ultra-streamlined purchase options, like one-click purchasing, if possible – Amazon has used this strategy effectively.
Amazon offers a “Buy Now” option for customers that want to avoid checkout.
Minimize or completely remove navigation elements during checkout – Limit the chance that customers will navigate to another page by removing unnecessary links. Simplify the menu and footer and don’t show any on-page links unless you have to.
Remove all external links – Don’t include any links to external sites, such as social media accounts.
9. Help users recognize, diagnose, and recover from errors
It doesn’t matter if you have the best-designed checkout on the web. Users will still make mistakes.
When a mistake is made, it’s imperative that you provide customers with the tools and information they need to rectify it. This sounds like obvious advice, but you would be amazed at the number of retailers that overlook it.
Keep the following three points in mind:
Show advice beneath individual fields when a user makes a mistake – When a user makes a mistake, display advice in real-time alongside the corresponding field.
Best Buy provides straightforward instructions to customers who have incorrectly entered details. The reason for the error, such as an invalid email address, is also given.
Use plain language – Make instructions clear and easy-to-follow. Avoid technical language unless you’re sure that customers will understand it.
Tell users what’s happened – To avoid confusion, explain what the problem is. If customers think that they have inputted the right information, they’re likely to blame the system and abandon checkout.
10. Help and documentation
You should aim to build a checkout process that can be completed without documentation. Sometimes, however, customers will need extra help.
Help documentation should be easy to access and include practical steps for solving problems. You should also make it simple for customers to chat with a real person if they want to.
Here are some pointers:
Include a link to documentation in the footer – Online users will often check the footer for help documentation out of habit.
Show additional information on-page – For certain stages of the checkout process, showing FAQs or on-page information can be helpful for customers.
Apple includes a dedicated FAQ section on its delivery page.
Show a customer service number – Show a customer service number on checkout pages so customers can ring a representative if they want to.
List actionable steps in help documentation – Help documentation should always be practical.
Nielsen’s heuristics framework is an effective and adaptable tool that can be leveraged at all stages of design, development, and user experience testing.
But it’s not a replacement for good old-fashioned customer feedback. One of the reasons that customer feedback forms, along with a host of “traditional” UX methods, are still so prevalent in ecommerce is because they work.
Heuristics work best alongside feedback gathering. They ensure that you avoid major mistakes and enable you to provide a strong customer experience right off the bat.
And that means more conversions, sales, and revenue.