Strengthening behavioral cues in UX web design with Gestalt principles
![thumb](https://www.webdesignerdepot.com/cdn-origin/uploads/2011/06/thumb22.jpg)
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](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/emotional_response.png)
![The Cognitive-Emotional-Behavioral Response Relationship via Monty Python](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/emotional_responseex.png)
Intro to emotional grouping
![Gestalt’s Principles of Perceptive Grouping](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/gestaltens.jpg)
- 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.
![A proximity grouping of bunny icons](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/bunny1.jpg)
![A proximity grouping of real bunnies](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/bunny2.jpg)
![A proximity grouping of bunnies in danger](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/bunny3.jpg)
(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](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/bunny4.jpg)
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](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/aspca.jpg)
![Tim Ferriss Blog Video](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/ferriss.jpg)
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 LessAccounting’s home page (as suggested by @JbirdDesign).![Less Accounting home page](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/lessaccounting.jpg)
![MailChimp’s Newsletter Call for Action](https://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/mailchimp.jpg)
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.
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, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…