Utilizing the Cut-off Look to Encourage Users To Scroll

Jared Spool

August 2nd, 2006

Clients still frequently ask us about scrolling on pages. In our recent virtual seminar on home page design, we received two such questions:

What’s the latest findings related to “above the fold” and scrolling?

and

Does the purpose of your site determine how much scrolling you can get away with? In our studies, we have found users don’t expect to scroll on the home page.

Not much has changed in our observations since we released our original research on the subject. Basically, users have no trouble scrolling, as long as the page is designed to accommodate it.

For example, look at the Cognos.com home page, in an 800×600 browser window:

Click to see the Cognos.com Home Page in a Window
Click to see the Cognos.com home page in a small browser window.

Because of the design of this page, we’d expect to see users not scroll. It isn’t because users of the site have something against scrolling. It’s because the way the page falls in the window, it looks like the entire page loaded.

When all the sections end evenly on the page, users subconsciously decide there isn’t anything else to look for and don’t try to scroll. Of course, if they don’t scroll, they miss important content, such as the list of products:

The bottom of the Cognos Home Page, hidden below the fold.

This means they may miss the thing they are coming to the site to find.

Interestingly, the home page for Cognos Support doesn’t have the same problem. Its sections don’t evenly end at bottom of the screen.

Click to see the Cognos Support Home Page in a Window
Click to see the Cognos.com Support home page in a browser window.

Instead, its sections seem to be cut off at the bottom, subtly communicating to the user there is more to see below. In our studies, the same users would be far more likely to scroll on this page then they would on the Cognos home page.

Along the same lines, we received this question:

How does NY Times solve the scrolling problem, i.e. entice people below the fold?

They use the same technique as the Cognos Support home page, but making things feel “cut off.”

Click to see the NY Times Home Page in a Window
Click to see the NY Times home page in a browser window.

If our clients are finding their users aren’t scrolling, we suggest they look for a reason beyond “Users don’t expect to scroll” and see if maybe the design of the page is preventing it. By going for that Cut-off look, they might find their users are suddenly happy to scroll.

