
Pagination 101 - moubarak
https://gist.github.com/622561
======
shabble
One of the more non-obvious issues around pagination, especially with
something like a webcomic where you're expecting to view multiple pages, is to
have the page layout ensure that the buttons appear in the same place on each
page.

This means that you can read the page, click 'next', and _not have to move the
mouse_ in order to progress onwards. Also annoying in slide decks and image
slideshows.

~~~
kijin
Even better, just allow the user to navigate by hitting the left/right keys.
The Atlantic's "In Focus" photo galleries do this, though all the images are
on the same page in that case.

It's not always possible to place pagination links at the same location if the
webcomic has images of different sizes, but I have yet to see a physical
keyboard that moves around depending on what's on the screen.

~~~
chris24
Using the left/right keys is a great idea, but you'd have to have some clever
way of making users aware of it.

You'd also have to come up with a solution that works on devices that don't
necessarily have a keyboard available at all times (on iOS, for instance).

~~~
icoloma
You can use a title attribute that displays the shortcut. Desktop applications
(such as GIMP) do that all the time

------
buddydvd
> 7\. Put First and Last links on the outside > Nothing is more counter-
> intuitive than a Last link followed by a Next link.

Instead of making the following change like the author suggests:

    
    
        prev first [numbered links] last next
    

to

    
    
       first prev [numbered links] next last
    

IMO, it's better to always show the link to the first/last page as the
first/last numbered link. For example:

    
    
        prev 1 ... 56 57 58 [58] 60 61 62 ... 120 next
    

Advantages:

1\. You avoid showing disabled "first" or "last" link when you're at the first
or last page.

2\. The numbered link to the last page also show you the total page count.

3\. It's more likely that people will want to click the "next" link than the
"last" link.

4\. It's more likely that people will want to navigate from page 2 back to
page 1 via the browser's back button than clicking on a "first" link.

------
makecheck
Actually, I think a big one is missing: _make next/previous redundant and put
them side-by-side_.

In other words, the layout should be like this:

    
    
        Previous   Next   1   2   3   4  . . .   Previous   Next
    

I hate accidentally clicking too far and then having to stop and figure out
where the mouse should be to go back one page. Actions that are opposite
should be side-by-side so that they can be undone quickly with minimal mouse
movement.

Another good form of redundancy is to put all controls at the top of the page
_and_ all controls at the bottom. The top of the page is really good for
keeping things in exactly the same place on every page, yet the bottom is
often where people are after they're done reading.

------
kijin
Rule #0: Have proper pagination in the first place. Nobody likes it when they
have to use "infinite scroll" to get to page 357. Especially if your site
takes forever to load anything after the first few pages. (Yes, I'm talking to
you, Twitter!)

------
idunno246
"I'm In Like With You is a brand-new site that is best described as an online
flirting site, or if you don't mind the term, a "Web 2.0 dating site". Think
eBay + dating + Web 2.0 + social networks. "

funny to see omgpop's old description.

~~~
james4k
Yeah, that's a very strange description as well. As far as I remember, it's
always been about social gaming, and far before that was what it was even
called.

------
egypturnash
One thing he misses is that a not insignificant number of webcomics will let
you click on the _comic_ to go to the next page. Biggest target you could ask
for.

Sadly it's not a default on the very common Wordpress+Comicpress combo. Well
it wasn't for a while, I just checked and there's a switch for it in my
installation but I can't remember if it defaulted to on or off.

------
elktea
The best pagination style I have come across is this:
[http://karaboz.ru/2007/11/19/paginator-3000-postranichnaya-n...](http://karaboz.ru/2007/11/19/paginator-3000-postranichnaya-
navigaciya-budushhego/)

Just add text links for previous, next, last and first and you're set.

~~~
phpluver
nice, someone make a better example in english

------
lucasjans
I think an updated version of this article should address continuous scrolling
and when should it be used vs. pagination.

------
phpluver
worst is evow.com <http://i.imgur.com/LyGPV.png> can you guess what page I'm
on?

