Thoughts on Pagination
Friday, October 23rd, 2009 by Casey BoyerKeep looking or leave. These are the options awaiting the end of a blog, gallery, search results or any other screen listing information across several pages. We can’t do much to stop a visitor from leaving, so all attention should go into allowing the visitor to move from page to page. However, this weekend I observed my girlfriend having to take a little extra time to focus her cursor onto the ‘Next’ links as she read her favorite blogs. Not that big of a deal, she doesn’t even notice the extra second or so, because all the sites follow a similar design. But multiply this by every day, blog and entry view and the lost time starts to grow. In these moments when we know a visitor is likely to change the page, why are we designing pagination elements that hold them back?
Below is an outline of my thought process while trying to improve pagination based on best practices and an observation.
5 Steps to Better Pagination
Start with your typical pagination element with links for Next, Previous and every page available
At the least we can make the element larger so visitors can more easily acquire the links.

Although the page numbers highlight how much information is available and the visitor’s current position, the vague numbers do little to help a visitor find the content they are looking for. Therefore I would expect the majority of the interaction will be with the Next and Previous links. A little size differentiation helps prioritize the elements.

Seeming a bit exaggerated, I changed the Next and Previous links to buttons to keep the prominence and larger target, while keeping the proportions closer.

Continuing to believe Next and Previous will be accessed much more than the page numbers, why not group them together, making it easier to move back and forth between pages. Considering the typical reading patterns, we’ll group them toward the right of the screen.

And finally, observing the cursor is in the center of the page as the entry is viewed, we can center the Next and Previous buttons above the page numbers. This could potentially land the cursor on, or very near to the Next button without any action from the visitor.

There you have it. A pagination design based on a real user observation that prioritizes the elements based on the most probable user actions. Please add your thoughts and any related personal observations.







