Page 1 of 4
Multiple Page Navigation: What do you like most?
Posted: Fri Nov 14, 2008 8:16 am
by JAB Creations
I'm working on the multiple page aspect of my blog right now and I'm wondering what everyone prefers as far as navigating through multiple pages.
For me I always disliked having to click on tiny single digit numbers.
I'm thinking a select menu though also next page and previous page anchors.
Thoughts please?
Re: Multiple Page Navigation: What do you like most?
Posted: Fri Nov 14, 2008 8:31 am
by Eran
In my opinion, next/prev are way worst than numerical enumeration. They give no indication to where you are at in the result set, no reference to return to for later viewing (ie, page number??) and no option to skip several pages at a time.
Re: Multiple Page Navigation: What do you like most?
Posted: Fri Nov 14, 2008 8:44 am
by VladSun
For documents with a big number of pages I prefer "logarithmic, centralized to the current page" paging style like this:
<<First <Prev 1000 2000 3000 4000 ... 4600 4700 4800 ... 4840 4850 ... 4857 4858 4859 4860 4861 ... 4870 4880 ... 4900 5000 5100 ... 6000 7000 Next> Last>>
Re: Multiple Page Navigation: What do you like most?
Posted: Fri Nov 14, 2008 11:37 pm
by JAB Creations
pytrin, I think you're right
however subjective to bad design...a good design implements some sort of "you are here" reference.
VladSun, dude that's crazy.
Actually I've implemented what I felt would be the easiest and quickest way to get around...
From left to right a 'Previous Page' button, a select menu, and a 'Next Page' button.
The kicker is that the select menu will have it's selected attribute set to the page you are currently viewing and some text to help denote that.
That way you can still choose any page you want like VladSun though without the mess of countless anchors and you can enjoy the ease of the buttons without being confused about what page you're currently viewing.
...oh and did I mention it looks oh so sexy?
I already have it working save for the selected option on the select menu which I'm about to program right now any way. I also disable (and have a disabled class) for buttons when you're already on the first or last page.
It's not difficult at all...just making sure I came up with something that was easy and powerful was the only real challenge. I think most people will find it agreeable.
You guys will get to see it when I post my blog in the critique forums sometime soon. I've got maybe 90% of it finished and I've had an absolute blast working on it.
Thanks for your opinions!
Re: Multiple Page Navigation: What do you like most?
Posted: Sat Nov 15, 2008 1:17 am
by josh
I like google's solution which is to put graphical O's for each page #, to make the #s easier to click, ( as was mentioned offering tiny numerical links can be too fine grained for the user to click comfortably )
I've used this on a good few sites... generates HTML very similar to VladSun's example, the code is impossible to read but it gets the job done
Code: Select all
function create_pagination($url, $page, $maxPage) {
if ( $page == 1 ) {
$pagination = '<< prev ';
} else {
$pagination = ' <a href="' . sprintf($url, ((int)$page - 1) ) . '"><< prev</a> ';
}
// if there is no need for pagination return the stuff empty
if($maxPage == 1) {
$pagination .= '<b>1</b> next >> ';
return $pagination;
}
$current_page = $page;
//if there are 10 or more links create the special pagination
if ( $maxPage >= 10 ) {
//show the first 3 links
if($current_page <= 5) {
//this is to prevent that if page 1 is selected only 2 links are shown instead of 3.
if($current_page == 1) {
$maximum = $current_page + 2;
} else {
$maximum = $current_page + 1;
}
for($i = 1; $i <= $maximum; $i++) {
$pagination .= ($i == $current_page) ? '<strong>'.$i.'</strong>' : '<a href="' . sprintf($url, $i) . '">' .$i. '</a>';
if($i < $maximum) {
$pagination .= ', ';
}
}
} else {
//if the page is not in the first row of links show the the first 3 links.
$maximum = 3;
for($i = 1; $i <= $maximum; $i++) {
$pagination .= ($i == $page) ? '<strong>'.$i.'</strong>' : '<a href="' . sprintf($url, $i) . '">' .$i. '</a>';
if($i < $maximum) {
$pagination .= ', ';
}
}
}
if($current_page > 5) {
//show the first dots
$pagination .= ' ... ';
//and show the link in front and behind $current_page
if($current_page <= $maxPage) {
//this creates the links if page is higher then 5.
if($current_page == $maxPage) {
$start_num = $current_page - 2;
} else {
$start_num = $current_page - 1;
}
$max_num = 3;
for($i = 1; $i <= $max_num; $i++) {
$pagination .= ($start_num == $current_page) ? '<strong>'.$start_num.'</strong>' : '<a href="' . sprintf($url, $start_num) . '">' .$start_num. '</a>';
if($i < $maximum) {
$pagination .= ', ';
}
$start_num++;
}
}
//see if there have to be dots at the end.
}
if($current_page <= ($maxPage - 5)) {
//its smaller so we have to show the dots.
$pagination .= ' ... ';
}
//see how many links we should put at the end of the links row.
//if the current page is is the last or the one before the last we display no links.
if($current_page == $maxPage) {
$max_num = 0;
}
if($current_page == ($maxPage -1)) {
$max_num = 0;
}
if($current_page == ($maxPage -2)) {
$max_num = 1;
}
if($current_page == ($maxPage -3)) {
$max_num = 2;
}
if($current_page <= ($maxPage -4)) {
$max_num = 3;
}
//little thing to check the output of the above if functions.
if($max_num !== 0) {
$start_num = $maxPage - ($max_num - 1);
if($current_page >= ($maxPage - 4)) {
$pagination .= ', ';
}
for($i = 1; $i <= $max_num; $i++) {
$pagination .= '<a href="' . sprintf( $url, $start_num) . '">' .$start_num. '</a>';
if($start_num < $maxPage) {
$pagination .= ', ';
}
$start_num++;
}
}
} else {
//if there are 9 links or less create a link string
$nextLink = array();
for($i = 1; $i <= $maxPage; $i++) {
$nextLink[] = ($i == $page) ? '<strong>'.$i.'</strong>' : '<a href="' . sprintf($url, $i) . '">' .$i. '</a>';
}
$pagination .= implode(', ', $nextLink);
}
if ( $page < $maxPage ) {
$pagination .= ' <a href="' . sprintf($url, ((int)$page + 1) ) . '">next >></a> ';
} else {
$pagination .= ' next >> ';
}
return $pagination;
}
Re: Multiple Page Navigation: What do you like most?
Posted: Sat Nov 15, 2008 8:39 am
by VladSun
JAB Creations wrote:VladSun, dude that's crazy.

