user's avatar
UX Case Study: Heuristic Analysis of Yuppiechef.com
UX Case Study: Heuristic Analysis of yuppiechef.com
Disclaimer: This is a case study to illustrate my personal approach in conducting a Heuristic Analysis of a website.​​​​​​​
In short, a Heuristic Analysis is an inspection methodology to evaluate a website using a number of evaluation criteria based on a broad set rules of thumb and not necessarily specific usability guidelines. This type of evaluation is usually done on an existing product, or it can be conducted at a later stage in the development of a new product to iron out usability issued before implementation. Keep in mind this methodology is not the same as Cognitive Walkthrough or Usability Testing - each plays a significant role in improving the usability of a product though.

The Nielsen Norman Group has established The 10 Usability Heuristics for User Interface Design, which is not only renowned for its credibility through the authors, Jacob Nielsen and Don Norman, but also the continuous evaluation of this set of heuristics. 




What’s needed to conduct a Heuristic Analysis?

•   3-5 Human evaluators to conduct the Heuristic Analysis
      It’s possible for one person to conduct a Heuristic Analysis, but the analysis will be more effective if there
      are 3-5 evaluators. Each person is unique and will find different usability issues which will make the
      evaluation more thorough.

•  The scope
     Always have a set of outcomes based on business requirements.

•   A set of maximum 10 evaluation criteria
     More than 10 evaluation criteria will possibly render no significant change in the outcome, while a minimum of
     5 evaluation criteria will ensure the analysis has some depth.

•  A set of maximum 4 severity criteria
    More than 4 severity criteria can overcomplicate the outcomes and not present as useful, while less than
    3 severity criteria will not allow for clear differentiation between the severity states.

•  Report
    The visual representation, together with a detailed breakdown of the outcomes will give a clear indication
    of where the major pain points within the usability of the website are and will give guidance on what to
    address.




Evaluation criteria for this case study

The 10 Usability Heuristics for User Interface Design by The Nielsen Norman Group was used as the 10 defining evaluation criteria.


1. Visibility of system status
    The system should always keep users informed about what is going on, through appropriate feedback within
    reasonable time.

2. Match between system and the real world
    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. 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.

3. User control and freedom
    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.

4. Consistency and standards
    Users should not have to wonder whether different words, situations, or actions mean the same thing.

5. Error prevention
    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.

6. Recognition rather than recall
    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 retrievablewhenever appropriate.

7. Flexibility and efficiency of use
    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.

8. Aesthetic and minimalist design
    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.

9. Help users recognise, diagnose, and recover from errors
    Error messages should be expressed in plain language (no codes), precisely indicate the problem, and
    constructively suggest a solution.

10. Help and documentation
      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.

Metric system for this case study

Each of the 10 evaluation criteria has been assigned 3 usability rules that support and drive the specific outcome for the heuristic (this number is not set, it can vary). The compliance to each of the usability rules are measured against 4 severity criteria as illustrated in the table below.




Evaluation for the yuppiechef.com website

1.1. Is the user aware of their current position within the user journey?
PASS

The breadcrumb trail ensures that the user is always aware of where they are within their browsing journey on the websitehe progress tracker within the checkout journey clearly shows the user what is needed to complete the transactions and where they are within the flow.
The basic browsing experience on yuppiechef.com
The checkout flow on yuppiechef.com
However, the Account settings navigation disappears when the user selects the Newsletter option. There is no option (other than the browser back button) to go back to the previous screen. What also adds to the confusion is that the heading, Email Preferences is not the same as the label in the dropdown (Newsletters). Labels for buttons and navigational elements must always align with page headings to avoid confusion.
The Account settings navigation disappears and heading doesn't align with label in navigation




1.2. Is the user notified about changes in their user journey?
PASS

When there’s a change in the user’s wish list or cart, it is clearly highlighted which of the selected items are not available. Although this is not displayed on the mobile site when viewing the cart from the cart icon in the header.
Out of stock item in the wish list
Out of stock item in the cart
Out of stock items are only visible in one of the views of the cart




1.3. Is the user aware of factors that can have a significant impact on their experience?
PASS

The country and currency are clearly visible in the header on all pages, and when the user wants to change the shipping country, the currency changes accordingly. However, the selected state can be visually more clear - the light blue seems to disappear within the UI.
The ‘Change shipping country & currency” is easy to use but lacks visual clarity






2.1. Are UI elements and interaction prompts easily recognisable?
FAIL

