Since the idea of the internet and websites first caught on around 1989, marketers and designers have been studying intently to find the best way to leverage consumer interaction. Just like in traditional marketing, a great deal of research is conducted with the intent of discovering how web users engage with the information on any given website. When The Search Engine Guys take on a new client for design and optimization, one thing we try to keep in mind is the way people naturally scan any given page for information that they’re looking for. Luckily, we don’t need to spend much time researching this user interaction because there are plenty of other groups interested in this kind of data, and they have made it readily available to anyone who searches for it. I want to provide a little bit of insight into some of the more popular studies on eye-tracking and how we use these data in our designs.
The idea of tracking eye movements and creating diagrams dates back to the late 1800’s when a French ophthalmologist noticed his test subjects were reading in a series of short stops and quick movements, as opposed to a long, smooth sweep. Here is an early diagram of fixations and saccades, the quick movements from point to point:
This observation was further explored in the 1900’s, first with primitive contacts that had aluminum pointers, and later by reflecting beams of light off of the subjects’ eyes and onto a film. It was later observed that eye movements are largely dependent on the task given to the user. To quote Alfred L. Yarbus,
“Records of eye movements show that the observer’s attention is usually held only by certain elements of the picture…. Eye movement reflects the human thought processes; so the observer’s thought may be followed to some extent from records of eye movement (the thought accompanying the examination of the particular object). It is easy to determine from these records which elements attract the observer’s eye (and, consequently, his thought), in what order, and how often.”
In the 1980’s we saw the advent of real-time eye tracking using computers. This allowed for a much more accurate depiction of how the user interacts with any given image or text. The pieces were finally coming together to lay the foundation for eye tracking on web pages.
Well, not in the scary big brother sense. In 2009, Microsoft sponsored a popular study titled, What Do You See When You’re Surfing? Using Eye Tracking to Predict Salient Regions of Web Pages. The premise of the study was to gain “an understanding of how people allocate their visual attention when viewing Web pages”. While there had been similar studies in the past, the researchers point out that these studies were generally ambiguous, only identifying scan paths as opposed to fixation time, or using only three different sample pages for test subjects. Leveraging an eye-tracker built by Tobii Technology, Microsoft presented 361 web pages to 20 test subjects. With the data they collected, Microsoft was able to describe the general flow of eye movements, which provides us with invaluable information about user interaction. A few notable facts:
The study suggested that those who use the internet once or more a day spend less time actually reading the content, and scan pages faster than those who do not use the web as often. Other findings include:
The most linked-to research done on eye-tracking was conducted by the Nielson Norman Group, or NN/g. The study is a 355 page report based on usage data from over 300 users looking at hundreds of different websites. The findings revealed many important insights.
We found that users’ main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and has the following three components:
- Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
- Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
- Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.
F-shaped Heat Maps
NN/g also reported several interesting bits about different reasons users utilize search functions, how they analyze those search results, and how they choose which to choose:
One final point worth mentioning from this study is the classification of scanning behaviors, and why people may read more or less content on your website.
- Exhaustive review: People look extensively and repeatedly at an area or page because they expect the information they want to be there, but they cannot find it.
- Directed scanning: A person looks for specific information such as a name or word and expects to find it on the page.
- Motivated scanning: Scan patterns fueled by good page layout, interesting content, personal interest, or a trusted suggestion.
- Impressionable scanning: A person is more open to reading the words as the author has written them.
Here at The Search Engine Guys, we pay attention to details like these to make sure that our clients’ websites are optimized to capture the attention of the user. Our goal is to make sure the user has quick access to whatever information they may have been looking for. Contact and brand information is seen quickly, followed by easy navigation to deeper areas of information. Thinking about it, it makes sense that web designers use this kind of knowledge to help map the flow of a website. Being able to leverage the instincts of a user means higher conversion rates and in turn, more leads, and that’s good news for everyone.
To contact the author, emails can be sent to: email@example.com