The Law of Proximity: Designing for Organization and Hierarchy

A tale of segmenting your designs by the nature of purpose

Incharaprasad
Kubo
7 min readMay 5, 2023

--

Law of proximity
Law of proximity

Introduction

Imagine you’re planning a dinner party at your home. You want your guests to have a great time and easily find everything they need throughout the evening. To achieve this, you organize your dining table by grouping related items together: silverware, plates, and napkins are all placed in close proximity to one another. This arrangement makes it simple for your guests to navigate the table and enjoy their meal without confusion.

Law of Proximity
Law of Proximity

Similarly, the Law of Proximity in design helps create an organized and intuitive experience for users. This article aims to help you understand the Law of Proximity, its significance in User Experience (UX), practical examples, and the difficulties and limitations you may encounter. So, let’s dive into this essential design principle and see how it can improve your work.

We are looking at day 3 of “30 days of UX law and principles”, if you missed to catch our previous chapter on Fitts’s law and Science of interactive design, do check it out before moving on.

Today we will see :

  1. Breaking down the Law of Proximity.
  2. Law of Proximity and UX
  3. Here are some examples
  4. Difficulties and Liabilities

Breaking down the Law of Proximity:

The Law of Proximity is one of the Gestalt principles, which were first introduced by German psychologists Max Wertheimer, Wolfgang Köhler, and Kurt Koffka in the early 20th century. The Gestalt principles focus on how humans perceive and organize visual information. The Law of Proximity states that objects that are close to one another are perceived as being related or grouped together.

Law of proximity explained in an illustration
Source : Visme

This principle was tested through various experiments, including one in which participants were shown a group of dots arranged in different patterns. The results showed that people tended to perceive the dots as grouped together when they were close to each other. This simple yet powerful observation laid the foundation for the Law of Proximity in design.

Law of Proximity and UX

You go to an online bookstore for the first time, and you’re looking for a certain type of book. The website’s designers used the Law of Proximity and hierarchy to create a layout that is easy to understand and looks good. They put books of the same genre close to each other and used a clear hierarchy to show the difference between the main genres and their subcategories. This set-up makes it easy to find the genre you’re interested in, which makes the search process faster and more fun.

In UX design, the Law of Proximity and hierarchy are important tools that help improve the user experience as a whole. By putting related elements together and setting up a clear hierarchy, designers can make it easier for users to move through the interface and reach their goals with less trouble. In our bookstore example, the combination of closeness and hierarchy makes it easy to find the genre you want and explore subgenres and related topics.

Bookoe’s design following law of proximity

Also, proximity and hierarchy can be used for more than just putting books into categories. The website also puts important things close to each other, like the search bar, shopping cart, and user account options. This makes it easier to move around and do things on the site. This well-thought-out use of the Law of Proximity and hierarchy makes browsing the online bookstore easier and makes it more likely that you will come back to make more purchases.

Here are some examples

Slack: Slack’s chat platform with it’s clean and uncluttered interface uses law of proximity and hierarchy. The most frequently used features, such as the search bar and the list of channels, are prominently displayed at the top of the screen, while less frequently used features are arranged in logical groupings underneath.

Slack’s uncluttered interface
Slack’s uncluttered interface

Asana: The primary navigation items in Asana are displayed at the top of the screen, while the secondary navigation items are arranged in logical groupings underneath. The most frequently used features, such as creating a new task or adding a comment, are prominently displayed on the screen.

Asana’s dashboard

Trello: Trello’s project management platform uses the law of proximity and hierarchy to create a visual interface that is easy to use. The most important information, such as the name of the board and the lists of cards, is displayed prominently on the screen, while less important information, such as the settings and the team members, are arranged in logical groupings underneath.

Trello’s application of law of proximity
Trello’s application of law of proximity

Difficulties and Limitations

While the Law of Proximity is an invaluable tool in design, it does come with its own set of challenges and limitations. Here are a few:

1. Overcrowding

One of the pitfalls of using the Law of Proximity is the risk of overcrowding. When too many elements are grouped closely together, it can make the design look cluttered and overwhelming. Designers must find a balance between proximity and white space to create a visually appealing and organized layout.

2. Conflicting Principles

Designers often have to work with multiple design principles simultaneously. Sometimes, these principles can conflict with the Law of Proximity. For example, the Law of Similarity (another Gestalt principle) suggests that objects with similar characteristics are perceived as related. This can lead to confusion if the Law of Proximity is not applied carefully, as users might associate unrelated elements based on their visual similarity. Designers must strike a balance between these principles to ensure clarity and organization.

Source : Toptal

3. Screen Size and Device Limitations

In today’s digital world, designers have to consider various screen sizes and devices when designing user interfaces. Applying the Law of Proximity across different screen sizes can be challenging, as what works well on a large desktop screen may not translate well to a smaller mobile screen. Designers need to be mindful of these limitations and create responsive designs that adapt to different devices and screen sizes.

4. Cultural Differences

Designers must also be aware of cultural differences when applying the Law of Proximity. What might be an intuitive grouping or organization of elements in one culture may not be as effective or clear in another. It is essential to consider the target audience and their cultural context when designing user interfaces to ensure a smooth and enjoyable user experience.

Check out day 2 : Fitts’s law and science of interactive design

Conclusion

The Law of Proximity is an indispensable tool for designers looking to create effective and engaging user experiences. By understanding its history, significance in UX design, and the challenges that come with it, designers can better harness its power to improve their work. Keep the Law of Proximity in mind as you embark on your next design project, and you’ll be well on your way to creating a more organized, user-friendly, and successful design.

ANNOUNCEMENT 🔥

A glimpse into our AI tool!

We’re working on our very own AI tool that lets you create fully editable screens just from text prompts!

Check it out here and don’t forget to join the wait-list!

--

--

Incharaprasad
Kubo

As a writer, I strive to uncover the latest trends and provide fresh perspectives on design, critical thinking, and their impact on the business world.