The Principles of Visual Design in UX
All throughout art school, we are beaten over the head about proximity, similarity, continuity, closure, figure-ground, common region, and focal point. Mentioning these, there is no way to forget Max Wertheimer, Wolfgang Köhler, and Kurt Koffka, a.k.a the founding fathers of Gestalt psychology.
The Gestalt Principles, created by the men above, have defined a set of laws that address the way humans make order out of the everyday things around us. Often we can see the principles referenced in graphic design, but how can it be applied to user experience (UX)?
1. Proximity
The principle of proximity states that we have a tendency to perceive elements as a group when they are close to each other.
KRUTSCH's work with Digi International needed to use proximity in order for it to be user-friendly. For a non-expert audience, it was necessary to bring attention to the device configuration edits. Looking at the photo below, it is visible that the data was organized so that viewers can tell which information goes with which category.
What does this look like in applications that you use daily? Well, think about your most commonly used app. Next time you open that app, take a look at the subtle cues that let you know that a group of details belong together, and you will be looking at proximity.
2. Similarity
We can't help it, but we have a tendency to group elements together that look like they're related. We subconsciously group things by their color, shape, or size. It's how we distinguish patterns, and yet another way we try to make sense of what's in front of us.
When doing a user study with Nebraska Early Childhood Education Record System(NECPRS) we found out users needed clear navigation and organization. The visual language and organization that KRUTSCH designed made it easier for new and returning users to navigate and learn the system.
Taking a look at the above dashboard example for NECPRS, we can see several examples of similarity. Immediately we can see the list of current employees, but how are we interpreting the information in that table? Did you notice that you're viewing seven columns of information? Or that we can categorize what we see based on shape? We group the rows of text because we find the shapes of letters and words to be comparable.
3. Continuity
Continuity tells us that we’re inclined to group components together based on them being arranged on a line or curve. This is because our eyes like to follow a path. UX designers can take advantage of this principle to help guide the user to certain parts of a user interface (UI).
Working on the UI for dont™, a safe teen driving app, KRUTSCH needed an intuitive way for parents to follow the detailed time of events that took place while their child was driving. In our UI, each trip is grouped together with appropriate labels, and a timestamp for each event that occurred, but to the left of all that information we have established a vertical dot and dash pattern that draws the parents eye down their child's driving timeline based on the continuity principle.
4. Closure
Essentially, closure is our ability to fill in the gaps. Our brain has the ability to look at shapes and fill in missing pieces. In UI/UX it gets a bit trickier to find examples, but they do exist. In the image below, we read the "s" even though it is not actually there.
USA Network logo
5. Figure Ground
If you have the ability to distinguish items as being in the foreground or the background, you're observing the principle of Figure-Ground. We see an overabundance of this in UI design. This is seen with any pop-up that appears on your screen. The pop-up becomes the foreground, and your screen unfortunately becomes the background.
KRUTSCH worked with Get Like Me to solidify their vision of an app that would enable users to utilize the latest augmented reality technology to create content that could be shared to any social media platform. Because of the principle of figure-ground, we can clearly distinguish elements of the UI apart from the background video being captured.
6. Common Region
Very similar to proximity, common region describes objects that are within the same boundary and are perceived as having similar functionality or purpose. This differs from proximity, because with common region we rely on some sort of barrier to help define a group of related items. To help with confusion, proximity is different because it relies on the space, or lack thereof, around objects to define them as a group.
To see this principle in use, let's look above at NECPRS again. We can clearly distinguish what classes are offered by the subtle grey lines that separate each training. Because of these borders, it becomes obvious that the details listed below the title of the training belong to that specific class and not the one that follows.
7. Focal Point
I've saved Save the best for last, or the most obvious. This principle makes it clear that whatever element visually stands out the most, will grab the viewer's attention first. From this, the viewer will navigate through the other components of the UI. Often this is done with color, but we can also see this principle achieved with size, contrast, or even other Gestalt principles like proximity.
One of the features of dont™ was a panic button that enabled teens to instantly reach out to their parent with a single tap of a button. With this feature having the highest priority for the teen while driving, we designed a widget that would take up space and immediately draw attention. Looking at the image below, we can see the obvious use of red to draw attention, but we also took up maximum screen width to create a large tappable region.
While the list of visual design principles can go on forever, the Gestalt Principles carry over into just about all of them. Although these principles are great to make things visually appealing, it is necessary for UX design. Given this psychology of users is what helps us to better develop products that meet their needs. Using our human nature and empathy, KRUTSCH helps create UI's that are intuitive and require minimal thought but produce optimum usability.
End Note
Follow us on LinkedIn to see the next article in your feed.
Rachelle Abernathy is a graphic designer at KRUTSCH, whose work focuses on integrating beauty into the pragmatic function of our everyday life. She is committed to finding creative and efficient solutions to design and business challenges.