“Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. Thus, an item that is “above the fold” may be one that the editors feel will entice people to buy the paper. Alternatively, it reflects a decision, on the part of the editors, that the article is one of the day’s most important.

For many web designers, the concept above the fold serves both as a guide and a hindrance. For newspapers, the area above the folding line should be reserved for most prominent content. In web design, this is the view-port area on the front page where the users see without scrolling. However, this area is often abused. Many clients or managers still believe that users don’t scroll, therefore the content below the fold won’t be seen by users. This misconception results in homepages crammed with links and unimportant content. Not only the homepage becomes aesthetically unpleasing, but also yields poor findability and usability.

Debunking the No Scroll Myth

Origin

Why do some people think users don’t scroll? This traces back to the web usability study conducted by Jakob Nielsen in 1994. The results made sense back then. Many users were new to the web or frequent usage of a computer.

Even Jakob Nielsen stated in another study three years later in 1997, that majority of the users did scroll due to familiarity with the technology.

In more recent studies, we have seen that most users scroll when they visit a long home page or a long navigation screen. This change in behavior is probably due to users getting more experience with scrolling Web pages.

That study was published twelve years ago.

Users Do Scroll

Today, the web has become an integral part of our daily life. The vast majority of users know when to scroll. Also, the technology today makes it easy for users to scroll, e.g. trackball on mice, multi-touch gesture on touch pads, etc.

Joe Leech from cxpartners recently published an article dispelling the no scroll myth, backed with some comprehensive usability testing data.

Over the last 6 years we’ve watched over 800 user testing sessions between us and on only 3 occasions have we seen the page fold as a barrier to users getting to the content they want.

I recommend reading his article in its entirety. The comment section is good too.

What Should be Above the Fold?

First, Where is the Fold?

It’s hard to define where the folding line is by a pixel number. This is because users have different sized monitors, and resolution settings. Even two users with the same monitor size and resolution, their browsers’ view-ports may be different depending on how many tool bars they have.

For example, I have my browser size set to 1024×768. Here are the two view-port heights depending how many tool bars I use. 560px for maximum toolbar usage while 680px for minimum.

I recommend around 600px as a guide for the folding line to be safe on the homepage, for your absolute premium content. However, also keep in mind that users may use mobile or other type of devices other than a desktop or laptop computer.

What Content Should be Above the Fold?

The more content you cram above the fold, the longer it takes the user to digest at first glance. This is very common among government sites, where the homepage is typically a labyrinth of links. Focus on the key content. Even though web sites differ in nature, the homepage should convey a clear message of what the site is about and what the top tasks are right away. A growing trend among the new government sites is the use of big highlight box for frequently updated news items, sections of social media links and other key task links of the agency.

Keep in mind, text links are not the only content. In fact, when the homepage is a big laundry list of text links, it makes it harder for users to find the right content. Many clients or managers insist on cramming everything above the fold because those links are important. In practice, when everything is important, then nothing is important.

Identify what you would like the users to learn, use and feel about the site on their first visit. Then pick those elements that accomplish your goal, and give them the most prominent visual treatment. This can be done through vivid imagery, big type and use of proper white space.

What to Put Below the Fold?

A better question would be “what to put between the fold?” As I mentioned earlier, the folding line is very arbitrary. In that gray area, it’s best to design visual cues that hint there are more content below. See this as a transition area.

In Conclusion

Users do scroll.

The concept above the fold should serve as a design guideline. When used properly, your site can provide immediate clarity to the users and invoke a positive feeling. Stack the content elements in the order from most prominent to lesser. Of course, do a thorough information architecturing during the design process, and conduct an A/B testing when the site launches.

Regardless of political affiliation, most people agree that Barack Obama ran one hell of an Internet campaign last year. I was very surprised when I first saw his site. It was the first political site that really impressed me, for two reasons. First, his site was well constructed, containing the elegance of traditional design principles, consistency in branding, and social media for outreach. Second, I was impressed that the campaign management (politicians) gave skilled designers their creative freedom. This doesn’t happen often within political/government environments.

Scott Thomas was the design director for Obama’s campaign. He orchestrated  its design, branding and website under extreme deadlines. I have been following Scott’s writings and speeches on his design philosophy: be clear, simplify, and humanize. You can see those elements reflected in his work.

The campaign site definitely set a new standard for the future of government sites. Already, we see newly-launched federal web sites, such as whitehouse.gov, data.gov, and recovery.gov shedding the outdated look and content format that are often associated with government design.

The Obama internet campaign will be a case study for many future political candidates. Recently, Scott Thomas gave a behind the scenes talk on the campaign design process. I highly recommend that anyone who’s interested in political design, or design in general, to watch this video in its entirety.

Last month, Scott launched his new project on Kickstarter. It is a wonderfully illustrated book documenting the grass-root movement many artists were involved in during the Obama Campaign. The book will be printed, if the initial budget of $65,000 is met by November 5th. So far, over 770 people have pledged almost $50,000.

This book is more than the Obama campaign – it demonstrates how powerful art and design can impact the political outcome.

Scott Thomas’ design work on the campaign last year has defined a new standard for government websites to better serve the public. In that regard, I consider him one of today’s most influential web designers.