Gestalt Principles: Design Intuitive Interfaces | Course Preview

For some reason there are like a thousand infographics out there sort of describing a bunch of the Gestalt principles and the image everyone chooses for explaining figure ground is this, it's called the Rubin Vase Illusion. Have you seen it before? Honestly, it's a terrible example of figure ground for designers because it literally shows you what not to do. There are basically two states of figure ground relationships, stable and unstable. Stable is when people can easily pick out the figure or the object that's perceived as being in front or on top from the ground or background. Most figure ground relationships in the world around us are very stable. Just look away from the screen for a moment at the world around you. There's no question in my mind what's in front of what. Then there's unstable, which is when people can't quite tell the difference between the figure and the ground. This is pretty rare in the real world because there are so many natural cues like shadows and distance that tell you what's in front and what's in back, but it becomes a much bigger issue in contrived environments where everything is artificially created and one-dimensional, like pixels on a screen like the Rubin Vase. Here's an example from a movie poster I recently saw. What would you say? Is it more stable or unstable? It's pretty unstable, which swan is in front of the other. It's tough to decide. Instability can be fun for posters or optical illusions, but not for everyday tasks. In 99% of cases, designers need to create figure ground stability to help users understand interfaces. Let's talk about three of the 10 factors that increase the stability of figure ground relationships. Number one, small area. The smaller an object is compared to the background, the more likely it is to be seen as the figure. Our brains tend to perceive smaller elements as objects sitting on top of larger surfaces, so smaller things tend to pop out. This means that increasing the amount of white space around objects on the screen increases the likelihood that users will see them as objects to focus on and interact with. Number two, surroundedness. The more completely a figure is enclosed within the surrounding ground, the more stable its figural status becomes. If a shape is fully nestled within its background, it's a clearer figure. This is in contrast to instances when the edge of the figure hangs over ground reducing stability. This means that objects on the screen that go off the edge of the page or things that overlap with other page elements are a bit less likely to be seen as figures compared to page elements completely surrounded by a background. Number three, convexity an odd word. People tend to see the convex or outwardly curved sides of a border as belonging to the figure, not the ground. They see the concave or inwardly curved edges as belonging to the ground. When the border between two objects isn't straight, it means that automatically one side of the border is convex and the other is concave. So this means that page elements like cards, buttons, or anything else we want to stand out as figures on the page, should have straight or convex borders to strengthen their figural status. Most of what you'll be designing as a figure will naturally have convex edges, so this isn't something to worry about too much, but as a general principle round out, don't round in. If you want to take one of the deepest dives out there into how Gestalt principles apply to UX design with tons of screenshots and practical applications, come take our self-paced video course on Gestalt Psychology. You can complete it at your own pace whenever you have time. Rewatch the content as much as you need and do all the included practices to get some experience applying what you learn.