22 Basic UX Laws That Every Designer Should Know

Design is a broad discipline with many different specializations. But no matter what kind of design you do, there are a set of UX laws you should follow to build the best products you can. Learn these laws and how they help users better interact with your designs.

Design is a broad discipline with a lot of different areas. There are many types of designers, each with their area of specialization: graphic design, motion design, and interaction design, to name a few. But no matter what you do in the design field, there is a set of rules that every designer should know: the foundational rules of Human-Computer Interaction (HCI) that define how people perceive and interact with digital products. These are principles that can be applied at both the macro and micro levels of product design.

There is an excellent resource called Laws of UX created by product designer Jon Yablonski that covers many important UX rules and creates a solid foundation for UX designers. In this article, I want to extend the list created by Jon with a few more laws that I think are essential for designers, and show how to apply them in practice.

1. The Aesthetic-Usability Effect

Attractive things work better. Users often perceive aesthetically pleasing design as design that’s more usable.

Researchers Masaaki Kurosu and Kaori Kashimura from the Hitachi Design Center first studied the Aesthetic-Usability Effect in 1995. They tested 26 variations of ATM user interfaces, asking study participants to rate each design on ease of use, as well as aesthetic appeal. They found a strong correlation between their ratings of aesthetic appeal and actual ease of use. Researchers found that users are strongly influenced by the aesthetics of any given interface, even when they try to evaluate only the functionality of the product.

Masaaki Kurosu: Apparent usability vs. inherent usability. Image: Gyazo.

Aesthetically pleasing design can make users more tolerant of minor usability issues. In his book Emotional Design, Don Norman explores how the Aesthetic-Usability Effect applies to everyday objects.

Apple’s success is an excellent example of why it’s essential to pay attention to aesthetics.

Key takeaways for designers:

• Aesthetically pleasing design is worth the investment. Apart from having great usability, it is equally important to have excellent aesthetics.

• The Aesthetic-Usability Effect has its limits. A nice-looking UI can make users more forgiving of minor usability issues, but not of larger ones. Form and function should always work together to deliver excellent user experience.

"Form and function should always work together to deliver excellent user experience."

2. False-Consensus Effect

The False-Consensus Effect is a tendency to assume that others share your beliefs and will behave similarly in a given context. Many professionals suffer from the false-consensus effect, including designers. 

Designers often assume that the people who will use their products are like them. As a result, designers project their behaviors and reactions onto users. But thinking that you are your user is a fallacy: you are not the user. The people who will use your product most probably have different backgrounds, different mental models, and different goals than you.

Key takeaways for designers:

• Testing with real users is an essential part of the design process. Only by testing your product will you will see how people interact with your design and what problems they face. During usability testing sessions, it’s vital to pay close attention to what test participants do and how this relates to what they say.

3. Pareto Principle

For many events, roughly 80 percent of the effects come from 20 percent of the causes.

The principle is named after Italian economist Vilfredo Pareto, who noted the 80/20 connection in his work, Cours d'économie politique. In this, Pareto showed that approximately 80 percent of the land in Italy was owned by 20 percent of the population. 

In product design, the Pareto Principle can be applied to optimization efforts. Within any given system, only a few main variables affect the outcomes, while most other factors will return little to no impact. For example, Microsoft noted that by fixing the top 20 percent of their most-reported bugs, 80 percent of the related errors and crashes in a given system would be eliminated.

The Pareto Principle in user experience. Image: Interaction Design Foundation.

Key takeaways for designers:

• Prioritize your attention and resources. Narrow your focus down to essential features, those features that generate maximum value to you and your users.

4. Doherty Threshold

Productivity increases when a computer and its users interact at a pace that ensures that neither has to wait on the other.

Response time is the delay between the user’s request and the computer’s response. If the response time is too long, the user tends to lose patience. Experts at IBM measured the ideal response time that keeps users engaged. In 1982, Walter J. Doherty and Ahrvind J. Thadani published a research paper that set the requirement for computer response time to be no longer than 400 milliseconds. 

"The requirement for computer response time should be no longer than 400 milliseconds."

Key takeaways for designers:

• Don’t make users wait; provide system feedback within 400ms in order to keep users’ attention.
• If a given process takes more than 400ms to complete, you should show a loading animation or other visual/audio feedback indicating that the process will take some time. Based on Jakob Nielsen’s research about response times, 10 seconds is the limit for users to keep their attention on a task. After this, users grow impatient if they don’t have enough information on how long they have to wait for the result.

5. Fitt’s Law

Ease interactions through the careful sizing and positioning of interactive elements.

Fitt’s Law states that the time required to acquire a target is a function of the distance to and size of the target. The longer the distance and the smaller the target’s size, the longer it takes to acquire the target. 

Fitts' Law: Target size (W) and distance to the target (D). Image: Wikipedia.

Touch target size. Image: Apple.

Key takeaways for designers:

• Make the UI elements you wish to be easily accessible large enough, and position them close to users.

Twitter places a large floating action button for writing a new tweet in the bottom-right corner of the screen. By doing this, they reduce the distance the user’s thumb needs to travel in order to compose a tweet.

