The 6 UX Design Laws (amazing comparison)

Introduction

If you believe that User Experience (UX) is solely about crafting the design of a product, you’re missing out on its diverse and broad applications. Beyond the physical or digital product design, understanding the roots of the UX concept and exploring its various applications is crucial. 

Multiple definitions from books, articles, and websites emphasize the academic and formal introduction of UX and UX Design Laws. Scholars, such as Sun and Teng (1017) and Hassenzahl and Tractinsky (2006), highlight the significance of using emotions during interaction with the system. The scope of UX varies depending on the Product or service under consideration, from the relationship between humans and products to the analysis of consumer behavior from a marketing perspective.

“To stress the importance of all those belonging to their sphere of affection and emotions that are hidden behind the idea of ‘joy to town.”

(Sun and Teng 2017)

“The aspect of how the user feels during the interaction with a system is strengthened”.

(Hassenzahl and Tractinsky 2006)

Human interaction with technology, as proposed by McCarty and Wright (2004), expands the UX concept to four base threads: sensual, emotional, compositional, and spatiotemporal. While some define UX as a co-experience phenomenon, others, like Norman, caution against limiting it to the product’s appearance and graphics. Heassenzahl (2010) doesn’t endorse this vision, he said the technology and interactive products are the mediators of the experience but cannot be pointed as UX themselves. Another idea is based on Battrbee and Kpskinen (2005) see the UX as a phenomenon defining it as co-experience.

“The problem comes from this point of view in which the UX just talks about the appearance and the graphics of the product because we use the term Design.”

