Circular scrolling

From MobileDesign

There is a discussion of this article on the Talk:Circular_scrolling page.

Problem: Scrolling without scrollbars. Maximizing screen real estate.

On a scroll-and-select handset, the purpose of the scrollbar is not to enable scroll, but to provide feedback. Users cannot directly interact with the scrollbar for dragging, or use the scrollbar arrows as buttons.

The purpose of the scrollbar is to indicate:

• The content extends beyond what is shown on the screen at the moment.
• How much of the content is extending beyond the screen.
• What direction the content is extending in
• In what part of the document/content are we?

Looping list

Start position. The selector is highlighting the first item in the list.

Scrolling down. The selector stops at the last but one item and the list starts moving upwards.

End of list. The selector goes all the way to the last item. If the user keeps scrolling, the list will wrap and look like fig 1.

Scrolling up. The selector stays at the second visible item until the first item becomes visible.

[edit] When Used

• There is more information than can fit into one screen.
• The information is sorted (alphabatically??)

[edit] Solution

When scrolling past the end of the list, the list should loop back to the top and vice versa. The lists can not just be circular, scrolling past either end of the list must be clearly indicated. This is done by jumping the highlight from the bottom to the top (or top to bottom). If a scrollbar is used, this is updated as well.

[edit] Rationale

When the dominating mobile phone interaction model is basically a bunch of lists, it's actually more relevant to tell the user when the screen can not be scrolled. In the user's mental model; if the content fills the screen, then it can be scrolled.