Have you ever stumbled upon a webpage from the early 2000s and immediately cringed at how it was designed? A bright red background, links and borders with flashing lights, uncentered images, how about text that’s hard to read because it’s in a strange font and color? These are all examples of poor UI/UX design and a lack of Gestalt Principles.
The Gestalt Principles are design rules that appeal to the natural laws of human perception. These rules are used to create designs that are easy to understand and visually appealing. There are many Gestalt Principles but this article will only focus on the principles that are the most useful to UX designers. Those are:
Figure-ground is centered around the idea of foreground and background. The human brain is designed to interpret information in a 3D space as a result of us living in a 3D world. Because of this, our brains are constantly looking for ways to distinguish objects present in the foreground from objects present in the background. This principle is also centered around focus and focal points of an image or design.
Similarity is focused on the brain’s natural desire to group similar things with one another. This can be anything from shape, color, or size. It’s all about finding patterns and associating groups of things with said patterns.
These are all the same flower, they are just colored differently. This illustrates the principle of similarity. Image courtesy of Unsplash.
The principle of proximity is based on grouping objects together based on how close or far away they are from one another. An example would be bags of grapes, apples, peaches, strawberries, and bananas all sitting in your fridge. Your brain would naturally associate each of these fruits as separate groups since they are all in their own bags, separate from one another. But, if you chop all those fruits up and put them in a bowl together your brain will now associate them as one thing, fruit salad.
Common fate is a principle that wasn't originally part of the Gestalt Principles. It was added much later because there isn’t really a principle that fits, but it makes a lot of sense. This principle focuses on how people will recognize the movement of a group of multiple similar things as one thing. Two examples of this are flocks of birds and herds of zebras. Despite the flock of birds being made up of individual birds, our brains process their simultaneous movement as one entity. There is a similar effect going on with herds of zebras. We know that there are multiple zebras in the herd, but because of their striped pattern they blend in with one another and appear as one mass of white and black stripes.
Finally, we have symmetry and order. This principle states that our brain will break ambiguous shapes down to their simplest components. This principle is reflective of the basic rules of art and design— that many of the most complex designs are composed of basic shapes.
Alright, so we know what the important principles are, how do we use them to make great UX designs? First, it’s important to remember what we are using these principles for. We want to craft designs that are both visually appealing and easy to understand. An optical illusion made using figure-ground might look cool, but it will likely take away from the user’s ability to easily understand what's happening on the page.
The one you see is based on which color is the foreground or background color. Image courtesy of Toptal.
The correct way to incorporate figure-ground into our UX design is to keep it in mind when deciding what elements should be the focus of the page. This covers things like making sure the color of your foreground is different from the color of your background. While on the topic, background colors are very easy to mess up. The wrong color choice can come off as too distracting or just irritating to the eye. Your background color is important because every other color on the page needs to be able to complement it.
For example, if you have a yellow background you may struggle to find a text color that is easy to read and visually appealing. In general, we are creatures of habit and we like things that are familiar. Straying too far away from traditional webpage designs will likely push users away. Here is a link that goes more in-depth with UI/UX color design, give it a look if you’re interested.
Similarity and its uses can be simple but effective. You can use this principle to group elements of your site with similar items. An example of this could be giving all embedded links the same color. You can make important links on the page stick out from others by making them the same color. You can create buttons that link to social media pages appear in small uniform circles or rectangles. The purpose of these design choices are to distinguish elements of the page from other elements on the same page, as well as provide the user with a bit of visual variety.
This image shows us how many coding languages give specific colors to similar types of functions. Image courtesy of Unsplash.
The design principle of proximity offers UX designers another method of distinguishing sections of information from one another. For example, you can group a page's main navigation links together at the top of the page. Another example of this is the search bar. It’s common for the search bar of a webpage to be somewhere near the top of the webpage, since the common navigation links are also often found at the top of the webpage.
Having features like filters and advanced search appear near the search bar seems like it should be common sense and that is all because of the law of proximity. It wouldn’t make much sense if you visited a webpage, found the search bar at the top of the page, but then found the filters bar all the way at the bottom of the page.
The site has its main navigation links and the top of the page alongside the search bar. This is an example of proximity on a webpage. Image courtesy of Unsplash.
Common fate is an interesting principle to apply to UX design. A simple example of this would be a web page that has text at the center of the page and ads on the left and right sides of the page. Our brains are able to understand where the text in the center starts and stops as well as where it can and can’t go on the page. We know that the text will not trail off into the section where the ads are because we see the three sections and just that, three separate sections comprising different things from one another.
The left and right are ads and the middle is text. You can use this strategy to separate categories of information on a single page. Netflix’s home screen is a great example of this.
The principle of symmetry and order can be used when creating a layout for a webpage or logo. Many designs don’t stray too far off from traditional shapes since abstract shapes are harder to understand at first glance. When it comes to webpage design, it’s best not to have too many shapes overlapping each other since this can be confusing and distracting to the user. Try to keep the page as clean and orderly as possible.
An image like this might look cool but it goes against the Principle of Symmetry and Order. Image courtesy of Unsplash.
The Gestalt Principles of design are an invaluable tool for UX designers. They provide designers with useful guidelines to follow during the creation process. Without these principles, we would very likely return to the wild west days of the internet, where webpages feature bright purple backgrounds with blindingly white text on the top. The reality is that many UX programs incorporate these principles into their designs because they are proven to work. I guess that’s what happens when you base your designs on fundamental elements of human psychology.
More on Machine Learning-- What's New In Facebook AI Research In Pittsburgh (and Why You Should Care) - uxax
