A practical breakdown of the principles that shape intuitive user experiences
Ever tapped the wrong button in a hurry and lost your progress? That’s bad UX—and it breaks one of the key principles we’ll explore today.
UX principles and heuristics are foundational guidelines that help us better User Experience in everyday design. Don Norman who is considered the “Father of UX Design” in his book “The Design of Everyday Things” emphasizes the importance of designing products and systems that are intuitive, user-friendly, and meet the needs of the people who will use them. In this article we will discuss the basic UX principles and Jakob Nielsen’s heuristics for interaction design. They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines. 10 Usability Heuristics for User Interface Design
Norman’s UX Principles
- Visibility
Users should be clearly able to find what they are looking for. If they face difficulties in finding, it makes them anxious and can hinder the task.
As Don Norman says:
“The design must convey the possibilities of action.”
For example, when you edit a document, a message appears on the top saying “Saved to Drive”. This keeps the user updated with the status of changes that they have made.This principle is same as the first heuristic coming under Neilsen’s heuristics.
- Feedback
Feedback is all about giving immediate and understandable responses to the user’s action. Users can get confused if there is no response to their actions.Don Norman says:
“Feedback—sending back to the user information about what action has actually been done—is essential to good design.”
Example: When you like a reel on Instagram, a heart pops up showing that the system is responsive and the like count gets updated
Another classic, old school example is the manual typewriter.When you press a key, it strikes the paper, making a physical sound (“click-clack”) and leaving an inked letter on the page.You can see the character printed and hear the mechanism work.
- Constraints
Constraints refers to the restrictions given to the user which limits the user’s interaction thereby guiding them to complete the desired task. In other words, constraints reduce the chances of mistakes by making some actions impossible.
While creating a password for the sign up page, certain conditions are given: At least 7 characters, 1 capital, 1 special character etc . These constraints help users to know what is allowed and what is not. This also reduces the chance of making errors before page submission.
- Mapping
Mapping is a technical term borrowed from Mathematics which explains the relationship between control and their effects in the real world or on the interface. The users should naturally understand what will happen when they perform an action.
In good mapping control feels logical and intuitive whereas in bad mapping, users have to guess or remember. For example, consider audio volume control in a mobile app. When you drag a horizontal glider to the right, the audio increases and if it is to the left, the audio decreases. It matches your mental model and hence the result is predictable.
Or another good example is a retro radio.The knobs can be used to adjust volume and also to tune for precision
- Consistency
Consistency means keeping design patterns, interactions, language, and visual elements predictable and uniform across a product (and ideally across platforms too).
Why consistency matters?
- Reduces learning curve
- Minimizes errors and confusion
- Helps users predict output
An example for consistency is certain icons always mean the same: trash icon means to delete, cross means to close window. Consistency ensures that users feel confident and in control by repeating familiar patterns.
- Affordances
Affordance is a design element that suggests how to use it even before the user interacts with it. Don Norman says “Affordance provides strong clues to the operation of things.”
Eg: A button with a “Submit” label and a raised shape clearly looks clickable.The shape and label afford clicking.
- Discoverability
Discoverability refers to how easily users can find and understand what actions are possible within an interface.It’s about making sure users can intuitively navigate and uncover the full potential of the design. Good discoverability ensures users don’t feel lost, frustrated, or confused when exploring a digital product or physical space. Avoid hidden or complex features that users might find hard to navigate.
For example while watching a video on Youtube,there is a clearly labelled share(curved arrow) icon right below the video.Even new users can immediately recognize the option to share— no searching, guessing, or learning required.
10 Usability Heuristics
Usability Heuristics also known as Neilsen’s Heuristics are guidelines for interactive design.Following are the 10 rules:
- Visibility of system status
This is very much similar to Don Norman’s principle of Visibility.System should always keep users informed about what is going on through appropriate feedback in a reasonable amount of time.
For instance, when you click the download button, a circular progress indicator appears, gradually filling up to show the percentage of the download completed.When you click a button,its colour changes.These indicators communicate that the system is working and reduce uncertainty thereby preventing users from tapping the same button multiple times because they weren’t sure if it worked the first time.
- Match between system and real world
By nature,human beings find comfort in familiarity.Therefore designs should be user friendly i.e. words, phrases,icons etc should be used in accordance with what the users are familiar with rather than technical jargon.You should never assume that users will match our understanding.Always remember YOUUSER.
In an email page, if it shows Affix/Append instead of Attach in the file attachment section,regular users will get confused;same goes with the send button. Another example is placing the ‘+’ volume button above the ‘-’ button in headphones.Such natural mappings that follow users’ expectations make it easy for users to complete tasks intuitively without having to remember any additional information.
- User Control and Freedom
Users tend to make mistakes while interacting with a system.They should be given options to make an emergency exit from the interactions.This will give them a sense of freedom and control which is part of a great User Experience.
Undo Redo options are examples of that.Back option in browser enables users to return to the home page of a website thereby giving flexibility to escape from an interaction.
4) Consistency and Standards
This consistency is the same as the one we discussed in Norman’s principles. Jakob’s law states that people spend most of their time on sites other than yours, which means that they bring their expectations from other sites when they visit your site.When those expectations are met,confidence is built and they feel mastery over the interface.
The usual patterns that you see like placing of the site logo,magnifying glass for search option,cross icon for closing are also examples of consistency.When users feel comfortable with your site,their focus will be on the task and not worry about other things.Otherwise,they will end up being anxious and confused making them leave the site and search for user-friendly ones.
5) Error Prevention
Heuristics advises that errors should be conveyed to users gracefully,actionably and clearly but it’s better to prevent errors happening in the first place.Errors are of two types: slips and mistakes as mentioned in The Design of Everyday Things.
- Slips: Unconscious errors caused by users’ inattention
- Mistakes: Conscious errors based on a mismatch between the user’s mental model and the design.
Slips are often caused by users who are quite familiar with the task and experts at it.Hence they will feel less need to be attentive than the first time users.Some methods of preventing slips include helpful constraints,offer suggestions and choose good defaults.
Mistakes occur when the interface doesn’t match users’mental model
thereby preventing them from achieving the desired goal. When a user is interacting with an app or a website with a goal in their head,they take actions to accomplish the goal with the mental model in their mind and see if the actions produce the desired results.
A lot of mistakes happen when there is a gap between the designers’ mental model and the users’ mental model. By bridging this gap we can reduce errors by gathering user data,following design conventions,supporting undo,warning before errors are made etc.
6) Recognition rather than recall
Recognition refers to our ability to “recognize” an event or piece of information as being familiar, while recall designates the retrieval of related details from memory.Your ultimate aim is to minimize the load on your users’ memory by making elements,actions and options visible.
Recall in user interface
The classic example of recall is the login page.When you log in to a site, you must remember both a username (or email) and a password. You receive very few cues to help you with that memory retrieval: usually, just the site itself.
Recognition in user interface
The best example is the navigation menu.You don’t have to remember any commands as it will be in the page itself.Example when you login to instagram and press the navigation menu you will search ,create,activity and profile options.
Recognition is easier because it involves more cues than recall.Recognition reduces cognitive load because users can make decisions based on what they see, rather than what they remember. This makes interfaces faster, easier, and less frustrating to use.
7) Flexibility and Efficiency of Use
Experts and novices differ in the way they use the interface.New users need guidance on how to navigate through the system as they have not developed a mental model of how the system works whereas an experienced user could still use the slower, more deliberate methods, of course, but get no benefit in doing so. Instead, they use a faster (but less guided) approach to the task. These faster approach methods are called accelerators.
If a system uses accelerators alone,new users won’t be able to navigate the system whereas if a system caters primarily to new users by focusing on being very learnable, expert users will be slowed down because the system likely includes a lot more step by step handling to guide the new users. So,there are two aspects to making a flexible and efficient system:
- Multiple methods to accomplish the same task according to one’s preferences
For example,copying a file can be done in two ways: right click and then copy or Ctrl+C
- Accelerators that don’t slow down new users, but speed up expert users
The previous example is applicable here.
8) Aesthetic and Minimalist Design
“Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.”
Minimalist design is a design that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks.Don’t let unnecessary elements distract users from the information they really need.
Why not just be minimalist?
Though many may not accept it,people do judge a book by its cover.On average, users make an aesthetics-driven first impression about a site in the 50 milliseconds after landing on it,which is about 10x faster than the time it takes to read.The first impression is so powerful that users often remember the beautiful designs as easy to use when it had usability issues.
9) Help Users Recognize, Diagnose, and Recover from Errors
Error message is a system-generated interruption to the user’s workflow that informs the user of an incomplete, incompatible, or undesirable situation according to the system’s implementation.
Error messages should be clearly visible to the user.For best results,place it near the error source in bold and highlighted(red)letters.Make sure that the error cause is explained in very simple words and not technical jargons which can make the user anxious.The tone of message is very important,so always maintain a positive tone.Another important factor is the timing of the message: Don’t display the error message before an error is committed because the user can feel judged.
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.”
Effective help and documentation act as a safety net, improving confidence and reducing frustration.It’s especially critical for complex systems, new users, or rare/advanced tasks.Present the documentation in context right at the moment that the user requires it.
References:
https://www.nngroup.com/articles/ten-usability-heuristics
https://principles.design/examples/don-norman-s-principles-of-design
