Botox and the Art of Designing Empathy

We all know that the internet has its share of trolls – and likely always will.

But in the early days of SitePoint, we noticed an interesting trend: Articles with author faces beside them were almost always treated more fairly in the comments thread than those without.

We found writers using caricatures or cartoon avatars faired better than those with nothing. Writers using logos or non-facial graphics were much more likely to attract aggressive and impolite feedback.

That didn’t mean photographic avatars completely shielded the author from criticism – nor would you want it to. But criticism tended to be much more even-handed and constructive.

What’s happening here?

In a 2011 study for Social Psychological & Personality Science Journal, test subjects were asked to view a series of faces and then describe what emotion they saw in each face. The idea was to test their ability to imagine what another human is feeling – the characteristic we call empathy.

Although results naturally varied from person to person, most people showed good skill at correctly identifying the facial expression they saw.

The interesting part came when analyzing the video recording of each user test. High-speed cameras revealed that, before answering, each test user momentarily copied the expression they saw in the photo.

These so-called ‘microexpressions‘ were completely involuntary, unconscious and often barely perceptible to the naked eye, but seemed to help the subject make sense of what they were seeing.

The obvious question: what would happen if we blocked these microexpressions?

Botox is Only Skin Deep

A few months later, the same test subjects were treated with botox before sitting another round of testing. As you might know, botox works by paralyzing the small facial muscles around the eyes and mouth. This reduced the appearance of wrinkles but also works to block micro-expressions.

Amazingly, these ‘botoxed’ test subjects were significantly less able to interpret the faces they were seeing. Some kind of feedback loop was broken and their ability to empathize declined.

It seems that when we physically mimic a facial expression, it triggers a memory of what that emotion feels like. You could say, we get into their mind by getting into their face.

Building Empathy into our UIs

When we associate words with a nearby face, the ‘internal voice’ we hear when we read is changed. I’ve animated the example below to show this in action. This sublime Dorothy Parker quote is presented:

1. as pure text
2. beside a vibrant, glowing Parker
3. beside a sad, almost broken Parker

You can see that the same quote feels quite different each time the imagery alters. Something changes in our head.

We all use lots of faces in our design work but I think there are two places where engaging user empathy is particularly useful.

1.  Any Kind of Editorial Text: Blogs, reviews, forums, comment threads, etc. Include a face any time you present ideas that you’d like your users to give attention and respect to. Obviously, a relaxed, confident smiling author is more likely to trigger relaxed, smiling, confident readers.
2. Testimonials and Quotes: Testimonials are all about social proof. The more we can help a user with the testimonial author, the more weight they’ll place in the words.

The Catch

Everyone is a product of the world they grew up in and brings their own set of preferences and prejudices. It’s an imprecise science, but – if you have choice – displaying content from similar users to the reader (age, gender, and locality) is likely to get a more empathetic response.

And, of course, lay off botoxing your users (if you can).

Originally published in the SitePoint Design Newsletter.

Frequently Asked Questions (FAQs) about Botox and Empathic Design