5 Techniques for Moving Beyond the Fold

Even in a digital world, the term "Above the fold" still matters. "The fold" is a term that comes to us from the newspaper industry and simply refers to news items on the front page of a folded newspaper that the editor thinks will engage readers. Why does such an anachronistic term matter?

When it comes to pixels, "The fold" is a moving target and the meaning changes to the data that fits on the screen without having to scroll, either horizontally or vertically. In his articles, Scrolling and Attention, and, Horizontal Attention Leans Left, Jakob Nielsen provides the following statistics:

"Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold,” and “Web users spend 69% of their time viewing the left half of the page and 30% viewing the right half. A conventional layout is thus more likely to make sites profitable."

So, does that mean you are stuck with conventions? Conventions are there because they work. However, conventions don’t always meet the layout needs of scientific or information driven interfaces. Additionally, conventions and users expectations are changing every day and are being molded by new technology and experiences. As Nielsen points out, “The dominant layout pattern and the dominant viewing pattern have obviously evolved in a co-dependency.” What may be the rule today, may not be the rule of tomorrow. Here are some ideas for when and how to move past “the fold”.

1. Break the Fold if it Makes Sense

Online magazine layouts such as http://www.darkrye.com employ vertical scrolling for article length and horizontal scrolling and this is the expected convention. If you are presenting your information with images or exhibits, using the magazine conventions of large images, callouts, and teaser text will help set your reader’s expectations. For more on mobile’s influence on layout, read Carrie Cousin’s article on DesignShack.com:

2. Use Filtering and Faceted Navigation

Infinite scrolling on popular sites like Facebook and Google have not only pushed passed the fold, they deny the edge even exists. If you have data that can be chunked into small bites, think of using long grid patterns with high-level data to layout your page. Use UI techniques such as, Isotope, to keep important data at the top.

Isotop website

Additionally, sites like istock.com use search-based facetted navigation to allow users to bring the information they want to the top.

istock website - UX health care design

3. Make the Fold Responsive

The assumption with a wider monitor might be to move the fold and make your main content wider, however the brain is lazy. The longer it takes for it to read across the page, the quicker it disengages. A better solution would be to create a responsive break at a larger width and modifying your layout to allow secondary content to move up in the world. By keeping column width short, you are leading them to believe they are getting a “snippet” of information, therefore it is perceived to be easier to read.

http://www.lukew.com/ff/entry.asp?1514

http://www.lukew.com/presos/preso.asp?31

http://webdesign.tutsplus.com/articles/general/life-beyond-960px-designing-for-large-screens/

4. Use Signs to Direct

Using subtle graphic elements can help guide the user down the page, as long as it doesn’t interfere with the content. For example, Infographics rely heavily on directional graphics to move the viewer’s eye through the information.

To do this find the “path” in your information using time, steps, or processes and layout your information accordingly. Your markers or directional signs should be consistent in color, size, shape and design. With road signs, you don’t need to know what a sign that is red and octogonal to know it is a step. This should be true of your directive graphics. A reader should be able to look from across the room and be able to identify the steps or chunks in your layout.

Explore more infographics like this one on the web's largest information design community - Visually.

5. Make Navigation Easy

Long or wide pages can be difficult to navigate. By using techniques like Twitter Bootstrap’s Scrollspy and fixed navigation, you can make user more comfortable leaving the top of the page, knowing they have quick access to get back to the top.

Another example we often run across is long tables. By using the techniques listed in this article, you can create tables with fixed header allowing the user to stay anchored while exploring your data.

Are you in healthcare or the lifesciences and need advice on design for an upcoming project? Maybe we can break a rule or two together. Schedule a free consultation.