There’s been a lot written about how users view a Web page in the vertical axis, in other words, scrolling.
Most of the data has been pretty straight forward. Generally speaking, content below the fold is going to get a lot less attention than content above the fold. Pretty intuitive, right? What is a little newer is how users view a Web page in the horizontal axis. We all know that side scrolling is a no-no, but what do users actually see on the page?
Let’s start with the basics. The “fold” is the imaginary line on a Web page where the user would have to scroll down to view content below 768 pixels. Though monitor resolutions can vary wildly, the benchmark screen resolution is 1024 pixels by 768 pixels. As a point of reference, here is an example of how much screen real estate is available for content using Firefox at 1024 x 768, and it’s not as much as you might think. (Figure 1)
Figure 1 - Actual display area dimensions for Firefox, 990 pixels x 590 pixels. The area gets smaller if additional toolbars are added.
Vertical Space
Research indicates that users will spend most of their time and energy on content displayed above the fold. Jakob Neilsen says users spend 80% of their time looking above the fold and only 20% looking below it. This is important because many clients see sites like Amazon and CNN with long scrolling pages. They think, if those guys do it, why shouldn’t I? I want to have everything on the Home page.
- Too much information leads to decision paralysis, making no choice easier than sifting through too many choices.
- Large, well-known organizations will get business even if they don’t follow good UI practices; they aren’t competing for eyes like smaller organizations
- Visitors don’t want to see everything on the Home page, just the essentials, what the company does, what’s new, and clear paths to content
- If a client is very good at generating a lot of timely content, like a news site, then a scrolling Home page could be beneficial (think cnn.com).
Horizontal Space
Now, what about the horizontal axis? Jakob Nielsen’s recent Alert Box article brought out some new information. The study shows that the left half of the screen gets 69 percent of viewing time and the right half gets 30 percent. The attention drop-off point happens at 700 pixels from the left side of the screen. What does this mean?
For starters, it confirms what a lot of us already knew; users typically ignore the right side of the screen. Why they do isn’t entirely clear, but my guess is two-fold.
- Users tend to ignore the right side because of annoying advertising.
- Since Westerners scan from left to right and top to bottom, we may put more weight in content on the left half over the right half.
So, what are the takeaways?
- On the vertical axis, limit scrolling on Home pages.
- For content-heavy sites where content is added regularly, scrolling is OK (if well-designed).
- On sub pages, particularly lists and search results, scrolling is desirable.
- For content pages, scrolling is OK. If the article is extremely long, you might consider pagination.
- On the horizontal axis, users focus on the left side of the screen, so side- scrolling pages are always a poor choice. I’ve seen some widgets and specialty applications use side-scrolling effectively, but it’s rare.
- Do not put sub navigation menus in the right column. They’re likely to be missed by users.
————————————————————————————————————————
More Information
Jakob Nielsen's Alertbox, April 6, 2010: “Scrolling and Attention”
http://www.useit.com/alertbox/scrolling-attention.html
Jakob Nielsen's Alertbox, March 22, 2010: “Horizontal Attention Leans Left”
http://www.useit.com/alertbox/horizontal-attention.html
“Will Horizontal Layouts Return?” By Edison Morais
http://www.smashingmagazine.com/2008/08/14/will-horizontal-layouts-return/
————————————————————————————————————————
