Principle of proximity
The principle of proximity is based on the cognitive tendency to perceive the objects close to each other as related, especially in comparison with those which are placed farther. Having the urge to organize the variety of data and objects around, people often group them this way automatically, much quicker than they start real thinking about it. So for designers, this is another good prompt how to organize the interface along natural ways the brain absorbs and classifies data. The important thing to keep in mind is that by research and experiments, proximity proved itself more powerful than other distinctive features such as color or shape. People tend to see elements as related if they are close to each other in comparison to other objects even if other features differ.
In user interfaces, which are full of different content, the principle of proximity helps a designer organize the layout, to make it scannable and easily-perceived for users. It's no secret that users aren't ready to spend much time learning how the complex interface works so intuitive screens, which can be quickly scanned, has much more chances to keep the users and give them the best features of the website or app. In general, we define two directions of applying proximity principle in user interfaces, for typography elements and copy content and for blocks of different content and controls.
One of the places where proximity plays a crucial role is the organization of text in user interfaces. The ability for the user to quickly scan the text blocks in the layout is vital because readers don't usually stay on the pages which look like a long string of text. First, most users scan the page and check the hooks like headings, subheadings, highlights, and keywords, and only then read more if they got interested. That is the reason why text should be arranged according to the laws of both quick perception and aesthetic looks.
White space, also known as negative space, plays a role in this process. It allows a designer to activate the power of nothing. The space without any content not only adds the air to general layout but can be also used to organize its elements as groups and unities where it's needed. For text, it can be used in different ways. With white space, a designer can harmonically separate the paragraphs in a big bulk of text to make it more digestible and pleasant for readers. This approach is often applied in blog articles and big copy blocks on websites. The principle of proximity signals that the texts that are closer to each other present the unified idea or piece of information and in this way makes all the text structured.
The principle of proximity works on several levels. First, it unites the lines of text block to be decoded as one piece of information. Secondly, every text block is placed close to the image it describes so even quick scanning lets the viewer understand that they belong to each other and present the single piece of content in the overall layout. The call to-action element also works according to the principle of proximity being placed a bit farther than the body copy content but close enough to show that it is included in this particular content block. We can see that the designer used proximity both inside and outside every particular block of content making them harmonically arranged while the general layout structured. Pieces of text are beautifully composed around the theme illustration and are scannable immediately.
One more area where proximity can have a positive impact on user experience is organization of diverse content blocks in the layout. These can be images, links, icons, controls, and many other stuff. The principle of proximity allows designers to arrange these blocks in a way which most naturally corresponds to natural human abilities of visual perception. Links to the core interaction zones of the websites in the header should be quickly perceived as one unified group so place them close enough to each other and far from other content. The same works for the extended menu hidden behind a hamburger button. The links should be organized in groups which are visually defined due to their close placement.
One more area where proximity can have an impact on user experience is organization of diverse content blocks in the layout. These can be images, links, icons, controls, and other stuff. The principle of proximity allows designers to arrange these blocks in a way which most naturally corresponds to natural human abilities of visual perception. Proximity of the elements should enable users to quickly define core content zones. For example, the set of links in the header, the list of the latest publications on the left, the field of the preview for the fresh article and the block of social network links in the footer. Moreover, inside the global block the principle of proximity should continue to separate or unify the elements according to it. Designers should arrange the positions in the list of latest publications around different topics as well as separating the links to the web pages in the header from the controls of instant action such as search or subscription. This approach not only makes the layout elegant and scannable but also strengthens intuitive navigation for better usability.
It is obvious that knowing the simple, yet effective principle of proximity can save a lot effort for users and support user-friendly interfaces with controls that work according to human cognitive abilities and psychological patterns. The principle of proximity can make the UI design more intuitive to the user by having the user subconsciously scanning the elements in the UI.