Compact Versatile Page Turning

You see them everywhere implemented in a thousand different ways. Page turners, also known as pagination or paginators, are the interface elements that help you navigate to the next page, the previous page, the last page, and all pages in between.

In most instances “next and previous” is all that’s required. But there are cases where getting to a specific page in a result set of 1,000 is desired. For example, the other day I was looking for icons from the early-iPod 2002 era. I needed to get to page 65 but the only way I could do that on interfacelift.com was to manually type 65 in the URL. Not exactly mom-friendly.

Here are some examples of existing page turners on the web.

I’ve been helping my client Masterfile pare down their interface so they can regain screen real estate needed for upcoming features. Their old page turner (pictured here) was spread across in three places. It worked well with the previous functionality, but we had to come up with something smaller that was more versatile.

Rough Sketch

My rough sketches produced this design:

It allowed for next, previous, first, last and all pages in between.

What about large result sets?

The design worked well for up to 200 pages, but when the list exceeded 200 items it affected page load times. We had to come up with a way to reduce the items in the list.

Intervals and a fisheye lens

We decided to show the first page, X number of proceeding pages, followed by intervals every X pages, and then the last page. For example, we first decided to show 100 pages, followed by intervals of 100s, and then the last page. When the user selected an interval, the fisheye lens (a distorted form of a magnifying glass) would be taken to that page and the lens would zoom in, providing one-click access to the pages around it.

Using a bit of math and Apple’s Graphing Calculator (believe it or not), we were able to determine that the optimal size for our fisheye was 25 (and not 100 as originally assumed).

Example

• See the Page Turner in Action.