UX Design

UX Laws in Practice

Understanding UX laws is essential for creating designs that are intuitive and user-friendly. These principles are based on how users naturally perceive and interact with elements on a screen. In this article, we’ll explore four key UX laws and how to use them effectively in your designs. Let’s dive in!

3D illustration of a colorful cube resembling a simplified Rubik's Cube, symbolizing complexity and problem-solving, set against a gradient blue and purple background.

Law of Proximity

The first one on the list of UX laws is the law of proximity. Our minds perceive objects placed close to each other as a group. To signify the elements’ relation, you need to place them close to each other. The example below shows the elements related by genre.

Mobile screen displaying a music app interface with curated sections like 'Rap' and 'New Music Now,' organized by genre, with a note indicating 'Related by genre.'

Example for the law of proximity

Law of Similarity

Visually similar elements will be perceived as related, even if separated. To apply this law, use color, shape, size, or orientation to emphasize the elements that share similar meanings or functionality. The example below shows how the same color means the same price.

Mobile screen displaying an airplane seat selection interface, with seats color-coded by price tiers. A note reads 'Same color means same price,' showcasing pricing consistency through visual grouping.

Example for the law of similarity

Law of Unified Connectedness

Next on the list of UX laws is the law of unified connectedness. It states that elements connected visually are perceived as a group and are interpreted as being more related.

Mobile screen showing a schedule with milestones connected by a vertical line and dots, representing a timeline. A note reads 'Dots connected by a line represent a timeline,' emphasizing a visual representation of chronological events.

Example for the law of unified connectedness

Law of Common Area

The law of common area states that elements in an enclosed visual shape are perceived as a group. Even something as simple as circling works! Visual cues you can use are adding a border, using a card, differently coloring a background, or adding a lot of whitespace.

Mobile screen displaying a pricing comparison between a 'Free' and 'Plus' plan, with a shared area visually highlighting common features such as 'Learning content' and 'Unlimited Hearts.' A note says 'Common area represents the same pricing plan,' emphasizing clarity in feature comparison.

Example for the law of common area

Let’s Recap

Four ways to reinforce groups in UX design are:

Place elements close to each other
Make elements look similar
Connect elements via lines, colors, frames, or other shapes
Place elements in an enclosed area

Illustration of four design principles for grouping elements: (1) 'Place elements close to each other' with clustered circles, (2) 'Make elements look similar' with uniform shapes and colors, (3) 'Connect elements via lines, colors, frames, or other shapes' showing linked elements, and (4) 'Place elements in an enclosed area' with items boxed within a boundary.

Four ways to reinforce groups in UX design

Mastering these four UX laws can significantly enhance your design’s usability and clarity. By grouping elements with proximity, similarity, connectedness, or common areas, you can create interfaces that are visually organized and easy to navigate. Start applying these principles to make your designs more intuitive and engaging!

For other valuable educational resources, explore our Learn section. Here, we offer heaps of courses, workbooks, and other resources that will help you improve your skills in UX/UI.
Happy designing! 🤗