The UX industry places an enormous emphasis on usability. User stories, site maps, wireframes, and usability testing get all the limelight—while visual design fades into obscurity. But in my experience, aesthetics plays an important part in almost every user’s experience of a product.
I work at Illumina, a life sciences company in San Diego, California. We’re on a mission to advance human health by unlocking the power of the genome. As a UX designer, my job is to make complex science easier to understand and visualize. While our team works through the functional aspects of a design, I obsess over the visual details—particularly how they can improve those functional elements.
And this isn’t just a personal obsession. Studies have shown that beauty alters how we think and behave.
It inspires positive emotions, creates pleasure, and increases happiness. People perceive attractive things to work better, whether or not they actually do. This is a major benefit for designers, because it can both amplify the usability of well-designed products, and make up for shortcomings or compromises in less well-designed experiences.
Beauty alters how we think and behave.
Gestalt psychology offers one explanation for this: people perceive the entirety of a thing before they see their individual parts. So before they focus in on the details of what this button does or what this form is asking, they get an overall aesthetic impression. And if the page is beautiful, that impression’s going to be a good one.
With all that in mind, here are 8 principles of Gestalt psychology you can use to improve usability through better visual design.
1. Use an awesome grid system
The principle of proximity states that people perceive objects near each other as a single unit. And there’s no better way to control horizontal proximity than through a well-designed grid system.
Personally, I love the 12-column grid included with Bootstrap. It’s easy to customize and easy to replicate in Photoshop. You can also explore grids from Foundation, PureCSS, or even grids that aren’t tied to frameworks, like 1140px.com.
2. Take advantage of design patterns
The principle of similarity states that we tend to groups objects that have similar shape, color, and shadows. This gives us the perfect justification to turn these similar elements into their own design patterns.
One popular design pattern that’s really easy to incorporate is the card. Simply identify a key component in your app, then present it as a card. When the user sees that shape and style a second, third, and fourth time, they’ll recognize it that much easier.
Do you need to represent a project in your app? Use a card. Maybe shape it like a file folder. Have a photo to represent? Use a card, maybe make it look like an old Polaroid.
The power of design patterns is that they reduce memory load through instant recognition. At first, the card design patterns just seem like fun visual embellishments. But through the principle of similarity, we find that it also effectively communicates groups of information.
The power of design patterns is that they reduce memory load through instant recognition.
3. Work with the fold
The principle of closure tells us that we perceive objects as being whole even when they’re incomplete—which comes in handy when you’re working around the page fold.
If your content extends below the infamous “page fold,” don’t worry if it looks obviously cropped. When a user sees the cropped content, they’ll naturally scroll to complete the shape formed in their minds. Of course, you’ll need to make sure the content you’re cropping fits a particular shape (like a box or block of text), so they users know what to anticipate.
The principle of closure shows that we don’t have to show all the information. Instead, let the user’s eye fill in the remainder, and lead them towards further exploration.
4. Balance your layout
The principle of symmetry says that it’s perceptually pleasing to divide objects into an even number of symmetrical parts. I love this concept because it’s so simple, but so helpful.
I recently designed a user management screen with very little content on it, leaving me an abundance of white space. Instead of slapping the content in the middle of the screen, I set it to the left and balanced it with help text on the right. Since our eyes naturally seek balance, the principle of symmetry can help us communicate in more stable, consistent, and harmonic ways.
5. Animate
The principle of common fate states that we perceive objects as lines that move in the same direction. This is one reason adding animations to design can be really beneficial.
A menu that slides in from the side of a page demonstrates a relationship between all the links in that menu through their synchronized movement. The principle of common fate helps users connect various components of your design.
6. Use subtle lines to connect components
The principle of continuity states that we consider objects grouped if they’re aligned within an object.
Sometimes, several components may stretch across the entire width of the screen. At a glance, their connection might not be obvious, even if they’re perfectly aligned. To make it more obvious, connect them with a subtle line to draw the user’s eye. The principle of continuity allows a design to be read easily, like lines from a paragraph of text.
7. Use flatness, not glossiness
The principle of good gestalt says that we prefer things that are simple, clean, and ordered. Hence, flat design.
Flat design doesn’t rely on heavy drop shadows, extreme gradients, or complex lighting effects, all of which can distract users from their purpose. Instead of thinking about what clicking a button will do, they can get up in irrelevant questions like: What material is that button? Is it glass or metal? How many lights are shining on it? What direction are they shining from? Does that shadow correspond to the angle of light? Following the principle of good gestalt will help your designs communicate more effectively through simplicity.
We prefer things that are simple, clean, and ordered.
8. Be consistent
The principle of past experience states that elements that were grouped together in the past will be seen that way in the future. This explains the value of consistency in design.
Let’s say you place your next and cancel buttons in a particular area of a dialog window. If their position change across screens (for example, they are flipped), the user might perform the wrong action (such as closing a document without saving it). People use prior knowledge to understand present things. Mastering the principle of past experience rewards users for that, leading to less confusion and fewer mistakes.
Beauty is usability
By following some fundamental principles of Gestalt, we can better understand what makes certain designs so pleasing and effective. Personally, I find it reassuring that every human being has a natural ability to identify great design and great experiences. It’s our job as designers to tap into this ability. While usability is extremely important, it isn’t the whole equation.
by Kevin Rhodes
Kevin is a User Experience Designer at Illumina in San Diego, CA. He loves pondering the creation of beautiful things over a cup of coffee.
