Usable pagination

14 Sep 2005 - 4:33pm
8 years ago
10 replies
1494 reads
Derek Andriesian
2005

do you guys know of any resources or examples of well implemented
Pagination on large sortable data sets? Thanks

Comments

15 Sep 2005 - 7:19am
Shep McKee
2005

Here's a recent attempt at addressing some of the problems inherent
with paged tables...

http://openrico.org/rico/livegrid.page

On Sep 14, 2005, at 5:33 PM, Derek Andriesian wrote:
> do you guys know of any resources or examples of well implemented
> Pagination on large sortable data sets? Thanks

15 Sep 2005 - 7:49am
Navneet Nair
2004

Interesting, but ideally there should be some response from the grid when
the table data goes blank. If the user sees the data disappear from the
table s/he would think there is something wrong with the application. A
simple floating div that displays information like 'Stop scrolling to see
the data' or 'Loading data...' would do the job here...

Here's a recent attempt at addressing some of the problems inherent
> with paged tables...
>
> http://openrico.org/rico/livegrid.page

----------------------------------------------------
> Navneet Nair
> Interaction Architect
> onClipEvent: form follows function();
> ----------------------------------------------------
> Website: http://www.onclipevent.com
> Blog: http://www.onclipevent.com/enterframe/
>

15 Sep 2005 - 2:03pm
Bill Scott
2005

You are completely correct about the lack of feedback.

I'm the author of the livegrid demo using the Yahoo Search. I just haven't had time to go back in and add either a twirling wheel in the line above the table or a floating div that says Loading...

