Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
1  
Is this question the sort of thing you're looking for? –  JonW Aug 8 '12 at 20:03
    
@JonW Well unlike with that question I am certain I want to use scrollable elements due to the nature of the webapp. But I'm more talking about the actual design to try to invoke users into scrolling. I'm fairly new to the StackExchange so I hope this is the correct place for this sort of question. –  Andrew Deniszczyc Aug 8 '12 at 20:18

3 Answers 3

up vote 6 down vote accepted

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:

Google Reader

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.

share|improve this answer
    
Thanks! I think I will use the shadow option as shown in the image. –  Andrew Deniszczyc Aug 9 '12 at 17:37

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...

share|improve this answer
1  
^this, called 'Hint and Reveal' by some. Here's a decent blog post from Mobify. mobify.com/blog/mobile-design-tip-hint-reveal –  drawtheweb Aug 8 '12 at 20:19
    
Nice article @drawtheweb thanks! I have thought about this technique but the other problem I then face is that at certain screen sizes it could appear without the partial revealing of the next element in the list. If no other ideas spring to mind or are suggested this will be the best route. –  Andrew Deniszczyc Aug 8 '12 at 20:25

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.