If I have
10^n pages there is only
n clicks distance to the desired page (worst case). That's for my pagination class set up to use 10 links per 1/10 step.
Re: Multiple Page Navigation: What do you like most?
Posted: Sat Nov 15, 2008 8:44 am
by JAB Creations
Is it really necessary? Consider the fact that I'll manually adjust the HTTP query string in the address bar in such rare circumstances...I'm sure you have too. The big question is why would you click on page numbers to such a blind extent? That goes far beyond what pytrin's concern. Not to presume you don't have situations where such clutter isn't somehow empowering though I'd be interested in hearing about such situations so I can understand an example of what you're talking about before I can formally disagree.

Re: Multiple Page Navigation: What do you like most?
Posted: Sat Nov 15, 2008 12:59 pm
by allspiritseve
VladSun wrote:JAB Creations wrote:VladSun, dude that's crazy.

If I have
10^n pages there is only
n clicks distance to the desired page (worst case). That's for my pagination class set up to use 10 links per 1/10 step.
I think in those situations a search or an input box with "Jump to page # ______" would be more appropriate. A search is better to narrow down the results, and an input box is better when the page numbers have some sort of meaning.
Re: Multiple Page Navigation: What do you like most?
Posted: Sun Nov 16, 2008 10:03 am
by VladSun
allspiritseve wrote:VladSun wrote:JAB Creations wrote:VladSun, dude that's crazy.

