Evaluating UI for Intuitive UX — Gestalt Principles

Understanding the connection between what the eye sees and how the brain interprets it is the door to understanding Visual Communication.

Evaluating UI for Intuitive UX

Evaluating your designs with Gestalt Principles will help you optimize how information is grouped together and ultimately construct smarter layouts.

Similarity

Let’s say you have a shopping interface with multiple items in different sizes, colors, and quantities. By displaying the items within a similar card style, shoppers can browse the products more efficiently. On the other hand, you can feature an item by disrupting these similarities.

Reach out to experts and everyday users to provide feedback and help validate your approach.

Continuation

A graphical example can be seen here on this layout with the yellow markers above. You already know there will be four yellow bars on the next slide. Now, let’s look at Responsive designs. The content must flow in the same order at every breakpoint, going from a single row to a stacked alignment.

Continuation provides visual information of what came before and what’s next. Give the user context to follow.

Closure

Take a moment to observe the relationship between white space and dense content areas. Notice how your brain is closing the gaps between these areas and creating new shapes even if you didn’t explicitly outline them.

For instance, Iconography takes advantage of this tendency for the brain to recognize shapes within shapes due to an active user’s visual vocabulary.

Proximity

Spacing alone provides tons of information about the relationship between objects. Irregular spacing and unrelated groupings can confuse and provoke frustration for the user. Be sure to establish a grid and spacing rules early on for everyone to follow.

A different background color, 1-pixel dividers, and full-width visual breaks are additional ways to amp up the content’s likeness in your layouts.

Figure/Ground

Strong contrast and sizing clarify the focal point in your UI. For example, the primary action button must stand out in the foreground, while secondary actions should gradually recede. Be clear on the intended order of interactions.

Selecting a harmonious color palette with complementary hues and balanced tonalities is essential in creating a sense of depth in your designs.

Symmetry & Order

Evenly spaced grids, combined with asymmetric elements, can provide a dynamic composition. However, if the user needs to process lots of text, keep a tightly unified grid to avoid unnecessary pauses and support continuity.

Duplicating components, mirrored columns, and evenly split sections provide a well-balanced organization to your layouts.

Common Fate

Although this last one is not one of the original principles, it’s often associated with the relationships the brain makes when seeing similar shapes and predicting patterns in sequential content. Building up a pattern library from common elements is essential in forming the user’s familiarity throughout a multi-page interface.

BEYOND THE WORKSHOP — 8th publication, original post on Instagram.

I appreciate your questions, comments, and shares!

Thank you for following along. Daissy Designs

VISUAL COMMUNICATOR | Experience Design + Digital Strategy + Brand Development