I'm trying to find the best method of showing users on mobile devices that they can scroll in a <div>
.
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.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityI'm trying to find the best method of showing users on mobile devices that they can scroll in a <div>
.
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.
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:
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.
Usually they solve this by making sure there's a piece of partial content which makes you understand there's something else as well. If the story doesn't end then the users assume there's more and they'll try to scroll. Take story both literally and abstract...
I had a similar question recently ( What is the standard on displaying wide tables on mobile devices?) where I needed to indicate to visitors that a table on a mobile device could be scrolled sideways.
The end result we went with was using a "blurred gradient" edge for touch screen devices. For an example of this stackexchange user JeffH posted this link: http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/, and then scroll down to the first two screenshot examples to see what sort of "blurred gradient" I am talking about.
Then for non touch screen devices we used a double arrow (>> or <<) as it gave those users something to tab to. So far so good.