It’s no secret that we as human beings are attracted to things that are visually pleasing. Of course, what one person may find “visually pleasing” is entirely dependent on their own personal aesthetics.
Or is it? While each individual has their own personal preferences when it comes to the appearance of a given website, a user’s overall experience with a website is also dependent upon similarity and proximity, two crucial Gestalt principles.
Our ultimate goal as website designers, then, is to seamlessly blend skills of personal creativity with Gestalt Theory.
What is Gestalt Theory?
The word “gestalt” comes from the German word meaning “shape” or “form.” Gestalt theory is used in cognitive psychology as a means of addressing the way in which human beings automatically group similar elements into a larger whole.
“The whole is other than the sum of its parts.”Kurt Koffka
The six principles of Gestalt Theory
The six principles of Gestalt Theory can be summarized as follows:
- Figure and ground: the relationship between the figure (object) and the ground (negative space surrounding the object)
- Proximity: how close or far elements are in relation to one another on a page
- Symmetry and order: the idea that objects or elements with mirrored halves create a sense of harmony/attraction
- Similarity: the relationship of objects with similar attributes (size, color, texture, etc.)
- Closure: the idea that our brains automatically fill the gaps of incomplete objects
- Continuity: establishes a linear pattern by leading the eye along a consistent pathway
In order to increase positive user experience (UX) and decrease potential misunderstandings, it is important to strive to apply all of these principles. While each principle is important in its own right, we will be focusing primarily on similarity and proximity.
There are several ways with which you can create similar groupings. Tubik Blog describes three major types of similarity groupings that you can use to help your website users make key connections and quickly recognize organizational methods: color, size, and shape.
Color groupings help users to recognize like items. Figure 1 demonstrates multiple uses of color in order to promote similarity.
Here, we can see that the days of the week are presented in a mint blue color, while the days themselves are white. This helps to create distinction between the two groupings.
A user can also recognize what day they are currently interfacing with by the pink circle surrounding the date. The circle highlights the user’s current selection.
The use of color also allows users to recognize paths of navigation–elements that are colored a certain way will help users to recognize their interactivity.
Finally, you can use color to help users recognize and remember content grouping. This is especially useful for websites that have a lot of content, such as an ecommerce site or a blog. This could mean that different categories of a website could be represented by a specific color, such as Figure 2 below.
The specific size of website elements helps to demonstrate a visual hierarchy, a concept that I will explore further later on in this post.
There are several key elements to keep in mind when using size to establish similarities:
- Larger content will be seen as more important (this blog is using size to create similarity right now–was the large title first thing that you noticed when you started reading my blog?)
- Size allows users to arrange content faster than they can actually read the content. You might have recognized that the Color, Size, and Shape headings were related elements because of their similar heading level grouping.
- Size and color can be used in tandem to establish similarities. In Figure 3, the large, blue button divides into three smaller blue buttons that we perceive to be related.
You can also use shape to establish similarity. This can be seen in Figure 3, in which the three types of content additions are represented by circular buttons. We as users recognize that these elements are related.
Similarities in shape establish consistency. However, this can only be achieved if shape patterns are maintained throughout the entire website or application.
While similarly grouped objects affect how users may potentially group them together, perhaps even more influential in our visual perception is proximity.
Figure 4 demonstrates how, despite the differently colored dots, our brains still perceive the dots to be separated into two groups divided by space.
Because users do not spend a lot of time on a website, it is crucial that the organization of the website allows for brief scanning. Proximity increases a user’s ability to quickly scan a webpage for relevant content.
So how can proximity be used to create a well-organized and scannable website? Tubik Blog has a few key suggestions.
Typography and Copy
Because users often scan a website’s content before actually reading, large and blocky paragraphs or a lack of headings/subheadings can deter users from a website.
This is where the power of negative space comes in. Blank space provides separation between headings/paragraphs and a place for users to breathe.
In addition, should a block of text accompany an image, for example, it is most beneficial to place that block of text near the image, grouping the image and the text into a perceived whole for the user.
Content blocks can be made up of almost anything: images, links, icons, you name it. These blocks can be placed near enough to each other to be perceived as a unified idea, but distanced enough from one another that they are recognized as being separate attributes.
The overall arrangement of these blocks of content allow users to assign different content zones. For example, a website’s homepage might have social media links in a bottom corner or publication lists along the side, if it is a publication website. These sections are all seen as different “zones” of the webpage.
Spaces in web design: tying it all together
Space in website design is directly related to proximity–how near or far elements are to one another will affect our perception of them. Both positive and negative space are equally important in our perception of proximity.
Positive space is the meat or flesh of the website. It’s what we see. Negative space is the empty space surrounding what we see. Together, positive and negative space create harmony–too much positive space makes a website feel cluttered, while too much negative space makes a website feel empty.
“In web design, the spaces interact with each other to maintain the idea of holistic composition.”Ayesha Ambreen, Smashing Magazine
While negative space may seem, for lack of a better word, negative, there are several positive attributes of utilizing negative space within a website:
- Sets a user’s focus and reduces distraction
- Establishes scale
- Makes a page easier to scan
- Creates a natural flow
- De-clutters a page
- Enhances the style of a page
- Creates visual hierarchy
So what is Visual Hierarchy?
All of the concepts that I have discussed thus far work in tandem to create a visual hierarchy for the user. Essentially, visual hierarchy is “the principle of arranging elements to show their order of importance.” This allows you to guide your users to desired actions and control the delivery of their website experience.
The following characteristics can be manipulated using principles of similarity and proximity to demonstrate the different levels of importance of content:
- Size (similarity): bigger elements are noticed faster
- Color (similarity): bright colors attract the eye versus dull, muted colors
- Contrast (similarity): color contrast catches the eye
- Alignment (proximity): an element put out of alignment catches the eye
- Repetition (similarity/proximity): repetition of a style implies relationships
- Proximity: closely placed elements imply relationships
- Whitespace (proximity): isolated elements draw attention to themselves
- Texture/style (similarity): rich textures stand out over flat ones
When used effectively, a visual hierarchy can “inform, impress and persuade users” who have previous expectations for the appearance of a given website.
However, there are some key components to keep in mind. Mobile users, for example, will be viewing content on a much smaller screen. Making elements clearly noticeable will help mobile users have as positive of an experience as desktop users.
In addition, fancy or ornate fonts may help to imply importance, but they may also be distracting or difficult to read, negatively affecting usability. It is more important for a font to be readable than it is for it to be pretty, despite how aesthetically pleasing a font may be.
In summary, Gestalt principles such as proximity and similarity play an important role in shaping the organization of a website. It is also important to consider how these principles factor into the accessibility of a website.
Gestalt Theory and Accessibility
Figure 5 demonstrates the principles of Gestalt Theory in a clever way, using each letter to represent a different principle (NOTE: Figure 5 uses slightly different wording than this post and also includes a seventh principle, “past experience“).
In summary, past experience allows users to use previous knowledge of website design to interpret the designs of other websites. To read more about these and other principles, see this informative article by Jennifer Turner and Jessica Schomberg.
Turner and Schomberg’s article discusses how the “AL” in Figure 5 is used to represent the idea that previous reading experience will allow users to recognize that the image is meant to represent the letters A and L. However, a user with dyslexia may struggle with the unfamiliar font style used to represent the A and the L.
Accessibility is important!
Accessibility needs to be at the forefront of website design, as demonstrated by this example. Another example might be the use of color within a website. While colors can help to organize information for a user, colorblind users may be unable to recognize color contrast if said colors are not chosen with accessibility in mind.
The core principles of Gestalt Theory are a great starting place for website design. When combined with the concepts of visual hierarchy and accessibility, you are well on your way to creating a great website!