UXDE dot Net Wordpress Themes

Gestalt Psychology in Web Design: Proximity Principle



Probably, after reading the headline you may think that it’s too hard to understand and would close the tab with the article. But those who dare read on will not regret it. The word “Gestalt” is not as difficult to understand as it seems first.

Probably you have never heard about Gestalt effect previously, so let’s clear it out! The principles of Gestalt psychology are based on the humans’ ability to perceive and generate visual forms. In other words, this ability helps us to see an image as a whole and not as a set of unrelated elements.

Since the person is addicted to drawing an analogy between various things, these principles are fully exploited in web design.

There are six Gestalt principles such as proximity, common fate, similarity, closure, symmetry and figure ground.

First of all, proximity principle in Gestalt theory involves the whole perception of the elements that are located nearby. It means that objects which are close to each other seem to be more related to one another, rather than the things that are separated by a distance.

Even if the items are dramatically different, but are located close to each other visually they perceived together.

When it comes to web design, the proximity principle is used for content layouts. This principle requires usage of the appropriate rules: information blocks should be grouped together, but related elements are located at some distance from them. This rule is helpful in the creation of any websites.

The whole is greater than the sum of the parts. – David Hothersall

This quote means that the grouped website items are more significant than their location far from from each other. The proximity connects the elements in a context. It makes you think of them as logical groups, rather than individual components.

In order to prove my words, here are a few examples below that show how really important the proximity is. They are the examples of correct website layout and location of the elements.

Rockwerchter

gestalt psychology


BuiltbyBuffalo

gestalt psychology


Importance of White Space

Proximity between website elements can be easily manipulated by well-thought-out distances between them – white space.

The main objective is that related and unrelated elements must not merge with each other. For visual separation of text, images, or other items you should use white spaces. Don’t be afraid to experiment and show freedom of expression.

There are a few examples below.

Blogphix

gestalt psychology


Rockawayrelief

gestalt psychology


Apollo

gestalt psychology


Avoid confusion

You have to avoid confusion of sections and website elements. So try to place the title, description, links, as close as possible to the elements which they belong to, for example images, text parts, buttons, captions, etc.

Always remember that on your website everything should be clear and easy. Make it as simple as possible.

Inspiration

gestalt psychology


A-Contrario

gestalt psychology


Kinder Fotografie

gestalt psychology


Modular grid

While coding a website all the elements should be in a modular grid. It allows you to group the elements with each other more easily. Usage of a modular grid also gives an opportunity to focus not on Gestalt principles, but on the aesthetics of website design.

Modernize

gestalt psychology


Candide

gestalt psychology


Grouping the elements

This is one more way to create unity of all the website elements. You can group the elements by function or by the result of the action. There is also a type of grouping by mixed functions.

Usually, it is done to ease usage of a website.

Minimalisto

gestalt psychology


Life & Thyme

gestalt psychology


Mintdigital

gestalt psychology


4 Rules of Proximity

There are four most important rules of proximity principle use in web design. Let’s figure out these rules using the most proper examples.

#1. Total area: all website elements are seen as one. They can be formed by a common background or other graphic techniques.

Grungexperience

gestalt psychology


Simon

gestalt psychology


#2. Proximity: Elements which are located close to each other seem to be related.

Inspiration MailChimp

gestalt psychology


Nationall Museum

gestalt psychology


#3. Communication: graphically interconnected elements are perceived as one.

Core

gestalt psychology


Design Kitchen

gestalt psychology


#4. Similarity: the same color, shape and size of elements give the impression of similarity and relatedness.

We Are Moving Things

gestalt psychology


The Kennedys

gestalt psychology


Conclusion: Six More Tips to Remember

  • do not submit information as a large text, try out to group your website content;
  • combine all the elements with each other;
  • items that are not related to each other, should be organized;
  • try to avoid a large number of individual elements on a page;
  • if each group of elements is a part of a whole, there should not be a lot of white space between elements;
  • try to create a clear visual hierarchy.

Nancy is a passionate freelance writer and blogger. She writes tons of inspirational articles on photography and web design, despite the fact that she is an economist by education. She enjoys reading, learning SEO and also losing her mind to French movies. Make friends with Nancy on Twitter

Discussion 7 Comments

  1. Fahim

    This is a great article. I didn’t know how psychology can effect web design. Thanks for sharing it. Would you mind to take a quick glance at my site and see if I have done it right?

    • Nancy Young

      Thank you a bunch!
      Of course, I can. Could you, please share the link to your website? :)

    • Nancy Young

      I think there is a lack of images or some illustrations. But navigation is easy :)

  2. Viv Rosser

    This is fascinating . I got a distinction in cognitive psychology and am a trained Gestalt therapist. I have just written a series of books on this very subject for Amazon kindle fire, called the First to Seventh Meditations and it employs the techniques you mention here.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>