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

UX Laws in Practice

Dec 18, 2024

·

2 min read

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!

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

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.

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.

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.

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.

Conclusion

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!

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

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.

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.

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.

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.

Conclusion

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!

If you aren't following us on Instagram already, you're seriously missing out! Become a part of our ever-growing community and learn something new from the field of product design every. single. day.

Happy designing! 🥳

andrija & supercharge design team

If you aren't following us on Instagram already, you're seriously missing out! Become a part of our ever-growing community and learn something new from the field of product design every. single. day.

Happy designing! 🥳

andrija & supercharge design team

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.