10 laws of UX

Using psychology to design better products & services

If you are working in the field of product design, I am certain that you faced the following problem: being asked to justify design choices without any data to support them. Typically, when you have quantitative or qualitative data available to draw upon, this is a quite straightforward task. But what do you do in the case in which that raw material is not available? How do you validate initial designs without any proof that there is a need to do that, to begin with?

Well, do not despair. In this case, you have to direct your attention towards the principles found in psychology — the study of mind and behaviour. This science encompasses the biological influences, social pressures, and environmental factors that affect how people think act, and feel. The study of psychology helps us decipher the underlying blueprint that we as humans have for how we perceive and process the world around us.

By understanding the human mind, designers can build more intuitive, human-centred products and experiences. Instead of forcing users to adapt to the design of a product or experience, we can apply some key principles from psychology as a guide for designing in a way that is adapted to people.

The intersection of psychology and UX has become an increasingly relevant topic in an era when design roles are having an ever-stronger impact within organizations. If you are a professional or aspiring designer — someone who desires to understand how the understanding of human perception and mental model affects the overall user experience — I would recommend that you start by reading Laws of UX by Jon Yablonski.

This is a designer-friendly resource, a book that makes complex laws of UX accessible to more designers — especially for the ones of us that do not have a degree in psychology or behavioural science. The book takes you through the 10 laws of UX that I will present below, with proper explanations and a multitude of examples from which you can learn how to improve your craft.

1. Jakob’s Law

One of the most common principles to be used as guidance for designing digital interfaces. It was created by Jakob Nielsen and according to him, the law can be defined as the following:

“Users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know”

Jakob's Law of Internet User Experience (2 min. video) (Video)

There is something incredibly valuable to be found in familiarity. Familiarity helps the people interacting with a digital product or service to know immediately how to use it. By using easily recognizable interaction patterns, we reduce the mental energy that users should spend learning the interface, allowing them to focus on the task at hand. In other words, users will find it easier to navigate through an interface when the design resembles the one they know from other interfaces, as the well-known pattern makes them feel safe and secure. Familiarity gives users confidence and encourages them to interact with the interface.

This idea also manifests in one of the Nielsen Norman Group’s well-known usability heuristics “Consistency and Standards”, a heuristic in which Nielsen presents the aspect of integrating “standard” patterns into UX Design, for user comfort.

📓 As designers, it is our goal to ensure people successfully achieve their goals when using the interfaces we’ve built by eliminating as much friction as possible. By leveraging existing models, superior user experiences can be created in which the users can focus on the task at hand, rather than learning new models.

Jakob’s Law: Will Users’ Love for Well-known Patterns Kill UX Innovation?

2. Fitts’ Law

Established back in 1954 by the American psychologist Paul Fitts as a model for understanding human movement in the physical. Today, it is regarded as one of the most successful and influential mathematical models of human motion, and it is widely used in ergonomics and human-computer interaction. Fitts’s Law is the following:

“The time to acquire a target is a function of the distance to and size of the target”

Usability is a key aspect of good design. It implies ease of use, which means the interface should be easy for users to understand and navigate; interaction should be painless and straightforward, requiring minimum effort. To achieve that, the time that it takes for users to move and engage with an interactive object is a critical metric.

It is important that designers keep in mind Fitt’s law — which states that the time it takes for a user to engage with an object is relative to its size and the distance to it — when they size and position interactive objects. This is to ensure they are easily selectable and meet user expectations regarding the selectable region. This is a challenge compounded by the different precision of the range of input methods available today — mouse, stylus, finger, etc.

Another consideration that affects the usability of interactive elements is the spacing between them. When the space between elements is too small, the likelihood of touch target errors increases. If additional touch targets are too close, they might be accidentally selected, causing frustration and decreasing the user’s perception of the interface’s usability.

In addition to sizing and spacing, the position of touch targets is key to how easily selectable they are. Placing touch targets in areas of the screen that are harder to reach will in turn make them harder to select.

📓 The three key considerations that we can derive from Fitt’s law regarding touch targets, which we can apply in our day-to-day designs, are the following:

1. Be large enough that users can easily discern them and accurately select them
2. Have ample space between them
3. Be placed in areas of the interface that allow them to be easily acquired

Fitts's Law (Video)

3. Hick’s Law

A fundamental principle to decision-making and the complexity of choices available. The law originates from 1952 when William Edmund Hick and Ray Hyman set out to examine the relationship between the number of stimuli present and an individual’s reaction time to any given stimulus. The law that resulted from their studies is the following:

“The time it takes to make a decision increases with the number of complexity of choices available.”

