Pine

18 Essential UX Laws Every Designer Should Know + Examples

All designers need to understand the essential UX laws developed by scientists and psychologists that focus on how users perceive and interact with interfaces. This article will give a brief overview of the most important principles, with examples of their implementation, helping guide you to create successful digital products that offer the best user experience possible.

Hicks Law

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

Discovered in 1952 by psychologists William Edmund Hick and Ray Hyman, this law essentially states that having too many choices increases an individuals’ cognitive load, causing decision paralysis. To overcome this and drive decision making, it advises reducing the number of options presented to individuals and breaking down complex tasks into simple steps.

Example 1 – Limit Number of Options: On platforms where there a vast catalogue of items, instead of listing each one, you’ll find information broken down into categories to prevent choice overload and decision paralysis. Amazon is an excellent example of this, with the side navigation bar showing top categories that open up more options and sub-categories when clicked.

Example 2 – Breakdown Complex Tasks: Completing a purchase is a complex task that requires you to fill in various fields. To make things easier, designers break the process down into multiple steps to make it easier for individuals to process information and drive decision making. The example above shows the checkout section from Nike’s website. Instead of displaying all the information at one time, the process is broken down into three stages, with the information of one step shown at a time.


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

Coined by the “guru of web page usability”, Jakob Nielsen, this law suggests that users transfer all the expectations formed from their experience of using a product in the past to anything new they use that appears similar. In essence, don’t try and reinvent the wheel; make essential elements of the website follow convention to offer the best user experience.

Example: This law is is typically applied in designing websites. The example above shows screenshots from Booking.com and Expedia, two travel booking sites that display conventional UI/UX. On each website, both the search feature and all essential elements are almost identical, so users will have no trouble using one or the other. So, if you were to create your travel booking platform, you wouldn’t put the “Check Out” field before the “Check-In” field as it would make no sense and confuse users.


Von Restorff Effect

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

First identified by German psychologist Hedwig von Restorff, this law, also known as the isolation effect, essentially advises that if you want an element to stand out, make it different from other similar items on the same page. Designers typically use this principle when designing buttons and CTA’s they want users to click on to complete the desired action. Typical ways to do this include making elements different colours, shades or, in some cases, interactive.

Example: The “TRY FOR FREE” button on Slacks homepage is an excellent example of the Von Restorff effect in action. Its solid purple colour ensures it stands out compared to other buttons and text on the interface, making it more memorable.


Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed tasks.

Created by Soviet psychologist Bluma Wulfovna Zeigarnik, this law suggests that incomplete tasks are more memorable as they induce a task-specific tension within individuals, which they can only overcome upon completion. Designers typically add UI elements such as progress bars/trackers to a product’s interface to remind and motivate users to complete a task.

Example: Although there are many practical examples, three familiar places you’ll find the Zeigarnik Effect in action include onboarding, profile completion and course overview pages on e-learning platforms. The example above is from the course overview page on IxDF, which has progress bars, percentages and a numeral value to indicate users progress and encourages completion. 


Millers Law

“The average person can only keep 7 (plus or minus 2) items in their working memory”.

First observed by psychologist George Miller, this law essentially advises to break down any essential details, elements and information into chunks of 7 (plus or minus 2), so they’re easier to remember. The way we naturally break down phone numbers into pieces of three and five is an excellent example of this phenomenon in action. Designers use this principle to organise the display of content on an interface.

Example: On Spotify’s interface, you’re only shown five music options under each category. The side navigation also only displays five possibilities for users. Meanwhile, on Etsy’s homepage, they display six choices for categories and under the popular gifts section. While on the top navigation bar, they display nine options for users to choose from.


Doherty Threshold

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

Hypothesised by Walter J. Doherty and Ahrvind J. Thadani in 1982, this law essentially states that if a user is perceived to be left waiting for a system to respond to their request, it will cause them to lose attention and reduce productivity. The optimum system response time is 400Ms; anything less than this is addictive. To help keep a users attention, designers typically add progress bars, pop-ups or animations to interfaces when there is a delay.

Example 1 – Deliveroo: When searching for restaurants on Deliveroo, there is a slight delay whilst the webpage populates. To keep users attention during that lag time, a pop-up appears to keep users attention, conveying an offer and information on how to redeem it.

Example 2 – Canva: An animated progress bar is used to keep users’ attention whilst waiting for their designs to download, which varies in time depending on the content.


Aesthetic Usability Effect

Users often perceive aesthetically pleasing design as design that’s more usable.

Identified by researchers Masaaki Kurosu and Kaori Kashimura, this law proposes that the better something looks to an individual, the more useful they perceive it to be, and the more tolerant they are of any usability issues it has. Contrary to what people say, aesthetics play a vital role in the overall perception and user experience of a product, alongside usability.

Example: Apple has used the aesthetic usability effect to perfection to dominate every market they enter, whether it’s smartwatches, tablets, iPhones and computers. In some cases, there are equally as good, if not better, options out there; however, people perceive Apple to better due to aesthetics. 


Occam’s Razor

Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.

Source: Built for Mars

Attributed to 13th century British Theologian William of Ockham, this problem-solving principle advises to favour simplicity over complexity since it is almost always the best outcome. In design, this rule encourages designers to eliminate the unnecessary elements until there is nothing left that could compromise the design’s efficiency.

Example: Revolut is a company that practices Occam’s Razor principle to perfection. Evident in the graphic above, which places it at the top for the fewest number of clicks needed to create an account.

