How can we know whether certain elements visible to us are part of a larger group or not? When we encounter any complex element, we tend to recognize the whole before we see any individual part. An object that is closely located to one another will often be seen as a single unit.
As a UX designer, the knowledge of proximity perception and cognitive abilities can be helpful when designing a user-friendly and intuitive product. We created this article to help you understand the concept of proximity perception and how you can apply it effectively in your design.
As we continue to explore how people visually perceive the world, we need to understand the place of proximity and its principle in the world of user experience. From our earlier article on Gestalt principles, which was defined as a set of rules that explains how people interpret the world around them, proximity perception is an essential part of these principles and therefore, modern user interface and experience design relies heavily on this principle.
Let us start by defining the principle of proximity so that we can understand how it can help us design a good user experience in our products.
What is proximity in UX Design
Proximity can be defined as the practice of organizing a variety of related design elements close to each other, as well as separating unrelated design elements away from each other. This means that proximity is the same thing as closeness, and thus our brain differentiates between objects that are either close together or are seen as farther apart.
As a UX designer, a good grasp of this theory would mean designing products along the natural ways that our brain absorbs, retains, and interprets data. The image below shows how the elements placed together are likely to be perceived as part of the same group or unit. The elements may all look the same, but are each differentiated by white space and color.
Source: UXtweak
This principle offers a great opportunity when designing interfaces for mobile and web because it helps you as a UX designer to structure and organize the layout of your screens to make it easily readable, scannable, and well-perceived by users.
Surprisingly enough, this is precisely what people need; familiar interfaces, a flat learning curve, and predictable interactions. Your job as a designer is to make sure that users are able to get the job done easily and seamlessly, because this is what they hired your product for. This will help you retain users and give them the best user experience while they use and interact with your product. To help you learn about the impact of proximity in UX design, you can read more about the Principle of Proximity.
Importance of proximity in UX Design
We use proximity to communicate meaningful groupings and visual cues in UX design. Here are some reasons for the importance of proximity in UX design:
1. Proximity helps to create connections among elements
Proximity plays a very important role in the organization of content by creating relationships between visual elements in a composition, thereby establishing relevance, hierarchy, and structure between two or more elements.
2. Proximity helps to dispel connections among elements
Proximity can also be used to communicate that there is no relationship between design elements, and it can also be used to break organization just to show a lack of structure.
Proximity is usually used amongst varying degrees to help achieve a particular result or outcome, as well as to communicate a certain type of message.
How to apply proximity in your design
A good understanding of proximity in design can help a designer differentiate between visual elements in order to give users visual cues, reduce visual clutter, and to make your design stand out as more comprehensible.
White spaces between visual elements should communicate a particular structure on a page, because adding or removing white or negative space can help separate or unite elements. Guided by the goals and objectives, your design should set out to achieve balance when trying to establish elements in a set of hierarchy.
Here are some practical ways to apply proximity in UX design:
1. Form design and placeholder texts
I have experienced poorly-designed forms, and undoubtedly, forms are the least enjoyable parts of user interactions, especially when filling out surveys.
Forms collect information from at least one party and deliver it to another. They typically come in three different dimensions according to Jessica Enders, and they are: words (what you say in the form), layout (how it is presented visually) and flows (how the user moves through the form). Proximity can help you create a better experience for users when applied to: field labels and placeholder texts, input fields, and input format.
By placing labels and placeholder texts near corresponding form fields, you essentially help your user scan through your forms easily. This is especially helpful if the form to be filled in is rather long. Users spend more time filling in forms when there are no helpful descriptive labels to guide them through. By including placeholder texts and labels, it is possible to make a form easy to read with a greater chance of the form being filled in completely.
The image below clearly depicts this:
You can help improve the user perception of your form by grouping related fields together in your input field. Give your users visual cues by letting them know the information that is needed and watch them complete your forms. The image below shows how proximity can help you guide users through your design.
Finally, when using proximity to design input formats, there are several types of dynamics you can employ. You can use chunking to break texts when designing an input field that would need multiple data entries. Example: Use radio buttons if you need users to enter their gender data in your form design.
2. Typography and copy
Proximity plays an important role in the organization of copy content in user interfaces. Users do not usually stay on pages that are text heavy for very long; therefore, scannability of the copy layout is vital.
People tend to scan through pages and check for things like headings, subheadings, highlights, and keywords, and only then read more if they become interested. For this reason, the copy should be arranged according to the principle of both quick perception and aesthetics.
You can also use white space to organize elements as groups as well as unities wherever necessary.
Source: Tubik Blog
3. Better comprehension on content
Content is very important in UX design. Good readability (the ease with which a reader can understand a written text) and legibility (the ease with which a reader can decode symbols) are good principles of ux design. Many factors can contribute to readability and legibility, including font family, font size, and text contrast. You can structure content on a page in a way that would positively impact the content legibility and readability of your product.
You help users scan and read content when you use groupings effectively for sentences and paragraphs.
An example of grouping the website information in a readable way according to the principle of proximity.
4. Create emphasis on certain elements
It is very important to give priority to certain elements or content on a page that you would want to highlight or have them stand out. The principle of proximity can help you create a flow that will guide the viewer’s eye from one point to another. By adjusting white space, you can easily create focal points or areas that naturally attract the user’s attention.
You can create focal points by starting with creating a web design grid that will allow you to place design elements (such as text, images, or functional controls) consistently throughout a layout. After you have a grid, you can decide on arranging elements to guide users through key content sections across the screen.
Make use of white space and color contrast for emphasis to draw the user’s attention towards an element that is either a call to action or a feature update.
This health insurance company uses a grid pattern to create emphasis and guide users’ attention.
Elevate your design with the principle of proximity
The purpose of proximity in design is to organize information and create a visual hierarchy in a way that makes your product more usable. You should leverage proximity to create meaningful groups so that users can easily understand and interact with your design. The easier it is to use your product, the more enjoyable experience your users will have.
To test how user-friendly your product is, register for a free account at UXtweak and test as much as you want!