As you would expect, the more stimuli to choose from, the longer it takes the user to decide on which one to interact with. Users bombarded with choices have to take time to interpret and decide, giving them work they don’t want.

Translated into design goals, our primary function when creating a service or product is to synthesize information and present it in a way that does not overwhelm the user. Our objective is to understand what the user seeks to accomplish so that we can reduce or eliminate anything that doesn’t contribute to them successfully achieving their goals. Redundancy and excessiveness in design only create confusion.

Complexity extends beyond the user interface; it applies to the process as well. The absence of a distinctive clear call to action, unclear information architecture, unnecessary steps, too many choices or too much information — all of these can be an obstacle for the user to successfully complete a specific task.

📓 Key takeaways:

1. Minimize choices when response times are critical to increasing decision time
2. Break tasks into smaller steps to decrease the cognitive load
3. Simplifying an interface or process helps to reduce the cognitive load for users and increases the likelihood that they’ll complete their tasks and achieve their goals
4. Be careful not to simplify to the point of abstraction. Make sure to add contextual clues to help users identify the options available and determine the relevance of the information available to the tasks they wish to perform

4. Miller’s Law

Originating from a paper published in 1956, which presented that, based on Miller’s observation, the memory span in young adults is approximately limited to 7 chunks of information. This led to the idea that bits, the basic unit of information, don’t affect memory span as much as the number of information chunks that are memorized.

“The average person can keep only 7 (±2) items in their working memory”

🚫 Don’t use the “magical number seven” to justify unnecessary design limitations.

This heuristic often leads to misunderstanding, and it is frequently cited as justification for “the number of options should be limited to no more than 7”. While there is value in limiting the number of available choices for the user (Hick’s Law), it is misleading and inaccurate to attribute such dogma to Miller’s law.

What is the important lesson that we need to remember from Miller’s law is not the number 7, but that human short-term memory is limited, and chunking helps us retain information more effectively. Applied to UX, the concept of chunking information applied to the content is incredibly valuable. This way users can easily scan the content, identify the information that aligns with their goal and consume that information. By structuring content into visually distinct groups with a clear hierarchy, we can align the information we present with how people evaluate and process digital content.

📓 Key takeaways:

1. Organize content into smaller chunks to help users process, understand and memorize easily
2. Remember that short-time memory will vary per individual, based on their prior knowledge and situational context

5. Postel’s Law

Jon Postel was an American computer scientist who made significant contributions to the underlying protocols that would come to form the internet. Some of his major contributions were in the early implementations of the Transmission Control Protocol (TCP), the foundation on which we send and receive data over the network.

Postel’s principle was originally intended to be a guideline for network engineering, specifically regarding the transfer of data across computer networks. His “robustness” principle is:

“Be conservative in what you do, be liberal in what you accept from others.”

The philosophy outlined in Postel’s law can be applied to user experience design and how we deal with user input and system output. Designing good user experiences means designing good human experiences.

People don’t behave like machines: we are sometimes inconsistent, frequently distracted, occasionally error-prone, and usually driven by emotion. We expect to feel in control at all times, and we’re generally annoyed when asked to provide more information than necessary. To be able to meet users’ expectations, the products and services that designers build must be robust and adaptable. Postel’s law gives us a guiding principle for designing human-centric experiences that account both for scale and complexity.

📓 Key takeaways:

1. Humans and computers communicate and process information differently. It is the responsibility of design to bridge the communication gap
2. The more we can anticipate and plan for in the design, the more resilient the design will be
3. Accept variable input from users, translating that input to meet your requirements, defining boundaries for input, and providing clear feedback to the user
4. Be empathic to, flexible about, and tolerant of the various actions the user could take or any input they might provide

6. Peak-End Rule

An interesting thing happens when we recollect a past event: instead of considering the entire duration of the experience, we tend to focus on an emotional peak and on the end, regardless of whether those moments were positive or negative. This observation, known as the peak-end rule, strongly suggests we should pay close attention to these critical moments to ensure users evaluate an overall experience positively.

“People judge an experience largely based on how they felt at its peak and at its end, rather than on the total sum or average of every moment of the experience.”

To understand the peak-end rule, it helps to have an understanding of what cognitive biases are:

✏️ Cognitive biases are systematic errors of thinking or rationality in judgement that influence our perception of the world and our decision-making ability. These mental shortcuts increase our efficiency by enabling us to make quick decisions without the need to thoroughly analyse a situation. Instead of constantly becoming paralysed by the process of mental examination every time we must make a decision, we can rely on these unconscious automatic responses to help expedite things, engaging in heavier mental processing only when necessary.

