• Stop Pagination Now

   

  Why websites should not make you click and click and click for the full story.
• Monday, Oct. 1, 2012
• agination persists because splitting a single-page article into two pages can, in theory, yield twice as many opportunities to display ads—though in practice it doesn’t because lots of readers never bother to click past the first page. The practice has become so ubiquitous that it’s numbed many publications and readers into thinking that multipage design is how the Web has always been, and how it should be.
• hat’s exactly what has happened with pagination. Every day at Slate, at the New York Times, the Washington Post, The New Yorker, Politico, Bloomberg Businessweek, Esquire, GQ, New York, Wired and countless other sites, I and tens of millions of other innocent readers click on articles that turn out to be mere fractions of articles. Pieces that should be readable on a single scroll require one, two, three, four, five, six, seven, eight, nine, or more page clicks. (Just look at any Esquire article by Chris Jones.)
• The savvy know about ways to get around the clicks—when I’m presented with a many-page piece, I immediately search for the site’s single-page button. For sites I visit often (like Slate and the New York Times) my fingers have committed the location of the single-page button to muscle memory; I click to see the article, and then, almost automatically, click again to see the whole thing. And when I realize the site doesn’t have a single-page view (I’m looking at you, Washington Post) I make a mental note to spit on my hand the next time I meet that site’s Web designer.
• Slate began paginating in 2005, almost a decade after it was founded. The primary motivation was to boost pageviews and, thus, advertising, but a secondary reason was to make long articles friendlier.
• But I think that thoughtful design can improve how long articles look on the Web. One example of this is the Verge, which publishes very long pieces every day and makes them look stunning and manageable without page breaks. In its long pieces, the Verge breaks up blocks of text with photos and design elements like pull-quotes, and each article has internal navigation buttons that let you go to specific sections of the piece. (In this review of the new Kindle, for instance, you can click on “Hardware” or “Software, battery” to scroll directly to those topics.)
• I asked Joshua Topolsky, the Verge’s editor, whether he had a hard time convincing the advertising sales department at the magazine to ditch pages. He said he didn’t: “From the beginning, there's been a company-wide belief that we can marry great advertising with great content and not have to cheat or trick our users,” Topolsky emailed. “And so far, that's proven 100 percent correct. Our traffic has been on a big climb, and I believe advertisers are really beginning to see the true value in engaged users who care (and return) versus sheer volume of pageviews (though our pageviews have also been through the roof).”
• BuzzFeed can afford to run stories in full because its advertising model—which relies more on “branded content” and not banner ads—doesn’t rely on pageviews.

7 more annotations...

• Tuesday, June 28, 2005
• One nice feature I added was a pre-calculation of the first and last field values of each page for the sorted column. I then displayed this in a page navigation combo box
• given the requirement for the user to move through the flights and make multiple selections before moving to the next step, we were concerned with the usability of this approach. First, would users really think their flight would still be selected after paging to the next set of results? Seeing the page refresh does not make one think everything has been kept. Second, the user really wanted scrolling tables.
• Death to Paging?
  First, let me say that I really don't believe that paging is evil or that it is wrong in all cases. But I believe the reason that most sites have paging solutions is because 1) its easy to implement, 2) handles the problem of large sets of data and 3) it is convention.
  
  Rarely is paging decided because it is the better choice over something like scrolling.
• Pros
  • Familiarity. Anyone who has used a PC/Mac is familar with a scrollbar
  • Ease of use. Just scroll it baby.
  • Control is visible along the side, not hidden at the bottom
  • Shows you how much data you have and where you are in relation
  • With the tooltip and the results feedback it provides you something to watch and helps you to navigate while data loads.
  • I don't have to configure how much I want to see on a page. Designers decide what works best and then you can just scroll through it.
    
  Cons
  
  • The old problem of I have two scrollbars. One in the window around the results the other on the page itself. [Solutions: make scrollbar styled differently? Keep the complete scroller above the fold]
  • If you have millions of results, you might not want to set the scroller extent to millions. The granularity of the scroll bar gets to be too small. However, it would be fascinating to actually scroll down to those last results. Anybody actually seen those? Do we even know if they exist ;-)
  • Scroller extending below the page fold. Perhaps the best use is to keep the scrolled area completely above the fold. But hey, since you can scroll so fast through your data you won't miss the few extra rows of information below the fold (that you had to scroll to anyway.)

3 more annotations...

