Psychology driven UX: Faces and the baby-face bias

Emotional Web Design, Charity Water

This post is one chapter of my upcoming ebook “Psychology-First UX”. The ebook will focus on psychological principles that maximize the emotion in your design and increase user engagement. We’ll start with the basics – Leveraging faces and the baby-face bias to make your website’s experience more enjoyable.
[divider type=”thin” spacing=”10″]

Emotional Design makes an experience more enjoyable

Human faces

We’re social creatures hardwired to sense emotion in the faces of others. This is a survival trait that helps us build relationships with people we can trust with our lives.

Also, we have a template of the human face ingrained in our subconscious. Simply put, this template is of a face that’s perfectly symmetrical. While, no face is perfectly symmetrical in reality, we still use this as our barometer for beauty. We find those with more symmetrical faces as more attractive and trustworthy.

We can leverage these insights to make our apps more:

1. Trustworthy

Who doesn’t love being smiled at? Including faces of smiling and laughing people on your website will make the experience immediately more friendlier. Friendliness builds trust.

Charity: water does this really well on their homepage (see Figure 1 below). When I landed on their homepage the first time, I couldn’t resist from smiling. I connected with the kids, and I was compelled to learn more about the organization’s cause. The photo still makes me smile. This post’s featured photo is also from Charity Water (Thank you Charity Water!).

Your about page is a great place for people photography too! Including photos of your team will make the whole experience a lot more personable. Shake Law does this really well on their about page (see Figure 2 below). The actual page is worth checking out, as upon hovering on a thumbnail, a different image is shown. This makes the experience a lot more personable. Also, Shake Law uses a mascot (Oscar, the dog) to add icing on the cake (more about mascots a bit later in the post).

[two_first]

Figure 1 – Charity Water

Emotional Web Page Design, Charity Water
Charity Water’s homepage captivates immediately on a user’s arrival, as faces of beautiful children are front and center

[/two_first][two_second]

Figure 2 – Shake Law

Emotional Web Page Design, Shake Law's About Page
Shake Law adds members of each of it’s team members to make the experience more personable.

[/two_second]

2. Engaging

Our natural magnetism to human faces can be used as a way to guide an audience through a product story. You can preface, couple or follow your product messaging with photographs of others. This will keep the experience lively and interesting for your readers. Spotify does this beautifully on their homepage by including the photographs within a parallax feature.

3. Relatable

When we recognize others who are like us, we feel more comfortable in our surroundings. Make your audience feel more at home by including photos of people like them. A great example of this is SoundCloud’s homepage (see Figure 3 below). SoundCloud, being a website for musicians, showcases musicians on their homepage. Simple and super effective.

Emotional Web Page Design, SoundCloud Homepage
SoundCloud’s homepage makes visitors feel at home by including photos of people like them.

[divider type=”thin” spacing=”10″]

Baby-face Bias

Babies are adorable. They’re innocent, playful and trustworthy.

Well, the baby-face bias is the phenomena that those with baby-like features – large eyes, small noses, high foreheads and short chins – are perceived as innocent, friendly and trustworthy. Read more on the science of the phenomena here.

We see the baby-face bias used in design ALL the time, most frequently with mascots. Mascots, while they aren’t human most of the time, they embody the same characteristics as babies (large eyes, small noses, high foreheads). Many successful brands use mascots as a key branding element. Well, mascots are really effective in web page design too. They serve several key functions, including:
[well]

  1. Complementing your content
  2. Reminding users of the brand’s personality
  3. Influencing the mood of the experience

[/well]
While creating a mascot is more of an undertaking than adding photos into your webpage, it will absolutely pay off. If you’re not up to create one yourself, you’d be surprised at how cheap you can have one done (try task-delegation sites such as fiverr.com, taskrabbit.com).

To effectively use a mascot on your webpages, it’s critical that you put your content first. The mascot should never get in the way of content. (Remember the dreaded Microsoft clippy? That’s an extreme example of a mascot that was intrusive.)

Instead, the mascot should supplement your content. SEO Moz does this really well on their 404 page (see Figure 4 below). By doing this, they turn a potentially annoying situation for the user (where a page they’re looking for isn’t found) and make it light-hearted and humorous. Very effective.
[two_first]

Figure 4 – SEO Moz

Emotional Web Page Design, SEO Moz's 404 page
SEO Moz’s uses Roger on their 404 page to add humor and personality.

[/two_first]

[two_second]

Other potential ways to effectively use a mascot in your web page design:

[well]

  1. Include the mascot in a fixed location in the header, and have him greet the user (via a text-block), or provide the user with random tips on how to best engage with your site. Or even, have him say things at random to keep the mood light-hearted and fun. (Examples: “Hello there!”, “It’s nice and sunny today. At least where I am!”, “What’s your name? My name’s Mr. Awesome!”)
  2. When the user successfully completes a registration form, include the mascot as part of the success messaging (Example: “Woohoo! Go you!)”
  3. When the user misses a field, show an image of the mascot with corresponding copy (Example: “Whoops! You missed your email address”).

[/well]
[/two_second]
For inspiration purposes, I have included pics of some of my favorite mascots below: [four_first]

Emotional Web Page Design, Geico Gecko
Geico’s Gecko

[/four_first] [four_second]

Emotional Web Page Design, Hoot Suite example
Hoot Suite’s “Owly”

[/four_second] [four_third]

Emotional Web Page Design, Mail Chimp
MailChimp’s Freddie

[/four_third] [four_fourth]

Emotional Web Page Design, SEO Moz
Moz’s Roger

[/four_fourth]

The Wall Street Journal published a whole article just showcasing tech firms and their mascots.

What are your thoughts on this? Have you come across great examples of human photographs on a webpage? How about great uses of mascots within a web page’s design? Do share!

Author: Husam

Husam Machlovi has pitched to, and developed relationships with, top Fortune 100 companies. He's designed digital experiences that have generated millions in revenue. At his company, With Pulp, he leads Product Strategy & Design where he crafts product stories and interfaces that people love.

Leave a Reply

Your email address will not be published. Required fields are marked *