Thursday, October 8, 2009

As the page folds

Found a great article that talks a problem that I run into all the time. Clients, especially older ones, want everything to fit on one page with no scrolling or to use a print term, "above the fold". Everytime I explain that they have too much information to fit into that space and that it many extremely successful brands have pages with content way below the fold.

This artcle not only addresses the "popular brands approach:

It also takes hundreds of hours of eye tracking user testing. Here is a heat map of a site with content mainly above the fold and another with less content above the fold, think large rotating banner image at the top.

The article also has an example of how to encourage users to explore below the fold. Simple things like don't make a large header that is 100% of the content area's width and "chop off" the page. Also, I would suggest using a subtle vertical gradient to draw the eye naturally downward.

Another thing to think about to cut down on page scrolling is using columns. Not only does it help with the page height, but it also reduces wasted space and extremely wide copy. Everyone knows 72 characters is the "perfect" width so at 11px font size at 900px width. Two columns is almost perfect for real body text. You can even go to 3 columns on the homepage with short news headlines, event names and announcements.

Check out the full article "The myth of the page fold":

No comments:

Post a Comment