Intro to UI Wireframing > 4. Design Principles > 4.3. Proximity

4.3. Proximity


The Proximity principle is about creating relationship between items by putting them near each other.

The reverse is also true. Objects that are seen as distant from each other are understood to be unrelated.

We know how we perceive relatedness from human psychology. This is called the Gestalt principal of grouping. We can use this to our advantage in interface design.


When to Use Proximity

When you want to use similarity to help the user, Proximity can be helpful. Grouping items that are similar in function, for instance can help them find related actions.

This example from an application creates groups of buttons in a toolbar. This is a wireframe of the Keynote toolbar. The first grouping is for document-level actions like view, zoom, and adding new slides, the second grouping is for presentation functions, the third is for inserting content, etc. Grouping them this way helps the user to recall buttons that are similar in function with repeated use.

When we want sections of content to be clear we can move them apart to show that they're unrelated.

In the website wireframe below, notice how there is some important information at the top, including some buttons for a important actions this site wants users to take. Then there is some more important, but denser information at the bottom of the screen. But then notice the smaller text in the middle separated using border lines. This is clearly serving a less crucial function, so the site decided to separate it from the other bits.

Proximity is useful in this case because it gives the user some help. In some cases, as in the testimonial block of the wireframe above, it might help for to make something visible at a glance, but then guide them towards the more substantial chunks of info.


How to Use Proximity

We've seen in the examples above how the use of proximity can help organize the information in your interface.

To use Proximity effectively, make sure you're using enough white space between groups. Let's bring back a more fleshed out version of our Customer Information form.

With the Opt-in checkbox, the submit button and the help tip, the form is more densely loaded with information.

The contrast we added to headings by making them larger or bold worked to help separate the parts of the form. But it's still a lot to get through.

Forms can be pretty tedious to fill out, so we can do a lot better to make it easier on our users.

Here's where Proximity can really help. We can the groups of related form fields close together and add white space to separate the unrelated groups.

This is much easier to take in, visually and the user has a clear indication of when they're done filling out a group of fields, so they can pause and work on the next.

With time you'll be seeing how the proximity principle is used everywhere.

When you're wondering when the proximity of objects is enough or too little, try the squint test. Move back from the screen and blur your vision by squinting.

If you can detect that the clusters of information are separate while doing this, you'll know that proximity is working. If the space between seems too little to make the groups recognizable, try adding more space between groups.


Mike AngelesBy Mike Angeles
Got questions or feedback? Email mike@balsamiq.com.