(This article presents our original research on the distribution of web user's horitontal attenton. Please also read the newer article presenting updated data from eyetracking with bigger monitors.)
My previous column discussed the distribution of user attention along the vertical dimension of web pages. In short, people look at information above the fold far more than they do at information further down the page.
Here, we'll do a 90-degree turn and look at user viewing patterns along the horizontal dimension. Using the same data set as my previous analysis, we find the following distribution of user attention from the left edge of the screen to the right:
People spent more than twice as much time looking at the left side of the page as they did the right:
- Left half of screen: 69% of viewing time
- Right half of screen: 30% of viewing time
The remaining 1% of viewing time was spent to the right of the initially-visible 1,024 pixels. Such information is visible only after horizontal scrolling, and the minute amount of attention it attracts confirms the guideline to avoid horizontal scrolling (mistake #3 in 2002).
Information to the right of the initially-visible area is in essence "below the fold," except that they are beyond a right-hand fold instead of a bottom-of-window fold, and thus not literally "below." Another way of looking at vertical vs. horizontal scrolling is that users allocate 20% of their attention past the fold in the vertical dimension but only 1% past the fold in the horizontal dimension. (I would actually classify horizontal scrolling as much more than twenty times worse, because it also annoys users, besides attracting less attention.)
Our study used a 1024×768 monitor. With a bigger monitor, we might expect the viewing pattern to shift slightly to the right, simply because there would a wider space to look at. However, the general pattern would be the same.
The left-most part of the page typically contains a navigation bar, so it's not surprising that attention grows after the 200-pixel mark, with the most attention around 300–500 pixels. As we know from our eyetracking research into the F-pattern of reading web content, people tend to focus on the beginning of the first line of a page's main content area.
Note that it's great that users don't look too much at the nav: better for them to spend their time on your content and only look at the navigation when they want to move on.
(While users don't look much at the right column, that doesn't mean it's wasted space: there are good uses of a web page's right column.)
Languages with Right-to-Left Reading Direction
Our usability studies in countries that read right-to-left found the same general pattern of increased attention to a line's beginning. Obviously, in those languages, the beginning would be the right side of the text. Even so, we wouldn't necessarily find a mirror image of the above chart from eyetracking studies carried out on, say, Arabic or Hebrew sites.
The reason is that sites in right-to-left languages don't always employ a mirror image of traditional left-to-right layouts. See, for example, the following screenshots from the Dubai newspaper Emarat Al Youm and the Israeli newspaper Haaretz:
Conventional Layout Wins
Returning to sites in the many languages that read left-to-right — such as English, German, French, Russian, and (these days) Japanese — what do our findings mean?
Simply put: Stick to the conventional layout, because it works perfectly with how people look at web pages:
- Keep navigation all the way to the left. This is where people look to find a list of current options.
- Keep the main content a bit further in from the left.
- The most important stuff should be showcased between one-third and halfway across the page. This is where users focus their attention the most.
- Keep secondary content to the right. It won't be seen as much here, but that's okay — not everything can get top billing, and you need a place to put less-important material.
Interestingly, this big-picture website layout is similar to the prevailing layout of intranet homepages, which is another indication that it works.
The dominant layout pattern and the dominant viewing pattern have obviously evolved in a codependency:
- People have been trained to pay attention to certain spots because that's where the most important information usually resides.
- Companies create site layouts that present their information according to how people allocate their attention across the page. (Because commercial sites emphasize profitable design, assuming that management reads articles like this :-)
If you break with the conventional layout, some users will probably change their viewing behavior when visiting your site. If you place important stuff in the right margin, then those (fewer) users who happen to spot this info will spend more time fixating on the area than is typically the case.
It's not as if users decide in advance "I will spend only 2.5% of my time looking at information that's between 1,000 and 1,100 pixels from the left."
In any case, you deviate from conventional layout at your peril: When users initially approach your page, they'll spend considerable time looking for something where they expect to find it. Users are therefore more likely to succeed if you comply with those expectations, rather than putting information in unconventional locations, where they might not think to look.
And, when your customers are more successful using your site, you are more successful meeting your business goals. Following web usability conventions means making more money.
Full Report
Full eyetracking report on how users read on the web is available for download.
(Please also see our new article with updated data on horizontal attentionl from eyetracking with bigger monitors.)
Share this article: