Image Image Image Image Image
Scroll to Top

To Top

User Experience

Compact Versatile Page Turning

On 04, Jul 2007 | 2 Comments | In User Experience | By Ryan Feeley

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:

Compact page turner

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

Torontonians surpass 1/2 million mark on Facebook

On 21, Apr 2007 | 32 Comments | In User Experience | By Ryan Feeley

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
Toronto, Canada 5,113,149 +500,000
London, UK 7,554,236 338,188
New York City 18,818,536 206,228
Chicago 9,505,748 195,410
Vancouver 2,116,581 159,947
Los Angeles 12,950,129 102,130
Calgary 1,079,310 90,859
Philadelphia 5,826,742 90,091
Montreal 3,635,571 82,922
Houston 5,539,949 69,682
San Francisco 4,180,027 48,496

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%?

ZeeMaps picked up dinner

On 16, Mar 2007 | One Comment | In Food, User Experience | By Ryan Feeley

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!!!

Google Movies iCal

On 03, Mar 2007 | No Comments | In User Experience | By Ryan Feeley

I love how Google lists what theatres are playing near me, but why aren’t they offering each theatre as an iCal feed? Is this something the Google API offers?