Good Website Design: Exploring Principles of Similarity and Proximity

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.

Similarity

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

Figure 1: Bright Vibe Calendar

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.

Figure 2: Moneywise App

Size

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.
Figure 3: Large, blue “plus button” prompts users with three main types of content additions

Shape

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.

Proximity

Figure 4: Principle of Proximity

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

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“).

Figure 5: “Visual Gestalt”

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!

This Post Has 7 Comments

  1. Great post, Haley! This took me back to WRT 253–a class I really enjoyed. It was a great refresher as we begin to design our websites for the intercultural project. I thought Figure 5: “Visual Gestalt” was especially interesting. I’ve never seen something like that, and it’s a creative way of displaying each principle.
    I found another blog post written about gestalt laws and web design. Something that stood out to me was how important proximity it, especially in regards to forms on websites. The post provides a good graphic of this, but basically, it shows how important it is to keep similar information grouped together and close, and to put the correct description of what information you’re asking for next to the correct part of the form. It was just something I’d always noticed, but never thought much about. (https://www.webfx.com/blog/web-design/gestalt-principles-applied-in-design/)

  2. Hi Haley,
    I really enjoyed reading through this blog post about the gestalt laws. I thought that the images you used to support the theories really aided my understanding of them. (I just took a learning types quiz (http://www.learningstylequiz.com/), and I am very much a visual learner).

    I found a blog post by UserTesting, the same program we used to have our websites tested for usability. There are so many great examples of the Gestalt Laws, including GIFs and website screenshots. I thought of the example of the common region law–how we perceive things that are in the same region as each other as related to one another in the same group. The example they used was your Pinterest feed. I think this is interesting especially because on Pinterest, all of the images could be different and all related to something different. But since they are all in the same region, they are related to one another as “pins”. (https://www.usertesting.com/blog/gestalt-principles).

  3. Hi Haley! Your blog defines and explains the Gestalt Laws very clearly and the organization of your information makes the post easy to read and understand! The figures, bullet points of factors contributing to how the specific laws work, and the short blocks of text especially helped with this. I also really liked how you tied these laws in to accessibility! A concept I wanted to learn more about was the visual hierarchy. I found an article (https://99designs.com/blog/tips/6-principles-of-visual-hierarchy/) that go into more depth about factors that affect and contribute to a visual hierarchy, and how the different visual components of a design have certain affects on the users of the site.

  4. Haley,
    I had previously taken a class on document design and production, so a lot of the Gestalt principles are familiar to me, but this blog post was a nice refresher to the concepts. I’ve also seen a lot of the Gestalt principles called different things, so it was interesting to see how they were addressed in this class specifically for the web. I think the organization of the blog post was well done and the content was written and presented in a way that was easy to read. I liked the images that were provided, especially the final figure (figure 5) that was presenting the Gestalt principles. I really like the creativity put behind this image, and I’m glad you included it in your post, it serves as a perfect example of the concepts.
    https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-closure-and-figure-ground-part-2/
    I found this web article on the importance of closure and figure-ground in web design. I found a few of these examples particularly interesting because they show off how simplifying a logo or other design can make it more visually appealing, as the eye is not overly distracted by harsh outlines and there is potential for simple yet cool visual tricks to be implemented into a logo.

  5. Haley,

    Great post! The first thing I learned was that gestalt is the German word for shape/form, as I thought this whole time it was someone’s last name. As for your post itself, I enjoyed the way you grouped things, and how you broke down Similarity and Proximity even further than what they seem like on the surface. I remember learning all about gestalt principles in Document Production and Design, and your post has been a great refresher. The ideas of making things similar through color, shape, and size seems obvious when you read about it, and yet it’s something that largely goes unnoticed. We perceive similarities on websites almost subconsciously, as we don’t usually out loud say “these are similar colors so they must mean similar things,” but rather it helps to speed along our thought process and better navigate websites and such. It’s really intriguing to me how much thought goes into developing a site and how many little tiny details are payed attention to, but in the grand scheme of things these details are crucial for making sure the users don’t actually notice any particular details in general. After all it is important how users interact with a site, not just how neat or interesting they think it looks. Something even more interesting to me is the fact that gestalt theory is not just about design, but rather an entire psychological perspective. There’s an article by VeryWell Mind that explains the school of thought of gestalt theory, and I like taking this into consideration when applying gestalt principles to design: https://www.verywellmind.com/what-is-gestalt-psychology-2795808

  6. This is a great blog post Haley!
    I love learning about details as small as this. It may not seem like a lot, but it’s very important. In terms of your blog, you have done a great job explaining what’s going on and how each terms works with the others. I understand how they all work in relation to one another. Especially when it comes to the six rules. I find it very fascinating that these are aspects to be considered even when making a small site. I can see how a lot of these rules are used on websites that appeal to a minimalist aesthetic. I also want to say that the image explaining the Gestalt rules was awesome and really helped me understand what I was reading. This blog and topic reminds me a lot about my writing and design class. White space was supposed to be utilized and I see how it works here as well. I really love this topic and I found an article that discusses it similarly: https://www.toptal.com/designers/ui/gestalt-principles-of-design

  7. I really enjoyed reading your blog about design details that so often slip our minds. This is a great blog to refresh my memory and bring me back to Document Design class. I could’ve sworn up and down that Gestalt was the last name of the creator. (Would’ve lost that bet!) I like that you have connected Gestalt theory with accessibility. I think so often we execute the design principles such as similarity and proximity purely on a visual level or content organization level. Which are great and important but we also have to take accessibility into consideration when using these principles. I think your points about past experience and accessibility in light of gestalt themes are the most valuable information of this post. I found this article http://www.inthelibrarywiththeleadpipe.org/2016/accessibility/ that talk about the ethics behind design and accessibility. The argument is filled with passion as conversations about accessibility should be.

Leave a Reply

Close Menu