Using eye tracking to enhance sales and usability

by simonday.com

Eye tracking is a tool which tracks your eye movements as you navigate through pages. It has been around for a number of years and the usefulness of this knowledge is incredible. Let me give you a good example.

In this case look how many people looked at the big red “SALE” banner in the top images compared to the green banner below. Not a single person looked at the red sale banner! That alone is interesting but now look at how this one simple banner change affected the top navigation – it’s completly altered the way people navigate the site!

Let me say that last bit again: By changing a BANNER Virgin radically altered user NAVIGATION. I bet no-one saw that coming, I know I didn’t when I first started using this knowledge. This is why testing is so important. You’re sat there tinkering with one part of the page when the change actually alters the way the user navigates your site. By understanding how eye-tracking works and looking at results you can start to understand how a visitor will journey through your site.

Combine this with the other tools and you can actually CONTROL the journey for the majority of people coming to the site.

Don’t believe me? Let’s try this:
I want you think your James Bond and you want to buy some lock picking tools from Devon Locks (who said this wouldn’t be cool!). Visit http://www.devonlocks.com/index2.html right now! Don’t look any further because if you do you will skew your results. Go now!

Ok, if you’re in the 86% of visitors I’ve targeted you pretty much did exactly this:
You skipped the header and yours eyes first saw the logo of the 2 men. You completely ignored all the header and focused straight on that 2 men logo. You still ignored the header and next looked at the big text “I need tools for”. You then looked, read and digested all 4 graphic links because you’re here to buy so that was always going to be where I focused your eyes.

If you were still in your “looking for tools” mode you probably read the H1 header text just below the 4 images but only 65% of you did. Again you probably read the sentence just below the header but you would have speed read it if you did. Now the cool part. Everywhere on the page you probably speed read EXCEPT for the first 3 bullets which you read in FULL. You may have read all 5 in full but in all honesty it was a little too much text and the top 3 are the only ones I really want people to see.

At that point you probably saw the YouTube logo but came back here. Everything below the YouTube logo is fluff to balance the page.

So hopefully you’re suitably impressed and want to know how I did it.
Headers – The only time people look at headers is when they want to know they are in the right place (logo), or they want to contact the site and are looking for a phone number of email address. Although I have text up there it is mainly for search engines. Virtually no-one looks at the header anymore for any length of time because all sites offer the same information so people associate headers with contacting and logos.

So because most of us ignore the header we start to read the page as we would a book – Top left to right. This is often called the “F” shape pattern. If you look at Devon Locks again you should be able to spot the “F” shape pattern in the design.

Content – Your eyes were first drawn to the gold 2 men because it’s pretty big, it’s unusual and because it is human shaped which we tend to respond more to images if they take on a human shape. The reason it’s there is to do exactly that; get your attention because I want your eyes exactly at the point to start your “F pattern” viewing. Immediately to the right of the men is some nice big text “I need tools for”. So now I’ve controlled where you start viewing and I’ve offered an instant solution to the question “where do I go to buy them”. I have nothing left on the page to confuse the visitor (like right hand content) so the only place to go now is down…exactly at the point I want you! The images in the four boxes are so sub-consciously whatever tool you came here for I have the 3 options straight in front of you plus a spare for any help questions you might have.

In case they need a little more help I have those bullets below. Why did you read the bullets but skimmed most other bits? Because you were always going to be 126% more likely to read the bullets because they are short, to the point and sub-consciously we don’t tend to skim bullets… 126% less likely. Even if you do read those bullets you can’t escape those big buttons ready to take you to the next level of the journey.

On this site I have a bounce rate of 14% on the home page and it goes down to 9% on other level 1’s. Now 14% is pretty much as low as I can go but I would be very surprised if many e-commerce sites could manage that kind of bounce rate. That’s what happens when the designer gets FULL control over the design!

So how do you utlise this tool? I’m afraid the answer is; not easily. Unless you work for a large company there is only one way. It isn’t as good as the real thing but it still helps: get as much online research as you possibly can. Get as many images of these results as possible.

As a poor mans eye tracking you could also get friends and family to visit sites whilst you stand beside them and let them point out what they are looking at and why. It isn’t fool-proof but it does help build a mental map in your mind of why users do certain things but more importantly it’s what they’re missing! Over time you can train your mind to view as the user would.