• The History of Infinite Scroll

   
   

  Here is the history as far as I’ve seen it:

   

   
  • 2005 June 23 – Ma.La releases the Google Auto Pager greasemonkey script.
   
  • 2005 June 28 – Bill Scott releases Rico LiveGrid and writes “Death To Paging!”
   
  • 2006 April 25 – Humanized Reader launches with “Infinite History”
   
  • 2006 September 14(ish) – Yahoo Mail (beta) utilizes the same LiveGrid technology
   
  • 2006 September 17 – Microsoft’s Live.com Image Search includes infinite scroll.
   
  • 2006 October 31 – Peter Forde writes Endless Pageless and releases a Rails plugin
   
  • 2007 April 17 – swdyh releases AutoPagerize greasemonkey script, enabling infinite scroll for nearly every site.
   
  • 2008 June 29 – infinite-scroll.com debuts with initial release of wordpress plugin
   

   

  * Google Reader uses the same preloading LiveGrid technology. Anyone know when this debuted?

• Twitter and Facebook do something similar but a button or link is
   needed to expand the content.

  • I wonder if adding the required action (click of a button) to load additional content on the page (infinite scroll) solves the problem infinite scroll brings to pages that need clicks for advertising reasons.

• I think the reason it didn’t work was because the kind of interaction the user has with the data is much more suited to a paginated interface than an infinite scroll. In the case of something like Etsy, the user is searching for something in particular within the list of results. In the case of something like Twitter, the user is scanning and consuming the flow of information. In the latter case, infinite scroll makes sense because the user is essentially reading or scanning down the list of tweets until they get bored. In the former case the user isn’t just linearly consuming the data, they’re mapping the information in their mind, trying to remember the items they like or think are worth researching further.

  • Good point - pagination for search / scroll for scanning and consuming content.
• Having a paginated interface lets the user keep a mental location of the item.

• One thing infinite scrolling does not allow the user to do, for example, is skip over certain results.

  • I wonder if this holds true for news sites where readers are looking to skip past an article(s).
• Another disadvantage of infinite scrolling is that it can potentially lead to a browser crash, especially if the user has an older browser.
• Google and other search engines tend to read the beginning of a page, but not the end of it. Therefore, there’s a risk that content “below the fold” on an infinite scroll page – which could be hundreds of items – will not be registered by search engines. Other infinite scroll plug-in designers insist that at least their infinite scroll plug-in is totally SEO friendly.

1 more annotation...

• Keep the navigation bar persistently visible
• Give users feedback when loading new content
• Show how much content has loaded and how much is left

• Use a More button if you have a footer

   

  If your site has a footer and you’re going to use infinite scrolling, use a More button to load new content. New content won’t automatically load until the user clicks the More button. This way users can get to your footer easily without having to chase it down. Without the More button, users would only have a few seconds before the footer disappears off the page. This makes getting to the footer difficult. With a More button users, users would have control over content and the footer.
• Bring users back to their previous spot when they click back
• After endlessly scrolling through content, losing their spot on the page forces users to have to endlessly scroll through content they have already seen. This inconveniently gives users more work than they need. It can cause users to give up on your site and move on.

  • This is a good point - not just for ecommerce. If a consumer is reading, is interrupted and leaves the site, then comes back - s/he is going to want to go back to the previous spot on the page.

5 more annotations...

• This shows a potential solution to the "below the fold" problem where users do not scroll to read text below the visible screen. Web page designers should be encouraged to use the 2-column layout to maximize fixations on lengthy text.

• If we can assume that the purpose of a site homepage is to provide users the most efficient access to a limited number of top news stories, then the observed variability intimates that the information search was less optimal on newspaper sites.
• First, as observed, link groupings attracted user attention and served as a focal point of navigation.
• Second, the link listings grouped items of similar functionality into a single prominent area of the display and they conveyed to users what stories the news editors deemed as most newsworthy
• Third, the links were easily scanned (visually) and their proximity to each other may have provoked users’ interest in stories that they would have otherwise missed.
• While speculative, it is possible that link groupings offer a focal point for navigation and, at the same time, engender more thorough reading.
• Newspaper sites could potentially reduce variability in visual attention and provide an easily scanned list of top news stories by grouping links consistently in upper regions of the page. This navigation structure could be used in addition to the current headlines navigation and it may provide a more efficient means of navigation and perhaps more focused reading.

4 more annotations...

• Infinite scrolling, for example, is a technological achievement that also helps the user by enabling a more seamless experience
• Infinite scrolling is familiar to everyone, even if they don't realize it. It works best for unstructured information; live feed style, sorted by time.
• By pairing infinite scroll with a floating right column and a "back to top" button, the site allows users to consume endlessly and still get to other parts of the site easily.
• pagination may still be the best technique for search results, large lists, and e-commerce.

2 more annotations...