6. Hick’s Law

The time it takes for a person to make a decision increases with the number and complexity of choices. Minimize choices to drive decision-making.

In 1952, psychologists 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. They found that the more stimuli there are to choose from, the longer it takes the user to decide which to interact with. Increasing the number of choices increases the decision time logarithmically.

Hick’s Law predicts that the time and the effort it takes to make a decision increases with the number of options. Image: Anton Nikolov.

Many designers think that they’re improving user experience by offering lots of choices, but in reality, they’re adding extra cognitive burden. The more choices a user is confronted with, the more likely it is that they will face decision paralysis. This can be especially problematic in an ecommerce context, where users have to browse dozens of products that have similar properties. Offsetting decision paralysis leads to a higher conversion rate. This paradox is explored in the video below.

 
Key takeaways for designers:

• Reduce the total number of choices that users have to make. Having more choices results in more work users have to do in order to make a decision.
• Prioritize navigation options. Instead of providing an endless list of navigation options, focus on the most important options. 
• Simplify the decision making process for the user by breaking down complex tasks into smaller steps and clearly highlighting the recommended options.

Displaying a recommended option in the Windows installation wizard.

7. Weber’s Law of Just Noticeable Differences

Users don’t like dramatic changes. Subtle changes work better because the perceived change in stimuli is proportional to the initial stimuli.

Weber’s Law of Just Noticeable Differences states that the slightest change in things won’t result in a noticeable difference. Research shows that users dislike a massive change in products they use, even if those changes will benefit users. This means that if you do a significant redesign, there’s a high probability that users won’t like it.

Key takeaways for designers:

• Avoid dramatic redesigns. Introduce changes in your product gradually, not all at once. 

8. The rule of the first impression

People make snap judgments. It takes a fraction of a second to make a great (or bad) first impression. Things that users see or hear when they start interacting with a product will shape their opinion of the product.

"Studies show that early impressions of a product influence long-term attitudes about their quality."

Studies show that early impressions of a product influence long-term attitudes about their quality. People experience a similar phenomenon with human attractiveness—the first impression of a person influences how the person is perceived and treated.

A loading animation in a mobile app creates a great impression even before users start using the app. Image: Gleb Kuznetsov.

Key takeaways for designers:

• People do judge a book by its cover. Strive to create an aesthetically-pleasing design.
• Use emotions to make an impact. When users have a positive emotional response to your visual design, they tend to spend more time using your product. 
• Use moodboarding to find a particular look and feel that fits your overall goal.

You might also like: 6 Tools to Create Beautifully Designed Mood Boards.

9. Von Restorff Effect (or Isolation Effect)

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

The Von Restorff Effect, also known as the Isolation Effect, was coined by German psychiatrist and pediatrician Hedwig von Restorff. In her 1933 study, she found that when participants were presented with a list of categorically similar items grouped with one distinctive item, people better memorized the distinctive item.

An example of the Von Restorff Effect. People are more likely to remember the blue dot.

Key takeaways for designers:

• Make important information or key actions visually distinctive.

The call-to-action button ‘Start free trial’ on the Shopify website is visually prioritized among other content and options.

10. Peak-End Rule

People judge an experience primarily based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience. This effect occurs regardless of whether the experience is pleasant or unpleasant.

The Peak-End Rule.

Key takeaways for designers:

• Strive to provide the best possible experience in the most intense points and the final moments of the user journey.
• Reduce the pain-points. People recall negative experiences more vividly than positive ones.

11. The principle of familiarity

Users prefer your product to work the same way as all the other products from the product's category.

In his article Top 10 Mistakes in Web Design, Jakob Nielsen states that users spend most of their time on other sites. This means that users prefer that your site works the same way as all the other sites they already know. This rule is applicable not only to websites but to all the products we use. By making your design predictable, you minimize the cognitive load that user experience when they use your product. 

There is a reason why the Tesla Model S looks like a gasoline car. It even has a grill in the front, which does not make any sense for an electric vehicle. But it makes the vehicle look familiar for people.

Key takeaways for designers:

• Don’t reinvent the wheel; design patterns that users are accustomed to. 
• Apply the Principle of Least Astonishment to your product design: "If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature."

You might also like: How to Use Smart Defaults to Reduce Cognitive Load.

12. Picture Superiority Effect

Pictures and images are more likely to be remembered than words. Studies prove that pictures outperform text dramatically in human memory recall.

Key takeaways for designers:

• Use visual storytelling in your products. By pairing text with images, you increase the chance that users will remember the information.

By pairing text messages with visuals, Shopify increases chances that people will remember the message.

13. Miller’s Law

Humans can’t hold much information in their short term memory. The average person can only keep 7 (plus or minus 2) items in their working memory at one time.

Miller’s Law (also known as “The Magical Number Seven, Plus or Minus Two”) was coined by cognitive psychologist George A. Miller. According to this law, our brain has limited capacity for processing information—the number of perceptual ‘chunks’ an average person can hold in working memory is 7 ± 2. This law can be easily applied to UI design: the more chunks of information you add to a UI, the more difficult it becomes to work with it.

