Pagination is in the details.
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:
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..
July 6th, 2007 at 3:07 pmGood idea. Is UK a good starting point?
July 9th, 2007 at 1:25 pm