Utilizing the Cut-off Look to Encourage Users To Scroll
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 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:
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.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 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.
August 2nd, 2006 at 8:23 pm
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?
August 2nd, 2006 at 10:54 pm
[...] A recent research by UIE revealed that users scroll if there is a clue that there is something below the fold. [...]
August 3rd, 2006 at 11:53 am
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.
August 4th, 2006 at 2:41 pm
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?
August 4th, 2006 at 11:02 pm
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.
August 7th, 2006 at 5:01 pm
[...] Utilizing the Cut-off Look to Encourage Users To Scroll [...]
August 7th, 2006 at 5:24 pm
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.
August 8th, 2006 at 11:35 am
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.
August 8th, 2006 at 4:12 pm
[...] 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 [...]
August 8th, 2006 at 10:11 pm
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’.
August 15th, 2006 at 6:59 am
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!
August 18th, 2006 at 9:52 am
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.
August 29th, 2006 at 4:28 pm
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…
February 20th, 2007 at 5:59 am
頁面長度與使用者行為的一些資料…
…
July 17th, 2007 at 2:39 pm
[...] 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, [...]
July 24th, 2007 at 5:56 pm
[...] 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 [...]
July 25th, 2007 at 9:54 am
[...] 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 [...]
July 25th, 2007 at 9:58 pm
[...] 1 Jared Spool’s UIE Brain Sparks, August 2, 2006:Utilizing the Cut-off Look to Encourage Users To Scroll [...]
August 8th, 2007 at 3:05 pm
Compare and contrast:
http://www.boxesandarrows.com/view/blasting-the-myth-of
August 10th, 2007 at 8:41 am
[...] 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 [...]
August 17th, 2007 at 12:21 pm
[...] #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. [...]
August 27th, 2007 at 7:10 pm
[...] 1 Jared Spool’s UIE Brain Sparks, August 2, 2006: Utilizing the Cut-off Look to Encourage Users To Scroll [...]
December 20th, 2007 at 6:21 am
[...] 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 [...]
January 2nd, 2008 at 8:40 am
[...] 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 [...]
February 16th, 2008 at 6:44 pm
[...] 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, [...]
March 7th, 2008 at 11:43 am
[...] 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, [...]
April 21st, 2008 at 7:20 am
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!
May 21st, 2008 at 8:27 am
[...] 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, [...]
August 19th, 2008 at 12:41 pm
[...] 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). [...]
August 22nd, 2008 at 10:50 am
[...] 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). [...]
November 10th, 2008 at 7:12 pm
[...] “Zorg ervoor dat de inhoud van de homepage op één pagina past.” Mensen scrollen ook op homepages. [...]
February 21st, 2009 at 11:10 pm
[...] Utilizing the Cut-off Look to Encourage Users To Scroll [...]
March 13th, 2009 at 5:44 pm
[...] 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 [...]
June 11th, 2009 at 11:06 pm
[...] 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) [...]