User Experience (UX) Laws Every Website Designer Should Know

Share on facebook
Share on google
Share on twitter
Share on linkedin

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.

 

Some of the UX laws mentioned on this article are a collection of design principles by Jon Yablonski — senior product designer at General Motors — from his book “Laws of UX: Using Psychology to Design Better Products & Services”. These are solid guidelines that every designer should consider. Here are some of the most important principles Yablonski lists that I usually used with my wordpress website designs using Thrive Themes and Elementor Pro:

1. The Aesthetic-Usability Effect

Apple’s success is an excellent example of the competitive advantage of paying attention to aesthetics.

Users are more tolerant of minor usability issues when they find an interface visually appealing. This aesthetic-usability effect can mask UI problems and can prevent issue discovery during usability testing. 

 

However, this effect is at its strongest when the aesthetics serve to support and enhance the content and functionality of the site. Additionally, this effect often influences user comments during research. As always, listen to what users say, but, first and foremost, take into account what they do.

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

2. False-Consensus Effect

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

 

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.

Testing with real users is an essential part of the design process. Only by testing your product will let you see how people interact with your design and what problems they face.

3. 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

Don’t make users wait; provide system feedback within 400ms in order to keep users’ attention.

4. Law of Proximity

Objects that are closer, or proximate to each other, has the tendency to be grouped together. 

 

This one is especially useful for website designers as it deals with how our eyes and brains draw connections with design elements. Of course, connecting is also important to us – that’s what we want to make happen between our users and our website designs.

 

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

Image from: https://lawsofux.com/law-of-proximity.html

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

5. Law of Similarity

Elements that have similar visual appearances seems to be more related. The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.

 

The brain seems to craft a link between elements of a similar nature. Then, we perceive them in a relationship with each other, separating them from other elements in a design. Human eyes are good at filling in “gaps” or connecting “dots”. It happens naturally.

 

Image taken from https://www.interaction-design.org/literature/article/the-law-of-similarity-gestalt-principles-1

Ensure that links and navigation systems are visually differentiated from normal text elements, and are consistently styled.

6. Fitts’s Law

The time to acquire a target is a function of the distance to and size of the target. 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. 

 

In 1954, psychologist Paul Fitts, examining the human motor system, showed that the time required to move to a target depends on the distance to it, yet relates inversely to its size. By his law, fast movements and small targets result in greater error rates, due to the speed-accuracy trade-off. Although multiple variants of Fitts’ law exist, all encompass this idea. Fitts’ law is widely applied in user experience (UX) and user interface (UI) design. For example, this law influenced the convention of making interactive buttons large (especially on finger-operated mobile devices)—smaller buttons are more difficult (and time-consuming) to click. Likewise, the distance between a user’s task/attention area and the task-related button should be kept as short as possible.

https://www.shopify.com.ph/partners/blog/ux-laws

Touch targets should be large enough for users to both discern what it is and to accurately select them.

7. Hick’s Law

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

 

Hick’s Law (or the Hick-Hyman Law) is named after a British and an American psychologist team of William Edmund Hick and Ray Hyman. In 1952, this pair set out to examine the relationship between the number of stimuli present and an individual’s reaction time to any given stimulus. As you would expect, the more stimuli to choose from, the longer it takes the user to make a decision 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.

Having one choice acts as light in the tunnel when users are stressed or confused.

When response time is critical keep the choices to a minimum. It will speed up the decision making.

Simplify choices for the user by breaking down complex tasks into smaller steps. Avoid overwhelming users by highlighting recommended options.

8. Jakob’s Law

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. 

 

Jakob’s Law was coined by Jakob Nielsen, a User Advocate and principal of the Nielsen Norman Group which he co-founded with Dr. Donald A. Norman (former VP of research at Apple Computer). Dr. Nielsen established the ‘discount usability engineering’ movement for fast and cheap improvements of user interfaces and has invented several usability methods, including heuristic evaluation.

By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.

9. Serial Position Effect

Users have a propensity to best remember the first and last items in a series. The serial position effect, a term coined by Herman Ebbinghaus, describes how the position of an item in a sequence affects recall accuracy. The two concepts involved, the primacy effect and the recency effect, explains how items presented at the beginning of a sequence and the end of a sequence are recalled with greater accuracy than items in the middle of a list. Manipulation of the serial position effect to create better user experiences is reflected in many popular designs by successful companies like Apple, Electronic Arts, and Nike.

 

1. The Primacy Effect: Items that are presented at the beginning of a list are recalled with greater accuracy than items in the middle of a list.

 

 

2. The Recency Effect: Items that appear at the end of a list are also more likely to elicit better recall than items presented in the middle of a list.

Positioning key actions on the far left and right within elements such as navigation can increase memorization.

10. Pareto Principle

According to the Customers 2020 Report, By the year 2020, customer experience will overtake price and product as the key brand differentiator. 

 

Some may say that we are already in the age of customer experience. That implies a laser like focus and due diligence on user experience (UX) elements that matter the most.

 

One way to bring in focus is by using the 80/20 rule. The 80/20 rule, also known as the Pareto Principle, states that 80% of results in a system come from 20% of the causes. Its origins stem back to Vilfredo Pareto, an economist who noticed 80% of Italy’s land was owned by 20% of the population. Though it might seem vague, the 80/20 way of thinking can provide insightful and endlessly applicable analysis of lopsided systems, including user experience strategy.

Focus the majority of effort on the areas that will bring the largest benefits to the most users.

FURTHER READING