However, cognitive biases can also distort our thinking and perception, ultimately leading to inaccurate judgment and poor decisions.

The peak-end rule, also known as a cognitive bias, is known as a memory bias because it impairs the recall of a memory. We remember intensely emotional events more than less emotional events, and this has an effect on how we perceive an experience: we recall not the sum of how we felt throughout the experience, but the average of how we felt during the peak emotional moment and at its end.

The peak-end rule is related to another cognitive bias known as the recent effect, which states that items near the end of a sequence are the easiest to recall.

Our memories are rarely a perfectly accurate record of events. How users recall an experience will determine how likely they are to use a product or service again or recommend it to others.

📓 Key takeaways:

1. Pay close attention to the most intense points and the final moments (the “end”) of the user journey
2. Identify the moments when your product is most helpful, valuable, or entertaining and design to delight the end-user
3. Remember that people recall negative experiences more vividly than positive ones

7. Aesthetic-Usability Effect

An aesthetically pleasing design can influence usability — it not only creates a positive emotional response, but also enhances our cognitive abilities, increases the perception of usability, and extends credibility. This phenomenon is known as the aesthetic-usability effect:

“Users often perceive aesthetically pleasing design as a design that is more usable.”

Contrary to what we’ve been taught not to do, people do, in fact, judge books by their cover. This isn’t in fact a bad thing, it is actually something necessary. Automatic cognitive processing is helpful because it enables us to react quickly. Carefully processing every object around us would be slow, inefficient and in some circumstances dangerous, so we begin to mentally process information and form an opinion based on experiences before directing our conscious attention toward what we’re perceiving.

We use automatic cognitive processing to determine at a visceral level if something is beautiful quickly upon first seeing it, and this extends to digital interfaces as well. First impressions do matter. In fact, studies have shown that people form an opinion about a website within 50 milliseconds of seeing it, and the visual appeal is a primary determining factor. Interestingly, the opinion formed during the brief period — the visceral response — rarely changes as users spend more time on the site.

An aesthetically pleasing design can influence usability by creating a positive emotional response, which in turn enhances people’s cognitive abilities. When this happens, users tend to believe the design actually works better, and are more likely to overlook minor usability issues. While this might seem like a good thing, it can actually mask usability problems and prevent issues from being discovered during usability testing.

The Aesthetic-Usability Effect

📓 Key takeaways:

1. An aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually works better
2. People are more tolerant of minor usability issues when the design of a product or service is aesthetically pleasing
3. Visually pleasing design can mask usability problems and prevent issues from being discovered during usability testing

8.von Restorff Effect

In our evolution, we as humans developed an incredibly sophisticated system of vision and cognitive processing. We can identify objects in a fraction of a second, have superior pattern processing capabilities, and have an innate ability to spot small differences in objects. These traits that were essential for our survival in the past, remained with us and are affecting the way we perceive the world around us. The goals we try to achieve are not the only thing directing our focus. It is also directed by these instinctual abilities.

When it comes to digital interfaces, an interesting consideration is the tendency of contrasting elements to draw our attention faster.

“When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.”

A primary challenge that we have as designers is managing what users will focus on in an interface while supporting them in achieving their goals. You must be careful how you use this, though. On one hand, visual emphasis can be used to guide users towards a goal by capturing their attention. On the other hand, too many points of visual emphasis will compete with one another and make it harder for people to find the information they need.

Colour, shape, size, position, and motion are all factors that come into play in directing the attention of users, and we must carefully consider each of these when building interfaces.

💡 Banner blindness — the tendency for people to ignore elements that they perceive to be advertisements. Attention is a limited resource so, to maintain focus on information required for the task in progress, our brains developed to ignore information that is not helpful. We might even ignore legitimate content elements if they remotely resemble ads or are placed in proximity to them.

💡 Change blindness — the tendency for people to fail to notice significant changes when they lack strong enough visual cues, or when they focus their attention elsewhere.

The von Restorff Effect is a powerful guideline for how to use contrast to direct people’s attention to the most relevant content. It can help inform our design decisions when we want to place emphasis on critical or important actions or information and help to ensure that users of our products and services can quickly identify what they need to achieve their goals.

The user’s attention can also be drawn by differentiating certain elements. Though, if too many elements are visually competing, it dilutes their power, and they no longer stand out among the other elements.

📓 Key takeaways:

1. Make important information or key actions visually distinctive
2. Use restraint when placing emphasis on visual elements to avoid them competing with one another and to ensure salient items don’t get mistakenly identified as ads
3. Don’t exclude those with a colour vision deficiency or low vision by relying exclusively on colour to communicate contrast
4. Carefully consider users with motion sensitivity when using motion to communicate contrast

