In web design, the included elements should tell a fluid story. But what is the perfect formula to concoct the ideal design? Certain theories of design and organization, which are called Gestalt Theory, can provide designers with a set of guidelines that are guaranteed to improve the user’s experience on any given website.
What does Gestalt Mean?
Gestalt is a German word that means “shape” or “form”, and it is used in psychological research that studies how people perceive and organize data. Gestalt principles have been developed from this research, and they outline five ways that people interpret information, and how to make the most of these psychological predispositions. The five principles are:
- Figure and Ground
In this post, we will explore the principles of similarity and proximity and learn how to apply these ideas to web design.
Principle of Similarity
The principle of similarity states that visual objects that share characteristics are perceived as being part of a group. Some examples of these characteristics are shape, color, and size.
Objects that are a similar shape tend to be grouped together. For instance, the image from the website Simply Chocolate makes it clear to the user that the chocolate bars all belong to the same category and are similarly priced, because in each picture, the chocolate is arranged in the same way, and appears to be the same size. But the different style of picture for the “Bar Kit with 7 Chocolate Bars” immediately communicates a change in category to the user.
Using color to match visuals or distinguish between them effectively organizes information for the user. Color schemes can create visual hierarchy and guide the user’s path of navigation. The image below demonstrates this because the calendar dates are organized by color, and the current date is emphasized with a brighter color from the overall scheme.
Grouping visual elements by similar size is another way to achieve similarity. Size similarities and differences help highlight certain information and helps the user to find the content they are looking for. Many websites use font sizes to differentiate between categories and subcategories within their site menus.
Principle of Proximity
The principle of proximity states that viewers group content according to its relative closeness. In other words, objects located near each other are interpreted as being part of a group. White space, or negative space, plays a large role in this idea. Negative space can be defined as the absence of content, such as a blank background color.
For example, in this image, negative space creates separation between the two groups of circles. If the negative space was removed and all of the circles were equally distanced, the image would appear to be a single group of orange circles.
Proximity is a valuable tool when choosing the layout of text, as well as blocks of website copy, because the addition of a little negative space can instantly separate and organize information. Then the user is able to easily scan for keywords.
In this screenshot of Airbnb’s website, the separation between each city name creates a digestible list of text, even though it is quite extensive.
Another example of the use of proximity and negative space is the layout of this online magazine: the site does not utilize any borders, yet the content is clearly categorized because of the space between the main article, the “Latest” links on the side, and the social media icons at the bottom. Thus, the negative space communicates to the user where they can find groups of similar content. Furthermore, the detailed organization and separation encourages intuitive navigation and decreases user frustration.
The Gestalt principles of similarity and proximity are straightforward methods to improve your website’s usability. Negative space is also a valuable tool that can simplify sites and prevent information overload. Crowded, text-heavy sites are overwhelming, and adding some white space between areas of content can give your website a clean, easy-to-skim layout. Remember, everyone always wants to grab and go!
Yalanska, M. (n.d.). Gestalt Theory for Efficient UX: Principle of Similarity. Tubik Blog. Retrieved from https://blog.tubikstudio.com/gestalt-theory-for-efficient-ux-principle-of-similarity/
Yalanska, M. (n.d.). Gestalt Theory for UX Design: Principle of Proximity. Tubik Blog. Retrieved from https://blog.tubikstudio.com/gestalt-theory-for-ux-design-principle-of-proximity/
Ambreen, A. (2019, April 1). How To Use Spaces In Web Design With Gestalt Principles. Smashing Magazine. Retrieved from https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/