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.
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).
As of today, according to Facebook’s network section, Toronto has the world’s largest Facebook network. Here’s a list of big mostly English speaking Metro areas, and their Facebook penetration. Population data courtesy Wikipedia. According to this data, almost 1/10 Torontonians are also Facebookers, as opposed to around 1/100 New Yorkers.
|City||Metro Population||Facebook Members|
|New York City||18,818,536||206,228|
Perhaps citizens of other cities are more fearful of their pasts coming back to poke them?
UPDATE: Scott Brooks posts even more evidence! St. John, NB 25%?
Thanks to Sunnyvale startup ZeeMaps, Julia and I ate at a neighbourhood joint we’ve been eyeing for ages. Named Torito, meaning little bull, this Kensington Market tapas joint has been generating lots of buzz, and little bull, for ages.
Why did ZeeMaps buy dinner? Well, my feedback on their interface ballooned into more involved consulting. I love their product and I was happy to provide some suggestions for free. They were happy to implement many of the suggestions and offered to pick up dinner which was amazing! This was one of those storybook win-win situations that would not have been possible without the Internet. ZeeMaps, more designs are coming!
What tapas did we have? Smoked trout and avocado mayonnaise potato salad. Julia’s first ceviche. Grilled king fish. Crab croquettes. Flatiron steak. And tongue and cheek; literally braised tongue and cheek. Amazing. Including some drinks and delicious desserts it was a really nice night. Thanks ZeeMaps!!!