blink design library

Paging controls... when there are many pages

Paging controls are easy to design when there are just a handful of pages, typical of content sites where articles may extend over several pages.

But when there are hundreds or even thousands of pages--typical in search results--paging controls can easily get more complicated:

 

In general, users rarely venture beyond the first couple of pages of search results. If they don't see what they are looking for after reviewing a page or two, they are likely to revise their search using terms that either narrow or broaden their original query.

In this situation, the ability to go directly to a specific page can be a secondary function--as shown in this simple, compact approach:

 

The only downside to this design is that users must both enter a page number and press Return--something that may not be immediately apparent to all users.

Paging and scrolling navigation--together

As mentioned in a previous post, most web-based systems seem to bump into performance limits that prevent implementing infinite scrolling. And so some amount of paging navigation is usually required.

Tastebook combines both scrolling and paging navigation on a single page. It seems to have a limit of loading 100 items per page--which they've implemented within a scrolling frame. Paging links are at the bottom of the frame (click for full-sized image):

Though the paging links have relatively light visual weight, they are in a highly discoverable location: right at the end of the scroll bar.

Selecting Items Across Multiple Pages

Every web-based application I've worked on recently requires some degree of paging when the system returns large number of search results. The reason is performance constraints. While some search engines are able to present results using an infinite scroll (see Live image search), most systems seem to bump into performance limits as to how much can be loaded into a page.

Commonly, items that are distributed over a number of pages are subject to a "Select All" command. In this situation, the following question always comes up: Do we just select the items on the current page or do we select all items across all pages?

Gmail has a nice solution to this: give the user a choice.

By default, Gmail just selects the items on the current page. But it gives you a handy link at the top of the list to select across all pages (click to see full-sized image):

Here's how it looks when items are selected across pages:

This approach doesn't completely resolve the question, though, because you must select default behavior here (select single page or select across all pages).

In a study I recently completed, I found that  users expected "Select All" to do just that--select all items across all pages. The interface we tested gave users feedback on the number of items selected, but participants still wanted to check at least one other page to confirm that everything was indeed selected. This was a system participants used on a daily basis, and a few stated that they would just do this check the first time, but would subsequently feel comfortable the system had selected absolutely everything.