“You look where they look”: research on design

Related posts

Sign up for updates

More than 580 union leaders, campaigners and organisers subscribe to my email newsletter.

People are hard wired to look at other people’s faces, and to look where other people look. This principle is an important one to keep in mind when you are designing your websites, leaflets and posters.

UseableWorld.com.au has a very interesting post about how this phenomenon actually works.

Here’s a little experiment with 106 people that I’ve demonstrated the Tobii T60 eye tracker to over the last month or so.

The image below is a sample gaze path of one person looking at a baby in a product ad:

Eye-tracker gaze path on baby's face

The blobs are where the person has fixated on the image. You’ll notice the person starts looking in the middle of the page (we planned it that way by using a fixation cross between each stimuli)  and then goes straight to the baby face.  He focusses on it a few times then moves his attention over to the text by his 7th fixation.

And here’s an image of that same baby looking up and toward the main content heading. Notice the person fixates less on the baby’s face and then he quickly looks straight over to the text at the 5th fixation.

Eye tracker gaze pathof baby looking at text

One person you say?

Well, here’s a combined heat map of 106 people looking at the first image. The redder the spot, the more time people looked at it.

Eye tracker heat map of 106 people looking at a baby ad

There is heaps of focus on the baby’s face and relatively little on the text.

Here’s the same 106 people looking at the second image for  the same amount of time (The images were shown in a to everyone in a random order on Tobii Studio software running with a Tobii T60 eye tracker).

Eye tracker heat map of 106 people looking at a baby ad

Notice how many more people are actually reading the text that the baby is looking at in the above image? Not to mention the increased attention on the brand!

Two key elements to take away from this research are:

  1. The ad with the baby looking at the ad copy resulted in more people actually reading the text.
  2. The text elements were brief and to the point.

Compare and contrast these two landing pages by 37 Signals, an American software company that regularly A/B tests its signup pages.

The original landing page was very text heavy — some would say over designed — whereas the version on the right has much less text and is less crowded (not to mention a nice photo of a happy customer). As a result, the second version has a significantly higher conversion rate. Unfortunately, 37 Signals has not tested a version of their landing page with the person looking at the product text. It is also worth repeating what 37 Signals writes:

What works for us may not work for you. Please do your own testing.

So next time your union or progressive organisation is thinking about designing an important leaflet or poster, consider using a photo of a member looking at your main headline — and if you’re designing a website, I strongly recommend trying to A/B test your signup page.

[button link=”https://alexwhite.org/2011/10/the-four-must-haves-for-campaign-websites/”%5DRead: four “must haves” for campaign websites[/button]