What exactly are Gestalt principles?
It is a theory of visual perception that is commonly seen in optical illusions.
It is because we, humans perceive a group of objects entirety before we see them individually. We often see the whole more than the sum of the different parts, even when the parts are separate entities.
Symmetry and order
Having a view that is orderly and balanced does not make the viewers spend a long time trying to figure out where to find something.
Things that have a connection stay close together. If they are physically separated, we assume that they do no have any connection.
When grouping items together, we tend to put together things that are similar. For example: shape, colour, shade, quality & orientation.
When looking at something, we often separate out a foreground (figure) and a background (ground) where foreground is the main subject that we focus on and the background is generally ignored.
When we see a line, our eyes tend to follow it towards the direction that the line is going till where it ends.
When given incomplete information, us humans tend to find patterns to seek completion and filling in the bits that does not actually exist to fill up the missing information.
Why use Gestalt principles in web design?
As the term Gestalt means “form” or “shape” in German, it is important for our website to look neat in a way that users are able to feel more connected to our website as it uses optical illusions which makes use of our brains to let users feel connected with us as they browse through the website.
Examples of Proximity in web design
Web forms are good examples of proximity as label and field are grouped together. Doing so helps the user to understand the form quickly and complete it correctly.
Examples of Similarity in web design
In this example, the buttons are similar and expect them to perform a similar action. The white tabs suggest they all have the same function while the red tab screams for attention to get the user to sign up.
Examples of Figure-ground in web design
The most basic principle in web design is allowing user to see that an action is possible. A button that pops out from its background is a simple example of Figure-Ground relationship.
Examples of Continuation in web design
When designing an interface we always consider the Continuation principle as the user’s eyes will follow a certain path, pausing on the most prominent graphic elements.
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.
In conclusion, it is beneficial to consider Gestalt principles while designing for websites as all of them work together as one to achieve a better structure and graphic design for your website. Remember these are the key points for you to evaluate the aesthetics of your website. If it’s not, it is time to apply these principles. We hope this article benefits you. Stay tune to our next blog post where we will be sharing with you on more tips regarding the various topics.