Traditional Paging
Something along these lines is what traditionally is done in order to implement a paged list:
- First of all, the list is sorted
- The first page of the list is provided
- A pager, or list of pages is presented
- When the user clicks on a page, a new page is loaded
![traditional-pager.png][1]
What’s so wrong with paging?
This implementation of a paged list is rather rudimentary. The major flaw of traditional paged lists, is the typically incorrect assumption that the user really cares about a particular page, or which particular page they are looking at.
Have you ever wanted to go to a particular page in a list on a website?
How about, for a reason other than “because I figure the result should be more or less around… here”?
Page numbers are, in the vast majority of cases, an implementation detail. And they should be treated as such.
Another, and often overlooked, issue with traditional pagers, is the fact that you have to actually click on a button every time you want to see another page of results. If for some reason you are sifting through a list, clicking every time you want to see more results becomes pretty obnoxious.
To make matters worse, paging usually performs a full page reload. This, coupled with clicking, sums up a rather frustrating experience.
In summary, traditional paging is bad because:
- It assumes page indexes are somehow relevant
- It requires user action to navigate
- It takes too long
What’s a good alternative?
An alternative approach
It’s easy to complain about something existent and proven, but how to make it better?
Pretty easy, actually. Getting rid of all the issues I ranted about.
- Don’t care about indexes? Remove them altogether.
- Clicks have a negative impact on UX? Find a more natural way to do paging.
- Reloads are slow and inefficient? Go AJAX.
Unobtrusive Paging
Instead of a pager, we’ll use a footer at the end of our page, and when the user scrolls past the footer, the next page will be loaded, through an AJAX request and some JavaScript code.
Now all you have to do is:
- Go to step two if the list is depleted, otherwise skip to step three
- Use a “No more content” footer when the list is depleted
- Use the paging footer when the list has more items
- Bind
clickandscrollevents to the paging footer - Append new contents, go back to step one
I won’t go into the implementation of all of these steps, I’ll leave that up to you. However, here’s a snippet laying out an example of how you could implement the scrolling functionality:
var win = $(window),
pager = $('.pager');
function more(){
win.off('scroll.paging');
pager.off('click.paging');
pagingEvent(pager, data);
}
win.on('scroll.paging', function(){
var allowance = 80,
target = pager.position().top + pager.height() - allowance,
y = win.scrollTop() + win.height();
if (y > target){
more();
}
});
pager.on('click.paging', more);
Make sure to set an allowance that lets your pager scroll into view, but doesn’t force the user to go all the way down to the bottom of the page.
After that, you should implement pagingEvent to fetch the next page and append it to what you currently have, remove the existing pager, and then figure out whether you are going to display a “No more results” element, or another pager (you could set this up recursively).
This provides a frictionless experience, where the user can sift through your paged list just by scrolling down the page, or using PgDown.
It also avoids the need for an unnecessary clickfest, and feels more natural overall, which is the essence of designing an enjoyable user experience.
So there you have it, sometimes it’s nice to look at everyday things we take for granted, and review how they could be improved to deliver a better product.
Comments