• There are also many Pinterest pages that scroll on and on forever. Some, like the Videos page, also seem like a random hodge podge of content. It would be nice to be able to filter such pages using key attributes, which could be discovered in a user research exercise. It would also be helpful to be able to search within a Pin Board or Everything topic, rather than the whole Pinterest site, to make the search results more relevant.

  • It is an interesting idea that the infinite scroll might be more useful and pleasurable if the content within the scroll could be filtered.

• Benefits of the Scrollbar

  In addition to allowing the user to scroll, the scrollbar has several other important benefits. The height of the scrollbar relative to the window corresponds to the height of the visible content relative to that of the full content. This provides an at-a-glance sense of scope and orientation. In addition, the mere existence of the scrollbar indicates that content is hidden, and communicates the direction users must scroll to find it. Furthermore, when navigating a long piece of content, the scrollbar offers a way to rapidly move to a specific point within that content. Finally, the universal familiarity with the scrollbar makes it a very intuitive interface element for the vast majority of users. It provides all these benefits elegantly and efficiently, without distracting from the page content.
• For web pages and mobile devices, scrolling vertically is very standardized. Content almost always extends vertically, so an indication of how to find hidden content is rarely needed.

• 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.
• Long pages    continue to be problematic because of users'    limited attention span    . People prefer sites that get to the point and let them get things done quickly. Besides the basic reluctance to read more words, scrolling is extra work.
• The    real estate above the fold is more valuable    than stuff below the fold for attracting and keeping users' attention.
• Information foraging    theory says that people decide whether to continue along a path (including scrolling path down a page) based on the current content's    information scent    . In other words, users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable.
• the    last element in a list    often attracts additional attention. The first few items are definitely the most important, but the final item gets more views than the one before it.
• The end of a list's importance is further enhanced by the    recency effect    , which says that the last thing a person sees remains particularly salient in the mind.

• The implications are clear: the material that's the    most important for the users' goals or your business goals should be above the fold    . Users do look below the fold, but not nearly as much as they look above the fold. 

   

    People will look very far down a page if (a) the    layout encourages scanning    , and (b) the initially viewable information makes them    believe that it will be worth their time    to scroll. 

   

    Finally, while placing the most important stuff on top, don't forget to put a    nice morsel at the very bottom    .

5 more annotations...

• Why has the fold been held in such reverence? Because there is an assumption in the industry that users don't scroll. Recent studies have found this assumption to be not only incorrect, but in fact, the opposite of user behavior. Users are willing to scroll. In fact, a significant portion of them spend more time below the fold than above. Users have become jaded to the fold, assuming that the top portion of a page, which contains a disproportionate amount of ads, has been compromised by sponsored content. The real content, the in-depth content, will most likely be listed below.
• Devices such as tablets and smartphones have ingrained the concept of scrolling in the user mentality. In several studies, statistics have shown that a majority of users scroll for content, regardless of any fold considerations. In many instances, content and ads can do even better at the bottom of the page than they can at the top.

• On just about every website design project I’ve worked on here at the usmangroup, there is a constant struggle when explaining to the client that people are willing to scroll down a page if properly guided. However, this is not the only way to present additional information. You can also create supplementary pages specific to an idea, topic, subject, product, etc. One thing is for certain, overcrowding a page because you want to fit as much information on the screen as possible, is definitely an amateur approach.

• Participants reported that they preferred the Summary condition over the Links only condition because the brief summaries accompanying the headline links often guided them to the information they were searching for. Participants commented that, in the Links condition, they sometimes felt as if they were "jumping blindly" into the article.
• Several participants also reported that they did not like having to scroll through all of the articles in the Full condition.
• This study suggests that providing a small amount of information about an article on a page is superior to having long, scrolling pages filled with articles.

2 more annotations...

• reading speed significantly faster for the two-column full-justified text than for one-column full-justified, and significantly faster for one-column left-justified than for one-column full-justified or three-column full-justified text. Post-hoc analyses indicate that the faster readers may have benefited most from the two-column justified format.
• To date, research investigating the optimal use of line length, multiple columns, and text justification is inconclusive. Longer line lengths typically result in faster reading times (Duchnicky and Kolers, 1983; Dyson and Kipping, 1997; Dyson and Kipping, 1998; Dyson and Haselgrove, 2001), but research suggests medium to short line lengths typically may result in higher comprehension (Tinker, 1963; de Brujin, de Mal, & van Oostendorp, 1992; Chaparro et al., 2004).

• onger line lengths generally facilitate faster reading speeds.

   

  Shorter line lengths result in increased comprehension.

   

  The optimal number of characters per line is between 45 and 65.
