58

Which is faster? Scrolling down or clicking a button to reveal more content? Currently, our site requires clicking of page numbers to reveal more content. We have 9 channels per page, which fits on one screen in most common resolutions.

Personally, I believe having 2 or 3 pages worth of content and scrolling down to reveal those pages would be easier. We should have 20+ channels per page. I just flick my mouse wheel or hit the down key. I don't have to aim at a tiny button (which takes longer as per Fitts's Law).

5
  • The following design patterns contain discussions of the pros and cons of paging versus continuous scrolling: developer.yahoo.com/ypatterns/navigation/pagination/item.html ui-patterns.com/patterns/ContinuousScrolling welie.com/patterns/showPattern.php?patternID=paging Oct 6, 2010 at 10:54
  • 1
    I don't think you need to dig through study findings or research results to realize that using a mouse wheel with the cursor anywhere on the page is much easier than moving the cursor to a target and clicking it. Oct 6, 2010 at 13:04
  • Do your users use Amazon or Ebay or Facebook or Twitter? If so, then yea, scrolling is the way to go.
    – DA01
    Oct 6, 2010 at 14:54
  • One thing that scrolling can't do easily is jump to a specific point/page. If this is not something that the user needs to do regularly then it is not an issue. In terms of having all the content available and letting the user scan, scrolling is more effective. But in terms of progressively disclosing content to the user, a user-driven event like a mouse click is more effective.
    – Michael Lai
    Sep 4, 2013 at 3:46
  • @MichaelLai you can always click on the progress bar to jump to a approximate location. Clicking on page 6 doesn't really mean anything, you can't really know what's on each page unless you've already seen it and if you know what you're looking for, scrolling lets you jump through the results using the browser's find functionality. May 24, 2019 at 22:56

7 Answers 7

54

Paging should be used to break content into semantic or task-related groups of content, such as by your categories in your menu bar on the left. This allows users to find content by what it is (e.g., the page title in a menu) rather than where it is (e.g., page number or relative position in a scrolling page). Generally user tasks depend on what (“I need to check sports”) not where (“I need to check channels two-thirds down the list”).