Read Full UX of Banking Case Study


Peak-End Rule

People judge an experience largely 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.

Discovered by Kahneman, Fredrickson, Charles Schreiber, and Donald Redelmeier, this principle suggests that we judge our experience of an event based on two parts, the peak and the end. So when designing interfaces, make sure you pay close attention to the most intense moments and the endpoint of the user’s experience.

Examples: The image above shows three screens displayed to users after they complete a specific action. The first is from language app Drops, and displayed to users after they correctly answer a series of questions. The middle example is the message displayed to users when they’re about to send out an important email. The last one is from language learning app called Chinese Skill and is displayed to users after they’ve completed a new level.


Gestalt Laws of Perceptual Organisation

Founded by German psychologists in the 1920s, the Gestalt school of psychology hypothesises that humans naturally perceive visual element as patterns and group them when certain principles (outlined below) are applied. Designers use these principles to organise content on interfaces so they’re easy to understand and aesthetically pleasing.

Law of Proximity

“Elements near each other are perceived to be related and grouped together”

According to this law, we use proximity to understand, identify relationships between and group elements more efficiently. UX/UI designers regularly use this law when designing digital products and interfaces. Examples include using subheadings to separate text and white space to adjust the proximity between and group design elements.

Example – Canva:   The area highlighted on the graphic above is an excellent example of the application of Gestalt’s Law of Proximity. You can see the use of subheadings to categorise element types and whitespace to separate each element. 


Figure-Ground 

“People instinctively differentiate an object from its surrounding area. Perceiving it in either the foreground or background.”

According to this principle, the human eye can separate objects on different layers of focus. The entity that stands out in front is referred to as a figure, while the one receding is the ground.

Example – Sidekick Browser: This example is from the ‘new tab” page on the sidekick browser. Your eyes can automatically distinguish the app icons in the foreground, meaning they are the figure. In comparison, the backdrop image is the object.


Law of Common Region

We perceive elements in groups if they share an area with a clearly defined boundary.

According to this law, we group all elements enclosed within the same region, such as a box. When creating interfaces, designers often use borders and card to create common areas and differentiate between elements, even if they are the same size, colour and shape.

Example – Culture Trip: This travel platform uses cards to display common regions, with all the elements, from text to images, inside each card part of the same group.


Law of Continuity

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

According to the law, our eyes naturally follow lines as curves, so any elements on the same lines are perceived to be connected. Designers use this principle to create visual associations between elements on interfaces. 

Example – Nanushka – The options for categories in the top navigation, images and colours are all in a straight line, so you can tell that they’re related. You know the steps you need to purchase on the checkout page as they’re presented in a straight line.


Law of Closure

“We naturally try to find recognisable patterns when looking at visual elements arranged in a complex manner. “

Essentially, when you see visual elements that have gaps or parts missing, your brain naturally fills them in so you can see a pattern. Designers often use this principle when creating UI elements and logos.

Example – We’ve highlighted a number of iconic logos in the image above, but let’s focus on the Apple Logo. Even if someone saw it for the first time, despite the fact its got a chunk missing, they’d still be able to identify that it is an apple.


Law of Similarity

“We perceive elements that are visually similar as one, even if they are separated”

Designers can use variables such as size, shape, colour, orientation, and movement to signify similarities and group elements together that may share similar functionality. Hyperlinks are an excellent example of this, as they’re typically differentiated based on colour and the fact that they’re underlined.


Law of Focal Point

“Visual elements that stand out the most from their surroundings will capture and hold the viewer’s attention first.”

According to this principle, we naturally focus on elements that visually stand out from the rest, be it due to size, colour, contrast, or shape. Designers use this principle to highlight and emphasise key elements they want users to interact with, such as the CTA’s.

Examples: The “CONTINUE” button on the screenshot from the HelloFresh website is highlighted green and stands out from the other call to actions. Similarly, the “BUY NOW” button on Adobe’s pricing page stands out due to its intense blue colour. They’ve also used a yellow “BEST VALUE” label to draw users attention to the highest value pricing option, which includes all the apps.


Law of Prägnanz

“People perceive and interpret ambiguous or complex images in the simplest form possible because it requires the least cognitive effort”.

“People perceive and interpret ambiguous or complex images in the simplest form possible because it requires the least cognitive effort”.

Essentially, this law states that we prefer any information and elements presented to us in order. Even when presented with complex shapes, we’ll re-organise them into simple and easy to understand components as it requires less cognitive load.

Examples – The interlocking rings on both the Olympics and Audi logo are an excellent example of this. Instead of seeing complex and curved lines, our brain processes them five (Olympics) or four (Audi) circles.


The Law of Common Fate

“We perceive elements that move in the same direction as more related than stationary elements that move in different directions.”.

According to this law, regardless of their different position or visual characteristics, if they’re moving in the same direction, we’ll perceive these elements to be the same. Therefore, it’s essential in UX design that any similar function elements move in the same direction. You’ll typically see this law in action on interactive menus.

Example – Forbes: The hamburger menu on the top left of the Forbes landing page opens up a side navigation menu to the right with a list of categories. When you hover over the first set of categories, another menu containing the sub-categories opens up to the right.


References

The Ultimate UX Design Dictionary | Laws of UX

Laura Brazay

Laura Brazay

Digital branding specialist with experience in social media strategy, and a background in Business Administration, who sees life in the full spectrum of colours. I spend my free time taking long walks exploring the city with my pup.

Add comment