Gestalt Principles

Gestalt is a psychology term which means “unified whole”. Gestalt Principles refers to the theories used for visual perception . The principle maintains that the human eye sees objects in their entirety before perceiving their individual parts, suggesting the whole is greater than the sum of its parts. Gestalt psychology tries to understand the laws of our ability to acquire and maintain stable percepts in a noisy world. These theories provide the foundation for User Experience design and Usability Concepts. This article provides an overview of the main Gestalt Principles. There are other principles like Common Region and Connectedness.

Proximity -occurs when elements are placed close together. They tend to be perceived as a group. For example-

These squares are not placed with any proximity to each other, Hence we don’t perceive them as a group. We see them as random squares.

 

 

 

 

 

When the squares are given close proximity, unity occurs. While they continue to be separate shapes, they are now perceived as one group.

 

 

 

The proximity principle has been successfully applied when it comes to navigational links and sub-navigational links; you must have entered online and see a carefully arranged list of links, with the drop down navigational menus. Now you know that this is all psychologically arranged. Web designers have resorted to the proximity principle in order to group different types of images or logos. Their main desire was for people to understand the relation between the two groups, the importance of one over the other.

 

Similarity occurs when objects look similar to one another. People often perceive them as a group or pattern. We group similar things together. This similarity can occur in the form of shape, colour, shading or other qualities.

 

 

 

 

 

 

 

 

In web design, the similarity principle is often applied, whether we are talking about choosing the same color for all the links or highlighting the icons that have similar purposes. This principle resorts to our perception and the unconscious tendency to put things into groups if they are similar in any way.

Drop-down menu’s, filtering of search results are all examples of Similarity Principle.

 

Closure – One of the most illustrious Gestalt theories is that elements are grouped together if they belong to a figure that is closed. This is the closure principle and it functions really well for the field of web design; imagine logos that are made up by horizontal lines, dotted drawings that our mind renders as a complete image and the list could go on for a really long time.

Our mind fills in the blanks and completes the image, practically closing it. It is because we have a different perception that we are able to take such an action and provide ourselves with the elements that are missing from the image.

Without the law of closure we, would just see different lines with different lengths, but with the law of closure, we combine the lines into whole shapes.

Using the law of closure can make logos or design elements more interesting.

 

Figure-ground principle is one of the most interesting Gestalt theories, being based on the relationship between objects and backgrounds. Even since the field of web design developed, specialists have tried to point out to the distinct problem of crowding the backgrounds with various elements, to the disadvantage of those that are in the foreground.

Today, web designers have learned that, in order to create amazing graphics or come up with unique logos, they have to take the figure ground principle into consideration. This means that the relationship between background and foreground is pretty strong and not taking it into consideration might be a big mistake for a web designer.

 

Symmetry– The human brain is so complex that, when one looks at a certain image, our visual perception is concentrated on seeing and identifying the shapes that are symmetrical. Symmetry is appealing from an aesthetic point of view and this is exactly what this Gestalt principle is all about.

For a web designer, deciding on the symmetry or asymmetry of a picture is an important thing, because one could take on a huge risk by going against the wind. Web pages that have an irregular arrangement (eg- variable number of columns within a page) could confuse and provide discomfort to the user.

 

Common Fate – The idea of “common fate” is simple: We perceive items or objects moving (or appearing to move) in the same direction as related to each other, more so than elements that are stationary or appear to be moving in different directions. Those related items are sharing a “common fate.”

In our designs, elements that “move” with one another relate to one another and relationships immediately form. while elements that resist that common movement or move in a different direction, do not relate.

In the above example we see that when we hover the cursor over a circle, a picture showing the part of the vehicle is immediately shown. This forms a relationship in our mind and makes us deduce that all the white circles provide the same functionality. This principle is very important in web design and designers must ensure to maintain consistencies throughout their pages as users’ minds tend to form relationships based on examples.

Continuity- People have a tendency to perceive a line as continuing its established direction. Continuation occurs when the eye is compelled to move through one object and continue to another object. This is the most important property as it is the most widely used in Web design and such aspects.

In the above picture we see our eyes move from one item to the other in a circular pattern.

In the above picture we see that our gaze first falls on the face and then to the speech bubble due to the direction of his gaze.

Another example is how menu items appear either along a column or a row and our gaze moves over it perceiving it as a whole object.

 

Conclusion: As a general conclusion, all the Gestalt principles are important for the work for a web designer and they should be carefully considered for each project.

Some of the best designers in the world know nothing of gestalt principles. They use them intuitively; when designs look and feel right, usually they incorporate gestalt principles whether the designers knows the terminology or not.

Gestalt principles aren’t artificial constructs that people have concocted to apply to design; they are attempts to describe and verbalize how we naturally perceive things.

It’s arguable that in at least some sense, “design talent” is an ability to naturally — and perhaps even unconsciously — understand how human perception works, and how to create designs for websites, paintings, or wedding dresses that are artistically beautiful and functionally efficient by appealing to it. It doesn’t matter if you use these principles by instinct or by deliberation; what matters is how they can help you make better designs.

 

References:

http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/

http://www.vanseodesign.com/web-design/gestalt-principles-of-perception/

http://conversionxl.com/8-universal-web-design-principles-you-should-to-know/

4 Comments

  1. Thanks for some other magnificent post. The place else could anybody get that type of information in such a perfect approach of writing?
    I’ve a presentation next week, and I’m on the search for
    such information.

    Reply
  2. Τhe other daү, while I was at work, my cousin stole
    my iphone and tested to see if it can survive a 40 foot drop,
    just so she can be a youtube sensation. My apple iрad is
    now destroyed and she һаs 83 views. I ҝnow this
    is complеtely off topic but I had to share it with someone!

    Reply

Leave a Comment.