How to Catch the Eye of Users (and Other Fiendish Traps)

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… Let me explain.

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 like to stay anchored to any eyes that return our gaze.

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.

Let’s see how it works in a layout.

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

And then you probably start the track again!

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

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, 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.

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 really 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 shoehorning in 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 shoot original photos to get the eye-line angles you want. In 2016, 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.