Learn about additional Gestalt Principles

As a reminder, Gestalt Principles describe how humans group similar elements, recognize patterns, and simplify complex images when perceiving objects. In other words, the human brain attempts to organize information by subconsciously arranging the parts into a cohesive whole. Applying Gestalt Principles in your mockups will help create user-friendly designs that are rooted in psychology and human behavior.

So far in this certificate program, you’ve learned about three Gestalt Principles:

• Similarity: Elements that look similar are perceived to have the same function.
• Proximity: Elements that are close together appear to be more related than elements that are spaced farther apart.
• Common region: Elements located within the same area are perceived to be grouped together.

Now, you’ll explore three additional Gestalt Principles: closure, continuity, and symmetry.

The Gestalt Principle of closure describes that when a human looks at an incomplete object, they subconsciously complete the image to see a whole, completed object. Check out the graphic above, for example. Technically, the graphic shows a bunch of different colored lines — but your brain perceives those lines as a red square, a blue circle, and a yellow triangle because of the desire for closure. Using the Gestalt Principle of closure can keep users engaged with your designs by improving their attention to objects.

What about closure in the real world? In the FedEx logo, shown above, there is a subtle example of closure. Can you spot it? Between the E and x, the white space forms an arrow pointing right. There is no outline or distinction on this arrow, but users can see the arrow because the shape of the E and the x come together to provide the illusion of the arrow. For FedEx, this arrow is more than the closure principle; it also fits in with their brand’s purpose of shipping items for their users, because the arrow implies moving forward.

To read more about closure in design, here’s an article from the UX Collective: Improve Your Designs With The Principles Of Closure And Figure-Ground.

The Gestalt Principle of continuity states that elements that are arranged in a line or on a curve appear to be more related than elements not on the line or curve. In other words, continuity guides a user’s eye from object to object, following a line, and focuses attention to specific parts of the screen.

For example, in the graphic above, your eyes are led from the first circle, through the second circle, and to the third circle because your eyes follow the white line as it moves across the graphic.

In the real world, the Gestalt Principle of continuity is often used when showing step-by-step processes and when displaying a list of items that are related to each other. Continuity can also be used in navigation menus, as shown on the website for the United States Postal Service (USPS) in the image below.

Imagine that you are looking for information about sending a package. First, you would click “Send” in the navigation menu. Next, your gaze moves to the “Learn About” header because you are interested in learning how to send a package. Then, your gaze moves down to the “Sending” subheader, where you find the link to learning about sending packages. Why? Well, the principle of continuity is used to lead your eyes in a vertical line through the navigation menu. Following a line like this happens so quickly that you likely don’t even realize that you’ve gone through three levels of menus to find the link you’re searching for!

Another way that users can perceive elements in a design is based on the way that they look in relation to each other, or if elements in a design are symmetrical or asymmetrical.

The Gestalt Principle of symmetry describes that elements are more visually pleasing when the parts of an object are balanced or are mirror images of each other. In addition to looking nice, objects that are symmetrical are also perceived as related to each other. In the graphic above, the dark green shape on the left is duplicated in a light green shape on the right. The only difference in these two symmetrical shapes is the shade of green used.

On the other hand, asymmetry, which is a lack of balance and equality, can emphasize an element’s importance and create visual interest. Using asymmetry in your designs can help call attention to a specific item or grouping of items. In the graphic above, the green shape on the left uses straight lines, and the yellow shape on the right uses curved lines, which makes them asymmetrical.

The image below shows the website for the Alan Turing Institute, where asymmetry is in action. Here, different text sizes and the placement of text boxes guide users to the more important information on the page.

As you think about how to use symmetry and asymmetry in your designs, check out this video from Skillshare about symmetry vs. asymmetry to learn more.

With Gestalt Principles in mind, you’re on your way to creating designs that are smart, visually attractive, and user-friendly. Remember to think about your users’ needs as you design and don’t be afraid of heading back to the drawing board to bring some of these principles to life within your designs!

Sources: Google UX Design Professional Certificate

Coursera | Create High-Fidelity Designs and Prototypes in Figma