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.
Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers