Alex Walker
Apr 14, 2016 · 4 min read
Nawww…

Humans love to look at eyes. We can’t help it.

Tests have shown that from birth babies will seek out faces that engage in mutual gaze. It’s our own ‘built-in eye-reading software’ and it only becomes more and more sensitive as we grow older.

As designers, we tap into that ability when we use faces in our designs. The faces might be laughing and content, or serious and contemplative, but typically they’ll be gazing out to meet the reader’s eye.

Which is good, right?

Sometimes. But not always

Look into my eyes…

While there’s is something deeply powerful about looking into the eyes of another human, it does create a big potential design problem — our eyes tend to stay anchored to any eyes that return our gaze.

National Geographic’s Afghan Girl

The famous National Geographic ‘Afghan Girl’ is perhaps the purest example you’ll ever see of this. Most of us find it physically difficult to stop our eye returning to hers. You’re probably battling that gravitational pull as you read this, right?

And that’s what makes this photo — by itself — such an astonishingly powerful piece of work.

But it becomes an issue when you need your users to notice other important page elements — text, navigation, subscription boxes, purchase buttons etc. In short, photographs with strong eye contact can slow down and even paralyze our users when we are trying to move them forward.

You could think of it as a kind of ‘visual quicksand’.

Luckily, we can use our designer superpowers to harness their ‘eye-reading software’ another way.

What Are You Looking At?

It turns out that humans are also very good at noticing what other people are looking at. We’re naturally nosey creatures and want to know what others find interesting. We track their glance.

Breakfast at Tiffany’s Poster: Try NOT following Audrey’s eyes..

In this all-time classic movie poster from ‘Breakfast at Tiffany’s’, a coquettish Audrey Hepburn is glancing to her left (as is her cat). We almost can’t help following her eyes to her name, reading down to the title text, before automatically following her long cigarette extender back to her face.

And then you probably starting the track again.

But what happens if we make a tiny edit to the position of here eyes? Let’s see.

Audrey is looking at ME! Who cares about that dumb text now??

For such a trivial change — no more than a handful of pixels — it changes the dynamic of the poster dramatically.

Audrey isn’t interested in the text anymore, so it becomes instantly less interesting to us too. Sure, we can read it if we try, but our eye no longer glides easily around the whole composition. Instead, we spend much more time anchored on Audrey.

This can have a big effect on how users interact with our interfaces.

Putting It Into Practice

Good UI design is often about drawing attention to just the right thing at just the right time. I think this ‘eye line’ technique is under-utilized on the web, but there are a few good examples out there.

I particularly love the way t-shirt maker Real Thread uses this idea.

real thread: Where do they want us to look?

The Real Thread website takes a fantastically bold, no-nonsense sales approach. Rather than trying to sell you on the idea of getting t-shirts made, they jump the conversation straight to ‘How many do you want?’ This page is 95% focused on a single task — getting you to enter a number to complete the sentence ‘I need X shirts’.

In the background, we see a happy, tattooed, t-shirt-making hipster setting the scene. And where is he looking?

  • Out at us?
  • Around the room?

He’s looking DIRECTLY at the blinking cursor — re-inforcing the only thing they want you to do.

It’s a simple layout but I suspect this page design is killing it.

Be aware: this ‘eye-line’ technique will usually take more work to implement as you will need to be planning for it from the start, rather than sourcing images towards the end of the project.

You might get lucky and find just the right stock photo, but it’s more likely that you’ll need to take original photos to get the eye-line angles you want. That shouldn’t be a big deal — most of us can source a decent camera at a pinch.

Used wisely, this is powerful design magic. Try it in your A/B testing.

Originally published in the SitePoint Design Newsletter.

SitePoint

Sharing our passion for building incredible internet things.

Alex Walker

Written by

Pixel puncher, pusher and prodder @SitePointDotCom

SitePoint

SitePoint

Sharing our passion for building incredible internet things.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade