How to Properly Apply Gestalt Principles to Web Design (with examples)
Perception is everything. Especially when it comes to web design.
When you’re designing a website, you should make sure it looks organized and everything flows well. It’s important that the user isn’t overwhelmed or confused when visiting your website. Once you have that down, you can use some psychological tricks to make sure the user takes full advantage of what your site has to offer.
There are a few strategies that tap into one’s visual perception. When you do this, you can make your website look really organized and guide the user to go wherever you want them to. One of these strategies is using Gestalt principles.
What Are Gestalt Principles?
The Gestalt principles are about perceiving an incomplete design as a unified whole. When individual objects are put together, we immediately group them in our mind and see the whole thing instead of each individual object.
In web design, you can use the Gestalt principles to plan a website that appeals to users psychologically as well as visually. If you start considering these principles from the moment you start wireframing, they can help guide your users towards your objectives or drive leads. The top principles to incorporate into your web design are similarity, proximity, closure, continuation and figure and ground.
Similarity occurs when people group objects because they look the same. For example, let’s say there’s a row of big circles, followed by a row small circles, which is followed by another row of big circles. You’re going to group the rows of big circles together because they look similar.
This principle can be used by grouping information, pictures or content based on the size or shape that it’s presented to the user. It is frequently used for pricing tables because they group information together, but at the same time allow small differences to stand out – see how the Premier plan at Fancy Hands stands out from the other options.
The principle of proximity is applied when people group objects because they are close together. If ten triangles of the same size are scattered around the page, people will view them as different entities. However, if those same triangles are close together, then people will group them into one object. This can also be helpful for organizing content.
One place where most websites use proximity is in the footer. Typically, footers are home to lots and lots of links – proximity allows one to create groupings that can be quickly understood as related links, as in this example from GiftRocket.
Closure takes place when an object isn’t fully completed, but you put the design together in your head. You group the object into an image even though the lines don’t always connect. For example, the lines aren’t fully connected on the NBC logo, but you know it’s a peacock.
You can use closure to make visually stimulating images that spark creativity. This works great for a logo because it makes the user think a little bit, and they feel accomplished when they put the image together in their head. It can also save space on your web page and give you more freedom to be creative.
Continuation is when an image causes one’s eye to move from one point of the object to another point. Usually, a curved line will influence the user to move their gaze along the line from one end to the other.
Amazon uses this principle in their logo. As the eCommerce store where you can buy almost anything, Amazon wants you to subconsciously realize that they stock everything, from A to Z, with a bright orange arrow.
You can also use this principle to influence the flow of your website. Maybe you want users to sign up for your newsletter. Some websites have created clever CTAs that point your attention straight to the signup box – either literally, as Bryan Eisenberg does, or with a pointed gaze, like on Nerd Fitness.
Figure and Ground
The figure and ground principle uses a person’s ability to distinguish foreground from background. In the foreground are the images and content that you want the user to really focus on, while the background is the color or image behind it that complement the foreground and make it look better.
Popups are an example of the figure and ground relationship in action, commanding our attention by appearing over the top of the content on the page we are looking at and typically shading the background behind it so that it stands out. In this example from CJ Pony Parts, there is also an interesting figure-ground relationship with the $250 gift card offer sitting on top of a block of color and the signup box sitting on the actual ground in the photo.
Take Advantage of the Perception
As a designer, you can control your user’s perception of your website. Make sure you design it with Gestalt principles in mind, so your user gets the most out of your website.
Adrienne Erin is a freelance writer and designer who loves analyzing web design trends and picking apart online campaigns. You can see more of her work on her blog, Design Roast, or get in touch over Twitter by following @adrienneerin.