design - What's the best way to show you can scroll on mobile devices?

I'm trying to find the best method of showing users on mobile devices that they can scroll in a

.

As iPhones/iPads don't have scrollbars, I will need an indicator to show that you can scroll. This should be subtle but present the idea well.

Answer

These are the general recommendations I could find. This is what is done in Apple products (Mac OS X, and I believe iOS too) but also partly on Android:

• Scrollbars appear for a brief moment when the scrollable panel is first made visible and then they disappear.


• When the user touches the scrollable content, the scrollbars appear until the user removes his finger(s).


• While scrolling, the scrollbar is shown. If the content is 'thrown', the scrollbar remains until there is no more inertia.


• Also, just touching the scrollable content should slightly move the content to show that it is scrollable.


• Make it in such a way that some piece of content is partially visible (for example, only the top part of line of text visible, or part of an image, etc.), just as explained in the other posts.

You might take a look at the book Brave NUI World which gives some great dos and don'ts on natural user interfaces. This question is one of the points dealt in this book.

Additionally, you may also look at the list of labels in Gmail and feeds in Google Reader. The top and bottom borders of the scrollable list drops some shadow over the scrollable content, suggesting the the border is "on top" of something and there is more to read. Something like this:

Alternatively, you may also fade out the scrolled content at the top and bottom instead of using the shadow. I do not remember where I have seen it, but I will look for it again.