Key takeaways for designers:

• When showing telephone numbers, chunk the information so that it can be held easily in working memory. Instead of displaying a number like +16501251612, space the numbers out: +1 (650) 125-16-12.
• Use chunking to present groups of content in a manageable way. Organize elements of information in categories no larger than 9, but preferably 5 chunks.

14. The Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed tasks.

Russian psychologist Bluma Zeigarnik first noticed this phenomenon when she watched how a waiter worked with orders. While working, the waiter had better recollections of unpaid orders than paid orders. However, after everyone had paid the waiter was unable to remember any more details of the orders. 

It’s hard for people to leave things incomplete because a task that has already been started establishes a task-specific tension. This tension is relieved only upon completion of the task. But if the task is interrupted, the reduction of tension is impeded.

Key takeaways for designers:

• The Zeigarnik Effect is often used in gamification. By adding progress trackers in a UI, you remind users about unfinished tasks and motivate them to complete the tasks. 

PayPal motivates users to complete their profiles. 

15. Serial Position Effect

A user best remembers the first and last items in a series.

The Serial Position Effect (also known as the Primacy and Recency Effect) is a psychological phenomenon that states that items at the beginning (primacy) and items at the end (recency) of a list of information are more easily recalled than items in the middle. You remember the first item in a list is because it is the first thing you see when you start scanning a page (primacy effect), and you remember the last item on the list because it is the last thing you see on this page, and so ends up in your short-term memory (recency effect).

People have a better memory for both the beginning and end of sequences.

Key takeaways for designers:

• Consider this effect when delivering information to your users or displaying navigation options. It’s not an accident that many mobile apps put the “Home” and “Profile” items all the way to the left and right.

You might also like: Dark Patterns: 12 Tricks You Should Never Use in Your Products.

16. Occam’s Razor

Entities should not be multiplied without necessity.

Occam's Razor is a problem-solving principle that states that when we have two explanations for an occurrence, the one that requires the least speculation is usually correct. This idea is attributed to English Franciscan friar William of Ockham.

Key takeaways for designers:

• Analyze each element and remove as many as possible, without compromising the overall function.

Gestalt Laws of Perceptual Organization

Gestalt psychology was founded by German psychologists Max Wertheimer, Wolfgang Kohler, and Kurt Koffka. It focused on how people interpret the world. Wertheimer, Kohler, and Koffka established a few fundamental principles, also known as "laws of perceptual organization." The next laws are from these studies.

17. Law of Similarity

Elements that have similar visual appearances seems to be more related.

In the image below, you probably see the groupings of colored circles as rows rather than just a collection of circles:

The similarity principle.

Key takeaways for designers:

• Elements can be visually grouped together if they have visual similarities. It’s possible to create similarity using size, color, and shape.

Users group items based on their visual properties.

18. Law of Common Region

Elements tend to be perceived in groups if they are sharing an area with a clearly defined boundary.

The Law of Common Region.

Key takeaways for designers:

• By adding borders around an element (or a group of items), you separate it from surrounding elements.

Ennio Dybeli separates receipt details from its description using color and visual dividers.

19. Figure-Ground 

This principle refers to the human’s ability to visually separate objects on different layers of focus. The human eye can separate objects on different plans of focus: we intuitively know which elements are placed in the foreground and with ones are in the background.

Key takeaways for designers:

• Every time users see the modal popup, they witnessing a Figure-Ground effect. Material design classifies Z-axis of elevation, which is used to design overlays.

Z-axis layers. Image: Material Design.

20. Law of Proximity

Objects that are near each other seem to be grouped together.

In the below image, the circles on the left appear to be part of one group while those on the right appear to be part of another: 

The Proximity principle.

Key takeaways for designers:

• Place related objects close to each other to create a connection.

If you compare the examples on the left and right, it’s clear that the examples on the right are easier to read and comprehend.

21. Law of Continuity

Objects connected by straight or curving lines are seen in a way that follows the smoothest path.

In the image below, lines created from circles are seen as belonging together:

The Continuity Principle.

Key takeaways for designers:

• Guide the user’s eye by creating a visual connection between items. 

If you compare the left and right examples of menus, it’s easy to see that the menu on the right is more comfortable to scan and comprehend.

22. Law of Closure

Our brains tend to fill in gaps in information.

In the image below, you probably see two objects (a circle and a star), because your brain fills in the missing gaps to create a meaningful image.

The Law of Closure.

Key takeaways for designers:

• This principle is worth remembering when you work on loading animations, as the user’s mind will automatically fill in the gaps to figure out the shape of your animation.

Material Spinner by Tom Johnson creating a circle shape.

Laws to design better

'Don’t make users think' is a common adage in the product design. Designers should strive to reduce the user’s cognitive load and lower the cost of interaction by designing easy-to-use products. The principles above should be a part of your design toolbox. Applied correctly, they can help you create a better user experience for your users.

What UX laws have you relied on in your designs? Let us know in the comments below!