You are here because you heard heuristic evaluations can help identify the user experience and user interface design issues affecting your website’s performance. Besides a breakdown of what a heuristic evaluation is, in this article, you will find heuristic evaluation examples.
The examples will provide a clear picture of how to perform a heuristic evaluation to identify your website’s aesthetic and usability problems. Identifying and fixing such issues is crucial because bad web design causes 94% of negative user feedback. Also, 70% of online businesses fail because of bad usability, and slow-loading web pages cost businesses $6.8 billion yearly.
What is a heuristic evaluation?
Heuristic evaluation offers UX designers and usability experts a simple way to test a website or app’s UI and UX design. The process requires using established heuristics or usability principles to measure user-friendliness, navigability, aesthetics, and more.
Heuristic analysis is user-centric, meaning its primary function is verifying a web platform can meet end-user needs. Resolving the usability issues identified during a heuristic evaluation facilitates optimizing your web design and performance to attract and satisfy more users.
You can run a heuristic assessment during the early stages of your web or app design, such as during the prototype stage. Performing heuristic evaluations on prototypes will help measure if your design is market-ready and usable. Alternatively, you can frequently run heuristic evaluations as part of a UX audit to measure how well your final product delivers value to end users.
Heuristic evaluation UX is less expensive and time-consuming than various other user testing methods. It is also more accurate and efficient because it pinpoints relevant user issues to resolve to keep your product competitive.
Jakob Nielsen and Rolf Molich created the heuristics for the heuristic evaluation concept in 1990. Over the years, Nielsen has updated his explanation of heuristics and how to make the most of them. His updates have simplified usability heuristics for UX designers, easing using them to solve modern UX design issues. It’s his heuristics we will use in our heuristic evaluation examples.
Heuristic evaluation checklist
If you look at different heuristic evaluation examples, you may notice evaluators using different mixes of heuristic principles. Each evaluator’s checklist may vary based on the UX or UI issues they want to identify and resolve to optimize a website or app. However, the comprehensive heuristic evaluation checklist provided by Jakob Nielsen specifies 10 usability heuristics. These heuristics include:
1. Visibility of system status
At no point should a user feel lost while navigating your website or app. Your interaction design should help users understand what’s happening after they click an icon or take other actions on your website or app. Doing so will promote transparency, leading to a user trusting the tool.
For example, most websites and apps show progress bars while a user waits for a page to open or an action to complete. Another example is the notifications that pop up when a user takes an action, such as warnings that a user will lose unsaved work if they close a page.
2. Match between system and the real world
Help users understand your product by making it intuitive. You can accomplish this by designing your interface to closely resemble things users frequently interact with in the real world. Also, provide information in a logical and realistic order and avoid complicated terms or jargon.
A good example is a Windows desktop interface. The Recycle Bin icon looks just like a trash bin, while the icon for My Computer looks like a PC. The familiarity of these icons allows users to understand their purpose quickly. It’s the same reason why the Phone and Messaging apps on your mobile device look the same across different products.
3. User control and freedom
If a user accidentally takes an action, provide an option to backtrack or cancel the action. An example is the Undo button in Microsoft Word or the Back button in your browser. It’s not enough to give users the freedom to control or cancel actions. The button to do it should also be easily identifiable and discoverable.
heuristic evaluation example
4. Consistency and standards
The consistency and standards heuristic checks if your website has confusing terms or options that users might misinterpret. Avoid such issues by sticking with industry conventions and being consistent with your wording and labeling. For example, if clicking a specific icon triggers an action on one page, clicking the same icon on a different page should yield the same result.
5. Error prevention
Minimize the likelihood of users making mistakes and seeing error messages. You can achieve this by eliminating error-prone conditions. Also, let users see a confirmation option before they commit to an action.
In various heuristic evaluation examples, you will see illustrations of users accidentally clicking the button to cancel a download or close a window. Resolve such issues by letting users confirm such actions before execution.
6. Recognition rather than recall
Help users by reducing how much information they need to remember to use your software. Every page should look familiar so users won’t have trouble navigating it to accomplish goals. Satisfy this heuristic by clearly labeling fields and menu items and placing them in easily visible and retrievable areas.
7. Flexibility and efficiency of use
Heuristic evaluation examples are incomplete if they do not mention flexibility and efficiency of use. An expert user who is familiar with your product should have access to shortcuts for efficiently completing tasks. Non-experts may not know these shortcuts, but they should still be able to complete the same tasks easily.
For example, experts can undo mistakes with the CTRL+Z shortcut, while novices can achieve the same goal by finding and clicking the undo button. Also, customization promotes flexibility by allowing users to select preferred buttons for completing specific actions.
8. Aesthetic and minimalist design
41% of users prefer simple website design, while 59% want something attractive. Satisfy everyone by having an attractive yet minimalist design. Make the most of white spaces and get rid of clutter. A minimalist design is essential because unnecessary elements on your page can overshadow relevant and critical elements, leading to a poor user experience.
9. Help users recognize, diagnose, and recover from errors
Simplify error messages by keeping them short and using easy-to-understand words. The error message should also specify the problem and recommend solutions. Otherwise, users may become stuck and abandon your website or app.
10. Help and documentation
Your website or app should be intuitive, but users may need extra information for specific tasks. Assist these users by providing assistance via a FAQ or Help page. The pages should list solutions with straightforward steps for achieving the desired results. Also, finding specific information within the documentation should be quick and easy.
3 examples of heuristic evaluations
To help you fully understand how a heuristic evaluation works, we’ve compiled heuristic evaluation examples for different websites. We will use Nielsen’s 10 heuristics to analyze each site and recommend solutions based on identified issues.
Example 1: Social media website
1. Visibility of system status
Issue: The website has easy-to-understand progress bars for media downloads and uploads. However, you cannot tell which users are currently online or offline.
Recommendation: Users who are online should have a different indicator color over their profile names.
2. Match between system and the real world
Issue: The sci-fi theme of the website is attractive, but the site’s terminologies and labels can be confusing for sci-fi novices.
Recommendation: Instead of labeling aspects of the site with made-up words, use more generally recognized words.
3. User control and freedom
Issue: Editing or deleting sent messages or posts is impossible.
Recommendation: Provide an edit or undo button for changing or deleting posts.
4. Consistency and standards
Issue: This issue ties in with the second heuristic. Many of the clickable buttons have similar-looking labels and designs, which many new users find confusing.
Recommendation: Clickable buttons should have familiar labels that conform to industry conventions. Not strange symbols and words.
5. Error prevention
Issue: Users lose their chat history if they exit chats without saving.
Recommendation: When users attempt to exit chats, a popup should confirm if the user wants to leave without saving. Alternatively, provide users with an auto-save feature.
6. Recognition rather than recall
Issue: The website’s unusual design and labels mean new users must recollect the location of buttons for specific actions.
Recommendation: The website can retain its unique overall aesthetic, but commonly used buttons should be in more visible locations.
7. Flexibility and efficiency of use
Issue: Users cannot use popular shortcut commands like CTRL+Z or CTRL+C.
Recommendation: Allow the use of popular shortcut commands.
8. Aesthetic and minimalist design
Issue: The overall aesthetic is attractive but a bit cluttered.
Recommendation: Eliminate some of the unnecessary elements on the homepage to simplify navigation.
9. Help users recognize, diagnose, and recover from errors
Issue: There is no error message when a user uploads the wrong media format or size. Instead, the media does not upload, leaving the user confused.
Recommendation: Provide a clear error message that states why a media file could not upload. The message should also provide options for resolving the issue.
10. Help and documentation
Issue: The Help page has plenty of helpful information, but sorting through it is tedious and unnecessarily complicated.
Recommendation: Add a chatbot that can respond to queries with answers from the Help page. Alternatively, add a search button for finding specific information within the Help page.
Example 2: Payment platform
1. Visibility of system status
Issue: Several payment options are available on the platform, but users cannot tell which payment options actually work until they try them.
Recommendation: Stop letting users undergo trial and error to find a working payment option. Instead, remove unavailable payment options and restore them once they start working.
2. Match between system and the real world
Issue: The fields where users provide credit card details have vague and confusing labels.
Recommendation: Label each field clearly, so users know the exact card information to enter. You can also provide a sample image that indicates the specific information required for each field.
3. User control and freedom
Issue: Users who entered the wrong information cannot go back to make changes. They have to cancel the entire transaction and start from scratch.
Recommendation: Give users the option to backtrack and correct the wrong information.
4. Consistency and standards
Issue: The website uses credit, payment, and deposit to refer to the same thing on different parts of the transaction page. Some users may find this confusing.
Recommendation: Use the same term to refer to the same action on all pages to avoid confusing users.
5. Error prevention
Issue: Users who have entered the wrong information can still complete transactions, leading to payment delays or cancellations.
Recommendation: Before users can proceed to new stages in the payment process, let them revise the information they’ve provided. Also, highlight fields with incorrect information so users can spot and correct them before proceeding.
6. Recognition rather than recall
Issue: The website’s simple design resembles other payment websites, making it familiar and easy to navigate.
Recommendation: No need for changes.
7. Flexibility and efficiency of use
Issue: Users cannot use shortcut commands like CTRL+C or CTRL+V to enter repetitive information, such as address and phone number.
Recommendation: Allow shortcut commands for copying and pasting information.
8. Aesthetic and minimalist design
Issue: The UX design is simple and easy to understand. However, the color scheme does not match the brand logo colors.
Recommendation: Make the website easily identifiable by using more colors that represent the brand.
9. Help users recognize, diagnose, and recover from errors
Issue: Easy-to-understand error messages pop up when users make mistakes. However, the error messages do not simplify solving the issue.
Recommendation: Clicking the error message should take the user to the exact problem area so they can fix it.
10. Help and documentation
Issue: The button to access the Help page is not easily accessible.
Recommendation: Make the button for the Help page more visible so users can find needed information quickly.
Example 3: Video streaming website
1. Visibility of system status
Issue: After users select a video playback option, they cannot tell if it is activated until they play a video.
Recommendation: Selected options should have a checkmark or other indicators that show users activated options.
2. Match between system and the real world
Issue: The website does not display available videos in any specific order. Users can find movies, TV shows, and documentaries displayed on the same page, which can be confusing.
Recommendation: Split videos into categories and let users filter displayed videos according to the release date, genre, and other options.
3. User control and freedom
Issue: Users who pick the wrong language cannot switch to a preferred language without going to Account Settings.
Recommendation: Simplify switching between languages by providing the option within the video screen.
4. Consistency and standards
Issue: The video quality is inconsistent. Some videos play in full HD, while others appear in 480p.
Recommendation: All videos should have the same picture quality when they start. Users can then adjust the video quality to match their preferences.
5. Error prevention
Issue: Users who accidentally close unfinished videos have to start from the beginning.
Recommendation: Use a popup to ask users to confirm closing a video. Also, users should have the option to resume a video from where they stopped.
6. Recognition rather than recall
Issue: The buttons for liking and sharing videos have unusual icons. New users do not know what these icons do until they click them.
Recommendation: Label buttons so users can know their purpose even if they do not recognize the icons.
7. Flexibility and efficiency of use
Issue: Users must leave the video screen to select or change subtitles.
Recommendation: Allow users to select or change subtitles without leaving a video.
8. Aesthetic and minimalist design
Issue: The minimalist design is attractive, and the infinite scrolling is useful. However, infinite scrolling is prone to lagging on the website.
Recommendation: Reduce the number of thumbnails displayed per page to increase loading speed and minimize lagging.
9. Help users recognize, diagnose, and recover from errors
Issue: Users who see error messages must navigate to the Help page to find solutions.
Recommendation: Tell users how to resolve errors within error messages.
10. Help and documentation
Issue: Navigating the FAQ and Help page is tedious and clumsy.
Recommendation: Provide a search bar for finding specific information within the Help and FAQ pages.
Follow the above heuristic evaluation examples to assess your website or app. Using the below heuristic evaluation sheet can also simplify performing the evaluation.
Heuristic Evaluation Sheet Template by Hsin-Jou Lin
Heuristic Evaluation Sheet Template by Hsin-Jou Lin
Alternatively, save time and effort by letting DevSquad take care of your heuristic evaluations. Click here for more on how we can help your SaaS company improve.
