Design Principles: Proximity

I love my Subaru. I've driven it with no issues for about seven years. (BRB - going to knock on wood.) Despite my love, there are two design flaws that have driven me nuts throughout the duration of those seven years. (Disclaimer: I drive a 2004 Subaru. These features may have been updated on newer models.)

1. The distance between the side-view mirror controls and the mirrors
   To adjust my side-view mirrors, I have to flip a switch that is located beside my right thigh in the center console. Wouldn't a better option have been to place the mirror control to the left of the steering wheel or on the door itself like most cars?


2. The distance between the on/off switch for cruise control and the lever that adjusts the cruise control when it's activated
   In order to turn cruise control on, I have to press a button that is located above my left knee below the steering wheel. To adjust the cruise control, I use a lever located behind the steering wheel on the right. Couldn't the on/off switch for cruise control be in the same place as the adjustment lever?

These are two real-world examples that illustrate a lack of proximity between objects that are related.

Proximity Defined

Proximity, as defined by the "Universal Principles of Design," states that elements that are close together are perceived to be more related than elements that are further apart. Proximity in web design is most commonly achieved by grouping information. By organizing elements on a page into clear groups, it is apparent to site visitors that those elements are somehow related. Conversely, elements that are far apart or not clearly grouped convey that they are not related.

Implementing Proximity

Proximity is a key design principle that should be used throughout your designs to ensure an optimal user experience. There are a number of ways proximity can be implemented in your designs. Most of them rely on other design principles.

1. Use white space to provide visual separation between unrelated elements. Not only does this communicate a difference between elements, but it enhances the experience of scanning the page in order to quickly understand all the groups of information.


2. Group actions with the items those actions are being performed on. If you're creating forms that require action buttons to complete a task, make sure those buttons are clearly grouped with the fields that have just been filled out. If the buttons are too far or not clearly related, site visitors may get confused or frustrated and fail to complete the task.


3. Group related items. Regardless of the type of content, if you need to convey to visitors that the items are related, group them together. For example, if you want to briefly describe an image, use a caption directly below the image rather than referring to the image in copy somewhere else on the page.


4. Use design elements to create a clear visual hierarchy. Design treatments such as horizontal/vertical rules, larger typography for headings/subheadings, gradients, and iconography can provide visual cues that reinforce the idea that certain elements have been intentionally separated and, therefore, are to be perceived differently.

Proximity in Practice

On the United States Institute for Peace site, a subset of the global navigation uses short descriptions to indicate what a site visitor might find upon clicking. Note that each description is placed in close proximity (directly below) the link, indicating that the description belongs to the link. Further, each link/description set is clearly grouped and positioned so you can see that there are 3 options.

CNN is using a number of design elements to implement proximity amongst various news sections on their site. The boxes around each section separate each set of links into clear groups. Within each box, there is a clear visual hierarchy, created by typography treatments and horizontal rules, that encourages easy scanning and identification of links.

This news list from Charterschoolcenter.org is a good example of using both white space and design elements (horizontal rules, typography differentiation) to communicate clear proximity between posts. The typography of the title and the horizontal rule create a clear differentiation between each item.

Summary

As with the controls in my Subaru, a lack of proximity can create a frustrating and confusing experience. When you're creating your page layouts, be certain to implement the principle of proximity where it's relevant in order to ensure that your users have an easy and enjoyable time browsing your site.