We've just introduced the new pagination interaction that is I think quite innovative compared to what's out there.

Some blogs in blogstatic have a ton of content and their pagination showed like the one below.

This was particularly gruesome for customers with hundreds of posts. Their pagination links were in the 30s and beyond.

Not pretty ðŸ˜¬

Here's how that looked like, up to now.

The image shows a dark-themed webpage footer with a pagination component. At the top, there is a heading that reads Lightning strikes followed by an attribution Val Sopi April 4th and a link to Read more. Below this, there is a sequence of numbers from 1 to 19 spread over two lines, with numbers 1 through 13 on the first line and 14 through 19 on the second line. These numbers are presumably page numbers for navigation. The number 5 is highlighted, indicating it is the current page. At the very bottom of the image, the words Home and RSS feed are aligned to the left and right corners respectively, likely representing links to the homepage and an RSS feed.
The old pagination

The solution

Thanks to one of our customers who was pretty vocal about this, we set out to solve it.

The first instinct was to do what most blogs do and show the current page the reader is on with a few navigational cues.

« ‹ 3 4 5 › »

However, the issue with this approach was that it didn't make it clear how many pages there are in total without clicking the "»" sign and seeing the end of it all.

Also, if I wanted to get to page 27 of 98, the only way was by clicking the "›" numerous times until I got to that number.

There had to be a better way.

I have not seen it done like this, or my research is insufficient. 

The image shows a simplified pagination control interface commonly seen on websites with multiple pages. There are three rectangular buttons in a row. The leftmost button has a left-pointing chevron, indicating a button to go to the previous page. The middle button is highlighted to denote the current page and is labeled with 5/19, suggesting it is page 5 out of 19. The button on the right has a right-pointing chevron, indicating a button to go to the next page.
The new pagination interface

Now, regardless of the number of pages in a blog (a few or many), the interface is always the same.

This new approach gives the reader a way to go back–and–forth instantly, as well as jump to a particular page immediately, while always knowing how many pages there are in total.

BTW, the total number of pages can change within a single blog depending on where the reader is currently on: the Homepage (all posts), a category page, or a single author page.

Watch the video below to see it in action (with my narration).

A run–through of the new pagination

I hope you like it and let me know what you think.

Create Your Blog

The quickest way to create your new blog!

Learn More