Before we dive in and learn how to apply usability heuristics in designing an e-commerce website, you will need to know and understand what the 10 usability heuristics are.
The purpose of applying the 10 usability heuristics is to ensure that the website is user-friendly. If you have an existing e-commerce website, you can use these heuristics to evaluate if your website is user-friendly. After all, designing a good website gives users a better experience when interacting with it.
10 Usability Heuristics:
- Visibility of System Status
- Aesthetic & Minimalistic Design
- User Control & Freedom
- Flexibility & Efficiency of Use
- Help Users Recognize, Diagnose & Recover from Errors
- Recognition (Rather than Recall)
- Help & Documentation
- Error Prevention
- Consistency & Standard
- Match between System and the Real World
Visibility of System Status
Definition: The system should always keep users informed about what is going on, through appropriate feedback within a reasonable timeframe.
Layman terms: Users will always want to know how many steps it takes for them to complete the buying process.
Where you can apply the usability heuristic when designing e-commerce website:
- Checkout Page
- Delivery Checking
- Sign-Up Page
Aesthetic & Minimalistic Design
Definition: Dialogues should not contain information which is irrelevant or unnecessary. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Layman terms: Adopt a minimalistic design. Keep information short and sweet; or just enough to draw out the information you require from your users. For example, you would not want your users to fill up online forms with a lot of fields but with useless details that are not applicable to your business.
Where you can apply the usability heuristic when designing e-commerce website:
- Checkout Page
- Sign-Up Page
User Control & Freedom
Definition: 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.
Layman terms: Users want their own options and get frustrated when the system forces them to take redundant actions.
Where you can apply the usability heuristic when designing e-commerce website:
Shopping Cart Page – The ability for users to remove items that they did not want to purchase yet, or to select specific items while keeping the remaining items in the cart before checking out.
Flexibility & Efficiency of Use
Definition: 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.
Layman terms: Applying filters for users to sort their options based on their preference (such as by size, color etc.) A user can also purchase an item without going through the hassle of repeating the steps over. It is all about the efficiency of usage.
Where you can apply the usability heuristic when designing e-commerce website:
Address Book – Autocomplete fields. Users will not need to enter information twice. Address books should be filled up when they make the first purchase and saved for the subsequent purchase.
Products – Filters for users to sort out their preferences without needing to comb through all the products available. Have a “Buy now with just one click!” option.
Help User Recognize, Diagnose & Recover from Errors
Definition: Error messages should be expressed in plain language (no codes). It should precisely indicate the problem and constructively suggest a solution.
Layman terms: A prompt message to inform users on what went wrong with proper instructions/directions for the user to follow.
Where you can apply the usability heuristic when designing e-commerce website:
Sign-Up Page
Shopping Cart
Address Book – If a field is entered incorrectly, a message should indicate the correct step/method of inputting the relevant data.
Recognition (Rather than Recall)
Definition: Minimize the user’s memory load by making objects, actions, and options visible. The user should not 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.
Layman terms: Ensure that users can find the items they want easily.
Where you can apply the usability heuristic when designing e-commerce website:
Homepage – Display all the recently searched/viewed items and recommendations based on purchase history.
Help & Documentation
Definition: Even though it is better if the system can be used without documentation, it may sometimes be necessary. 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.
Layman terms: Provide help for users to input the correct data in the field, usually found in the “Address” section.
Where you can apply the usability heuristic when designing e-commerce website:
Address Book – A short note at the bottom to show how the fields should be input.
Password
Error Prevention
Definition: A careful design which prevents any problem from occurring in the first place is better than a good error message.
- Eliminate error-prone conditions.
- Check for errors and present users with a confirmation option before they commit to the action.
Layman terms: An alert message of confirmation to inform users to check the entered information before proceeding to the next step.
Where you can apply the usability heuristic when designing e-commerce website:
Shopping Cart – There will always be a time where users would want to remove an item in their cart but accidentally remove another. There needs to be an alert message to confirm the deletion of items in their cart.
Consistency & Standard
Definition: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Layman terms: The typography used throughout the website should be consistent. Do not confuse your users.
Where you can apply the usability heuristic when designing e-commerce website:
Throughout the site – Same words, font, color, etc
Match Between System and the Real World
Definition: The system should speak the users’ language- with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions and make the information appear in a natural and logical order.
Layman terms: Do not use technical jargons that would not be understandable to an average consumer.
Where you can apply the usability heuristic when designing e-commerce website:
Shopping Cart – A shopping cart icon should look like a shopping cart. In relation to the real world, users use a shopping cart when shopping offline.
Takeaway
So now that you’ve gotten an idea on what are the 10 usability heuristics, you can now apply these heuristics in your website. It is not only limited to e-commerce websites and can also be applied to non e-commerce websites. You can have multiple heuristics in one page. All you have to do is be creative and experiment on how you can apply the heuristics.
Remember these are just the key points for you to evaluate if your website is user-friendly. If your website is not user friendly, it is time to apply them. We hope this article benefits you. Stay tuned to our next blog post where we will be sharing with you more tips on the various topics.