The Gestalt of three subscription services

Photo by amirali mirhashemian on Unsplash

In my past life, about 8 years ago, I was a mental health counselor for a non-profit in the Seattle area. The pay was low, but the karma points were high. I spoke with many different people from all walks of life and one thing I never tired of was the intricacies of the human mind. People and the way they think are fascinating to me and the reason I am drawn to the user experience field. How can we take into account the intricacies of the human mind when we design? How does memory and Gestalt theory come into play? Why will I talk about milk and cookies?

Photo by Fredy Jacob on Unsplash

Memory

Memory can be thought of as having two separate functions. One function is the long-term storage of our perceptions that can be well-worn by repeated exposure to similar stimuli. For instance, someone who walks past a bakery might remember helping their mother make cookies when they were 5-years-old. This fond memory uses the same well-worn neural pathways as the initial memory creation. Long-term memory (LTM) guides our daily behaviors and in some ways determines who we are and who we think we are. However, LTM is error prone and can be altered from what actually happened upon every recollection. In the case of the person’s memory of making cookies with their mother, it could be that they actually made cookies with their father or that their role was taster and not baker.

The other function of memory is the current focus of attention, known as short-term memory (STM). It is what we are currently perceiving and processing. Going back to the person walking past the bakery, STM would focus on the smells, sights, and general bustle of the surroundings. However, STM is very low in capacity, maxing out at 4 items, more or less. Furthermore STM is volatile, meaning that people are prone to distraction and forgetting. This is apparent when we open the fridge, determined to retrieve something, simply to forget why we are even there or being distracted by the smells of fresh baked goods and forgetting we have a meeting in 5 minutes.

Memory is a tricky thing — we forget, misremember, or become distracted. How we design user experiences and interfaces must take people’s limited memory into account, as well as their past experiences and long-term memory. As designers, we have tools at our disposal and the Gestalt theory of perception — that the whole is greater than the sum of its parts — to design products for the human mind and help us remember why we opened the fridge.

Photo by Callum Wale on Unsplash

Gestalt

When it comes to perception, Gestalt states that human minds have a desire to perceive any visual experience in its most simple and fully-formed way. We do not view items as lines or discrete shapes, but as combined and wholistic. There are a few principles of Gestalt that can help guide design.

• Proximity: Distance of objects from one another. Closer objects are grouped.
• Similarity: Objects that appear similar will be grouped.
• Continuity: A bias towards perceiving shapes as whole forms.
• Closure: A bias towards closing open shapes to perceive as a whole.
• Symmetry: Perception that decreases complexity to the simplest form.
• Figure-Ground: The mind separates layered items into figure (focus of attention) and ground.
• Common Fate: Objects moving together are perceived as being related.

So how can we utilize both memory and the principles of Gestalt to design user experiences and interfaces that people enjoy? Let’s take a look at three different subscription services to see how they accomplish this task.

The Gestalt of Hulu

I don’t have cable TV at my house, but I manage through my personal Gestalt of streaming services, Hulu being one. When you first land on the homepage, you can immediately see Gestalt principles in action. The hero banner plays the part of ground in figure-ground, whereas the “Start Your Free Trial” is the figure. Proximity also plays a role in grouping the information located on the hero banner together as the unique value proposition (UVP) and other enticing information.

Further down the page, a user can see available TV shows, all grouped together. This grouping below the hero banner uses proximity as well as similarity. It is apparent Hulu would like the user to understand all these shows are interesting and “go together.” Hulu also gives each square the same feel, with the text in the upper left, which further creates the Gestalt principle of similarity.

When scrolling further down, Hulu excellently executes the Figure-ground principle with the white boxes on the slightly darker ground. This helps the user focus on the information provided. Proximity is used by grouping the details of each plan under the pricing. This also lightens the memory load for users as they have available information in one place to view before they click a button to subscribe. That’s like opening the fridge and seeing a sign that says “You wanted milk. Here it is.” Thank you for reminding me, Sign!

Gestalt of Stitch Fix

Hello, new wardrobe! Stitch Fix is a fun way to get new clothes without having to actually shop, pick things out, or make decisions. It’s great for busy people who like surprises. Stitch Fix does a lot of great things on their homepage when considering memory and Gestalt principles. The UX/UI designers of Stitch Fix have created a center “box” around the sign-up information by the placement of the surrounding content. Looking closely, no lines or other visual information is presented — it is simply the Gestalt principle of closure. Our minds want to create whole shapes and this is done beautifully on this home page.

Proximity is also used when displaying the sign-up info in the middle of the box. And, just as in Hulu, Stitch Fix uses the figure-ground principle to highlight their clothing options.

Scrolling down, we see more examples of figure-ground by Stitch Fix adding the shadow around the “Ready to Sign Up?” button. Stitch Fix also helps the user by scrolling a “Get Started” button down with you, alleviating some of the burden on the user to remember where that button was. That’s like a sign that followed you around all day that reminded you to buy cookies to go with that milk. Perhaps you should stop into that bakery?

Gestalt of Spotify

I listen to music every day on Spotify. I love all their unique playlists and I’ve discovered plenty of new artists I never would have otherwise. Spotify’s UI uses many of the same principles of Gestalt as Hulu and Stitch Fix. When viewing the homepage layout, the music shown on the right is perceived as both 6 distinct squares and 1 larger rectangle, exemplifying symmetry when viewing it as a singular rectangle. The green button capitalizes on the notion of figure-ground. It is also apparent that proximity is in play when you perceive the information above the button as belonging with the button.

Further down, proximity helps group information under different headings without any actual boxes or lines to separate it. Figure-ground play a role in highlighting how the user can “Make the most of Spotify.” Users can also rest assured that they can get to their profile and other information as this content scrolls with you. What goes better with milk and cookies than some mellow music, thanks to Spotify?

The Whole is Greater

Overall, we can see that each of these subscription services sites utilize many of the same Gestalt principles of figure-ground, proximity, similarity, symmetry, and closure. They do so in a way that is pleasing and also capitalizes on the Gestalt notion of the whole being greater than the sun of its parts. Items are grouped appropriately. Shapes are created by surrounding content. Important information is highlighted as the figure of figure-ground.

Hulu, Stitch Fix, and Spotify also alleviate some burden on the users by scrolling user-specific information and sign-up possibilities. They all utilize similar navigation and familiar concepts to users so that they may pull from their previous histories and long-term memories what to do. It’s like buying cookies at the bakery, opening up the fridge, a sign flashing you wanted milk, and sitting down to listen to some mellow tunes while being reminded of a fond childhood memory.

Now I want cookies.