The Whats and The Whys of Heuristics

7 min readAug 16, 2020

Poorly laid out websites are easy to spot- they put the user in a position where they are expected to work and think about where to access key pieces of information that might otherwise be intuitive on other sites. The reason it’s jarring for users is it goes against our innate heuristics that our brains inherently develop to help navigate the world quickly.

Heuristics- mental rules/shortcuts that help you solve problems faster.

Luckily for us, Jakob Nielsen developed a set of 10 usability heuristics that help designers create interfaces that require minimal cognitive load and allow for a more seamless user experience. In order to better understand the importance of each standard it’s useful to break down each one and compare a good and bad example.

1. Visibility of System Status

What: Users should be provided feedback of where they are in the platform.

Why: By informing users of the status of their actions and progress along the site you reduce the amount of continuous guess work they have to do.

Good example: This shows users how far along they are when uploading a file to the cloud. It keeps users informed and updated in real time so they aren’t left wondering how much is left.

Needs Improvement: When you open the Android play store and have poor internet connection you are sent to a blank screen without any context/information about what is happening and why. This leaves users confused and presumably frustrated.

2. Match Between System and Real World

What: The system should match the users world in layout, images/iconography, and language used.

Why: Matching the digital world to the real world allows users to automatically access ingrained heuristics.

Good example: Apple icons (facetime, mail, camera, weather, map and clock) match their real world counterparts and take the guesswork out of what you would expect to find when you open those apps.

Needs Improvement: Google translate uses this squiggly icon as a quick button to translate the statement but the icon has no intuitive meaning for users and is not inherently relatable.

3. User Control and Freedom

What: Users are allowed to freely navigate through the interface- this includes moving forward through the platform as well as going back or undoing actions.

Why: Users must be allowed to move freely through the site while also being able to reverse actions. Forcing users through a process without allowing navigability backwards requires the user to plan their actions and increases cognitive load.

Good example: Slack gives users the opportunity to manage their comments/messages in a variety of ways. This allows users to act quickly and as they please without having to worry about irreversible effects.

Needs Improvement: This is an example of how the system doesn’t give users any control or freedom because users have to comply with the button and don’t have any other options.

4. Consistency and Standards

What: Remain consistent with wording, imagery, layouts, etc throughout the whole platform. Similarly remain consistent across interfaces.

Why: Users can develop expectations that make it easier to move across pages without effort.

Good example: Facebook does a great job of maintaining consistency and standards across screens and devices. The icons are easy to identify and widely used across platforms.

Needs Improvement: Now this may just be my own personal view but I have been reddit-resistant for years because the format, buttons and layout is off putting to me. I haven’t used these types of interactions before so when I see them, a giant NOPE wall appears in my brain and I exit out.

5. Error Prevention

What: Users should be notified of when an error occurs, and as much as possible, should be prevented from making errors

Why: This falls in line with the visibility of system status- giving users access to information on what their doing and where they are at in the platform to keep them informed and remove guess work.

Good example: Mailchimp lets users know the parameters for making their password and doesn’t allow them to continue until they’ve met all the criteria. If errors occur the input field turns red to inform users that they have made an error.

Needs Improvement: GoDaddy’s signup page doesn’t let users know any information about what is required in their passwords, increasing users chances of receiving an error message.

6. Recognition Over Recall

What: Users should not have to remember where options or actions are located- the interfaces should be laid out so it’s easy to navigate without extra effort. Similarly, usability is improved if interfaces remember uses past interactions so when they return they don’t have to depend on memory to access information.

Why: Usability is improved when users can focus on engaging with the interface as opposed to accessing memories of how to use it or what they’ve used it for.

Good example: Each time you open skyscanner app it opens to your last saved flight search which is very helpful if you’re like me and often day dream of traveling and have a hard time remembering where exactly you wanted to go and when.

Needs Improvement: Smashing website doesn’t bring up previously searched terms when revisiting their site.

7. Flexibility and Efficiency of Use

What: The interface should be flexible enough such that users of all skill ranges are able to use it.

Why: This allows for novice users to get through the platform just as seamlessly as those who are more advanced. By creating flexibility you also give advance users the option to improve the experience by accessing shortcuts.

Good example: predictive text in our phones messaging systems helps reduce time spent typing out whole words because it quickly gives the most common words based on what you’ve been typing.

Needs Improvement: DoorDash has return customers but doesn’t offer a way to personalize your screens or autofill shortcuts for expert orderers making each interaction is nearly just as lengthy as their first visit.

8. Aesthetic and Minimalist Design

What: The interface should only contain the information that’s necessary and relevant.

Why: While this seems fairly obvious this heuristic is often overlooked and can lead to feature bloat or information overload. By keeping only the necessary information on the site you make certain that users will be able to access what they need and receive the benefits your platform offers.

Good example:Tinker.com has a clean, organized home page and makes it clear, in a beautiful way, what you’re going to find/experience on their site.

Needs Improvement: Dog Trekker, while a great site, is very busy and has so much going on that when you first enter you don’t know where to look or what the site offers you.

9. Help Users Recognize and Diagnose Errors

What: Clear error messages with solutions suggested.

Why: Often time users may make an error on accident but be unsure what led them to that point. By providing them with a clear description of the error and constructively suggesting a solution you can help avoid these errors in the future.

Good example: Google lets the user know while they are still typing that the name they are trying to pick is unavailable. The use of red makes it very clear that it is an error message.

Needs Improvement: With this website the error message isn’t in the simplest terms and there is no guidance on where the error occurred.

9. Help and Documentation

What: Interfaces should house documentation that can help users if they were to run into challenges or have questions.

Why: While ideally your platform would be so intuitive there would be no need for a FAQ or help section, a great system can predict users needs and answer questions that might come up while navigating.

Good example: iMovie has a very easy, accessible help/tutorial that provides users upfront information on how to use their platform and where to look for help.