Nothing says good morning like a steaming cup of french-pressed coffee. Especially one that looks like this—
$20 you see a smiley face.
Why?
Because your brain, like mine, is wired to look for patterns, simplicity, and organization. So out of those shades of brown and bulging bubbles, we both see a simple smiley face.
See, there’s a ton of information barraging your brain, and not just when you turn on the TV. To make sense of this mental cacophony, we unconsciously look for order and simplicity. 😌
Gestalt principles explain some of the ways we do that. And applied to app design, these principles make sense of why good design works.
Gestalt fast facts 🤓
- “Gestalt” is a german word. There’s no exact English equivalent, but it refers to the way something is placed or put together.
- The whole Gestalt thing began as a reaction. In the early 1900s, schools taught students to break experiences into distinct and unrelated pieces. Some disagreed.
- You’ve heard, “the whole is greater than the sum of its parts?” Yeah, well, Gestalt guys would’ve had that on their t-shirts, desks, and koozies. It sums up a lot of their thinking.
- Most sources give 3 psychology dudes credit for Gestalt theory. Max Wertheimer, Wolfgang Köhler, and Kurt Koffka. Max was Czech; Wolfgang and Kurt were German. They all became US professors by the 1930s.
- There weren’t any iPhones or apps back then, but Gestalt theory is all about how we perceive stuff, so other smart people have rightly applied these psychologists' work to the digital space.
Gestalt principles anyone can understand and apply 🙌
Gestalt may sound like a highfalutin word, but the concepts are pretty down to earth. Here are a few you’ll want to know for app and SaaS design. 📱
Figure/ground ⬅️
We see objects as either in the foreground (figure) or background (ground).
This one is useful when you want to distinguish important content from a less important background. It’s also useful when you want to bring a specific object into sharper focus, after the user gets the lay of the land. 🔎
For example, when you click the search bar in the new GreyNoise visualizer, the logo and other elements fade into the background. This helps the user hone in on an important feature.
Similarity 👯
We assume similar-looking objects are related.
Size, color, texture, dimension, and shape all contribute to similarity. And similarity helps users learn how your app works. Words in pinkish red are links. A download icon in Slack means the same thing it does in Word. Text with a box around it is a button. And so on.
In the example above, Houzz puts a price tag on items I can find in their store. Every room I pull up will have icons that look and behave the same. Sensible, right? But imagine if every room had a different set of icons, in different shapes and colors. 😱I’m pretty sure I’d delete the app!
P.S. Those tags are a great example of figure/ground as well.
Grouping 👨👩👧
We assume things close together are more related than things far apart.
Check out the scene I came home to a few weeks ago:
My destructive doggo isn’t shaped anything like those newspapers, and there are few color similarities between him and the papers. But grouping (plus experience) tells you they’re related.
Note how grouping trumps similarity. That’s true online too.
Example via Andy Rutledge
The most common ways to group things are proximity and enclosure. In the example above, dots are grouped by proximity. Likewise for words in this small paragraph.
Your standard Facebook post uses both types of grouping. Everything I need to know about the above event is enclosed in a white box. And then related actions are grouped near one another. For example, “Interested” and “Going” are both RSVP actions, so they’re located right next to each other.
Focal point 👀
Whatever stands out will capture and hold our attention first.
This is especially useful when you want to encourage a specific action or have users pay attention to certain objects first.
Starting a run is the most important action on this screen. The large button—the focal point—helps encourage that desired action.
Continuation 🏃
We assume objects in a row or a line (even a curved one) are more related than objects not in a row or line.
That’s why, when you look at the image below, you see a curved line and straight line, not a red line and a black line.
Image via Smashing Magazine
In apps, you’ll see continuity used in rows, or grids, to say, “hey these objects are related.” Like in the example from Nike running club below.
Why these principles matter 🚀
These principles don’t simply make things ‘look nice’ or ‘right’—though that’s true. If a designer didn’t apply these principles, your app would quickly become jumbled and unusable.
More importantly, applying these principles helps your customers orient, take action, and find information.
Meaning customers solve their problems quickly and keep using your app.
