33

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.

Improve this question
2
  • 1
    Is this question the sort of thing you're looking for?
    – JonW ♦
    Aug 8, 2012 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, 2012 at 20:18

3 Answers 3

Reset to default
20

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.

Improve this answer
3
  • Thanks! I think I will use the shadow option as shown in the image.
    – Andrew Deniszczyc
    Aug 9, 2012 at 17:37
  • Youtube adopted the faded content on the "Read More" area a few years ago. Probably not the first to adopt the practice but certainly not the last.
    – Chad
    Dec 10, 2015 at 21:45
  • If anyone needs to see a live example of using a shadow to indicate a scrolling table like the one Padrig mentions above, there is an example on CodePen: codepen.io/dbushell/full/8e6a1ee85418f3c5abe839647dbcdec5
    – marco uccellini
    Apr 26, 2017 at 17:46
8

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

Improve this answer
2
  • 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, 2012 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, 2012 at 20:25
3

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.

Improve this answer
4
  • The images you refer to (second link) are 404...
    – luckydonald
    Aug 2, 2018 at 11:41
  • @luckydonald yes, that was 6 years ago.
    – rlsaj
    Aug 3, 2018 at 12:12
  • @rlsaj And that's why we don't post links without also including the relevant details from them; link rot makes these answers a lot less useful. Remember, answers posted on here should be useful not just when asked, but going forward in time as well.
    – Alex
    Mar 17, 2022 at 7:52
  • 1
    @Alex Here's the page in reference: web.archive.org/web/20121123220302/https://… with images in tact. I did attempt to add context by saying, "blurred gradient" edge for touch screens. I wish I could go back 10 years and fix this issue by adding more context, thankfully we have The Archive to help us with the dreaded link rot.
    – rlsaj
    Mar 18, 2022 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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