Eye Tracking Usability Best Practices

Eye tracking usability principles are incredibly important. Unfortunately, many designers and developers of software and web interfaces either don’t know this, or just choose to assume that this isn’t the case, and it’s resulted in a lot of layouts not being conducive to immediate recognition and comprehension.

The problem is that if you don’t order elements of your design to follow the logic of these eye tracking usability concepts, people will have a hard time coming to terms with your design at first, and may even abandon them out of initial dislike. Remember, first impressions are important, and can’t be redone, so you should probably pay close attention to these things, because neglecting this will definitely cut into the adoption and hooking of prospects you really need.

Let’s take a look at some important principles of this right now.

#1 – Logo Placement

Logos need to be at the top, and be prominent but not complex. This is because a simple but very visible and recognizable logo design will help cement a brand and attitude with the user or viewer right away, and they will remember it in the future. It tells them a lot, by design intuition, what sort of site or service you are, and what kind of attitude you have.

Big, distinct logos will catch the eye immediately, and will center the eye on the center of the window. From here, you need to direct them further.

#2 – Headers and Front Page Content

Some will argue that you want to direct the eye to navigation next, but I say that’s poppycock. Next, you’ll want them to see your front page content, including topical headers and probably synopses or images associated with your content.

The best way to do this is, since you logo has already centered them, to use a toned down background color for the main content area with a similar font to the subtext font of your logo, and use color coordination here to make it be a logical next thing to spot.

Users will be able, from this, to get a good sense of your types of content. Only then should they care about your navigation.

#3 – Navigation and Extras

Finally, we come to that navigation, as well as your ad space and link exchange space, assuming you have all three. I personally am a fan of putting navigation either right to the left of the content body, or horizontally under the logo. The latter is easy to direct users to if you use a stark color and heavy font, but not a color which clashes with the logo and content body. However, since they’re still centered in eye tracking, they’ll spot it on their own right afterward.

However, if you put it to the left, and it’s ok if you do, use a slightly darker or more off backdrop tone for that region, but maintain the same font (of different color) that the content area uses. They will naturally notice it next.

As for link exchange and ad space … I know you want users to see these and click them, but just put them to the right or at the bottom of the page and let them discover these when and if they do, on their own, because frankly, trying to herd them to this will annoy them and won’t work anyhow.

So, eye tracking usability principles are pretty straightforward on paper, as you can see. But you need a good sense of space, color coordination and overall aesthetics to make this work, so take examples from sites you see, from now on, using these principles, and make note of how their coordination works.

Jessica Miller
Jessica is the Lead Author & Editor of UsabilityLab Blog. Jessica writes for the UsabilityLab blog to create a source for news and discussion about some of the issues, challenges, news, and ideas relating to usability.
Jessica Miller on sabtwitterJessica Miller on sablinkedinJessica Miller on sabgoogleJessica Miller on sabfacebook