We had lots of discussions about the appropriateness of the delay message (sometimes they can be annoying. Earlier we had a version of the livegrid that did not scroll the grid but instead blanked the data and filled in the results when the grid stopped scrolling. It was not as pleasing. By animating the grid scroll it helps the user understand. I was actually experimenting if that would be enough without the wheel or busy indicator. And alas determined it needs but have been to busy to add it back in.

Another approach to showing busy in a scoller is like the new Yahoo! Mail does, where each line in the grid says "Loading..." while scrolling until it updates. Yahoo! Mail now incorporates the same concept as the livegrid. In fact the author of the livegrid control for Rico now works in the Yahoo Mail team.

You can read my thoughts a few months ago on the concept of "endless scrolling" at my blog (looksgoodworkswell.com). Specifically the blog article is at:
http://looksgoodworkswell.blogspot.com/2005/06/death-to-paging-rico-livegrid-released.html

I think I make it clear in the article, but scrolling is not always preferable to paging. Scrolling is very important if selection needs to be maintained across a list that would be broken into pages otherwise. Or if sorting or filtering will effect what is seen. In these cases the chunking is an artifact of using paging. If the usefulness of the data is only at the top (like search) the value is actually less-- however, it is still useful to be able to quickly bump to the next few results or pageful with the control of the scroller.

In the article I discuss pagination w/Ajax as well as scrolling.

We are looking at these issues closely at Yahoo where I now work.

--
Bill Scott
Interaction Designer/Ajax Evangelist
Yahoo!

----- Original Message ----
From: Navneet Nair <navneet.nair at gmail.com>
To: discuss-interactiondesigners.com at lists.interactiondesigners.com
Sent: Thu Sep 15 05:49:19 2005
Subject: Re: [ID Discuss] Usable pagination

[Please voluntarily trim replies to include only relevant quoted material.]

Interesting, but ideally there should be some response from the grid when
the table data goes blank. If the user sees the data disappear from the
table s/he would think there is something wrong with the application. A
simple floating div that displays information like 'Stop scrolling to see
the data' or 'Loading data...' would do the job here...

Here's a recent attempt at addressing some of the problems inherent
> with paged tables...
>
> http://openrico.org/rico/livegrid.page

----------------------------------------------------
> Navneet Nair
> Interaction Architect
> onClipEvent: form follows function();
> ----------------------------------------------------
> Website: http://www.onclipevent.com
> Blog: http://www.onclipevent.com/enterframe/
>
_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/

15 Sep 2005 - 2:08pm
Bill Scott
2005

Oh, one more thing that we do wrong (I'm sure that is not all :-). We only update the grid on a scroll when the mouse is released during a scroll drag. We need to do it when the user pauses scrolling, even if the mouse is down. The tooltip (which would ideally show values for a table in which it was determinant) helps the feedback as well as the "showing..." updating during the scroll. It ideally should go away when you finish. But there was a bug that I never got around to fixing.

That's the problem with mixing design with coding. I had solved the problem in my mind and never got around to fixing it in the code :-)

I welcome any and all feedback.

--
Bill Scott
Interaction Designer/Ajax Evangelist
Yahoo! UED

----- Original Message ----
From: Navneet Nair <navneet.nair at gmail.com>
To: discuss-interactiondesigners.com at lists.interactiondesigners.com
Sent: Thu Sep 15 05:49:19 2005
Subject: Re: [ID Discuss] Usable pagination

[Please voluntarily trim replies to include only relevant quoted material.]

Interesting, but ideally there should be some response from the grid when
the table data goes blank. If the user sees the data disappear from the
table s/he would think there is something wrong with the application. A
simple floating div that displays information like 'Stop scrolling to see
the data' or 'Loading data...' would do the job here...

Here's a recent attempt at addressing some of the problems inherent
> with paged tables...
>
> http://openrico.org/rico/livegrid.page

----------------------------------------------------
> Navneet Nair
> Interaction Architect
> onClipEvent: form follows function();
> ----------------------------------------------------
> Website: http://www.onclipevent.com
> Blog: http://www.onclipevent.com/enterframe/
>
_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/

16 Sep 2005 - 3:44am
Jochen Denzinger
2005

Well, here's another approach of pagination used to list the content of
a database.
http://netzspannung.org/archive/classic/?
filter=project&sort=title&entriespp=10&startEntry=1&lang=en&area=all

Regards,
•••

Jochen Denzinger

16 Sep 2005 - 9:39am
Bill Scott
2005

Before we did the Rico livegrid, we initially ajax-ified our paginated tables. This work was done while I was at Sabre.

You can experiment with the paginated table (showing 1000 movies) at:

http://xplanner.org/ricoDemo/ajaxMovieTable.page

This was one of the items we demo'ed at the AjaxSummit in May.

Note that sorting changes the "page navigator" drop down by recalculating the start-end that is on each page. Try sorting on year or title to see the effect. If you are using IE/Win you can put the focus on the page navigator combo and use the mouse wheel to scroll through the pages--nice side effect.

(a number of other features are turned off in an ungraceful manner since it was a demo... toolbar items don't function :-)

In the blog article I referenced before, I also discuss this "classic" variety.

--
Bill Scott
Interaction Designer/Ajax Evangelist
Yahoo! UED

----- Original Message ----
From: Jochen Denzinger <jochen.denzinger at designing-ubicomp.com>
To: discuss-interactiondesigners.com at lists.interactiondesigners.com
Sent: Fri Sep 16 03:44:53 2005
Subject: Re: [ID Discuss] Usable pagination

[Please voluntarily trim replies to include only relevant quoted material.]

Well, here's another approach of pagination used to list the content of  
a database.
http://netzspannung.org/archive/classic/?
filter=project&sort=title&entriespp=10&startEntry=1&lang=en&area=all

Regards,
•••

Jochen Denzinger

_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/

16 Sep 2005 - 10:46am
Todd Warfel
2003

Okay, I'm a big RIA fan (Flash, AJAX). That being said, in most of
these ajaxified data samples I'm not seeing much of an advantage from
most of the samples over non-ajaxified models. I hate to rain on the
parade (and know I might possibly get flamed here, but...)

Okay, so yeah, I can jump from page 1 to page 20 through a drop menu.
Well, I can do that in non-ajax models. But what real benefit does
this get me? I have to recall what data set is on page 20. This is a
bad model for any model (ajax or not).

Or, I can scroll inside a tile of a screen. Well, I can do that with
non-ajax. It's called a div that has scrollbars.

The biggest advantage to using ajax is not having to rerender the
entire page, but just the content tile.

Sorry, but since the discussion was around pagination, I think we're
missing the boat here.

(sitting, waiting to be corrected).

On Sep 16, 2005, at 10:39 AM, Bill Scott wrote:

> Before we did the Rico livegrid, we initially ajax-ified our
> paginated tables. This work was done while I was at Sabre.
>
> You can experiment with the paginated table (showing 1000 movies) at:
>
> http://xplanner.org/ricoDemo/ajaxMovieTable.page
>
> This was one of the items we demo'ed at the AjaxSummit in May.

Cheers!

Todd R. Warfel
Design & Usability Specialist
--------------------------------------
Contact Info
Email: twarfel at mac.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
--------------------------------------

16 Sep 2005 - 11:32am
Juan Lanus
2005

On 9/16/05, Todd Warfel <lists at toddwarfel.com> wrote:
> The biggest advantage to using ajax is not having to rerender the
> entire page, but just the content tile.

Not also rerender the page (which is the heck of a better wat to
interact) but specially the client (browser) not having to get it all
to fill that <DIV>.

Imagine not a set of small text rows (as in the Rico example) but pictures.
Not having to bring them all at first is the way desktop applications
do it. The AJAX behaviour does it so, it asks the server for the items
that will be displayed in the visible rows, and only that items.
The pictures case is like Google Maps: you scroll a HUGE picture
database with a client that only peeps a small part of it but gives
you the illusion of observing a continuum.
--
Juan Lanus
TECNOSOL
Argentina

16 Sep 2005 - 1:22pm
Todd Warfel
2003

Okay, I'll buy that.

I also take issue with multiple scroll-bars in the same screen being
confusing and not aesthetically pleasing.

On Sep 16, 2005, at 12:32 PM, Juan Lanus wrote:

> Imagine not a set of small text rows (as in the Rico example) but
> pictures.
> Not having to bring them all at first is the way desktop applications
> do it.

Cheers!

Todd R. Warfel
Partner, Design & Usability Specialist
Messagefirst | making products & services easier to use
--------------------------------------
Contact Info
Voice: (607) 339-9640
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com

--------------------------------------
Problems are just opportunities for success.

16 Sep 2005 - 2:18pm
Bill Scott
2005

Todd, all good points. Especially the thought that just because it uses ajax does not make it better (or more usable).

- Double Scroller Issue

The double-scroller issue was why I was hesitant to go scrolled/ajax route at first. The pagination was nice since the application for airlines we were building could have as much as 10,000 flights that needed to be sorted. I tried to get that # down by filtering, etc. but the problem has to do with how fast the options fan-out for re-accomdation of passengers. So we had to figure a way to handle this large amount of data.

On top of it the user needed to be able to select flights. Selection models & paging are generally not compatible. So scrolling seemed to be the best option.

Scrollbars are fine if either the application feels like a desktop (our user research bore this out) or if the areas are well defined and not easily confused with the browser scroller. Or another approach is to keep the scrolled area sized with the browser window and therefore not have a scroller in the browser window [An approach taken by Kevin Bury, design lead at HotJobs, while at a previous employer].

- Advantage of Ajax
Performance.
With page refresh for paging model it was 2 seconds on average for our application.
With remote scripting/iframe technique it was 1 second on average
With Ajax it was <100 milliseconds.

As you know if the user can freely move about (explore) data without blinking (distractions) or in reasonable amount of time (keeps their context) then the experience can be improved with something like Ajax. Not guaranteed. Just enabled.

- To a couple of your specific points
[from Todd]
    Okay, so yeah, I can jump from page 1 to page 20 through a drop menu.  
    Well, I can do that in non-ajax models. But what real benefit does  
    this get me? I have to recall what data set is on page 20. This is a  
    bad model for any model (ajax or not).

Correct, and in fact I wrote the combo navigator 2 years ago without ajax. And yes it worked fine. But it was much slower (20x) than with Ajax. Remote scripting was 10x slower than the ajax version.

As you know Ajax does not bring anything new to the RIA world concerning user interface/dhtml/effects/gui techniques. It just makes it possible to do it with data outside the page while in the page, fast, without a refresh.

[from Todd]
    Or, I can scroll inside a tile of a screen. Well, I can do that with  
    non-ajax. It's called a div that has scrollbars.

Yes, our table at Sabre had 2 varieties. Paged or Scrolled. But with 10,000 flights (an no there was no way to cut that amount down) that could be rendered you were looking at 2-5 minutes for the browser just to render the HTML for the table rows. And pagination was the solution. But we had to have selection which doesn't work well with pagination. So the scrolled table was the natural choice.

The way I approach these is to ask myself, "If there were no technical constraints how would I design it?". I always wanted a scrolled area that could be filtered, sorted and selected. With Ajax it removed the technical barriers so I could just do it the natural way.

The new Y!Mail is an example of this exact approach. There are no desktop mail clients that paginate your mail messages. Only web clients. Why? Because of bandwidth/performance issues. The new Mail uses Ajax/endless scrolling to get around it for a much more pleasing experience.

Now having said all of that, there are places where pagination is just fine. Perhaps in a lot of cases it is ok in a search where really you only care about the first few results. But the key is to ask, how would I design this if there were no technical constraints and then work your way down. It is the user's goals that must drive the design not the technical coolness of Ajax.

See a few articles I have written to discuss these points:
- On the real power of Ajax in richness: http://looksgoodworkswell.blogspot.com/2005/08/richness-web-in-3d.html
- On Pagination vs. Scrolling: http://looksgoodworkswell.blogspot.com/2005/06/death-to-paging-rico-livegrid-released.html
- On User Goals trumping Technical Coolness: http://looksgoodworkswell.blogspot.com/2005/05/ajax-summit-livesearch-in-moderation.html

Richard Cowin had a nice moderation to my paging vs scrolling article:
http://richardcowin.typepad.com/blog/2005/07/using_ajax_for_.html

--
Bill Scott
Interaction Designer/Ajax Evangelist
Yahoo! UED

----- Original Message ----
From: Todd Warfel <lists at toddwarfel.com>
To: juan.lanus at gmail.com
Cc: discuss-interactiondesigners.com at lists.interactiondesigners.com
Sent: Fri Sep 16 13:22:06 2005
Subject: Re: [ID Discuss] Usable pagination

[Please voluntarily trim replies to include only relevant quoted material.]

Okay, I'll buy that.

I also take issue with multiple scroll-bars in the same screen being  
confusing and not aesthetically pleasing.

On Sep 16, 2005, at 12:32 PM, Juan Lanus wrote:

> Imagine not a set of small text rows (as in the Rico example) but  
> pictures.
> Not having to bring them all at first is the way desktop applications
> do it.

Cheers!

Todd R. Warfel
Partner, Design & Usability Specialist
Messagefirst | making products & services easier to use
--------------------------------------
Contact Info
Voice:    (607) 339-9640
Email:    todd at messagefirst.com
AIM:       twarfel at mac.com
Blog:      http://toddwarfel.com

--------------------------------------
Problems are just opportunities for success.

_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/

Syndicate content Get the feed