filling up forms

Before we dive in 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 are to ensure that your website are user-friendly. If you have an existing e-commerce website, you can use this heuristics to evaluate if your website now are user-friendly. After all, designing website is meant for your users to have a better experience when interacting with it.

10 usability heuristics:

  • Visibility of system status

  • Aesthetic and minimalist design

  • User control and freedom

  • Flexibility and efficiency of use

  • Help user recognize, diagnose and recover from errors

  • Recognition rather than recall

  • Help and documentation

  • Error prevention

  • Consistency and standard

  • Match between system and the real world

Visibility of system status

 

milestone of delivery process of products

Definition: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Layman terms: As a user, you will always want to know how many process it takes for you 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 and minimalist design

Definition: 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.

Layman terms: Minimalist design. Keep information needed short and sweet yet informative or is enough for you to draw out the information from your users. You would not want your users to fill up a lot of fields but end-up you will not be using the information given.

 

Where you can apply the usability heuristic when designing e-commerce website:

 

  • Checkout page

  • Sign-up page

E-commerce registration form

User control and 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: As a user, you want your own options to select. You get frustrated when the system forces you to take an action that you did not want.

 

Where you can apply the usability heuristic when designing e-commerce website:

 

  • Shopping cart page – ability for users to remove items that they did not want to purchase yet or to select some items but keep the remaining items in the cart before checking out.

Options to select item from cart to checkout from e-commerce

Flexibility and 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. OR a user can purchase an item without having a hassle to go through the same boring steps all over and over again. It’s all about the efficiency of usage.

 

Where you can apply the usability heuristic when designing e-commerce website:

 

  • Address book – autocomplete fields. User will not need to enter information twice. Address book should be filled up when they make the first purchase. The subsequent purchase, the address should have already been saved and users will not need to repeat the steps all over again.

  • Products – filters for users to filter/sort out their preferences so they would not need to go through all the products one at a time. OR having a “buy now with one click” option.

e-commerce Buy now at 1 click option

Help user recognize, diagnose and recover from errors

Definition: Error messages should be expressed in plain language (no codes), 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 user to follow as a guideline.

 

Where you can apply the usability heuristic when designing e-commerce website:

 

  • Sign-up page

  • Shopping cart

  • Address book – if a field is enter incorrectly, a prompt message should indicate the correct step/method of inputting the data.

help text in sign up form ecommerce

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: Ensuring that you can find the items you wanted easily. There will be no usage of the search bar to look for the items you want.

 

Where you can apply the usability heuristic when designing e-commerce website:

 

  • Homepage – display all the recent searches or recently viewed items and even recommendations on your previously bought items from your order history.

recently viewed item ecommerce

Help and documentation

Definition: 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.

Layman terms: A help for users to input the correct data in the field, usually found in 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

an example of how to type in the text field

Error prevention

Definition: 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.

Layman terms: A prompt message of confirmation to inform users if they have enter the correct information before proceeding to the next step.

 

Where you can apply the usability heuristic when designing e-commerce website:

 

  • Shopping cart – there is always a time where you wanted to delete/remove one item in cart but accidentally deleted another and there is no alert message for you to double confirm deleting the items in your cart.

Shopping cart prompt message e-commerce

Consistency and standard

Definition: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Layman terms: Typography used through the website should be consistent. If you used “Add to cart” for your first page, all page have to be the same. Same word, same color, same font. You would not want to confuse your users when using your website.

 

Where you can apply the usability heuristic when designing e-commerce website:

 

  • Throughout pages – remember same words, same font, same 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, making information appear in a natural and logical order.

Layman terms: Whatever in the system shows, should be the same as what the human thinks. It should represent the same thing. To put in another word, jargons.

 

Where you can apply the usability heuristic when designing e-commerce website:

 

  • Shopping cart – Shopping cart icon should looks like a shopping cart and not other icon, in real world, when users shop in a physical store, they uses a shopping trolley/basket.

Takeaway

So now that you get an idea on what are the 10 usability heuristics and how you can apply these heuristics in your website, these are just some of the examples we gave you but there are more examples to it. It is not only limited to e-commerce website, you can also apply it for non e-commerce website. You can have multiple heuristics in one page. All you need to do is to be creative in where/which page you can apply the heuristics to. Remember these are the key points for you to evaluate if your website is user-friendly. If it’s not, it is time to apply these heuristics. We hope this article benefits you. Stay tune to our next blog post where we will be sharing with you more tips on the various topics.