Click here to Skip to main content
11,487,793 members (73,904 online)
Click here to Skip to main content

Design and the Gestalt Principle of Similarity

, 29 Aug 2012 CPOL 6K 3
Rate this:
Please Sign up or sign in to vote.
The Gestalt Principles are based on the observation that people actively and subconsciously organize things into patterns and objects.

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 similarity and how it affects the human mind.

The principle of similarity states "all else being equal, perception lends itself to seeing stimuli that physically resemble each other as part of the same object, and stimuli that are different as part of a different object." To simplify the previous statement, objects that share visual characterstics such as size, shape, texture, color, and orientation are perceived as a group or belonging together. From a quick view, the objects in Figure A are logically grouped by size, shape, and orientation. Figure B alters those groups through the emphasis of color, then shape.

Figure A
Figure B

Color can be utilized to change groupings or simply enhance existing groups. Figure C contains the same groupings as Figure A but each is further enhanced by color. This addition further clarifies the groups and limits uncertainty. Figure D illustrates the power of individual visual characteristics. Because color crosses the boundaries of shape, size, and orientation, it supplants them as the priority grouping characteristic.

Figure C
Figure D
Similarity can build unity between multiple objects. For instance, Figure E displays an equal set of squares which visually creates one larger square. Additionally the red border squares use texture and color to construct a visual triangle within the larger square. An object can also utilize similarity by emphasizing itself by being distinctly dissimilar. Figure F demonstrates enhanced emphasis on the middle circle due to its vibrant, contrasting color. The connective tissue of similarity can be overridden by other Gestalt Principles. For instance, proximity can supercede similarity by dividing items into different areas. Click here to review the principle of proximity.

Figure E
Figure F

Final Thoughts
Similarity is a core function of the human brain. Its basic guidelines help people separate and distinguish life. Although color was emphasized in the previous examples, any other characteristic of similarity can achieve comparable results. User experience and user interface design must work in harmony for each to flourish. Users require visual clues to guide their overall experience. Those clues are built using the characteristics of similarity to create distinct features and sections of an application or website. Without these groupings users are forced to scan the screen, which diminishes their faith in a product.

License

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

Share

About the Author

Zac Gery

United States United States
Software Developer, Mentor, Architect and UX/UI craftsman. Also, a psychology nut that loves curling.
Follow on   Twitter   Google+

Comments and Discussions

 
GeneralMy vote of 5 Pin
Christian Amado29-Aug-12 11:51
memberChristian Amado29-Aug-12 11:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150520.1 | Last Updated 29 Aug 2012
Article Copyright 2012 by Zac Gery
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid