jump to navigation

Conventionalism Wins Out 12 April 2010

Posted by elisemchisholm in Design, Websites.
Tags: ,

Over the years I’ve had numerous conversations with work teams about the conventional top-to-bottom and left-to-right content hierarchy as it relates to Web design. Some designers seem to follow it religiously while others consider it old-fashioned.

As a subscriber and fan of Jakob Nielsen’s Alertbox usability newsletter, last week’s installment on horizontal attention caught my eye. According to Nielsen’s research, users spent 69 percent of their viewing time on the left side of the page and only 30 percent on the right side. (The remaining 1 percent was spent to the right of the initially-visible pixels and required horizontal scrolling.) While I expected the left side would be favored, I was surprised by the considerable spread.

Nielsen’s studies on vertical attention revealed that users spent 80 percent of their viewing time above the page fold and 20 percent below it. These findings were more in line with my assumptions.

Nielsen points out that the dominant layout pattern and the dominant viewing pattern have developed in codependency. Until the dominant layout pattern changes, designers who deviate from it will be taking a risk.

Among the guidelines Nielsen provided, I found the list below most helpful:

  • Keep navigation on the left
  • Showcase the most important content between one-third and half of the way across the page; this is the sweet spot
  • Keep secondary content on the right
  • Place information that is most critical to the goals of the user and/or the organization above the fold
  • If you expect people to scroll below the fold, build a layout that encourages scanning and make users believe it will be worth their time to scroll

Out of curiosity, I pulled up Amazon.com to take a look at the company’s home page pattern. Sure enough, I found a conventional layout that generally follows Nielsen’s guidelines.



No comments yet — be the first.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: