Proximity

Definition:

When faced with random objects on a page, the viewer will often try to find connections. Designers can aid viewers by arranging objects (text and/or images) into groups in order to convey meaning and help disseminate their message. This closeness of these groups is proximity, a principle of design.

Proximity creates a bond between page elements. How close together objects are placed can suggest a relationship. Objects placed further apart can suggest differences.

Although sometimes considered a separate principle, unity or "how well parts of the document work together" is sometimes used to mean proximity. Proximity is closeness. However, elements lacking close proximity can be unified by introducing a third element. An example: an arrow connecting a text label in the margin with a point in the middle of a map. In this way a relationship or unity can be achieved between elements that are far apart but belong together.

Grouping objects can be done with obvious spacing, by placing physical barriers between groups (such as rules), and even by the use of shape, color, or texture to visually group like items and visually separate unlike items.

Avoid overwhelming the viewer when there are a lot of individual elements on the page by using proximity to group items into discrete units. Keeping captions close to images not only makes it clear that the caption goes with the image, it creates a single visual unit from two separate ones. Grouping elements such as address, phone number, email address, and Web address not only puts all the contact information into one easy-to-spot unit it creates a single spot for the eye to rest (and get information) rather than four spots to jump around to and possibly overlook. If there are many elements to be grouped, consider sub-grouping. Using the contact information as an example, group them together but use spacing (or other means) to create a sub-group of, for instance, multiple phone numbers.

Use proximity to group elements in a way that aids in navigation. Keep the headline close to the body copy (of an ad, a newsletter article, etc.) if you want to lead the reader right into the text. If an accompanying visual is especially important to understanding the text, instead you might put the visual immediately after the headline. The 5 Step Ad Design Formula based on the work of David Ogilvy typically arranges five types of content in a specific pattern that tends to lead the viewer through the ad. Proximity can also be used to group material that makes up those five types of content.

Help the viewer understand complex pages or information-packed layouts by using proximity to bring together elements that go together and separate other parts. For example, a brochure for a seminar that consists of many separate workshops spread over multiple days and locations can easily overwhelm. Use proximity (along with other elements and principles of design) to keep information for each individual workshop (title, description, date/time, location) grouped together while also providing a grouping that gives overall details such as how to register, cost, and contact information. On a Web page you might use proximity to group the main and auxiliary navigational links (whether text, tabs, or buttons) into groups according to their function (such as shopping/catalog, weekly specials, and technical support). Proximity articles from around the Web. Unity (another name for proximity) in Web Design (from About.com Web Design) Law of Proximity as one of the Gestalt Laws of Perceptual Organization (from About.com Psychology).

View the original article here