Usability Inspection
By Luvnit Sawhney
BREW92
Specialty Cafe & Roastery
What is Heuristics? Heuristics Principles
1.Visibility of system status:
A heuristic evaluation is a usability 2.Match between system and the real world:
inspection method for computer 3.User control and freedom:
software, Website or Application 4.Consistency and standards:
that helps to identify usability 5.Error prevention:
problems in the user interface (UI) 6.Recognition rather than recall:
design. 7.Flexibility and efficiency of use:
8.Aesthetic and minimalist design:
9.Help users recognise, diagnose, and recover from errors:
10.Help and documentation:
Homepage
Issue: No Brand Awareness
Severity: 2 - minor usability problem
Heuristics Violated: Use names that are conceptually
related to function
Description: When a user lands on the Homepage, they
don’t know what the website is about or what the offerings
are. There is no brand awareness created.
Suggestion: Homepage should have a great beginning,
middle and end. Have a strong header that states the
Brand name and the various actions that you can perform
on the website.
Issue: Bad CTA
Severity: 3 - major usability problem; important to fix
Heuristics Violated: Reduce uncertainty
Description: On the homepage the “Shop Costa Rica”
CTA is irrelevant. First time users won’t know what this
Button does. Users are left guessing as to what this CTA
does. Is Costa Rica a brand name or type of coffee ?
Suggestion: Have a strong clear CTA that is universal.
Display data in a manner that is clear and obvious to
reduce decision time and error.
Issue: No Heading / Product Title
Severity: 2 - minor usability problem
Heuristics Violated: Reduce uncertainty
Description: On the first fold of the website, there are
Product listings but the user has not been told yet what
products they are viewing. Even the product title doesn’t
Have any clues as to what the product is. Is it whole beans
Ground coffee ?
Suggestion: Have a strong header explains to the user
what he is going to see, instead of showcasing random
products. Have a short product description.
Issue: Add to Cart doesn’t look like a button.
Severity: 4 - usability catastrophe; imperative to fix
Heuristics Violated: Consistency and standards:
Description: Currently add to cart is just a text. Users
might miss the fact that the product can be bought.
Suggestion: Make the Add to Cart option a button with
bold colours and bounding box.
The product image is taking up a lot of real-estate on the site.
Reduce the image size by 15 - 20%
Header & Menu
Issue: Language selection is broken.
Severity: 4 - usability catastrophe; imperative to fix
Heuristics Violated: Recognition rather than recall / Present new information with meaningful aids to interpretation
Description: There is no need to display the English language selection option on a page that is already in English
This holds true for the vice versa also. The language option here is also represented by EN / AR. We are assuming
That the audience under this abbreviation nomenclature. Also the language selection icon is very close to the “cart” icon.
Users might get confused by the proximity of the icons.
Suggestion: If the website is in English only display the option to switch to the Arabic language and vice-versa.
Also the Arabic language should be written in Arabic and not “AR” since that assumes that the user understands
AR as Arabic.
Issue: Wrong Cart Icon
Severity: 4- usability catastrophe; imperative to fix
Heuristics Violated: Recognition rather than recall:
Description: Users will have to guess what these icons do.
Minimize the user's memory load by making objects,
actions, and options visible and according to convention.
Suggestion: Replace the icon to common icons that users
can relate to. Such as -
This is an odd place to put Login.
Issue: Menu items hidden in a website
Severity: 4- usability catastrophe; imperative to fix
Heuristics Violated: Group data in consistently meaningful
ways
Description: Since the menu items are hidden inside a
hamburger style menu. Users will spend more time
searching for options and navigation because a 2 step
process. Also the login button shouldn’t be hidden in this
menu.
Suggestion: Within a screen, data should be logically
grouped; across screens, it should be consistently grouped.
This will decrease information search time. Have this
navigation on the header and remove the hamburger style
menu. Move the Login button to the header also.
Product Page
Issue: Add to cart button looks disabled.
Severity: 2 - minor usability problem
Heuristics Violated: Recognition rather than recall:
Description: Currently the Add to Cart button looks
disabled. This might deter users from clicking the button.
Suggestion: Make the button colourful based on branding
There is no way to increase quantity and or have hover over animation.
Subscription Page
Issue: Vertical scroll for simple information & repeating info.
Severity: 3 - major usability problem; important to fix
Heuristics Violated: Group data in consistently meaningful
ways
Description: Within a screen, data should be logically
grouped. Having a vertical scroll to display information that
could have been grouped horizontally is inefficient. Having
5 CTA button on a single page is excessive and confusing.
Suggestion: Make step 1, 2 & 3 horizontal and have one
CTA button on the page.
Cart Page / Checkout flow
The user checkout flow is slow here. This page
should only have Sign in & Check out as guest,
without the “Email Address” text field. Because you
can ask this detail on the enter shipping address
page.
I also suggest we have a Continue with Facebook
option as well.
No place to apply promo code
BREW92
Specialty Cafe & Roastery
