Why we decided to perform a heuristic analysis
Working on a product is both exciting and challenging. Our mission is providing podcasters with the best platform possible, and one of the goals is keeping Spreaker state-of-the-art, that is, doing our best to keep up with the market and the competitors, providing a great experience for our users. There are a lot of things we can do to reach this goal: supporting more distribution platforms, provide an improved episodes management to name two. Rather than diving into adding new features or redesigning pages from scratch, we tried to improve what was already there dedicating our time to perform a heuristic analysis in order to:
- Discover usability problems with individual elements and how they impact the overall user experience;
- Provide quick and valuable feedback related to our product usability
The analysis allowed us to catch some easy wins, changes that are easy to design and code but that have a huge positive impact on user experience.
…but what is a heuristic analysis
Heuristic analysis is a method, based on 10 general principles for human-computer interaction (AKA 10 heuristics from Norman and Nielsen), for helping UX specialists to evaluate a user interface design. A Heuristic is a guideline or a law that employs a practical method to solve a problem, it is not guaranteed to be optimal or perfect but sufficient for reaching an immediate goal.
In the user experience field the “immediate goal” is to improve the overall usability of the product, meanwhile the guidelines, or laws, we use are the 10 heuristics created by Norman and Nielsen around 1994.
As evaluators, we “scan” a user interface and evaluate it according to the heuristics, then we point out and categorize all the issues in order to fix them.
The 10 heuristics from Norman and Nielsen (with examples!)
#1 Visibility of System Status
The system should always keep users informed about what is going on when performing an action. The system should always offer any sort of feedback (visual, audio, haptic) to help the user understand what’s happening.
Ex. Loading/Uploading. Load time can vary drastically depending on the context, and when users don’t have any feedback, they simply don’t have any information whether the system is doing something or not. Feedback alleviates fears that the system is not responding.
#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. By following real-world conventions, information appear in a natural and logical way
Ex. Real-world analogy. In our CMS in every search bar we communicate the search action using the magnifying glass icon. Doing that we link the action of “search” to the real world object indeed for searching something.
#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.
Ex. Confirmation messages. When users try to delete an episode the system, by showing a confirmation message, double checks if the action has been made by error or not.
#4 Consistency and Standards
Users should never have to wonder whether different words, situations, or actions mean the same thing. This translates into ‘internal’ consistency (consistency of individual design decisions in your app) and ‘external’ consistency (consistency with platform standards).
Ex. Product navigation. The location of crucial navigation objects should be consistent throughout the application (internal consistency) and the standard is to have the main navigation on the left of the screen (external consistency).
#5 Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place.
Ex. Form input. Inline validation in forms can be used to validate the data on the fly, so the user doesn’t need to tap the Submit button. Here this technique is applied to a password validation form, the error message tells where the error is and why it occurs.
#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 application to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Ex. Contextual recommendations. When uploading a new episode the system suggests to the user all the podcasts created or accessible by his account in which he can upload the new episode.
#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.
Ex. Shortcuts. Every software offers hundreds of keyboard shortcuts that will enable you to use frequent actions without clicking the menu such as copy and paste shortcuts.
#8 Aesthetic and Minimalist Design
The application 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.
Ex. Prioritize the content. By focusing on content and removing all unnecessary visual design details, the google search page is the example of the best possible minimalist design.
#9 Recognize, Diagnose, and Recover from Errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Ex. Clarity and helpfulness of error messages. When users see error messages, they rarely know what to do next. That’s why it’s vital to provide a clear path on how to solve the problem.
#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.
Ex. In-app help and documentation. The CMS offers help and support right inside the product.
How we did a heuristic analysis
We spent one week analyzing the whole CMS pointing out all the items that don’t follow the UX heuristics principles and categorizing them in a well organized spreadsheet.
Alongside the whole team, we categorized and assigned a score to all the issues by:
- Severity (or how much the issue prevents users from completing the job-to-be-done)
- Ease to fix (or how is easy by code side manage to fix the issue)
- Impact on the user (or how much the issue impact the user’s daily user experience)
The result is a list of quick wins, issues with high severity, easy to fix and with a very high impact on user experience. These quick wins have been translated into tasks in our kanban backlog.
After taking care of all the quick wins we will manage all the other issues in order to full fill our main goal: make Spreaker hosting state-of-the-art
Finals thoughts
As you can see from this case study, heuristic analysis is one of the most useful (and fast to perform) weapons for a designer. In fact, it can point out all the issues living in the product and let you categorize them easily. Be careful and pay attention to the main downside of this process: it doesn’t involve the users.
As every designer knows, understanding the users and their needs is the most important thing for everyone who works on a product, so please remember: Even the best heuristic evaluation does NOT replace the user research.