9. Tesler’s Law

A key objective for designers is to reduce complexity for the people that will use the products and services provided, yet there is some inherent complexity in every process. Inevitably, we reach a point at which complexity cannot be reduced any further but only transferred from one place to another. At this point, it finds its way either into the user interface or into the process and workflows of designers and developers.

“Tesler’s law, also known as the law of conservation of complexity, states that for any system there is a certain amount of complexity that cannot be reduced.”

Good user experiences are often those that feel easy and intuitive and remove obstructions that might stop people from achieving their goals. Even so, there is a balance that must be struck when striving for simplicity. When an interface has been simplified to the point of abstraction, there is no longer enough information available for the user to make an informed decision.

Tesler’s law is important for the designers to be aware of because it relates to a fundamental challenge in this field of work: how to manage complexity. The first thing is to accept that with any process, there will be a necessary amount of complexity that cannot be removed.

As designers, we have a responsibility to remove inherent complexity from our interfaces, or else we ship that complexity to our users. This can result in confusion, frustration, and a bad user experience. When possible, designers and developers should handle complexity, while taking care not to oversimplify to the point of abstraction.

📓 Key takeaways:

1. All processes have a core complexity that cannot be designed away, and therefore must be assumed by either the system or the user
2. Ensure you lift as much of the burden as possible as much as possible from users by dealing with inherent complexity during design and development
3. Take care not to simplify interfaces to the point of abstraction

10. Doherty Threshold

One of the features that is critical to a good user experience is performance. Emotions can quickly turn to frustration and leave a negative lasting impact when users who are trying to achieve a task are met with slow processing, lack of feedback, or excessive load times. Speed should be considered an essential design feature that is core to a good user experience.

Whether it is the amount of time the product or service takes to initially load, how fast it is to respond to interactions and provide feedback, or how quickly subsequent pages load, the speed at which the system responds is key to the overall user experience.

“Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.”

In some cases, the amount of time required for processing is longer than the threshold of 400ms, but that doesn’t mean we can’t provide feedback to the users while the processing is happening in the background. This technique helps to create the perception that a website or an app is performing faster than it actually is. Some common techniques are the following:

🎨 Skeleton screen is a technique used when the content is loading. This technique makes the site appear to load faster by instantly displaying placeholder blocks in the areas where content will eventually appear.

Everything you need to know about skeleton screens

🎨 Blur up is an approach that focuses specifically on images. It works by first loading a tiny version of an image and scaling it up in the space where the larger image will eventually be loaded.

🎨 Animation is a way to visually engage people while loading or processing is happening in the background. A common example of animation is the progress bar. Research has shown that simply seeing a progress bar can make wait times seem more tolerable, regardless of accuracy. This simple UI pattern is effective for multiple reasons:

• It reassures people that their action is being processed
• It provides visual interest while waiting
• It reduces the perception of waiting by shifting the focus to the animation of the progress bar instead of the actual process of waiting

It might be counterintuitive, but when the response is too fast, that is as well a problem. When the system responds more quickly than the user expects it to, problems might occur:

• the change might be completely missed by the user
• it might be difficult for the user to comprehend what happened, since the speed of the change does not allow sufficient time for mental processing

Purposefully adding a delay to a process can actually increase its perceived value and instil a sense of trust, even if the process actually takes much less time.

Performance is not just a technical consideration for the development team, it is an essential design feature. As designers, it is our responsibility to help ensure the people who use our products and services can achieve their tasks as quickly and efficiently as possible. To this end, we must provide the appropriate feedback, leverage perceived performance, and use progress bars to reduce the overall sense of waiting.

Response Time Limits: Article by Jakob Nielsen

📓 Key takeaways:

1. Provide system feedback within 400ms to keep users’ attention and increase productivity
2. Use perceived performance to improve response time and reduce the perception of waiting
3. Animation is one way to visually engage people while loading or processing is happening in the background
4. Progress bars help make waiting more tolerable, regardless of their accuracy
5. Purposely adding a delay to a process cab actually increase its perceived value and instil a sense of truth, even when the process itself actually takes much less time

Conclusions

The wealth of knowledge afforded to designers by behavioural and cognitive psychology research provides an invaluable foundation for creating human-centred user experiences.

The book “Laws of UX” is an introduction to the psychology fundaments that have a direct influence on the design and how people process and interact with the interfaces we create. Considering these 10 laws of UX presented in the book while designing will be a step in designing better experiences for the end-users of your services or products.