What are Gestalt Principles?
It is a theory of visual perception that is commonly seen in optical illusions.
Why?
Humans perceive a group of objects in their entirety before noticing them individually. We often see the whole, more than the sum of the different parts; even when the parts are separate entities.
The 6 Gestalt Principles are:
- Symmetry & Order
- Proximity (Grouping)
- Similarity
- Figure/Ground
- Continuation
- Closure
Symmetry & Order
Proximity
Things that have a connection stay close together. When separated, it is natural to assume that they do not have any ties with one another.
Examples of Proximity in Web Design
Web Forms are good examples of proximity as the labels and fields are grouped together. This helps the user understand the form quickly and completes it correctly.
Similarity
When grouping items together, we put together things that are similar.
Examples of Similarity in Web Design
The buttons are similar and are expected to perform similarly. The white tabs suggest that they all have the same function while the red tab grabs the user’s attention to get them to sign up.
Figure/Ground
When looking at something, we often separate out a foreground (figure) and a background (ground). The foreground is the primary subject that the user should focus on and the background is generally ignored.
Examples of Figure-ground in Web Design
The most basic principle in web design is to allow the user to see that an action is possible. A button that pops out from its background is a simple example of ‘Figure-Ground’ relationship.
Continuation
When we see a line, our eyes follow it towards the direction that the line is going till where it ends.
Examples of Continuation in Web Design
When designing an interface, there needs to be a consideration for the ‘Continuation’ principle as the user’s eyes will follow a certain path, pausing on the most prominent graphic elements.
Closure
When given incomplete information, humans find patterns to seek completion and fill in the bits and pieces that do not actually exist to fill up what is missing.
Examples of Closure in Web Design
An example of ‘Closure’ is when users are prompted to guess invisible elements by looking at the visible elements. In this example, 4 images are hidden but there are enough visual elements for the user to understand that the next image is just one click away.
Why use Gestalt Principles in Web Design?
The term Gestalt means “form” or “shape” in German. It is important for a website to look neat, specifically in a way that allows the users to feel more connected. Such uses of optical illusions make use of the brain to allow users to feel connected with a site as they browse. It is beneficial to consider Gestalt principles while designing websites, as all of them work cohesively to help achieve a better structure and graphic design for your website.
About Pixel Mechanics
As a one-stop e-commerce solutions provider in Singapore, Pixel Mechanics is a website design and development company that aims to help businesses transition to the online space seamlessly.