Gestalt Principles in UI design
Communication plays a central role in both user interface and user experience design. Understanding how our users perceive and interpret our work is key. The Gestalt Principles can help us do so. Developed by Gestalt psychologists, the Gestalt Principles describe how we interpret and process complex stimuli around us. They state that our minds have a tendency to group and organize elements and do so in predictable ways. The ways in which our mind does so are summarized in the Gestalt Principles.
During the 1920s, German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler studied human perception and chaos. They were invested in understanding how our mind goes about making sense of our chaotic surroundings. Through observation, Wertheimer, Koffka and Kohler theorized that we tend to group elements, recognize patterns, and simplify complex imagery. But we don’t do so randomly—our efforts tend to fall under certain principles. They called these principles the Gestalt Principles. Since their conception, the Gestalt Principles have been adopted by designers of all disciplines. UI and UX are no exception.
Proximity refers to how close elements are to one another. The strongest proximity relationships are those between overlapping subjects, but just grouping objects into a single area can also have a strong proximity effect. The opposite is also true, of course. By putting space between elements, you can add separation even when their other characteristics are the same. In UX design, proximity is most often used in order to get users to group certain things together without the use of things like hard borders. By putting like things closer together, with space in between each group, the viewer will immediately pick up on the organization and structure we want them to perceive.
The law of continuity posits that the human eye will follow the smoothest path when viewing lines, regardless of how the lines were actually drawn. This continuation can be a valuable tool when the goal is to guide a visitor's eye in a certain direction. They will follow the simplest path on the page, so make sure the most vital parts they should see fall within that path. Since the eye naturally follows a line, placing items in a series in a line will naturally draw the eye from one item to the next. Horizontal sliders are one such example, as are related product listings on sites like Amazon.
In its simplest form, the principle of closure allows our eye to follow something like a dotted line to its end. But more complex applications are often seen in logos, like that for the World Wildlife Fund. Closure is quite often used in logo design, with other examples including those for the USA Network, NBC, Sun Microsystems, and Adobe. Another very important example of closure at work in UX and UI design is when we show a partial image fading off the user's screen in order to show them that there is more to be found if they swipe left or right. If only full images are shown, the brain doesn't immediately interpret that there might be more to be seen, and therefore our user is less likely to scroll since closure is already apparent.
The figure principle is similar to the closure principle in that it takes advantage of the way the brain processes negative space. We've seen examples of this principle floating around in memes on social media, or as part of logos like FedEx. Our brain will distinguish between the objects it considers to be in the foreground of an image and the background. In general terms, our brain will interpret the larger area of an image as the ground and the smaller as the figure. We can see that lighter and darker colors can influence what is viewed as the figure and what is viewed as the ground. The figure principle can be very handy when product designers want to highlight a focal point, particularly when it is active or in use.
The law of symmetry and order is also known as prägnanz, the German word for "good figure." What this principle says is that our brain will perceive ambiguous shapes in as simple a manner as possible. For example, a monochrome version of the Olympic logo is seen as a series of overlapping circles rather than a collection of curved lines.