Home > Navigation > let users find their way through a vast amount of content? > Scroll thumb

Scroll thumb

It works like this:

  1. The user is viewing a list.

  2. When he starts scrolling up…

  3. … a scroll thumb appears on the right edge of the screen. It is an indicator for where he finds himself on the page.

  4. The scroll thumb can also be dragged up or down to let the user scroll faster to find the items of interest.

  5. When the user lets the scroll thumb go, it slides out of the screen after two seconds, leaving the list where it was.

Use when

The scroll thumb can be used when the user has to deal with a long list of items. The user has to scroll down to find the item of interest, but to reach the bottom of the page would mean a lot of flings to scroll. The scroll thumb helps the user move faster through the list of items.

Those lists can contain items that are arranged alphabetically, like contacts for example. In those cases it is very useful to combine the scroll thumb with an overlay that displays the letter in focus (see the Facebook and Contacts screenshot examples).

The Good

  • Faster scrolling
  • Makes long lists manageable

The Bad

  • The user can loose overview because the list moves too fast (when items are not ordered alphabetically, and the user doesn't know where exactly to look)
  • The scroll thumb scrolls in opposite direction compared to fling scrolling. (Tapirboy)

Examples

Facebook

1 The friends section in a previous build of Facebook is shown here.

2 When the user starts scrolling up, a scroll thumb shows up at the edge of the screen. The user can drag it up or down to scroll.

3 And when he lets it go, it slides out of the screen.

4 The last build of Facebook shows a newly designed scroll thumb, and an addition: the first letters of the friends are displayed in the center of the screen.

Dropbox

1 The user is viewing a list in Dropbox.

2 He scrolls down, and a scrollthumb appears.

3 Ans when he lets go, the thumb disappears again.

Contacts

1 The phone's contact section is a common place for extensive lists. It is therefore obvious to find a scroll thumb here.

2 Scrolling up makes it appear on the edge of the screen.

3 And when the user puts his finger on the thumb, the starting letter of the contacts in focus appears in the center of the screen.

4 By moving the thumb down, the letter changes into the next.

2 Responses to Scroll thumb

  1. shao says:
    August 10, 2011 at 4:20 pm

    this is really helpful, wish there is example code… http://www.androidsim.net

  2. Mohamad Mahmoud says:
    November 6, 2013 at 12:43 pm

    It is good for some thing like whatsapp messages

Leave a comment