User experience testing isn’t easy. It takes time, money, and hundreds if not thousands of real users willing to provide feedback.
This is especially the case for ecommerce. Ecommerce sites are large and the customer journey has numerous stages. Along with product selection and checkout, there are multiple intermediary interactions.
This complexity is a big problem for retailers. It’s not always possible to conduct UX testing and optimization for every single part of an ecommerce site.
That’s why it’s important to use “shortcuts” wherever possible.
Jakob Nielsen’s heuristics framework is a proven template for improving a site’s user experience without the need to expend significant resources.
In this post, we’re going to show you exactly how to use Nielsen Heuristics on your ecommerce store. We’ll explain all key terms, explore the customer journey in detail, and provide you with a host of practical tips.
The term “heuristics” is a multifaceted and complex one with applications in a range of fields, including philosophy, psychology, and law.
For our purposes, a more pared-down definition will do. A heuristic is a practical shortcut for solving a complex problem.
The solution will most likely not be 100% exact. But it will get you close enough to achieve the outcome you desire.
“Rules-of-thumb” are good examples of everyday heuristics. People might say, for instance, that it’s a good rule of thumb to expect rain when the sky is overcast or boil an egg for six minutes for a solid yolk.
It’s beneficial to view Nielsen’s heuristics as a checklist for designing optimal user experiences. It was developed by Jakob Nielsen (in conjunction with Rolf Molich) as a set of heuristics for user interface design. Its effectiveness and broad applicability have made it universally popular among developers.
Visibility of system status – Users should know which stage of a process they are involved in, what they are required to do, and what outcome their actions will have. This is achieved through timely feedback.
Match between system and the real world – The system should “communicate” to the user in a way they understand. The flow of processes should mirror real-word scenarios and users should immediately “get” instructions and feedback.
User control and freedom – Users should be able to undo mistakes easily.
Consistency and standards – Certain prompts, labels, and actions are commonplace. Use established standards – like “Add-to-Cart” buttons and swipeable images – so there is no chance of confusion.
Error prevention – A robust design eliminates the possibility of errors before the user makes them. If this is not possible, actions should be validated in real-time.
Recognition rather than recall – Make the system as intuitive as possible without requiring users to remember instructions from previous interactions.
Flexibility and efficiency of use – Allow users to tailor the platform to their preferences so they can interact with it as they want to.
Aesthetic and minimalist design – Units of information “compete with each other”. Only include what is necessary.
Help users recognize, diagnose, and recover from errors – Clearly explain errors, pinpoint the problem, and offer a solution.
Help and documentation – While it is better when there isn’t any need for documentation in the first place, help should be easy to acquire.
Want more insights like this?
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.
Why Should You Bother with Heuristics?
So why should you bother with Nielsen Heuristics in the first place? Why not just commit entirely to traditional user testing? Or opt for an alternative UX evaluation framework?
Here are a few things to keep in mind:
Nielsen’s heuristics framework doesn’t replace traditional user testing – You still need real feedback from real people. Nielsen Heuristics are an accompaniment to standard user testing and feedback-gathering methods, rather than a replacement.
They’re favored by many developers – Nielsen’s heuristics have a fantastic reputation among developers. They’ve been shown to provide definite UX gains time and again.
They’re a feasible alternative to extensive user testing – You simply won’t be able to run user tests on every single part of your site. It will cost too much money and take too much time. Heuristics fill the gaps that it’s not feasible to commit resources to.
You can apply them in a short space of time – Another benefit of Nielsen’s heuristics is that they can be used to quickly evaluate and improve user experience. You might have a time-sensitive marketing promotion, for example, or a new page template that needs to go live straight away. In these cases, an evaluation framework like Nielsen’s can prove invaluable.
Understanding the Ecommerce Customer Journey: 7 Stages
It’s crucial to understand that a good user experience optimization strategy needs to account for the whole customer experience, not just those parts that are most relevant to conversions and sales.
When developing or evaluating your site in the context of the Nielsen Heuristics framework, ask if you have accounted for every facet of an average customer’s interaction with your website.
Search – The very first point of contact for the majority of customers will be through search engines, email, or social. Visitors may arrive on your site with a specific product in mind or to browse more generally.
Discovery – The discovery phase occurs on product pages. It is when customers first learn about an item or items.
Evaluation – Evaluation occurs both on and off your site. Customers will consider more carefully whether a product meets their needs and visit other sites to see if they can get it cheaper elsewhere. Customers will read reviews at this stage.
Purchase – During the ordering process, customers will have a number of concerns and queries. They will want to understand shipping details and ensure that their payment details are secure. They will also require confirmation that the purchase has successfully been made.
Delivery – Along with actual delivery of the product, the “delivery stage” involves keeping customers updated about the status of shipped items and providing ongoing customer support.
Usage – In this stage, the customer uses the product and receives any material (like advertisements) that are included in the packaging. Customers may require support when using a product for the first time.
Review and referral – Finally, after customers have had a chance to use their purchase, they will be asked to give a review. It’s also common to request referrals, often in exchange for an incentive like a discount voucher, at this stage.
How to Use Nielsen Heuristics in Ecommerce: A Complete Overview
OK, so with the theoretical dimension out of the way, let’s run through each stage of Nielsen’s Heuristics framework and see how they apply in an ecommerce context.
1. Visibility of system status
“Visibility of system status” means that visitors know exactly what’s going on, what they need to do to achieve their desired outcome, and where they are in their perceived customer journey.
Ecommerce customers generally have a linear “mental map” of the ecommerce journey – beginning with browsing, verifying their cart, and then moving onto checkout. You should design features with this basic sequence in mind.
Here are some practical tips:
Reassure customers when they land on your site – When customers land on your site, they have some key questions: “Am I in the right place?”, “Will I find what I’m looking for?”, “Why should I shop here instead of somewhere else?” You can overcome all of these problems by including a clear logo in your header, a description of your value proposition, and clear CTAs.
Visitors to Warby Parker are left in no doubt they’re on a site that sells glasses. A key USP – free delivery and trial period – is also outlined.
Include a “Proceed to Checkout” or “My Bag” button on all pages when customers have selected a product – When a customer has finished browsing, they should be able to quickly navigate to the cart page to review their choices and proceed to checkout. Include a cart button in the header.
Allow customers to review their cart and continue browsing – Make it easy for customers to change their cart contents and return to the store to browse if they want to.
Show customers how many products they have in their cart – Include a small number next to the “Proceed to Cart” button so that customers have a clear understanding of how many products they’ve selected. This adds to a general feeling of clarity. Also, consider showing the total purchase value.
On the Zalando site, customers can see how many products they have in their “bag”.
Clearly indicate progress during checkout if forms are spread over multiple pages – Include a progress bar during the checkout stage if the form is spread over more than one page. Customers can easily become fatigued.
2. Match between system and the real world
There are two aspects to this principle: connecting with the customer in “their language” and creating a design with which they’re familiar. In part, this means replicating an in-store shopping experience. It also means following standard web norms and practices. If you do these two things, customers will feel at home on your site straight away.
Here are some practical tips:
Use straightforward, informal language – Use language that your customers will recognize and relate to. If visitors to your site prefer technical language, take this into account.
Topshop uses “fashion language” that customers understand.
Include intuitive features – Some interface features, like swiping images from right to left, using two fingers to zoom, and clicking the back button on a mobile device to remove a pop-up, are commonplace now. Including them on product pages will make it easier for users to interact with your site.
Keep things short – This is also known as “not boring the pants off them”. Customers are unlikely to be happy with an opaque wall of text, so keep things as concise as possible.
ASOS uses bullet points and sub-heads to make text easy to read.
Evoke the product in descriptions – Use descriptive language to evoke the features of the product, recreating an in-store experience as much as possible.
3. User control and freedom
“User control and freedom” is about letting visitors correct mistakes. It’s common for customers to add the wrong product to their basket or input incorrect details. So provide clear options to rectify errors. Here are some “emergency exits” you can build into your customer experience:
Ask customers to review products on the cart page – Don’t take customers straight to checkout. Instead, make sure they review their products before buying them. This will save trouble and dissatisfaction further down the line.
Let customers delete products or reduce the amount – On the cart page, let customers change the number of products, or even delete them, without being taken to a new page.
Bestbuy.com lets customers change item quantities or delete them.
Offer the option for customers to cancel orders immediately after purchase – Customers will often make accidental purchases. Allow for a courtesy period in which it’s possible to cancel an order. Making it difficult to cancel orders will leave a bad taste, creating negative brand associations.
4. Consistency and standards
Maintaining “consistency and standards” is about providing a user experience that customers intuitively understand, either because functions and processes are commonplace and well-understood or because there’s a formally recognized set of standards.
When it comes to your store, don’t reinvent the wheel. Opt for ecommerce features that customers are habituated to. Here are some pointers:
Mirror social media image features like swiping and two-finger zooming – Mobile users have been “conditioned” to interact with images in a specific way by apps like Facebook and Instagram. Replicate this functionality with your mobile images.
Use well-known CTA text like “Add to Cart” and “Buy Now” – Customers will recognize add-to-cart CTAs with familiar text immediately.
Amazon shows two CTAs: “Add to Cart” and “Buy Now”. Both work very effectively.
Use recognized templates for product pages and category pages – When you use a recognizable product page template, users can find the information they’re looking for straight away. Use large images, short descriptions, and a visual CTA. Include reviews further down the page.
5. Error prevention
Error prevention involves building design elements that prevent users from making errors, rather than alerting users to errors after they’ve been made. By adding features to key areas that are prone to mistakes and utilizing real-time confirmation, it’s possible to increase the ease of the customer journey. There are numerous ways to reduce errors on an ecommerce site.
Here are some of the main examples to be aware of:
Use real-time validation on checkout forms – When customers are completing checkout forms, show a small green confirmation mark or a red cross next to the fields. If showing an error sign, also include information about how to rectify the mistake.
When users are selecting product options, if an option is not available, then explain why – Clearly explain on product pages if sizes, colors, designs, etc. are out of stock.
Offer recommendations on discontinued product pages – If a product has been discontinued, explain this on the product page and offer some related item suggestions.
Offer related product suggestions when items are out of stock.
6. Recognition rather than recall
In usability heuristics, “recognition” refers to an immediate understanding of an interface through which users can intuitively achieve their desired outcome. “Recall” is a process in which users have to spend more time “remembering” how to use a system, figuring out what the process might involve based on an array of past experiences.
Amazon has the most-recognized ecommerce layout on the web. The best way to achieve recognition on your ecommerce site is to follow a design that users already know.
Here are some suggestions:
Use a grid layout to organize information.
Include the logo at the top of the screen.
Show a cart button in the top-right of the screen.
Use dropdown category menus.
Fostering recognition vs. recall involves lots of minor changes that all add up to create a seamless experience for customers.
To build an aesthetically-pleasing and minimalist design, you should get rid of all unnecessary and irrelevant information. One of the central ideas behind this heuristic is that every unit of information competes with each other. Unimportant information diminishes the relative value and visibility of important information. Here’s what you can do to ensure an aesthetic design:
Use a grid layout – Use a simple, recognizable grid layout to organize text and images.
Exclude unnecessary information – Get rid of any superfluous information. Ask, “Is this point necessary for the customer to make a decision about the purchase?”
Apple’s pages are minimalistic, simple, and visually appealing.
Limit visual clutter – Along with descriptive text, ensure that unnecessary visual elements are excluded to draw attention to the main images and description.
Simplify your design on mobile – It’s imperative to utilize a minimalist design for mobile. Use pop-ups/top-layers that fill the screen where necessary, such as for additional shipping information.
ASOS has a pared-down but effective design for its mobile site.
Minimize sections of your site – Sometimes, it’s appropriate to minimize certain site elements. Don’t show the header, for example, during checkout.
9. Help users recognize, diagnose, and recover from errors
Provide easy access to the most important information, like returns and shipping policies.
10. Help and documentation
While you should seek to create an interface that can be used without documentation, sometimes customers will require additional help. In this case, make documentation as easy to access as possible. Here are a few tips:
Provide links to FAQs in the footer.
Make help documentation searchable.
Communicate instructions in lists or bullet points.
Let customers speak to customer representatives.
Include Q&A sections on product pages.
Nielsen’s heuristics are simple but powerful tools. They can provide wide-ranging benefits for your ecommerce store. What’s more, they arm you with a framework for implementing effective changes that will positively affect your conversions and revenue.
Just keep one point in mind.
Heuristics are best utilized in conjunction with “traditional” user experience testing. They’re not a replacement for feedback from real users When you effectively use both, you’ll create a customer experience that your competitors can’t even touch.
Download your free 115-point ecommerce checklist. It’s an excellent complement to Nielsen’s heuristics and includes conversion-focused optimization tips for every page of your site, from the homepage to the checkout form. Download it now.