There are a handful of icons that owns a topic due to the consistent use of these ions in a specific context. The calendar icon is one of these icons. It's used for indicating events or act as a call to action to launch a datepicker. In the example below, the calendar icon is used for repeat subscriptions which can be confusing. A more suitable icon would be something that illustrates continuous movement.
The calendar icon used to illustrate repeat subscriptions is confusing
Another very well-known icon is the plus (+) or add icon which is almost exclusively used to indicate that something can be created from scratch or added to an existing list. On the mobile site, the cart icon in the header has a + visual element which indicates that the cart is empty and the user is prompted to shop and add something to their cart but when the icon is clicked there are already 2 items in the cart. There is a disjoint between the visual element and the required action from the user.
The + visual element in the cart icon is not in line with the expectation of adding something




2.2. Does the online experience replicate the familiarity of offline actions and behaviour?
PASS

A digital experience that mimics real life actions and behaviours makes the online experience more enjoyable. Having a handwritten card with a gift is natural behaviour and adds a personal touch. This is something that Yuppiechef does very well.
Not only does every purchase (gift or not) from Yuppiechef include a personalised handwritten card, the user also has the option to create a personalised gift card online and send it via email or as a physical gift card with their purchase. This is an excellent example of a real-life action that is mimicked digitally to enforce familiarity and enhance the user’s personal experience.




2.3 Does the website make use of acronyms, technical terms or jargon that need an explanation? If acronyms are used, are they clearly explained?
PASS

The content is simple and easily understandable across all sections of the website.




3.1. Is the user able to exit all states such as pop-ups and multimedia? Is the exit state clear?
FAIL

All multimedia videos have a full-screen view and allows the user to exit the fullscreen. Most pop-ups on the website have a close icon in the top right corner to dismiss the pop-up, however, the styling is not always consistent. Some pop-ups look very different and have no close icon.
Most pop-ups have a close icon in the top right corner
Styling for the close icon is not consistent and not clear
Some pop-ups have no close icon


3.2 Is the user able to use the core sections of the website without signing up?
PASS
The user is able to browse all available products, create a registry, sign up for repeat subscriptions, sign up for trade, etc. until the point of payment details are required. The user is not forced to create an account at any time during their user journey.




3.3 Does the user have control over their personal information?
FAIL

Even though the user can update their personal information they cannot delete their profile, thus don't have full control over their personal information. When searching how to delete your account in the FAQ section, nothing is available.
No information available on how to delete your account





4.1. Is there a consistent design standard for all call to actions  (CTA) on the website?
FAIL
All buttons should be categorised based on the importance and outcome of the button. There seems to be no design standard for call to actions on the yuppiechef website. Buttons are white, charcoal, green or blue -  there is even a difference in the corner radius.
There is no clear design standard for call to actions



4.2. Is there a consistent design standard for form controls?
FAIL
Even though the form controls seem similar in styling, there are some vast inconsistencies between them. Some input fields contain icons while others have no visual representation. These icons have distinctive colours (light grey and blue) in the default state and different colours in the focus state (blue and yellow). The use of icons and focus states should be consistent.




4.3. Is there a consistent design standard for headings?
PASS

The main headings at the top of the main pages are very inconsistent and look quite random. I’m not sure if this was intentional, but even if the intent was to be creative, the big jumps in typography, headings styled as buttons and missing headings are just jarring. However, all the subheadings are consistent and the different weights of the words work well.
The inconsistency of the main headings are jarring
The subheadings are consistent ties the content together nicely






5.1. Are there helpful constraints that prevent the user from making mistakes?
FAIL
There are no UI constraints to prevent the user from entering incorrect values in forms. Within the profile section, the user has the option to add non numeric characters in the Telephone number field. The Add credit card section also lacks the UI constraint to add non numeric characters in the Card number.
Nonnumerical characters are allowed for numerical only fields
Although the datepicker for creating a registry is very helpful. The user won’t be able to enter an incorrect date format but at the same time, there’s an inconsistency with the datepicker used in the personal profile section.
Inconsistent UI datepickers



5.2. Is the user guide with suggestions to prevent incorrect actions?
PASS

There are several guidelines within the forms on the website that guide the user in what type of information is needed for the specific field. 



5.3. Is the user presented with forgiving formatting for information?
PASS

Often the user can feel overwhelmed by the number of fields when filling in forms and can easily make a mistake. By using forgiving formatting to relieve the user’s cognitive load, will not only ensure that more accurate information is provided but also make the experience of filling in forms more endurable.

