You’ve probably never heard of website heuristics, but they’re influencing your users’ decisions every day. But before we delve into the 10 principles, and how they can make or break your users’ experience, we need to know what heuristics are!
“Heuristics” may sound intimidating, but it’s actually an ancient Greek word with a simple meaning - “I find.” Basically, heuristics are rules-of-thumb rather than specific guidelines that allow UX and UI designers and users to make judgements quickly, saving time and money.
In 1990, Danish computer research, Jakob Nielsen, PhD, and Rolf Molich developed the initial heuristics for heuristic evaluation. In 1994, Nielsen, the “King of Usability,” refined the heuristics, and they have remained unchanged ever since.
The 10 general principles of heuristic evaluation have become the basis for human-computer interaction. Even 27 years later, these heuristics are the go-to for UX/UI design, so let us explain how they can help to improve your website usability and keep your users coming back for more (or clicking off the page to begin with!)
How do heuristics make website users happy?
Heuristics are great for industry specialists, as they act as a checklist of criteria to help find flaws that design teams have overlooked and can help to create the perfect site. But they’re just as beneficial for the end-user! As anyone who has ever lost time on a frustrating or badly-designed website (so, all of us) will tell you, being user-friendly is very important. Heuristics make sites accessible and easy to use with clear functions and give your users the freedom they need to reach their end goals and leave your website feeling satisfied.
Here are 10 heuristics principles you should know and how they can benefit your users:
1. Visibility of system status
“Designs should keep users informed about what is going on, through appropriate, timely feedback.” (Nielsen Norman Group)
Have you ever thought about how evolution can impact UX/UI design? Well, the need for safety and control spans all the way back to ancient times, and explains why users need to feel in control as they navigate your website. To combat this feeling of being out of control, add feedback to every interaction for your users. When they interact with the website, they need to know if it was successful within a reasonable time. It’s also important to add this as it shows your user what’s going on inside the system – the user can see the point they’re at if something is uploading or loading, and ultimately won’t get frustrated!
Examples of showing success include changing the button colour after it has been clicked, adding a loading spinner to show the user that the page is loading, a progress indicator on a survey to show the user how much they have left to complete, or the noise Twitter makes when someone tweets to show it has been shared. This is helpful for users not only as it shows processes are happening, but also because it means they can perform other tasks while they wait for things to load - and won’t click off the page thinking it has frozen!
As the Social Change UK site loads, you’ll spot our spinner. This shows the user that the page is loading, and there’s nothing more you need to do until it loads!
2. Match between system and the real world
“The design should speak the user’s language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.” (Nielsen Norman Group)
This heuristic can be split into two: familiar language and real-world objects that are designed to make your message relatable. Luckily, it’s easy to implement this - familiar words mean using language that works for your site’s target audience. It’s important that users shouldn’t need to look up words to understand the text, but shouldn’t feel as though the copy is too ‘dumbed down’ for them either. ‘Real-world’ is about creating an interaction that mimics real life. Take a look at your phone – you’ll see that many apps, like the compass or files apps, look like the physical versions of those objects. Using this idea, people can assume how the apps work based on their real-world experience with those same objects.
On your website, this can be as simple as using a mail icon for contacts, a trolley for your cart or a pencil in an area that you can type. Taking this a step further, this heuristic can also be applied to the expectations of a process. In other words, viewing photos online often feels like flicking through a photo album, and everything should be ordered chronologically!
The ‘contact us’ button on the Social Change UK website looks like an envelope. Users will identify envelopes as a way to get in contact due to the connotations with real-life mail, and other apps and sites that regularly display an envelope for the same touchpoint.
3. User control and freedom
“Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action.” (Nielsen Norman Group)
Like with the first heuristic, users need to feel in control of the website. If someone makes a mistake, is it easy to correct or backtrack? Making it easy to amend will encourage users to explore more of the site without them feeling like if they lose their place, they won’t be able to get back again.
An example of this is when taking part in a survey or quiz. There, a backwards arrow would be handy for users to go back to previous questions and edit answers should they move on too quickly or change their minds. Other examples include providing a clear way to exit the current interaction through the use of a cancel button, like during checkout. These exits should be clearly labelled and easily discoverable.
We have a pop-up for newsletters on our site with a clearly marked ‘X’ in the top left corner. This means that this form doesn’t take up unnecessary room on the site and allows users to close the pop-up at any time.
4. Maintain consistency and adhere to standards
“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.” (Nielsen Norman Group)
This heuristic is key when creating an application that makes sense for users. Sometimes, there’s no need to reinvent the wheel, so if an industry convention like the hamburger menu (those three lines you’ll spot on nearly every menu) is well known, it will make the site easy to navigate. Consistency is also important when it comes to formatting and clear CTAs. For example, the buttons on one page should match the buttons on another – plus, that looks much nicer!
Some of these examples are so simple you may not even think of them! Think about underlining text in copy to imply a link, adding a magnifying glass icon for search, or the shopping trolley at checkout as mentioned before.
On almost every site, the magnifying glass icon signifies search, and the Social Change UK site is no different! On some sites, users need to click the magnifying glass for the search bar to pop up, but on our site, the bar is readily available next to the magnifying glass.
5. Error prevention
“Good error messages are important, but the best designs carefully prevent problems from occurring in the first place.” (Nielsen Norman Group)
Some heuristics are great for communicating errors to users, but a better strategy is to prevent them in the first place. There are two types of errors - slips and mistakes. Slips are where a user intends to perform one action but ends up doing another. Mistakes are made when goals are inappropriate for the situation.
To prevent a slip, UI designers can gently guide users through simple assists and constraints – think about suggestions when typing in the search bar, or sensible defaults like snoozing that alarm for 10 minutes rather than an hour. Another example could be to fill in an example piece of text where users need to type, such as the way the user should type a date of birth. If the user sees the date displayed as ‘02/05/1992’, they are likely to type their date of birth in the same way.
On our Project Planner page, the users can slide two toggles to easily provide us with budgets and timelines, which is a nice touch of gamification (You get to play with the toggles!). Below that, we’ve included examples of what to type into each space in the ’Tell us about yourself’ section. This makes it easy for users to understand what information needs to be filled in, and where to put it.
6. Recognition rather than recall
“Minimise the user’s memory load by making elements, actions and options visible. Avoid making users remember information.” (Nielsen Norman Group)
Recognition is where your brain recognises something as similar, whereas recall is all about actually retrieving details from your memory. To make that easy to understand, a multi-choice task uses recognition whereas open questions require recall – we think most people would go for the multi-choice one! You can take advantage of this by weaving recognition, rather than recall, into design. Practice makes perfect, which in turn allows people to recall how to do something. To put this into a web design context, a menu may help the user to navigate a site more easily than a search bar – the user can see the list of pages instantly and recognise the one they need. This also links back to the fourth heuristic, where people recall common icons like the magnifying glass icon.
Other examples include password clues when users forget their password, recent files on Word or Photoshop, or recently viewed items on a website remind users of products they’ve looked at before.
We’ve included a menu as well as a search bar on our site to spark users’ memories. This way, when people are looking for the recent work we’ve done for our clients, they can just hit ‘Work’ rather than navigate their way through search results.
7. Flexibility and efficiency of use
“Shortcuts – hidden from novice users – may speed up the interaction for the expert user.” (Nielsen Norman Group)
Websites should be flexible enough for users to complete a task in the way that suits them, which means multiple different ways to suit different users. If it works well for them, they’re more likely to come back in the future! An example of this is a customisable interface that allows users the flexibility to change how tasks are performed through toggles or multiple windows.
Other examples include shortcuts such as command/control + C to copy, clear links to the most-used pages, such as the ‘Pay someone’ button on a banking app, or the shortcut to Facebook Messenger on the bottom right of the Facebook news feed – take a look yourself!
On our Buckinghamshire COVID dashboard, users can view cases for the whole of Buckinghamshire. More experienced users can take a deep dive into cases by location by clicking each area on the map.
8. Aesthetic and minimalist design
“Interfaces should not contain information which is irrelevant. Every extra unit of information in an interface competes with the relevant units of information.” (Nielsen Norman Group)
People often judge a book by its cover (an unconscious bias, for those interested in behavioural theory! Link to research page), so if they head onto a site that doesn’t look good, they’re much more likely to leave. It’s important to make a site aesthetically attractive, while ensuring it stays in line with the brand’s identity to create a memorable experience. Minimalistic design doesn’t mean making a site look like a Scandinavian showroom, it means featuring all the necessary elements to support user tasks, without extra clutter.
To make a site aesthetic and minimalist and communicate visually with imagery, limit “noise” – elements with low informational value. With just these two key elements, you can make a beautiful site in no time. We may be biased, but we think our site is a great example of this. We’ve included plenty of white space to allow important text to stand out, plenty of imagery and illustrations and cut out the waffle!
Our homepage is simple and clean, and essential elements are clearly displayed in a contrasting white colour to the purple background. We’ve added fun visuals in the background, and removed ‘noise’ from the images with the purple overlay.
9. Recognise, diagnose and recover from errors
“Error messages should be expressed in plain language (no error codes), precisely indicate the problem and constructively suggest a solution.” (Nielsen Norman Group)
From the dogs of Amazon (or Social Change UK) to a page with ‘404’ in a huge font, we’ve all seen errors like these during our time online. What’s important here is that when an error is presented to the user, it’s clear what went wrong, and how they can recover.
The easiest way to do this is through an error message such as “The password you entered is incorrect” in red or text explaining what a 404 error is. To help the user recover, we feature some links that users can click on our 404 page. Other ways to do this include constructive advice on what the user needs to do next, such as using an undo button or highlighting the error on a form, so the user can quickly fill in the gaps.
Our 404 page features a clear explanation as to why the page the user was looking for isn’t showing, links to key pages on the site, and our adorable office dog, Joey!
10. Help and documentation
“It’s best if the design doesn’t need any additional information. However, it may be necessary to provide documentation to help users complete their tasks.” (Nielsen Norman Group)
Help and documentation should be easy to reach, which can be implemented through proactive or reactive help. Proactive help is where help is provided before the user encounters a problem, by adding tips or onboarding tutorials. Reactive help is where users need to seek out help – think of additional resources like videos and documentation.
Examples of this include ensuring documentation is easy to search, listing steps to be carried out or presenting documentation just as the user needs it. Another common example is when text boxes pop up around different elements like buttons and text boxes, explaining what the user needs to do the first time they go on the site or app. Finally, allowing pop-ups on hover is a great way to add reactive help – it’s clearly there if they need it.
Our Berkshire COVID dashboard has handy information points that users can hover over for more information. In this case, the hover explains the chart in the same box.
So, there you have it – 10 ways to help create the perfect website through heuristic evaluation. They’re fast and practical ways to solve problems for designers, and they will improve user experience to keep users coming back for more. Need some help adding these heuristics to your own site? Check out our services page to see how we can help!