(Donald Arthur Norman, https://en.wikipedia.org/wiki/Don_Norman)

The international standard on ergonomics of human-system interaction, ISO 9241-210, defines UX as a person’s perception and responses that result from the use and anticipated use of a product, system, or service (DIS 2010) (https://en.wikipedia.org/wiki/ISO_9241). This definition expands to points like emotions, beliefs, preferences, perception of physical and psychological responses, behavior, and accomplishments that happened before, during, or after the experience.

In simple words, UX design is an interdisciplinary field that blends psychology, computers, and design. It delves into how users perceive and interact with a product or service, emphasizing ease of use, efficiency, and user satisfaction.

 

Why UX is important?

 

In a digital landscape with over 200 million active websites, UX designers play a pivotal role in ensuring intuitive and accessible digital products. The significance of UX is underscored by statistics, such as 88.5% of web designers attributing website existence to slow loading and 57% of Internet users stating they won’t recommend a poorly designed business.

• 3% of users leave a website due to non-responsive web design.
• 50% of customer brands should prioritize web design.
• 43.2% of all websites use WordPress and a CMS.
• 39% of web users are drawn to color more than any other visual element when visiting websites.

 

Google’s “page experience” algorithm, based on Core Web Vitals, prioritizes UI/UX design and website speed for high rankings. Good UI/UX design not only builds trust with customers but also improves engagement, sets businesses apart from competitors, enhances efficiency and productivity and contributes to brand identity and recognition. (https://developers.google.com/search/docs/appearance/page-experience)

• Can improve engagement rates. By having a simple website or easy-to-use product the user is more likely to complete the task.
• Can set a company apart from the competition by differentiating our UI UX design services so your business stands out.
• Can improve efficiency and productivity. It saves time and increases productivity which can also lead to cost savings.

 

Pixel506 lists key benefits of UX design, including ease of use, increased revenue, faster time to market, low support costs, reduced steps, increased interaction, improved customer retention and loyalty, avoided waste of resources, and more accurate prototyping. (https://www.pixel506.com/insights/what-is-ux-design)

Moreover, a well-designed UI/UX considers accessibility for disabled users, aligning with legal requirements and ethical considerations. 

In summary, the importance of UI/UX design spans various domains, including website and mobile app development, with tangible impacts on success factors like sales, efficiency, and brand recognition.

 

So, let’s dive into UX design laws and principles:

 

UX laws and principles

 

It is essential to find the foundation and basis of the UX design laws that guide effective interfaces. A simple search shows various versions, but we’ll focus on six fundamental UX design laws, exploring additional ones later.

The principles of grouping (or Gestalt laws of grouping) are a set of principles in psychology, first proposed by Gestalt psychologists to account for the observation that humans naturally perceive objects as organized patterns and objects, a principle known as Prägnanz. Gestalt psychologists argued that these principles exist because the mind has an innate disposition to perceive patterns in the stimulus based on certain rules. These principles are organized into five categories: Proximity, Similarity, Continuity, Closure, and Connectedness (https://en.wikipedia.org/wiki/Gestalt_psychology)

the German word gestalt means the way a thing has been placed or put together. To better understand the meaning, it’s useful to understand the idea of Gestalt psychology which teaches that brains tend to process organized groups of things, rather than several individual things. The Gestalt Principles of Design are a set of concepts that apply the Gestalt understanding of perception to how information can be treated and organized to better communicate. (Christopher Butler, https://www.chrbutler.com/gestalt-principles-of-design-proximity)

 

1- The law of Proximity

Definition: objects or items close together are recognized as part of the same group, which enhances user interaction by grouping similar elements.

The law of proximity impacts the UX design by: 

-Establishes relationships with nearby objects.

-Enhances user understanding and organization of information.

-Elements nearby are perceived to share similar functionality or traits.

 

“The principle of proximity states that items close together are likely to be perceived as part of the same group — sharing similar functionality or traits”.

(Aurora Harley, https://www.nngroup.com/articles/gestalt-proximity/)

 

The law of Proximity (proximity psychology) is one of the main concepts in the principles of grouping. Based on the scientific findings the human brain tends to find and accept patterns so grouping the similarities in each design, if needed, can have a huge impact on users to interact with the interfaces more easily and more enjoyable which leads to more engagement. The UX law of proximity revolves around the perception of the user seeing the stimuli. The designers should establish a relationship with nearby objects. It requires placing objects such as toolbars or even topics with similar characteristics close to each other, so this makes the users’ experience more intuitive and efficient, as they easily find what they are looking for without having to search through unrelated elements.

 

2- The law of Similarity 

Definition: Items sharing a visual characteristic are perceived as related, utilizing elements like shapes, colors, and size for effective grouping. Similarity (also known as Invariance) states the human eye tends to build a relationship between similar elements within a design.

(Interaction Design Foundation – IxDF. https://www.interaction-design.org/literature/article/the-law-of-similarity-gestalt-principles-1)

 

The law of similarity impacts the UX design by:

• -Creates a perception of full pictures or groups based on shared visual traits.
• -Works together with proximity to form a visual hierarchy.

 

“The principle of similarity states that items that share a visual characteristic are perceived as more related than dissimilar items”

(https://www.nngroup.com/articles/gestalt-similarity/)

 

The principle of similarity states that when items share some visual characteristics, they are assumed to be related in some way the items don’t need to be identical, but share at least one visible trait such as color, shape, or size to be perceived as part of the same group.

The similarity principle is different from several other visual grouping principles in that the shared characteristic can unite elements despite a distributed placement. So, although it is not the most important one it is often overpowered by proximity or common region.

 

3- The law of continuity

Definition: Elements sorted on a line or curve are perceived as more related, promoting a natural flow in UX design.

 

The impact of Continuity law on the UX design:

• -Create an integrated user experience with smooth transitions.
• -Emphasizes a continuous flow of visual elements for improved understanding.

 

“The human eye follows the paths, lines, and curves of a design, and prefers to see a continuous flow of visual elements rather than separated objects”. 

(Interaction Design Foundation – IxDF. https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2)

 

The law of continuity (also known as the law of good continuation) states that elements of objects tend to be grouped, and therefore integrated into perceptual wholes if they are aligned within an object. In cases where there is an intersection between objects, individuals tend to perceive the two objects as two single uninterrupted entities. (wiki:https://en.wikipedia.org/wiki/Gestalt_psychology)

4- The law of common region (Containers Create Grouping)

Definition: Items within a boundary are seen as a group, enhancing user understanding of relationships between elements.

 

The impact of the Common Region Law on UX Design:

• -Creates a clear structure for effective information organization.
• -Defines distinct, organized sections with visible boundaries.
• -Emphasizes multiple elements and helps establish a visual hierarchy.

 

Palmer and colleagues have developed some new principles of visual field organization. For example, Palmer (1992) has proposed the common region principle: elements tend to be grouped if they are located within the same closed region. (http://www.scholarpedia.org/article/Gestalt_principles)

Designers can use this trick to define distinct, organized sections of content or controls. This helps users recognize the basic UI structure and understand what elements they can interact with. 

I have listed some advantages of the common region principle:

1. Common region creates a clear structure and helps users quickly and effectively understand the relationship between elements and sections.
2. Adding a border around an element or group of elements is an easy way to create a common region.
3. by defining a background behind an element or group of elements.
4. Common Region overpowers similarity. In UX establishing a common region for related elements helps users understand groupings.
5. Common Region helps establish hierarchy. The law of common region helps establish a visual hierarchy. Designers group elements by outlining or setting the same background color for the connected elements. It allows users to effectively navigate the design and understand where to look for the information they need.
6. Common Region allows to emphasize multiple elements. The law of common region brings structure and helps visualize multiple groupings at a time. It’s especially important in tables that compare several products and their characteristics. In cases like this, designers need to find a way to distinguish both the column and the row.
7. Highlight relevant information. Like in the real world, borders can separate but also unite. Using an outline to isolate some elements from others also shows users what elements belong to the same group. As an alternative way to group the content, designers can outline elements that are related to one another.
8. Group-related information. The human brain constantly analyzes and classifies the information we see. Using the law of common region in your design, you’re doing part of this job for your users.
9. Bring attention to what’s important. Enclosing elements in an area makes them stand out from their surroundings.
10. Show relationship. According to the law of the common region, containers communicate relationships. This works in graphic design too. Even when the container has no visible outlines, it holds elements inside, making the design look complete.
11. Apply multiple common regions. One of the ways to establish hierarchy is to apply multiple common regions at once. In the example, each card has a common background color, which identifies them as separate elements. The common white background and border, in turn, indicate that these cards belong to the same category. 

(https://app.uxcel.com/lessons/law-of-common-region-899)

 

5- The law of Closure

Definition: Humans tend to see incomplete objects as complete. Filling in visual gaps to create a whole.

 

The impact of closure on UX design:

• -Indicates additional content and encourages interaction.
• -Important in logo and icon designs in interfaces.

 

“Humans tend to perceive objects as complete rather than focusing on the gaps that might contain”. (Hamlyn, D.W. (1957). The Psychology of Perception: A Philosophical Examination of Gestalt Theory and Derivative Theories of Perception (1st ed.). Routledge. https://doi.org/10.4324/9781315473291)

 

The law of closure states that individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap. If the law of closure did not exist, the image would depict an assortment of different lines with different lengths, rotations, and curvatures but with the law of closure, we perceptually combine the lines into whole shapes. 

(https://www.clevelandconsultinggroup.com/articles/emergence-gestalt-approach-to-change.php) 

(https://gizmodo.com/why-your-brain-thinks-these-dots-are-a-dog-506703504)

When cutting off content and page elements, consider how much of that element will be on screen and whether it’s enough to communicate value and function. (https://www.nngroup.com/articles/principle-closure/)

 

6- The law of Figure-Ground

Definition: The Law of Figure-Ground emphasizes that the human brain sees an object in the foreground if it stands out from its background. This principle predicts that distinctive objects are more likely to be remembered.

 

“This determination will occur quickly and subconsciously in most cases. Figure/Ground lets us know what we should be focusing on and what we can safely ignore in a composition”.

(Steven Bradley, web designer, https://www.usertesting.com/resources/topics/gestalt-principles)

 

When interacting with websites or mobile apps, our brains instinctively distinguish between the figure and the background. Factors such as blurriness, contrast, size, and separation play pivotal roles in UX designs.

 

As I mentioned above, we like to distinguish the main ground and the figures or objects on it. For this goal, we should consider some points, which I listed below:

• – Blurriness: We use this type of visual information to determine whether something is the figure (crisp) or the background (blurry).
• – Contrast: it is obvious that the contrast between the background and the figures helps us separate them into figure/ground.
• – Size: the larger images as closer and the smaller images are further off in the distance.
• – Separation: isolating the object or icon from the other parts of the page, catching the eye more easily and showing the importance of the isolated one. (https://www.verywellmind.com/what-is-figure-ground-perception-2795195)

 

To improve your figure/ground detection skill 

• -playing with Puzzles or reading different text offline or online to challenge yourself to pick specific words out of a page. 
• -Optical illusions are a fun and great way to improve your skills. 
• -Try to get outside and spend time in nature to practice this skill in the real world. 
• -Pay attention to sounds and sights. 
• -Photography is very helpful in honing your ability to distinguish figures from the ground.

 

TREND 2023: 2023 UX Trends to Keep an Eye On

 

Simplicity Wins: Following Dieter Rams’ timeless principle, simplicity remains a constant in design, emphasizing a return to basics.

Typography Experiments: Delicate serifs continue to reign, but bold and big typography, including 70s-inspired disco fonts, is making a comeback.

Glassmorphism: Characterized by blurred backgrounds, Glassmorphism creates a frosted glass effect, adding layers for a visually appealing design.

Voice User Interfaces: With 22% of internet users purchasing groceries via voice assistants, incorporating voice user interfaces is a rising trend.

Diversity and Inclusivity: Designing products with accessibility for every audience member, including those with limited abilities, becomes a necessity.

(https://www.peppersquare.com/blog/the-principles-and-laws-of-ux-design-why-every-designer-should-know-them/)

 

6 Amazing UX Laws vs. Other UX Principles

 

In the realm of Human-Computer Interaction (HCI), UX is a multifaceted concept, extending beyond usability. 

(Hellweger, Stefan, and Xiaofeng Wang. “What is user experience really: towards a UX conceptual framework.” arXiv preprint arXiv:1503.01850 (2015))

HCI researchers agree that UX should not be equated with usability alone. Folstad and Rolfsen classified literature into three camps: 1. UX encompasses usability; 2. UX complements usability; 3. UX is one of many components constituting usability. 

(Følstad, A.; Rolfsen, R.K. Measuring the effect of User Experience design changes in e-commerce websites: A case on customer guidance. In User Experience—Towards a Unified View, Proceedings of the 2nd COST294-MAUSE International Open Workshop, Oslo, Norway, 14 October 2006; ACM: Oslo, Norway, 2016; pp. 10–15.)

 

Conclusion

 

While referred to as laws, these UX principles guide digital designers in creating optimal designs. Recognizing the underlying forces of UX laws, despite being cause-and-effect relationships rather than actual laws, enables designers to enhance user experiences.

 

These laws, rooted in extensive research, offer valuable insights for improving user experience. The psychology behind these principles illustrates how visual perception tendencies influence user behavior. Understanding these principles allows designers to convey messages effectively through visual forms.

 

It’s crucial to note that these principles are heuristics or shortcuts, designed for speed. Perceptual systems may occasionally make mistakes, resulting in perceptual inaccuracies. In conclusion, grasping the psychological principles driving user behavior is essential for creating excellent UX designs. Applying the laws of proximity, similarity, continuity, common region, closure, and figure-ground facilitates the creation of user-friendly interfaces. Putting yourself in the user’s shoes and staying abreast of design trends and technologies ensures a relevant and user-friendly interface.

 

Ref.:

1. (Donald Arthur Norman, https://en.wikipedia.org/wiki/Don_Norman)
2. (https://en.wikipedia.org/wiki/ISO_9241)
3. (https://developers.google.com/search/docs/appearance/page-experience)
4. (https://www.pixel506.com/insights/what-is-ux-design)
5. (https://en.wikipedia.org/wiki/Gestalt_psychology)
6. (Christopher Butler, https://www.chrbutler.com/gestalt-principles-of-design-proximity)
7. (Aurora Harley, https://www.nngroup.com/articles/gestalt-proximity/)
8. (Interaction Design Foundation – IxDF. https://www.interaction-design.org/literature/article/the-law-of-similarity-gestalt-principles-1)
9. (https://www.nngroup.com/articles/gestalt-similarity/)
10. (Interaction Design Foundation – IxDF. https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2)
11. (wiki:https://en.wikipedia.org/wiki/Gestalt_psychology)
12. (http://www.scholarpedia.org/article/Gestalt_principles)
13. (https://app.uxcel.com/lessons/law-of-common-region-899)
14. (Hamlyn, D.W. (1957). The Psychology of Perception: A Philosophical Examination of Gestalt Theory and Derivative Theories of Perception (1st ed.). Routledge. https://doi.org/10.4324/9781315473291)
15. (https://www.clevelandconsultinggroup.com/articles/emergence-gestalt-approach-to-change.php) 
16. (https://gizmodo.com/why-your-brain-thinks-these-dots-are-a-dog-506703504)
17. (https://www.nngroup.com/articles/principle-closure/)
18. (Steven Bradley, web designer, https://www.usertesting.com/resources/topics/gestalt-principles
19. (https://www.verywellmind.com/what-is-figure-ground-perception-2795195)
20. (https://www.peppersquare.com/blog/the-principles-and-laws-of-ux-design-why-every-designer-should-know-them/)
21. (Hellweger, Stefan, and Xiaofeng Wang. “What is user experience really: towards a UX conceptual framework.” arXiv preprint arXiv:1503.01850 (2015))
22. (Følstad, A.; Rolfsen, R.K. Measuring the effect of User Experience design changes in e-commerce websites: A case on customer guidance. In User Experience—Towards a Unified View, Proceedings of the 2nd COST294-MAUSE International Open Workshop, Oslo, Norway, 14 October 2006; ACM: Oslo, Norway, 2016; pp. 10–15.)