• Paging through online text generally results in better comprehension than scrolling.

  • Seems that most studies indicate that scrolling is faster - this study sites an increase of comprehension with paging.

• Reading speed is faster for both single and multiple columns, but preference is for multiple short columns.

   

  Left-justified text is read faster than full-justified text.
• esults from this study showed that reading speed was significantly faster for two-column full-justified text than for one-column full-justified text. Post-hoc analyses showed that it was the fastest readers that benefited the most from this format.
• Slower readers showed their fastest reading and highest reading efficiency at the one-column left-justification condition.
• A two-column full-justified format is best for situations where fast readers are the primary audience. However, for more a more equalized setting, a layout with no strong advantages or disadvantages may be best.
• The results of this study suggest that there is not one best way to present text online. Although fast readers performed best at the two-column full-justified condition, slow readers benefited from a single column non-justified layout. This suggests that users should have the option to customize web pages to suit their reading needs. To date, there are very few sites that allow users to tailor information displays into multiple columns or adjust justification styles or font types. Giving users these options can help increase their reading speed with the text, and eventually may lead to a more optimal online reading experience.

  • Very interesting point. A newspaper site that allows readers to tailor how information is displayed would increase the user's experience.

7 more annotations...

• Clicking offers users a menu of links that take them to a new page. Scrolling offers users all the content divided into different sections on a single page.
• Scrolling has become a second-nature and clicking a chore.
• Scrolling is faster for users than clicking.
• Users get content in the order that it’s designed on the page with a glimpse of everything.
• Scrolling keeps users in their reading flow.
• Clicking allows you to track user clicks to a page with analytics. You can’t do this with scrolling.
• Each page will have a link that you can share with others. This link will also index in search engines. With scrolling, only the top-level page will index.
• crolling is better for usability. But clicking is better for analytics and search engines

7 more annotations...

• How do you determine if it’s worth engaging that scroll wheel on your mouse (or swipe on your touchscreen) to see more? I believe it happens because of two things: you were intrigued quickly by a “thesis,” and you were subtly, or blatantly, told that there was more to be seen.
• This was applied to web design because when mainstream web-use was in its infancy, scrolling was nowhere near as easy as it is today.
• The problem with designing for the fold today is that it is quite elusive. Years ago, 600 px was the average fold height; typical of a 1024 x 768 display. Now that mobile devices make up around 10% of global web traffic—20% in the U.S.—the fold has become even harder to pin down
• However, tablets add another twist because, depending on how you rotate the device, the site is scaled and displayed differently. The fold is now further from a hard number than it has ever been.
• The truth of the matter is that users are willing to, and most often do, scroll past the fold—if you give them a reason to (source: Clicktale.com²). The purpose of the content placed above the fold is to give the user a reason to scroll to hear the whole story.
• So, what’s the best way to give a user a reason to scroll down? The important thing is to make sure that you intrigue the user quickly with what I would like to call your “thesis”—preferably within the traditional top 600px. Tell the user what you are about in an interesting and compelling manner, and cue them—either by visual means, verbal means, or both—that there is a story worth scrolling for

4 more annotations...

• The latest advances in code allow you to use the act of scrolling to lead readers through a narrative, focus on important information, feel like they are physically moving through a site. In short, the online experience becomes much more of, well, an experience.
• pages full of lists of links that ostensibly provided users with a glimpse of the full depth of information available. What these pages really accomplished was to give users click fatigue as they sometimes had to click three and four levels deep to get to some actual information.
• The average size of monitors sold today is 21 inches, reports TechnoBuffalo², and more and more people are using multiple screens. According to StatCounter³, average screen resolution is 1366×768.
• We’re used to gestures well beyond click – we touch, we flick, we swipe too.
• The result: people used the scrollbar on 76% of the pages, with 22% being scrolled all the way to the bottom regardless of the length of the page.
• while attention is focused above the fold, people do scroll down, especially if the page is designed to encourage scrolling.
• the most clicked link on the homepage is at the very bottom.
• people do scroll if certain design guidelines are followed.
• users can read long, scrolling pages faster than paginated ones. Their studies confirm that people are accustomed to scrolling.
• The usability data does point out something distinctly human. It’s something that newspapers have known for decades. You’re only as good as what you put above the fold. If what you have there is great, then people will not only read on, they’ll turn the page. There in lies the magic. It’s not about whether people will scroll, it’s about whether your content has raised in them enough interest to want to scroll.
• scrolling through a site is actually faster than clicking through it. Mouse wheels and touchpad swipes allow users to scroll through content with a flick of a finger. Compare that with clicking, where users have to find the link, read it, target it, click it and wait for the page to load
• Scrolling keeps users in their reading flow.

10 more annotations...