In print design, the expression “above the fold” dates from an era where broadsheet newspapers were folded in half and piled up in stacks in front of newsstands, showing only the upper-half of the front page to potential customers. If an article or a picture did not appear “above the fold” on the paper, it might as well have been invisible to potential customers. Putting a sexy photo or a gripping headline “above the fold” was a way to drive up sales.
From the very earliest days of web design, that old term “above the fold” was appropriated to allow designers to discuss which page elements would be visible to users without their having to scroll the page. You see, way back in the 1990s it was generally accepted as fact that many everyday web users rarely used their browser’s scrollbar — it was even thought that some users didn’t even know how to scroll at all!
These days it seems hard to imagine millions of helpless computer novices wondering why so many articles on the web seem to end abruptly halfway through, especially now that everyone and their grandmother uses the web (well, except, apparently, John McCain). But things were different a decade ago. Many users had only owned computers for a few years. Few people had ever bought anything online or posted a comment to a message board.
Since then, however, it has become clear that people do, in fact, scroll their web windows quite a bit. Usability tests of all kinds have shown this. Our old fears of content below the fold being lost forever are no longer valid.
This does not mean, however, that “above the fold” is obsolete. It has just become a little more nuanced.
For one thing, despite the fact that users can and do scroll web pages, the first impression a web page gives a user is still critical. Before the user can actually get around to scrolling a page, they are already getting a instantaneous impression of what they see. This instant is dominated by the above-the-fold design elements. If you want something to grab your user’s attention, even on a subconscious level, it obviously helps to put it above the fold.
Also, when you are talking about those specific page design elements that appear on every page in a site — navigation, cross-promotions, related items links, etc — these items will appear repeatedly to the user every time they go to a new page. Again, being above the fold makes those elements more prominent in the user’s mind.
That being said, I still don’t see the fold as the critical factor in designing for web page prioritization. The underlying objectives of these two examples (to expose users to important content and features) is entirely achievable through other, traditional graphic design techniques other than simply placing things “above the fold”. Size, color, positioning, typography — there are ways of calling something out besides putting it at the top.
In fact, we should start thinking of “the fold” as something other than a hard line with an “above” and “below” portion, and we should stop thinking of the vertical positioning on a page as equivalent to priority. Scrolling up and down through a web page is a fundamental aspect of the web user experience, and there is much more to it than simply seeing what’s on top and then gradually seeing everything else.
When scrolling the New York Times web site, for example, the above-the-fold content (here shown as Zone 1) certainly contains many of the page’s most critical elements. But as you scroll through the page, the landscape changes. It’s not just a stack of elements of gradually-decreasing importance. Instead, the scrolling experience is punctuated by elements of clear high-importance: the video in Zone 2, the belt of featured stories in Zone 3. Even Zone 4, the page’s “links ghetto” has a distinct identity of its own.
Scrolling down the page, then, is an opportunity to view the page as an unfolding temporal event, not as a static snapshot.
I’ll often find myself in design meetings where someone says they want Element X to appear “above the fold”. Some designers may wince at the expression, but in reality the client is saying something fairly straightforward: They want Element X to be prominently displayed to the user. If the holistic page design can make an element stand out on the page while the user is scrolling the page, even if it is below the fold the design can succeed in that goal.