Item Pagination Design Pattern

February 13, 2006 at 5:37 am by Bill Scott | In Design | 9 Comments

Problem Summary

The user needs to view data items from a potentially large set of sorted data that will not be easy to display within a single page.

There are other patterns in this area that we will be documenting in the future. One of those is the Chronological Pagination pattern (no reference yet). While the Item Pagination is about moving through data that can be arbitrarily sorted, the Chronological Pagination will capture moving through data that has the sense of oldest to newest.

The other pattern we have documented in this set is Search Pagination. Search pagination focuses on controlling paging through search results that are usually sorted by relevance. With Item Pagination, the user may want to go through any number of pages to find information, Search Pagination results are generally most useful on the first page or so.

Pagination is the standard way of handling larger data sets. An alternate approach is using an endless or on-demand scrolling technique. In a future release of the pattern library we will document the Endless Scrolling pattern (which is currently used in the new Yahoo! Mail Beta.)

The pattern can be found at: Item Pagination.

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

9 Comments »

RSS feed for comments on this post. TrackBack URI

I was looking at the actual Design Pattern page and noticed a small issue. I’m not sure of the best place to post this, but take a look at the bullets under the “Solutions” header.

Solution
* Break the list of items into a sequence of pages.
* Display a control that contains links to the
* Provide links to access the previous and next pages of information.

That second one is cut off on the page. What’s it supposed to say?

Comment by Pat Cavit — February 14, 2006 #
Pat, thanks for catching that. The line should not be in the bullet list. It was a restructured sentence that somehow partially got back in :-(

Will update.

Comment by Bill Scott — February 14, 2006 #
possibly related, but: how about pagination that has a chronological order (i’m thinking news items, for instance). should (as i would argue) previous/next be reversed in their meaning, compared to this? or something more explicit, like “older / newer” or similar?

Comment by patrick h. lauke — February 14, 2006 #
If the data is sortable (and thus ordered) wouldn’t it benefit the user to know where objects fall in the pagination?

ie – instead of page 1, 2, 3 which tells the user nothing about whether a click to that page will be useful, show an indication of what page/item instances will be returned – a-ba, ba-ce, etc.

Comment by Karl Mochel — February 14, 2006 #
Patrick, we have a chronological pagination pattern under review.

Some of the questions that came up:
- is it newest, newer – older, oldest or
is it oldest, older – newer, newest
(I vote for the former, since time threaded is usually organized newest->oldest. but that can be changed)
- what happens if I can sort the contents (does this flip– i hope not :-)
- what if you can go between chronological and other sorts… it this case we have been recommending item pagination since it handles things generally.

thoughts?

Comment by Bill Scott — February 14, 2006 #
Karl,

This would work if the data is strictly sorted by alphabet, the data is fairly evenly spread across the range of alpha-buckets.

Alpha-buckets seem to work best when the size in each bucket is not fixed. In other words letting the alpha group decide the page chunking.

Fixed size chunking can leave some odd arrangements of alpha bucket labels (a-a,a-a,c-e or aa-ab,ab-az,ca-ez)

Also, if you change sort it can be problematic.

An alternate that I once used was to provide first, prev, page numbers, next, last + a combo box drop down that has the page chunking as you proposed. It is briefly mentioned in an
article I wrote last year.

There is also a screen shot.

Comment by Bill Scott — February 14, 2006 #
Some of the questions that came up:
- is it newest, newer – older, oldest or
is it oldest, older – newer, newest

i’m in two minds about it. personally, i prefer the first (newest to oldest), but from similar scenarios (calendar applications) time (think months, or days of the week) is usually sorted left to right oldest to newest. hmmm…

- what happens if I can sort the contents

sort as in changing a setting a la “show me the oldest first, or the newest first”? if it’s just that, then i’d say the order should remain the same.

- what if you can go between chronological and other sorts… it this case we have been recommending item pagination since it handles things generally.

if you’re sorting by different criteria, then the whole paginator would need to change (e.g. sorting by author may require a change to a generic prev/next).

Comment by patrick h. lauke — February 14, 2006 #
[...] This is quite timely, just tonight I was looking for Dustin Diaz’s AJAX contact form. Unfortunately, his personal blog was down, but I bet I could find it in here. Not to mention the pagination chore, the ratings widget, and more. [...]

Pingback by Yahoo’s new open-source code at last-child.com - Advanced CSS Design Resources — February 25, 2006 #
What about a text box where the user can type the page number so the user can jump right to that result page?

The current pattern requires several clicks to the next or prev buttons to reach the middle of the result set.

Comment by Alejandro — July 10, 2007 #

Yahoo! User Interface Blog (YUIBlog)