WEBSITES
Help visitors focus and reap the rewards
September 07, 2007

Don't waste money on expensive eye-tracking studies; instead, learn how to design your marketing site right the first time. NextStage's CRO explains.

A reader sent me a pointer to yet another "You're an Idiot if You Don't Use Eye-Tracking Data in Your Web Design" article and asked if I was going to respond to it, based on what I've written in the past.

I will be responding to it as time and space allows. I want to devote this column to something far more important than eye-tracking, which is focusing your website visitor's attention where you want it to go. With luck, this will demonstrate that eye-tracking should be used as the basis of web design sparingly.

After all, what's really more important: knowing where eyes are or getting eyes on what you want them to see? I'm going to show you a simple example of eye-tracking gone awry in this column. Use this information in web design and marketing and you'll see your numbers climb in no time. This column will also build off my last column, "Get the attention you're already paying for."

Lessons from playing cards
Take two decks of cards. Make sure the decks are exactly the same physical size, shape and thickness. Most importantly, make sure the backs of the cards have grossly distinct visual characteristics. The cards in this figure are an example. They're exactly the same size, shape and thickness. The only real difference is that the back of one card is blue and white; the other is red and white:

Now shuffle them three to four times. Get them nicely mixed.

Pick up the mixed decks in one hand, take the top card and put it on the tabletop. Keep your eyes on that card. Now, while making sure you keep your eyes on the card separate the cards into their two separate decks, red with red, blue with blue. Make note of how easy it is to do.

Now that you've separated the cards, shuffle them together again. Mix them up really well then take the shuffled deck in one hand.

This time we're going to do something different. Keep your eyes on the shuffled deck in your hand and separate the cards by their colors, red with red and blue with blue.

About 85 percent of the people on the planet find the second method much simpler to do than the first method. Yes, there are other ways to separate the two decks by color and we can use them to demonstrate other neuroscience concepts some other time.

This simple exercise has some very complex science behind it, and what's most important is that it's a demonstration of attentional focus and eye-tracking. The first method is a demonstration of how the thing that the eye is looking at will interfere with the brain-mind's ability to perform a task. The second exercise is a demonstration of the brain-mind ability to perform a task optimally by focusing the eye on that task.

Focusing attention on desired actions
Someone is looking at your web page and their eye is wondering all over the page. Oh, how useful that is. Not!

First, the more someone's eyes wander over your page beyond the first scan the more it's an indication that they're lost and can't find what they're looking for. Being lost and not finding what one is looking for leads to frustration. Frustration leads to a negative experience, leads to negative branding, leads to no repeat visitors, to decreasing sales to closing business.

Second, length of time on a page matched to lots of eye activity may mean visitors are very interested in the content. However, it's more likely another indication they're lost, this time directly attributable to poor design. The difference between interest in content versus poor design is determined by saccades, not eye-tracking so much as eye-stopping. This is another example of eye motion not being as important as where the eye stops and why.

Third, a lot of time spent on a page is excellent if that time is spent positively branding visitors. However, if that time is spent with the visitor in an escalating state of frustration what's occurring is negative branding. This is where visitors associate your product, brand, logo or company with painful experiences.

I've written previously about where to place things on a web page, what colors to use to focus attention and so on. The example in this column is something from the intersection of information design and neuroscience and deals with getting the eye to stop where you want it to stop, and then have it focus on what you want.

Simple differences based on lots of science
The reason the card shuffling exercise works the way it does -- and here's the take-away for web and information designers -- is because the first method places attention on the result of the task rather than the task itself.

The second method -- focusing your attention on the cards you need to separate -- places your cognitive resources on the task, not the result of the task.

The difference is simple and speaks to a peculiarity of the eye-brain-mind system. The first method taps into a neural mechanism (I won't call it a flaw because it's cognitively useful for other things) that most information designers aren't aware of.

This neural mechanism forces the mind to continually match what the eye sees against what the mind wants to see: some cards separated into two piles versus two completed separated card decks. This mechanism is useful for tasks that require gross motor movements over long periods of time in large physical locations: making gardens, growing crops, sculpting, body building, et cetera.

The second method is excellent at small motor movements over short periods of time in small physical locations because it allows the brain to guide the body towards an immediate goal. In this example, the cards neatly separated.

Looking at where the cards are suppose to go while using your hands to separate them causes the mind to send information to the brain that the brain knows is invalid. The brain knows the hand is holding the cards therefore the cards can't already be separated. The brain, therefore, sends the mind some contradictory information, "The cards aren't separated on the table yet, there's still in our hand."

People performing the first method often find themselves looking back at the cards in their hand during the exercise. People performing the second method rarely look where the cards are landing on the table because the brain has already instructed the neuro-muscular system just how far and where to place the cards during the deshuffling.

Hmm...what to do with the hands while focusing the attention rather than focusing the attention based on movement of the hands? It seems a little like moving a mouse while navigating a web page, doesn't it?

From science to design
Let's say you have a web page with several products on it. There are pictures of the individual products, catalog numbers, price and other typical information.

The question is simple: what should the visitor click on in order to add the product to their shopping cart?

Did anybody think, "the product itself. You want their attention focused on the product"? Congratulations if you did because you're using one of the ways the brain-mind is wired to help visitors separate the cards much more efficiently.

Also please note that I'm not suggesting a simple picture of the product be used to add the item to the cart (it would be ideal, though). A picture of the product with a red "add to cart" tag superimposed would work as well while allowing current ecommerce practices to continue with little obvious modification. The goal is to get visitors' brain and mind to agree on what they're doing: buying your product.

Summary
Some readers might consider this overly simple, and I agree completely. It is simple, but don't confuse simple with simplistic. One of the great tricks to getting people to help you to achieve your goals is to make it very easy, very simple and almost completely mindless for them to do so. The example and method described here do just that; they get the brain and mind to agree on the goal of their attention so completely that the mind accepts whatever information the brain sends it without having to re-evaluate it.

Enjoy.

Joseph Carrabis is CRO and founder of NextStage Evolution and NextStage Global and founder of KnowledgeNH and NH Business Development Network. He was recently selected as a senior research fellow and board advisor for the Society for New Communications Research. Read full bio.

You can meet and talk with Joseph Carrabis at the following upcoming conferences:

WHITE PAPER LIBRARY

View More Research »