Pagination - Placement of Navigation Control Relative to Search Results?

Question

In a web application I am building, I will have a list of search results I am displaying to a user in a tabular format. I plan to page the results in smaller groups (10 for example) for performance reasons.

Has anyone done any usability studies or research as far as where the best location is for the paginator navigation control, relative to the result data if it's in a table format? Above the table, below the table, both above and below the table? Right, left, or center aligned?

Below is an example of a paginator navigation control just to illustrate the type of control I am referring to (not asking for feedback on the design/usefulness of this particular paginator).

Answer 1

Top or bottom:

A user is unlikely to need to know whether they need to move to another page until they've reached the bottom of the current page. So at a minimum place the page navigation at the bottom. That's assuming we are looking at results sorted by relevance rather than by some un-prioritized ordering.

Left or right

Position at bottom right for L-R languages. Right meaning right-aligned with the right hand edge of the result block itself - not to the frame of the page.

Optionally if your pagination was reduced to previous / next or newer / older for example (so not really pagination at all!) then you may split backward links to the left and forward links to the right (like TechCrunch for example).

Top and bottom?

If not all the results can be (made to be) guaranteed to fit on one page, then you might be tempted to also add them at the top so they are always visible.

Why then, does Google, in its infinite wisdom, not place navigation at top as well as bottom, (which they did actually used to do)?

By placing navigation at the top you may be prioritizing the navigation over the results themselves and offering a possible route to the next page without exploring the results below the fold, meaning that results at top of page n+1 may have more visibility than the results at the bottom of page n.

For this reason, try to avoid positioning them at the top - besides it may allow for an extra result to be displayed on the page. If this means detecting a suitable number of results to fit above the fold then that may be something worth testing.

Users like to be able to click successively to the next page without moving the mouse, so even if all your results fit on one unscrolled page, but you cannot guarantee the position of the bottom navigation to be the same on each page, then you may have a viable reason to position the navigation at the top where you can be sure of a constant positioning. Personally in this case, I would prefer a small gap and constant position than no gap and a varying position.

Exceptions

If your results are in fact not ordered by relevance then you may well need to put the navigation at the top anyway because it should essentially become part of your search terms (a form of indexing system) rather than being purely a pagination of results.

Finally - do you need it at all?

Consider whether an auto-load-on-scroll 'infinite' scrolling list may fit the purpose better than pagination. More and more examples of this are appearing, but it does very much depend on your particular scenario, for example a requirement for a sense of actual location within results or the need to be able to easily flip back and forth to specific page results and such like.

---

References:

Quince Infragistics Paging Patterns

Wellie Paging pattern

UI-patterns Paging pattern

Total Usability pagination controls

ux.se question: Whats the design rationale behind putting the pagination of the bottom end of the search results?

Note: I can't find what I consider to be an important missing reference as to google's own reasoning for removing pagination from the top of the results - I can't even remember how long ago that was.

Answer 2

Speaking from my own experience, whether putting the controls on left, center, or right doesn't matter as long as they are visually well integrated into the table.

As for putting it at the Top vs Bottom, you can make case for both...

1 - Case for putting it at the top:

Putting pagination control at the top is useful when you're dealing with search results that have predictable number of rows, and users know exactly what they're looking for. This often applies to internal users who do a lot of queries.

For example, if I'm looking for "McGyver" in a A-Z employee directory listing that spans across 20 pages, I can just go to page 10 using the pagination control located at the top. And if "McGyver" is not found on page 10, I can go to page 11 or 12 with relative ease. Imagine how annoying this would be if the pagination controls were at the bottom of the page.

2 - Case for putting it at the bottom:

Bottom is preferred for browsing and scouring where user is expected to scan from top-top-bottom, and search result is long enough to cause page scrolling. Imagine how annoying it would be to have to scroll back up just to paginate.

So the optimal location depends on the usage and whether the search result is long enough to cause scrolling. If you have to accommodate both case 1 and 2, then putting it at Top AND Bottom is also a viable option. (much to the chagrin of some UX and visual designers)

Answer 3

If your results table is scrollable, then it doesn't matter where you put the page navigator. It's all about the user flow, though.

I would say that you want the user to know that paging is available at the top of the table, and allow them to get to the next page when they scroll to the bottom. So I would flip your design. I would also put the widget on the right side, since that's how we read the English language, left to right. (For right to left reading languages, I would put it on the left).

As for the pagination widget and text regarding the results, it seems very confusing. The results is too wordy. Use '1-5 of 20' instead. As for the page number, that only useful if they're going to tell someone else that they are on page 3, so I would remove that from the wording.

Answer 4

There are countless times when I've wished for the pagination to be both at top and bottom. For e.g. with a big screen, when I can see all the results without scrolling, it seems to be more work to take the mouse to the bottom to change pages.

Just off the cuff, an interesting idea might be to have a smaller prev/next control at the top and a more detailed pagination control like yours at the bottom.

Answer 5

I would like to inform you that there are frameworks you can utilize that has table components with automatic paging. The table content is requested in chunks that update as the user scrolls to the current final item in the table. One framework that utilizes this is Vaadin, but there are others.

I realize that this doesn't really answer your question per say, but you already have a lot of nice input from other users, e.g. Roger's looks good. But if your task is to develop a rich web application then looking into utilizing a suitable framework would be a good idea.

Check out the link if you think it sounds interesting!