blink design library

Paging and scrolling navigation--together

As mentioned in a previous post, most web-based systems seem to bump into performance limits that prevent implementing infinite scrolling. And so some amount of paging navigation is usually required.

Tastebook combines both scrolling and paging navigation on a single page. It seems to have a limit of loading 100 items per page--which they've implemented within a scrolling frame. Paging links are at the bottom of the frame (click for full-sized image):

Though the paging links have relatively light visual weight, they are in a highly discoverable location: right at the end of the scroll bar.

Non-standard Scroll Control

It might be hard to see in the thumbnail below (click on the image for a full-sized version), but the purple tabs at top and bottom are the controls for scrolling the list up and down.

I see a number of usability risks with this design. First, it's a non-standard control for an action that is ubiquitous on the web -- scrolling. I didn't expect something that looked like a tab to control scrolling. Second, given the colorful and visually diverse content of the page, the purple tabs largely blend into the other elements on the page. Finally, the scrolling mechanism lacks a key element of feedback  that is present in standard scrollbars -- my relative location within the scrollable list.

From: Go2Web2.0