UX Design: The Law of Proximity

The second part of our UX Design Principles series is about the Law of Proximity . This law is based on our innate predisposition to perceive patterns based on certain rules.

‍

When elements are close together, the human eye automatically perceives them as belonging together. This is how the law of proximity can be used to create structures and fields. On websites, user interface (UI) elements that belong together should be as close to each other as possible.

The law of proximity is one of the most important grouping principles in UX design and can overwhelm other principles such as the law of similarity of color or shape. In web design practice, related elements should always be placed close to each other and not separated from each other. The illustration below illustrates the grouping of individual elements by proximity.

Using different amounts of whitespace also helps to combine or separate elements. This is key to facilitating meaningful groups. In the image below in the header area of the Notion website, we can see that the navigation bar on the left side and the login and call-to-actions (CTAs) on the right side are at the same height. We still perceive the main navigation on the left side separately from the login and the CTAs on the right. The extra white space indicates that the groups are not related and therefore have different functions. This white space is crucial to making the CTA and login stand out from the rest of the main navigation.

The use of this UX principle can also be seen in the presentation of simple paragraphs. Headings and text content are grouped into paragraphs that are separated by white space at the top and bottom. The text of the corresponding section is usually placed close to the heading. In the example above we can see directly how the statement “One workspace. Every team.” related to the subtitle. Only then do you notice the call-to-action (CTA) in the form of the button.

When the placement of related elements in web pages is done correctly, it can help website visitors find their way around the website more quickly and navigate to the relevant pages. This increases user-friendliness because the user can quickly and intuitively find out the functions of individual groups.

If you would like to learn more about visual perception and its application in UX design, stay tuned for the next part of our UX design series, which will cover the law of conciseness.

‍