Each page of related content may scroll. At one time, you couldn’t rely on nearly all users knowing how to scroll, so designers were advised to keep all content “above the fold.” That concern is largely gone now, and users are perfectly able and willing to scroll if there are signs the content they want is further down the page (although for the sake of efficiency, you still should put the content users want most at the top, such as provided by your sorting feature). [See Jakob Nielsen's article, "Scrolling and Attention."]

In your case, it looks like you’ve a list that is arbitrarily broken into pages. That is almost always inferior to putting everything in one large scrolling list. I’ve found scrolling to be about three times faster than paging for finding and comparing data in a table or list. More systematic research on search results (pretty close to what you have) found that pages of 50 items could be scanned through faster than pages of 10 items (100 items were apparently not significantly different than 50, but at that point, there were only two pages of results).

Scrolling has the following advantages over paging in lists and tables (not all necessarily apply in your case):

  • The scrollbar control is standardized so most users are already familiar with it. Paging lacks standardization so it takes attention and learning to use it (e.g., where in the page the links are located, whether there’s a First or Last link, whether there are links to selected individual pages).

  • The number of items shown can adjust automatically with window resizing, allowing users to optimize the number of items visible in one step and avoiding situations when there is both scrolling and paging.

  • The scrollbar is quickly accessible no matter where the user is in the window. Paging interfaces typically provide the page links at only the top and/or bottom of the page which can mean a long slew; they may even scroll out of view.

  • Users can move as little as one item at a time to show the items they want to see together. Paging splits items into arbitrary groups which can result in the items of interest being split across pages.

  • Users can scroll to anywhere in the list with a single drag. Paging is limited to the page links shown, generally limiting the user to move only around the immediate neighborhood.

  • Users can multi-select any set of items to perform an action on them (e.g., copying, deleting), and users can look at any other item while maintaining the current selection. Paging generally allows and maintains only selection of the items on the current page.

  • User sorting is less likely to result in disorientation. With scrolling you can leave the scroll position where it is or you can automatically scroll to “chase” the list item that currently has focus; either way users do okay. However, with paging, users can be disoriented when sorting changes everything on their current page or if their page number changes to some other value to keep the current item in focus. Many paging implementations (like yours) reset the user to Page 1 after sorting, which seems to avoid disorientation, but too often requires the user to re-navigate to a particular item.

  • Users can still move one “page” at a time anyway by clicking the “track” of the scrollbar.

I would recommend you put all your channels in a single scrolling pane. Put the channel list in a separate pane or frame from the menu and other general controls so they remain easy to access. Mixing paging and scrolling (e.g., 20 of 127 channels per page) may be worse than paging alone, forcing the user to decide when to do each, and sometimes they may need to do both (e.g., scroll up or down to the links to page). It looks like 127 channels is about 500kB to load in one page. Presumably your users have high-speed connections if they’re watching TV on the web, so you can count on the 500kB loading in only a few seconds.

Now 127 channels on a single page may appear to be "too many" to the user, so you may want to break them up within the page (e.g., putting in headers for "Today," "Yesterday," "Last Week" when sorted by Newest).

3
9

Although scrolling is the preferred way in many scenarios, in a wizard/tutorial or any other similar "do one thing, then do the next thing" situation, a next/"1,2,3..." button can be a better way, so that the user knows that he/she is leaving the previous step/question and a new one can be dealt with.

5

In addition to the points mentioned in the accepted answer:

Scrolling has more built-in affordances than a next-click:

  • dragging the scrollbar to scroll with life preview
  • clicking the scrollbar to jump page-wise
  • clicking the end buttons for small steps (ideally, per item)
  • mouse scroll wheel (or similar mechanisms on laptops)
  • Page up / Page Down, Cursor up / Cursor down buttons

All these mechanisms are rather standardized, and users are familiar with it. The scrollbar is often a mere indicator that I can use the scroll wheel.

The only downside of a badly implemented scrollbar is that it's not item oriented, i.e. the jump distances do not directly correlate to content. (Or, in other words, it may be hard to implement that way).

1
  • "The only downside of a badly implemented scrollbar is that it's not item oriented, i.e. the jump distances do not directly correlate to content." . I love Sausage.js as a nice enrichment for this. See: christophercliff.github.com/sausage Feb 1, 2012 at 19:58
2

If you are asking about speed, then scrolling is definitely faster than clicking through tens of pages, 9 items on each. The only drawback of scrolling long pages might be the user disorientation, once there are more than 50 items on a page.

I think you could compare this with web interface of Twitter. Wouldn't it be annyoying if you had only 9 tweets per page and had to click the "next / previous" buttons in the bottom...

2

Let alone a trackpad with inertia scrolling!

I really dislike those little next/previous page icons/links. When the content forms a whole, stick it in one page and scroll. Else, section it with a decent TOC or categories.

On your site, the "All" requires 23 pages! If you stick this in a single scrolling page, you may want to break it up in some meaningful way, e.g., by category, alphabetically, … In such a case, the sidebar becomes a TOC, and clicking an entry jumps to that position within the page. Easy jumping and scrolling combined.

1

Pagination is definitely slower than scrolling down a page. However, pagination has its advantages. It makes tracking results easier. If the type of list you have demands stricter order and counting, pagination can help.

0

Without a doubt scrolling is way faster than finding and clicking a link. But just because it's faster doesn't mean you should make your pages super long. In other words, you shouldn't use infinite scrolling in every situation because if there's too much content users might not have the patience to scroll to the very end.

Why Scrolling is the New Click

This article points out that if you design your page for scrolling users can "see all content in order on the page without needing to click any links." But if you use page links, "users can skip a page link and go to the one they like without ever visiting the pages they skipped. If a page link label doesn’t appeal to them, they won’t click it and see the content behind that link."

That means you're in danger of users not seeing certain content if they don't click one of your page links. But if they scroll, it's almost certain they will see it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.