Strengthening behavioral cues in UX web design with Gestalt principles

Default avatar.
August 01, 2011

Step with me, if you will, into my humble DeLorean, and travel back in history to that time you fell asleep in your design theory course. You didn’t need Gestalt theories, you thought. You already knew how to make a killer logo. You had more important things to do, like daydream about becoming Sagmeisters next protégée. I hate to break it to you, but those fundamentals of perceptive organization go way beyond just making a pretty picture. In fact, they are the keystones of the cognitive-emotional-behavioral process, and understanding their practical application enables us to engineer more powerful user experiences.

25-second history of Gestalt psychology

The field of Gestalt Psychology aims to explain how the mind perceives and organizes visual, auditory and somatosensory stimuli. As web designers and user experience (UX) professionals, you will find the research of Gestalt Psychology to be an invaluable tool as you go about optimizing not only your product’s usability but also its engagement. Introduced around the 1910s, it is credited to the work of psychologists Max Wertheimer, Kurt Koffka and Wolfgang Köhler. Gestalt, German for form,” gives us insight into how to orchestrate user experiences by exploring the relationship between a given stimulus and the cognitive response of the user. The Cognitive-Emotional-Behavioral Response Relationship For example: The Cognitive-Emotional-Behavioral Response Relationship via Monty Python Wertheimer’s theory states that a person sees the effect of the experience as a whole, as opposed to the accumulation of the individual parts of the experience. It basically boils down to this: all of reality is experienced and organized perceptually in the simplest and most stable manner possible.

Intro to emotional grouping

Gestalt’s Principles of Perceptive Grouping
  • Law of Proximity
    Objects near each other tend to be grouped together.
  • Law of Similarity
    Similar items tend to be grouped together.
  • Law of Closure
    Objects grouped together are seen as a whole.
  • Law of Continuity
    Lines are seen as following the smoothest path.
  • Law of Common Region
    Items in similar areas tend to be grouped together.
  • Law of Connectedness
    Items that are connected are seen as groups.

Gestalt’s principles of grouping, also referred to as the Laws of Perceptual Organization, are the most widely known theories of Gestalt within the design community. By understanding and implementing these principles, you can create designs whose aesthetic appeal elicits a positive cognitive response. The true value of these theories, however, lies in what they can contribute to the entire cognitive-emotional-behavioral process. By tapping the mind’s desire to group objects together in order to make sense of what it perceives, we are able to introduce emotional elements in our designs. For instance, three bunny icons would hardly have an emotional effect on the user, unless it elicits disgust at seeing so many generic Photoshop vector bunnies in one article: A proximity grouping of bunny icons But pull a Velveteen Rabbit, and suddenly you’re heading into joy-gasm territory: A proximity grouping of real bunnies Finally, we’ll throw in some angst to mix it up a bit. Oh noes! A proximity grouping of bunnies in danger
(Images: wolf, bunny) Applying these theories enables you to strengthen behavioral cues in engagement design and to increase your conversions, strengthen brand engagement, achieve world domination or whatever else your goal may be. Save the bunnies in danger action button

Strengthen behavioral cues with emotional engagement via Gestalt

By cognitively grouping emotional triggers with behavioral triggers or with calls to action, you can strengthen the legitimacy of the request and persuade the user into taking the next step. This creates higher conversions for things like email sign-ups and purchases: steps in which users invest something of themselves in the relationship with the platform, as opposed to simple click-troughs or navigation-based behavior. ASPCA’s Joplin Tornado Facebook Campaign Putting these concepts into practice, the ASPCA’s Joplin Tornado Facebook campaign takes the sad eyes of a cat that is identified as a tornado victim and overlays a large play button. This taps into the Proximity principle by creating an emotionally compelling call to action. Instead of simply embedding a YouTube video, the designers created this banner as a link to the page with the video in order to have more control over what is presented to the user. While keeping the banner consistent with the dimensions of video players across the web and overlaying a play button (thus exploiting the Similarity principle), they are able to create a compelling call to action. For comparison, the simple embedding of a YouTube video on Tim Ferriss’ blog lacks the engagement that we see with the ASPCA’s custom request to play its video. Tim Ferriss Blog Video

Emotional contagion in web design

So, how does it work? Why are some visual images so compelling, while others are not? Strong visual imagery and emotionally engaging text help to create emotional contagion” with the user. Emotional contagion is a psychological phenomenon that basically boils down to this: emotions are contagious. In other words, the kitten up there just infected you with a case of the mean blues. You can almost hear it thinking, Take me home. Love me. Become my paparazzi, and create gratuitous lolcat memes from my happy times.” Even if you aren’t a cat person, it would be hard not to feel some sort of sympathy for its plight. The ASPCA knows the power of sad animal eyes; it relies on the imagery time and time again in its campaigns. The example above uses a photograph, but illustrations and logos can also help to create emotional states in users. An example of this is LessAccountings home page (as suggested by @JbirdDesign). Less Accounting home page The page visually aligns its partnership branding (to gain credibility) with its calls to action and other behavioral cues, as a way to build trust. By keeping the partner logos the same size and shape (Similarity Principle) and positioning them within a perimeter (Closure Principle), the designers induce the user to perceive them as being one unit, despite their taking up the width of the page. Using the Connectedness Principle, the designers visually link the logos to the central Bookkeeping should be easy” box, where the Start with a free trial” button is the focal point. Financial institutions spend a lot of money associating their brand with trustworthiness, as in Trust us with your financial deposits.” This can be achieved with co-op, associate or press branding as well. News media also position their brands as being trusted information sources. Far from opening a can of worms about whether any of these institutions really can be trusted, we’re just acknowledging that trust is a viable emotion in their branding strategies. Other brands can in turn tap the emotional engagement of one brand to increase the effectiveness of their own strategies. The end. No flame wars in the comments, people. Another example is MailChimps newsletter sign-up request, below. Faced with logos of credible industry authorities, users enter into a relationship with the platform at a higher level of trust, whether by creating an account or signing up for the newsletter. MailChimp’s Newsletter Call for Action When the risk is higher, as with social security and credit card numbers, the level of credibility aligned with the action should be, too. When a brand is not inherently credible enough in name alone, as Amazon is, it will usually rely on logos and trust seals, such as those for the Better Business Bureau and PCI compliance, in order to increase consumer confidence.

In a nutshell

By understanding the perceptive organization involved in the cognitive process, we can develop stronger strategies for emotional and behavioral triggers in our user experiences. 

  • Coupling emotional and behavioral triggers in some form of cognitive grouping — whether by proximity, similarity or something else — strengthens the motivation to act on the behavioral cue.
  • Industry standards aren’t necessarily the most emotionally engaging, as seen in the YouTube embedding comparison above. Learn to curate your experiences, instead of subscribing to a standard.
  • Gestalt principles can help UX professionals leverage trust to increase sales-based conversions.
How are you using emotional and behavioral grouping in your user experiences? Have you come across a great example in your surfing? Comments, comments! We want to know, please!

Shell Grenier

Written exclusively for WDD by Shell Grenier. Shell is a compulsive adventurer, gardener, sender of happies and seeker of swoon. She writes and speaks on emotional engagement and technology for various international media and conferences. She enjoys meeting new people on Twitter, so go meet her @shellgreenier.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…