50 Responses to “Utilizing the Cut-off Look to Encourage Users To Scroll”

  1. Robbin Steif Says:

    If people have different sized browsers and different sized screens, how do you suggest that this be consistently achieved? For example, if you look at the Cognos customer service screen — if your screen only showed you the part right before (or right after) the lower right hand corner picture, you might think the whole thing had loaded there too.

    I don’t think that a vertical bar does the job — it is too unobtrusive. If you have a page full of text like the NYTimes, you are ok (and that gives you a nice opening to talk about how a rich link page like thomas.net automatically has the cut-off look) but not all customers can go that route. Hints?

  2. Design your website for page scrolling or not? » Neat Redesign Says:

    [...] A recent research by UIE revealed that users scroll if there is a clue that there is something below the fold. [...]

  3. Chris Moritz Says:

    How do you suggest accounting for the wide possible variation in the actual fold line at common resolutions?

    For example, take a look at the screenshots above. The main toolbar buttons are set to “small” size with no labels. The favorites bar and address bar are compacted into one line, as is the Google Toolbar.

    If a user didn’t have all those toolbars squished together, there’d likely be 50 or so extra pixels to bump things down, probably enough to push the Cognos.com example down far enough to cancel out the “cut-off” of the image.

  4. Chris Moritz Says:

    Isn’t it a little inaccurate and mis-leading to show the screenshots above with all the toolbars mashed together? Not sure how many “typical” users would do this.

    The fold line on a maximized 800×600 resolution window could be anywhere between about 350px and 430px. Seems like an awful lot of variability to account for.

    Any ideas?

  5. Jared Spool Says:

    Hi Chris,

    You’re right in that the browser windows aren’t necessarily how other users may set it. (It happens to be how I keep my windows and I wasn’t thinking about it when I quickly grabbed the shots.)

    That being said, it doesn’t matter. Watch users as they scroll down and you’ll see they stop when they hit a horizontal rule, aligned boxes, or large amounts of whitespace.

    So, even if it doesn’t naturally hit the bottom of the browser right off (and so often it does), any sort of faux page bottom is likely to stop users from continuing.

    And, as usual, if you find users on your site don’t scroll no matter what, then you should keep your pages short. It never matters what we find in our studies. It only matters what’s happening on your site with your users.

  6. Max Design » Some links for light reading (8/8/06) Says:

    [...] Utilizing the Cut-off Look to Encourage Users To Scroll [...]

  7. Chris Heilmann Says:

    This is the most random “pattern” I have seen in quite a while. The “cut off look” is simply by chance on this resolution with these toolbars and that font size.

    There is simply no way of guessing how deep the “fold” of the visitor’s user agent is and I am pretty sure that none of the examples had the “cut-off-look” on purpose.

    That said, if you wanted to ensure that the visitor gets informed that there is more to come you could put an overlay with CSS and JavaScript over the bottom with a “more” arrow when and if the browser viewport is smaller than the document height. That would be a real incentive. A shame that people only use these things for advertising like sitepoint.com does.

  8. Josh Says:

    It would be nice if we could predict exactly where the fold is, but we all know we can’t. That doesn’t mean you should disregard this advice. I see this problem constantly, particularly with older customers. My team has had a lot of success with adding design elements, like a photo, that will get cutt off in a general area of a fold. A photo, for example, could be 400px tall giving you a lot of wiggle room. We do design the cut off look on purpose when we are on top of our game and I have watched it fix scroll problems on a page many times.

  9. » Wie bringt man Besucher zum Scrollen? — cne _LOG Archiv Says:

    [...] Diese Frage beantwortet Usability-Experte Jared Spool im Artikel “Utilizing the Cut-off Look to Encourage Users To Scroll” auf UIE Brain Sparks, dem Blog von User Interface Engineering. Tags: Usability « Wenn Entscheider entscheiden [...]

  10. Telopea Says:

    This article reminds me of advice I have seen in a couple of references about writing copy for mail order letters.

    They suggest that you finish each page with an unfinished sentence so that people have to look at the next page to finish the sentence they are reading.

    eg “On the art of writing copy”, Herschell Gordon Lewis, page 160 in my version.
    He says that newspapers do this when they break up items. He claims that ‘readers demand completeness’. ‘If you leave the reader in mid-sentence , you’re in command’.

  11. Louise Hewitt Says:

    It is a well established mechanism for ‘luring’ readers in print media that ought to translate well to website.

    I think that some of the comments here that relate to various page heights are missing the point. The issue is not how high the page is, but whether the elements on that page finish in a straight line or are staggered. If some elements are longer than others, then any that continue beneath the fold will become obvious – creating the lure.

    Good work bringing this up. Something I’m tackling with a design at the moment and I hadn’t thought to make explicit in the desing brief. Now I shall!

  12. David Zemens Says:

    Great article and very good discussion about the various screen resolutions, etc. The information about horizontal rules and divisions not aligning is a great tip that I had not thought of. Very informative article.

  13. Justin Says:

    Nytimes is an excellent example how they use 5 narrow columns to let users scan the upper fold to lead them to other pages or below…

  14. 優使性筆記本 (Max's usability notes) Says:

    頁面長度與使用者行為的一些資料…

  15. Dancing with the Mythical Fold : techPersona Media Says:

    [...] Info: “Changes in Web Usability Since 1994” by Jakob Nielsen (December 1, 1997) “Utilizing the Cut-off Look to Encourage Users To Scroll” by Jared Spool (August 2nd, [...]

  16. Simplicity Rules » Says:

    [...] Spool suggests using the cut-off look to encourage users to scroll. By not designing to squeeze above the fold, we engage the user to [...]

  17. The "above the pagefold" myth. : Insight Says:

    [...] the lingering pervasiveness of this myth: And why? Because people think users don’t scroll. Jakob Nielsen wrote about the growing acceptance and understanding of scrolling in 1997, yet 10 years later we are still hearing that users don’t [...]

  18. blog.dsetia.com» Blog Archive » Blasting the Myth of the Fold Says:

    [...] 1 Jared Spool’s UIE Brain Sparks, August 2, 2006:Utilizing the Cut-off Look to Encourage Users To Scroll [...]

  19. Jonathan Says:

    Compare and contrast:

    http://www.boxesandarrows.com/view/blasting-the-myth-of

  20. Evolving Design Standards: The Fold » Viget’s Four Labs Says:

    [...] relevant articles that Milissa cites: Jared Spool’s Utilizing the Cut-off Look to Encourage Users To Scroll Jakob Nielsen’s Changes in Web Usability Since 1994 ClickTale’s Unfolding the [...]

  21. Design Class #1: The Homepage at TRENDWATCH DAILY Says:

    [...] #4: Don’t be scared by the fold. J. Nielsen has been saying that since 1997. People are used to scroll and they will. So don’t try to push everything above the fold. Plus, with all the screen resolutions available, where is the fold? So forget about it and spread your content vertically. Ok, navigations should be above the fold. And the main content should start above the fold. But don’t limit yourself to make everything fit in a 1024×768. You can read more about AOL’s experience with the Myths surrounding the fold here. If you’re afraid that users won’t see that they should scroll to discover new content, use the cut-off look. [...]

  22. fuzzz.gaulin.ca » » Blasting the Myth of the Fold Says:

    [...] 1 Jared Spool’s UIE Brain Sparks, August 2, 2006: Utilizing the Cut-off Look to Encourage Users To Scroll [...]

  23. USE DESIGN blog » Blog Archive » Nouvelles interactions dans la recherche d’un résultat pertinent. Says:

    [...] Pour aller plus loin sur le thème de “donner à l’utilisateur la possibilité de scroller dans certains cas est préférable”, voici quelques liens :Résultats d’études sur le scrolling Comment encourrager l’utilisateur à scroller [...]

  24. Er standard kolonnelayout det beste? - Kuttisme.no - En blogg om internettmarkedsføring, webutvikling og webanalyse Says:

    [...] er villige til å scrolle ned på en side. Hvis brukere tror, eller får indikasjoner på at de finner mer relevant informasjon lenger ned på siden, er de villige til å scrolle [...]

  25. Los usuarios sí hacen scroll Says:

    [...] Spool publicó en User Interface Engineering un artículo Utilizing the Cut-off Look to Encourage Users To Scroll en el cual propone que si se arman las páginas en secciones estructuradas de forma reconocible, [...]

  26. JML Research > Dancing with the Mythical Fold Says:

    [...] Info: “Changes in Web Usability Since 1994” by Jakob Nielsen (December 1, 1997) “Utilizing the Cut-off Look to Encourage Users To Scroll” by Jared Spool (August 2nd, [...]

  27. Marianna Says:

    I agree with the phrase “Because of the design of this page, we’d expect to see users not scroll”. There are a lot of factors that form whether a user will be prompt to scroll or not. Apart from page design, one major one is whether the content leads the user to continue reading (meaning that he has to scroll). User experience to scrolling is another factor but according to Nielsen most of the users are nowadays familiar with scrolling!

  28. InterLink Headline News 2.0 — Interlink Headline News nº 4859 del Martes 20 de Mayo Says:

    [...] Spool publicó en User Interface Engineering un artículo Utilizing the Cut-off Look to Encourage Users To Scroll en el cual propone que si se arman las páginas en secciones estructuradas de forma reconocible, [...]

  29. Intense Minimalism • Web Design Hint: Scroll, not Fold. Says:

    [...] Ringrazio quindi Cyanto per aver fatto un post che segnala alcune numeriche e studi qualitativi in merito. Tre sono stati pubblicati da ClickTale, basati su analisi effettuate a partire dal loro servizio di tracciamento (2006/12, 2007/10, 2007/12). Due invece sono del sito User Interface Engineering, che fa alcune osservazioni qualitative (1998/07, 2006/08). [...]

  30. Idearium » Blog Archive » Web Design Hint: Scroll, not Fold. Says:

    [...] Ringrazio quindi Cyanto per aver fatto un post che segnala alcune numeriche e studi qualitativi in merito. Tre sono stati pubblicati da ClickTale, basati su analisi effettuate a partire dal loro servizio di tracciamento (2006/12, 2007/10, 2007/12). Due invece sono del sito User Interface Engineering, che fa alcune osservazioni qualitative (1998/07, 2006/08). [...]

  31. Usability Webrichtlijnen voor overheidswebsites? - Ferry den Dopper’s blog Says:

    [...] “Zorg ervoor dat de inhoud van de homepage op één pagina past.” Mensen scrollen ook op homepages. [...]

  32. Know when to fold ‘em | UID Blog Says:

    [...] Utilizing the Cut-off Look to Encourage Users To Scroll [...]

  33. Why the “Fold” Doesn’t Matter Anymore | Locus of Control Says:

    [...] clues that scrolling will help them find what they’re looking for.” He thus suggests using a “cut-off” appearance to indicate that a page continues below the fold – common sense and [...]

  34. links for 2009-06-11 « innovations in higher education Says:

    [...] Utilizing the Cut-off Look to Encourage Users To Scroll " UIE Brain Sparks (tags: webdesign research usability design webdev userexperience bestpractices ux interface jaredspool layout redesign webguru) [...]

  35. Above the fold « Interaction design Says:

    [...] http://blog.clicktale.com/2006/12/23/unfolding-the-fold/ http://www.uie.com/brainsparks/2006/08/02/utilizing-the-cut-off-look-to-encourage-users-to-scroll/ http://www.uie.com/articles/page_scrolling/ Possibly related posts: (automatically [...]

  36. Why “the fold” isn’t dead : Lee McIvor Says:

    [...] Spool also wrote an excellent piece on dealing with the fold back in 2006 which is worth reading for anyone who missed [...]

  37. Above the fold « Vol State Webmaster Says:

    [...] I’ve seen a lot of discussion lately about “the fold” and how it applies to the web or if it does at all. Some of it is more research based than others. And I haven’t really seen anything (at least nothing written in this millennium) saying that the idea of the fold is vitally important online. In fact, we can use the fold to seduce users to scroll for more content. [...]

  38. Why Paying Attention To The Fold Is Stupid | Fuel Your Interface Says:

    [...] 1. Blasting the Myth of the Fold 2. The myth of the page fold: evidence from user testing 3. Utilizing the Cut-off Look to Encourage Users To Scroll [...]

  39. To Scroll or Not to Scroll · NavigationArts Says:

    [...] Similar to conditioning user behavior, you can create expectations of a non-scrolling interface with the initial presentation of the content. If the content is presented tightly within the screen view, it will give the user a sense that there is nothing else to view.  Jared Spool speaks to this topic in his blog. [...]

  40. Content experiments » Blog Archive » All the kids are scrolling these days Says:

    [...] an article by Jared Spool about feeding viewers information that tells them there’s more below the [...]

  41. Contrive Digital Blog : Why Paying Attention To The Fold Is Stupid Says:

    [...] 1. Blasting the Myth of the Fold 2. The myth of the page fold: evidence from user testing 3. Utilizing the Cut-off Look to Encourage Users To Scroll [...]

  42. Designing for the New Fold: Web Design Post Monitorism | Webdesigntuts+ Says:

    [...] the study, they found that 76% of users scrolled and that a good portion of them scrolled all the way to the [...]

  43. Philip Bahmann – Portfolio – English – Designing for the New Fold: Web Design Post Monitorism Says:

    [...] many study, they found that 76% of users scrolled and that a good portion of them scrolled all the way to the [...]

  44. Ny Times Photos | Trends Pics Says:

    [...] Click to see the NY Times home uie.com [...]

  45. web design cardiff Says:

    This is a wonderful blog.Thank you for sharning this information with every one

  46. Myth #3: 사람들은 스크롤하지 않는다? | Clearboth Says:

    [...] 스크롤을 장려하게 되는 디자인에 관한 Jared Spool의 글: Utilizing the Cut-off Look to Encourage Users To Scroll. [...]

  47. Why Paying Attention To The Fold Is Stupid » KnowYourUser Says:

    [...] 1. Blasting the Myth of the Fold 2. The myth of the page fold: evidence from user testing 3. Utilizing the Cut-off Look to Encourage Users To Scroll [...]

  48. If You Build It, They Will Scroll. Says:

    [...] http://www.uie.com/brainsparks/2006/08/02/utilizing-the-cut-off-look-to-encourage-users-to-scroll/ [...]

  49. “The Fold” is like a unicorn. They’re both magical and don’t exist. | The Terralever Blog Says:

    [...] Myths #3: People do not scroll Utilizing the Cut-off Look to Encourage Users To Scroll Be Sociable, Share! TweetRelated [...]

  50. “The Fold” is like a unicorn. They’re both magical and don’t exist. | The Terralever BlogTurnKey Linux Says:

    [...] Myths #3: People do not scroll Utilizing the Cut-off Look to Encourage Users To Scroll   “The Fold” is like a unicorn. They’re both magical and don’t [...]

Add a Comment