Scroll Stoppers at MensHealth.com

Jared Spool

April 12th, 2007

Yesterday, I had the opportunity to watch a user try to gather some fitness information from the Men’s Health magazine site. They went to the home page, clicked on the Fitness link in the navigation bar.

When the page loaded, this is what they saw:

Original size window of the fitness page at MensHealth.com

“That’s not very much information,” the user exclaimed. “I don’t think these guys are serious about fitness stuff.” Then the user left the site.

While the user’s window was pretty big (782×614 pixels), the information presented made it look like only 4 articles and 1 video was available.

In fact, There was quite a bit more. Had the user opened their browser to the full height of the screen, they would’ve seen this:

Full screen view of the MensHealth.com page

And there was another screenful below that.

But the user didn’t open their browser full. Nor did they attempt to scroll, even though the scroll bars clearly show there’s more both vertically and horizontally.

This is a classic example of a scroll stopper. Scroll stoppers are design elements that prevent users from scrolling because they inadvertently give the impression there’s nothing else on the page.

In this case, the large unused space located under the list of articles and the lower border of the video conspired to make our user think they were seeing all there was to see. Users are very sensitive to visual cues like this.

Observing users reacting to scroll stoppers can give designers the mistaken belief that users don’t like to scroll. However, all the evidence we’ve collected suggests that’s not true at all. They love to scroll, assuming the page makes it clear there’s something to scroll to.

4 Responses to “Scroll Stoppers at MensHealth.com”

  1. Steve Portigal Says:

    I encountered one of these today! I signed up for a shipping account at FedEx.com and it walks through filling out various bits of content, contact info, then credit info, etc. All the zones are available on screen, but the credit card info (except for the title) is below the fold. The contact info was already populated, so I tweaked one or two fields and hit the associated continue button. The status bar told me it was loading a page about credit card, but it was exactly the same page, as if there was some error in the address or something. I tried this several times and somehow I ended up scrolling down to see that the credit section was also waiting to be filled in, with its OWN continue button. I don’t know what made me scroll, but it’s clear that the visual cues were absolutely scroll stoppers. In this case, scroll stopping 100% broke the registration process. Bad fedex.com, bad.

  2. Jim Bunzol Says:

    Here’s a bit of irony for you. I emailed a link to this article to my colleagues and we encountered a literal “scroll stopper” on this page. When my colleague clicked the link, the bottom of the page was where the “Podcast Powered by” text is located on the right side of the page. He was unable to scroll any further.

    My first question was what operating system (Windows XP, same as me) and my next question was screen resolution (1024×768, mine was 1280×1024). Both browsers were IE 6.

    Since I was unable to recreate this issue at 1280×1024, I then switched to 1024×768 resolution and, snap, there it was. This page literally stopped where the “Podcast Powered by” text is located on the right side of the page. I had to refresh the page to be able to view the rest of the screen. I tested this with multiple users and came to the same conclusion.

    Now after switching back to 1280×1024, the same issue is recurring everytime I click the link to the page. I then tested the scenario with a fourth user and found that if the user has no browser window open and clicks the link, the page will not fully display, however, if there is already a browser window open and the user clicks the link, then the page will fully display in the already open browser window. I then realized that it has nothing to do with the screen resolution, but rather if the page opens in a new window or in an existing window.

    I only find this comment important because if people don’t realize there is more to this page, they will miss the link to the article “As the Page Scrolls” which is at the end of this article. Of course if this does happen, the user will also not see the comments section which renders this particular comment moot. Both articles are excellent reading. 🙂

  3. Kendall Says:

    Well if you check out the source code for Men’s Health you’ll see why it has issues. It has some of the ugliest code I ever did see. They really need to work on their layouts though. The problem you identify is definitely a problem.

  4. Phil Says:

    Good point. We are working through a redesign to our home page at rezoom.com and have had to take this into consideration. We are adding a number of modular widgets to display different data and we are currently working on testing different browser sizes for “first impression” looks just to be sure all our fancy new modules get some attention if they are below the page line.

    If anyone reading doesn’t already know about it, browsercam.com is a good resource for seeing your site on a number of different browser and resolution combinations. They basically just load it up and creat screen captures and send them to you. Pretty niffty.

Add a Comment