Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / desktop / WTL

Design and the Gestalt Principle of Proximity

4.00/5 (1 vote)
30 Aug 2012CPOL2 min read 9.8K  
The Gestalt Principles are based on the observation that people actively and subconsciously organize things into patterns and objects.  These principles are organized into Proximity, Similarity, Closure, Good Continuation, Common Fate, and Good Form.  They can be applied to all avenues of life.

The Gestalt Principles are based on the observation that people actively and subconsciously organize things into patterns and objects.  These principles are organized into Proximity, Similarity, Closure, Good Continuation, Common Fate, and Good Form.  They can be applied to all avenues of life.  Websites and applications that implement these principles see immediate improvement.  Although technology benefits from these principles they are not unique to computing.  They can be exploited in other areas such wedding invitations, furniture layout, gardening, scrapbooking, etc.  The following sections outline the principle of proximity and how it affects the human mind.

The principle of proximity states "all else being equal, perception tends to group stimuli that are close together as part of the same object, and stimuli that are far apart as two separate objects."  To simplify the previous statement, items close together are perceived as a single group, while items farther apart are considered separate.  Look at the examples below.  The squares in Figure A are perceived as a single group.  The squares in Figure B are perceived as two groups.
Figure A
Figure B

The previous examples provide excellent insight for design.  Novice designers have a tendency to group items by creating boundaries with borders and boxes.  Although those design techniques can be a great tool, they can be overused.  Grouping elements can be acheived through seperation alone.  In some instances proximity is more powerful than the "similarity" principle.  Figure C below has green and black boxes.  The items are still grouped into two areas, not by color.  Figure D below is an example of cascading proximity.  The squares are considered one group but the border around the left squares defines a group within the group.  Figure E below demonstrates how grouped elements can create a new visual element or "unified whole".
Figure C
Figure D
Figure E

Final Thoughts
Although proximity can be a designer's best friend, it must work in harmony with usability when completing interactive design.  Harmony is the key word from the previous sentence.  Usability does not need to trump design.  Proper design should not require trade-offs.  Design is a continous process of evaluation.  Apple has a reputation for great design, but even they find areas of improvement.  The pictures below show the previous, play and next buttons in the "Music" app on iOS 5 vs iOS 6.  Although proximity made the buttons easier to find in iOS 5, they decreased usability.  Many people found themselves hitting the previous or next button when they intended to pause the music.  In iOS 6, the buttons are spread further apart and separated with partial borders.  It is a very minor adjustment to design that benefits usability.

iOS 5
iOS 6

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)