Pagination is in the details.

07/06/07 :: by brocksteady

One of the most commonly overlooked and under-refined elements of a website is its pagination controls. This issue has been popping up a lot lately, so I felt we needed to officially address it. It’s usually treated as an afterthought—and it’s details like this that can make or break a user experience. We’ve caught this on a couple recent sites (LK), but I just noticed that the UserKit comps weren’t ever revised to have a more manageable UI, (as the links are very difficult to click right now).

Here are some basic rules to follow:

1. Large (visually identifiable) clickable areas. Tiny links with no spacing are hard to click. It should be easy as hell to click to the next page! Add a box or a stroke around the number to create a larger hit state.
2. No underlines; small numbers in sequence don’t need visual clutter, people get that page numbers are links, especially with a Previous/Next around it.
3. Make the current page clearly identifiable (and not a link).

Check out this post for a more detailed set of rules and examples.

Here are a few examples that I like:

picture-11.png

485184976_e8fb38b641.jpg

526642496_bce4a74c03.jpg

557109954_8b95dffe99.jpg

2 Responses to “Pagination is in the details.”

  1. Patrick Says:

    Pagination is often tricky to set up. Most solutions aren’t really meant to handle hundreds of pages of results. My vote is that we come up with a default Fluid method for doing this an apply to all projects.

    That would make for a fun Independent Study project..

  2. brocksteady Says:

    Good idea. Is UK a good starting point?

Leave a Reply