Rethinking Pagination

Pagination is one of the ubiquitous UI elements in website design. Designed in various formats and color combinations, this UI element has remained relatively static with respect to its usability functions. But in my opinion there is a lot more we can squeeze out of this little element. My pet peeve regarding pagination is its inability to inform me about the content residing on a particular page in question, especially in Worpress like CMS.

For example if I’m browsing a site and am only interested in some particular type of posts, I’ve no way to quickly identify the posts on each page. And many sites do not make it easier as they do not even have any archive page. The only way forward is to visit each page and search for the relevant content. It would be wonderful if one could quickly glance at the post titles on each page from the pagination links itself as shown in the diagram below.

But I’ve doubts whether this will be useful with pagination that just shows ‘next page’ and ‘previous page’ links. Still I think it is worth looking into. To see the concept in action you can check the pagination links on the current blogs home page. The present iteration just displays the post titles; adding click-able links to the displayed post titles will be another good idea (currently implemented removed, but still in testing phase).

Creating the concept

For building the preview I used the wp-paginate WordPress plugin and modified a couple of functions to extract the post titles. The preview tool-tip uses the excellent jQuery qTip2 plugin to display the post titles on hovering over the pagination links.

Although this looks like extra investment in time for a small return; in my opinion it somewhat increases the usability for the user.

5 Responses

  1. Hi,

    Any plans to release this as a new wordpress plugin? I’m very interested in using this for my own blog. And the clickable links to posts is a great idea for improvement!



  2. Chris Knutson says:

    Very cool. Would be fun to expand this into a sliding 2 tiered menu in which each page has a list of topics and hovering each topic has a slide out article summary, and clicking the topic takes you to the specific post.

  3. sameer says:

    I’m currently optimizing the plugin, will release it as soon as ready.

  4. Quyet says:

    Outstanding idea!!! But I can still see that there is a problem with this approach that is when you have too many pages and you can not show all the page indexes for the user and use … instead, in that case, the user still have to choose a page (before the …) to see posts in the hidden pages. If you can have a solution for this, it will be absolutely wonderful!!!

  5. ja says:

    interesting, I might actually use it, when my site will have more than 1 page:)