The first example is from the Add address section. When the user adds their address in the Google input field, the City field is prepopulate. It would be great if the Telephone field could also be prepopulated with (021), the extension for the Cape Town area.
City field is prepopulated but Telephone not
The second example is from the Add credit card section. All credit cards have unique formatting - American Express cards start with either 34 or 37, Mastercard numbers begin with 51–55 and Visa cards start with 4. Thus, when the user adds their credit card number, the card type is prepopulated accordingly.
When the card number is added the card type field is prepopulated accordingly
6.1. Is the user presented with a list of recently viewed products or pages?
PASS

At the bottom of every product page there is a list of recently viewed items, which allows the user to easily revert back to previously viewed products. However it would be nice if the search component could show recently searched phrases as well.



6.2. Is the user presented with customised content based on previous actions?
FAIL

When adding a product to the cart, the suggested products listed below has no relevance — not to the product in the cart nor to previously viewed items.
Recommended products listed below has no relevance



6.3. Is the user presented with navigational items that reduce cognitive load and aids recall?
FAIL

The principle of recognition and recall is based on the amount of effort it takes the user to retrieve a concept from memory. Within the secondary navigation the labels Cookware, Kitchenware, Bakeware, Tableware & Homeware might not be as obvious as it seems.

Based on users’ mental models certain items can be grouped in more than one category. Pots and pans fall in Cookware, but are pots and pans not also classified as Kitchenware or Bakeware? Thus if the user has a specific product they’re searching for, their recall of where that product fits in can add unnecessary cognitive load.





The Nielsen Norman Group refers to “accelerators” which are often unseen by the novice user, but are essential for the experienced user to advance them in their user journey.

7.1. Is the user presented with shortcuts to end goals?
7.2. Is the user able to tailor frequent actions?
7.3. Is the user presented with ambient information for quick actions?
FAIL



8.1. Is the user interface design simple and easy to understand?
PASS

The visual design of the Yuppiechef website is simple and professional, accent colours are used for important information such as CTAs, validity of stock, sale items, etc. The use of white space gives the content breathing space and makes it easy to read and understand.





8.2. Is the user clear on what all the icons mean and why they’re included in the design?
PASS

There is no excessive use of icons and where icons are used there’s a label or description that accompany the icon.




8.3. Are all forms easy to understand and effortless to fill in?
PASS

The forms are straightforward, however small tweaks to larger forms such as segmenting parts of the form by adding subheadings can improve the readability.





9.1. Is the user presented with error messages (as opposed to no message) when adding incorrect information in a form control?
PASS

All form fields have validation messages when incorrect information has been entered, although the styling of the validation messages are not consistent. Also, some validation messages disappear after a couple of seconds which can leave the user confused if they didn’t manage to read the message the first time around.

9.2. Is the user presented with human-readable error messages that offer useful information on how to rectify the problem?
FAIL

All input fields on the Yuppiechef website, except for the Create an account form, lacks useful descriptions on how to rectify the problem. The standard “Please fill in this field” message will not help the user recover from the error.





9.3. Is the user presented with polite error messages that don’t blame the user for the error?
FAIL

The validation messages are not descriptive nor polite.






10.1. Is the user presented with clear steps / guidelines to use the product service?
PASS

Shopping on the Yuppiechef website is pretty simple, no onboarding or guide is needed to purchase an item. Each page includes clear CTAs to choose colour, change quantity and add the item to the the cart, registry or wish list.




10.2. Does the user have access to documentation with relevant topics to help reach their goal?
PASS

The Help centre is easily accessible from the top navigation and is easy to use. The user can either search or browse topics by popularity or by category.





10.3. Is the user presented with other channels of communication to enquire assistance to reach their goal?
PASS

The user has the option to contact Yuppiechef through a range of other channels, both online and offline.





Yuppiechef Heuristics Analysis report

From the level of compliance for the usability rules, a score is allocated for each of the 10 heuristics. Don’t get lost in the detail of the scoring but rather on the usability rules that have not met the compliance criteria. Drawing up a radar chart is an excellent way to get an overview of the areas in which the website is lacking.

CONCLUSION

Conducting a Heuristic Analysis is an excellent way to get an objective view of a website’s usability status. By diving into each of the 10 Usability Heuristics by Nielsen Norman Group, will give a whole new perspective on existing functionality and UI elements within the website. Ultimately this UX methodology should be included in a larger UX strategy that’s accompanied with user research & usability testing.



UX Case Study: Heuristic Analysis of Yuppiechef.com
13
276
1
Published:

UX Case Study: Heuristic Analysis of Yuppiechef.com

In short, a Heuristic Analysis is an inspection methodology to evaluate a website using a number of evaluation criteria based on a broad set rule Read More
13
276
1
Published:

Tools

Attribution, Non-commercial, No DerivativesAttribution, Non-commercial, No DerivativesAttribution, Non-commercial, No Derivatives