If I have
10^n pages there is only
n clicks distance to the desired page (worst case). That's for my pagination class set up to use 10 links per 1/10 step.
I think in those situations a search or an input box with "Jump to page # ______" would be more appropriate. A search is better to narrow down the results, and an input box is better when the page numbers have some sort of meaning.
& @Jab
No, I can't agree. The numerics pagination itself is 99% meaningless (that is - page numbers are rarely correlated to page content). Its main purpose is quick listing.
Clicking is quicker than writing a page number. So, if page anchors are well organized (like in my solution

) clickable jumps are faster then "Go to page" jumps.
Re: Multiple Page Navigation: What do you like most?
Posted: Sun Nov 16, 2008 10:15 am
by JAB Creations
I've updated the blog online...it's in a temp folder though it's mostly completed. This isn't so much a critique of the blog so much as sharing the page navigation GUI we've been discussing. Keep in mind I probably won't have 5K pages...like ever on my blog. There are currently 14 pages without being signed in as an admin...I think 18 total including unpublished content that only I can see.
Any way let me know what you guys think of the navigation.
http://www.jabcreations.com/members/blog.php
...I'm going off to a medieval fair so I won't be able to reply until later on. Please be kind.

Re: Multiple Page Navigation: What do you like most?
Posted: Sun Nov 16, 2008 1:30 pm
by allspiritseve
I would NEVER browse through 7000 pages of results. I'd browse through maybe the first 10, 20, if I was really that determined. If I didn't find what I wanted, I'd either leave or narrow down my search.
If the page number is meaningless, then the user isn't going to know what page number they want, and hence won't use any links you listed except for the ones that are single digits away from the page they are on. The rest of the links are pointless. Notice how google doesn't skip any numbers, even with 1 billion results.
VladSun wrote:No, I can't agree. The numerics pagination itself is 99% meaningless (that is - page numbers are rarely correlated to page content). Its main purpose is quick listing.
Clicking is quicker than writing a page number. So, if page anchors are well organized (like in my solution

) clickable jumps are faster then "Go to page" jumps.
Re: Multiple Page Navigation: What do you like most?
Posted: Sun Nov 16, 2008 3:38 pm
by Eran
Notice how google doesn't skip any numbers, even with 1 billion results.
The google result count is just for reference, you can't really go beyond certain page (something around 200 I believe).
I agree that showing too many numbers is not good. I like phpBB pagination, it shows first, last and 3-5 numbers in between (depending on configuration) - the page you are on and a couple before and after. That is pretty useful.
Re: Multiple Page Navigation: What do you like most?
Posted: Sun Nov 16, 2008 5:15 pm
by allspiritseve
pytrin wrote:The google result count is just for reference, you can't really go beyond certain page (something around 200 I believe).

See? in all my years of google searches, I've never gone beyond 200 pages, because I didn't know that! That's a good rule of thumb. If your pagination covers more pages than google, you might want to consider using another way to narrow down results.
Re: Multiple Page Navigation: What do you like most?
Posted: Sun Nov 16, 2008 5:36 pm
by Eran
Google is google, they have their own considerations when they choose at which page to stop showing results. Bear in mind that it's a search engine with presumbly best matches on top - that is different for example from posts in a forum thread, which are all part of a long conversation so there are no best matches. I have certainly seen forum threads go beyond 200 pages - would you not allow to view all pages in this instance?
Re: Multiple Page Navigation: What do you like most?
Posted: Sun Nov 16, 2008 5:44 pm
by allspiritseve
pytrin wrote:Google is google, they have their own considerations when they choose at which page to stop showing results. Bear in mind that it's a search engine with presumbly best matches on top - that is different for example from posts in a forum thread, which are all part of a long conversation so there are no best matches. I have certainly seen forum threads go beyond 200 pages - would you not allow to view all pages in this instance?
I wouldn't try to paginate them all.. I'd probably have a first/last, plus 5 to the left and 5 to the right of the current location, with a text box to type in a specific number. That way it's easy to either 1. start from the beginning and work through, or 2. start from the end and work back (the two most common use-cases). Otherwise, the text box can be used to get to an approximate location (rather than trying to space out approximate locations according to VladSun's example) and work forward/back from there.