Eye tracking is the science behind the order and direction of the eye, as it observes and absorbs the information. When it comes to eye tracking with web usability, this involves the science behind the eye movements of a user as they navigate a website.
The simplest example of eye tracking can best be seen in the way people read text. Western languages such as English, Latin and Germanic dialects are read from left to right, top to bottom in a “scan line” fashion. Other languages, such as Middle Eastern and Mesopotamian dialects, like Arabic and Hebrew, are read from right to left, and top to bottom. Then there are the Asian languages that are read top to bottom and right to left in columns rather than rows. This is the most basic example of eye tracking.
With the introduction of digital interfaces there is a lot more involved with eye tracking than just how a language is read. Eye-tracking web usability covers every aspect of web design. I’m going to talk about the four key elements, found on all web interfaces. I will explain where should be placed and why:
#1 – Logo/Header
The logo and header should always be at the very top, and span the entire body of the web design. They should both be immediately visible. Most often, in western countries, the logo is placed on the top left corner of the screen; that is where the eye first goes. The logo ensures that the user recognizes the site, and remembers it.
#2 – Navigation/Menu
Your navigation or menu interface should be the second thing the user spots. There are three locations the menu can be placed:
- horizontally beneath the header
- in a column to the left
- in a column to the right
The most strategic choice is a horizontal span beneath the header (unless the links in this component are too numerous and you don’t want to use a form of drop down system to expand them). Of the three, the right-hand column is not recommended (unless your user base reads a right-to-left language). Most of the world will find this counter intuitive.
#3 – Content and Link Exchange
I am lumping these 2 concepts together because they should be placed side by side. Your content should always be the center; the body. Content should occupy the most space. This is obvious, but I’m stating it anyway. After the eye immediately spots the large, visible logo, and the slightly less prominent but easy to understand navigation component, the content should immediately pop out. This is done by using highlighting text, background etc…
If you want your content to be spotted before the navigation bar (as is the case with blogs), simply make your content exciting. Play with features such as brights colors and images to make it pop out.
As far as links are concerned, do not ever place link exchange beneath the header horizontally. Use the left hand column for link exchange.
#4 – Advertisements
Ads should occupy the bottom of the page (and perhaps be used to cushion space in one of the columns). They should be the last thing a user spots. I know you want users to see the ads, after all, they are your source of revenue. But the user doesn’t really care about them, and forcing their eyes to FIRST notice this, will make them leave the page. So be smart where you place your ads.
The 4 tips outlined above are the most basic concepts in eye tracking website usability. I’m sure people who specialize in this field would cite more detail. If you are new to ‘eye tracking’ this list is a great start. If not, I encourage you to research and pursue additional information (or wait for my next post)! Good Luck.