iTunes Pagination

The iTunes Store has 3 different pagination controls it uses in different places. The most common method for paging through a series of items is to show a carousel on the main pages, with prev/next arrow icons to shuffle through sets of 3-4. On special featured modules with larger poster image thumbnails they use coverflow with their hybrid scrollbar which has arrows that increment one item at a time, or allow you to scroll to move through larger increments. Lastly, they have a simple back/more link control that they use on some of the generated views. I noticed this is in the Upgrade to iTunes Plus area.

1. Carousel showing prev/next arrows and position indicator circles.
2. Coverflow with hybrid prev/next scrollbar. Typical carousel shown below.
3. Generic Back/More links with text showing [current range] of [total number].

Wikipedia Roll Clusters and Wheel Menus

Wikipedia Roll, a Flash-based Wikipedia browsing application attempts to help provide better exploration of Wikipedia entries by doing some content/link analysis and clustering topics and sub-topics related to the retrieved entry.

The screen above shows the entry for "interaction design." You can see that the links occurring in the article, and presumably, other related topics are grouped into clusters that can be further explored. Each cluster provides a wheel tool for spinning through the group's available terms. Scrolling to the left/right on the page shows more clusters for the group.

http://api-exploration.net/mashups/wikipedia-roll/index_en.php#/Interaction%20desig

Wowhead Breadcrumbs

Wowhead is a database of World of Warcraft information. The database provides a hierarchical subject taxonomy to describe items, and presents that hierarchy in the breadcrumbs for the item. When the user hovers ofer a branch in the breadcrumb trail, a drop down menu is displayed to show the node siblings and drill down to children.

1. Single entry view (database record).
2. Hovering over the current entry's parent category (Daggers) to view siblings.
3. Hovering over the grandparent category (Weapons) to view its siblings (other grandparent categories).

http://www.wowhead.com/

Flickr Pagination

Pagination is often overlooked as a minor detail. Good pagination gives the user a sense of how many pages of content, e.g. search results or gallery pages, are available to view and makes it obvious how to navigate those pages. It indicates the current page, provides link targets to advance or go backward, provides a shortcuts to jump to the start of the list, and indicates how many pages are left in the list, and possibly how many items are found in the pages. Flickr is one of the sites that meets all of these requirements and displays these controls very clearly and without any fuss.

http://flickr.com/

QuickSnapper Vertical Carousel

The vertical carousel on Quicksnapper shows a preview of recently snapped screenshots. Unlike most carousels, however, this one auto-scrolls vertically, and provides controls at the top and bottom rather than at the sides. It displays 4 items at a time.

1. Carousel of recent websnaps with scroll buttons at top and bottom.
2. Carousel shown in page.

http://www.quicksnapper.com/

Evernote Text Editor Task Creation

Evernote, the unique note keeping desktop, mobile, and web-based application allows users to upload notes from images or PDFs or create them right in the software as one would any publishing system. The note creation editor features a simple rich text editor with one feature that is uncommon for web-based editors--a task checkbox. All this does is insert a checkbox wherever the insertion mark (cursor) is located, and while in edit mode, allows you the user to toggle between checked (done) and unchecked (to do). The toggle does not work in view mode, unfortunately. You can then filter notes to show those that contain that contain unfinished, completed, or all tasks.

I really like where Evernote is heading with some of the functionalities they're putting into the editor. They could go a bit further and actually allow link creation between notes and achieving something like a base set of wiki functionality for single users without necessitating forward linking, which is often the biggest cognitive barrier to entry for those new to wikis. The use of tags and notebooks should be enough organizing power for most users.

1. Creating tasks in notes editor by simply clicking the checkbox icon in the editor controls adds checkbox at insertion point. Tasks may be checked to show done/todo state in edit mode.
2. In view mode, the checkboxes appear, but may not be checked.
3. Tasks may be filtered in the notes browser. Interestingly, Evernote even found checkboxes in the PDF of Luke Wroblewski's Forms ebook as well, and though they were to do items.

http://www.evernote.com/

Issuu Pagination

Issuu is an online self-publishing service that allows users to create e-magazines and books that are displayed in their slick Flash reader. The service also provides social features around the content.

One of the nicest things about the reader is the usable pagination. The reader features the typical next/previous and jump to page features you'd find in an ebook or PDF reader. They also provide some features that are similar to the browsing experience with Preview, the Dock, and QuickLook in the Mac, utilizing miniature thumbnails of pages to scroll through pages.

This is perhaps the best ebook-type reader I've seen on the web. I don't know if they every utilized that behavior where a hovered page would show a turned down corner to indicate that you could "pull" the page corner to turn it. I remember seeing that behavior here and there on some flash sites that had multi-page magazines. This pagination is much easier and flexible than most, and every possible browsing and reading use case seems to have been thought of that I can imagine.

1. Default view is magazine mode, which allows you to view 2-page spreads.
2. Hovering over a page's outside edge shows the next page arrow, and last page arrow.
3. The top center of the UI shows the prev/next arrows, flanking a thumbnail gallery view icon. The input to the right shows [current page / total page] field so you can jump to a specific page. The thumbnails at the bottom use a fish eye lens effect like the Mac OS X dock, to allow you to jump to different pages.
4. The thumbnail gallery view of pages opens in a lightbox.
5. Paper View mode showing the page navigator in the left. Paper view mode allows you to scroll vertically through the whole document.

http://issuu.com/

Engadget Comment Voting

Engadget's comment rating and karma system uses +1/-1 voting, so users can vote comments up or down. Votes below a certain threshold get dimmed out rather than hidden. When a vote is applied, the user's vote is registered, a message appears, and the voting controls are hidden. To the right, there's an exclamation mark to flag inappropriate comments, which are then immediately collapsed from view.

http://www.engadget.com/

Sling Welcome Message

Sling.com's welcome message position's a 3 column intro to the site for first time users, which it positions between the main promo marquee and the body of the page. Dismiss the message as a logged in user and it shouldn't come back again.

http://beta.sling.com/