24

In Android I'm trying to work out a way to indicate to the user that a container can be scrolled. I'm not a fan of scroll bars and usually turn them off for all containers but would enable the fading edge to indicate that a container was scrollable. In Android 4.0 and beyond though, the fading edge no longer exists.

What would be another way to indicate to a user that a container is scrollable without using scroll bars, and without the ability to use a fading edge?

I've tried using arrows but it didn't make much sense from a user standpoint and a gradient in the scrollable direction didn't exactly jump out as meaning something was scrollable to me. I've also tried having a bit of the content show at the edge of a scrolling container to indicate that there was more information but it's not very reliable that something will overhang with the different screen sizes and the amount of content per container.

Here's an example of what I'm trying to indicate.
Example content

In this 3x4 grid, how can you indicate to the user that the container can be scrolled beyond the 12 items that are on the screen? In some situations there will be content overhang but this is the situation I'm trying to account for.

Also, the grid is just an example. My content is a single, horizontally scrolling row of icons.

  • 2
    Some of the answers to this question may help you, as it's almost an exact duplicate: ux.stackexchange.com/questions/23358/… – dhmstark Sep 27 '12 at 16:19
  • The answers for that question were to use a fading edge (not available on Android 4.0+), arrows to indicate direction (my boss told me if I use an arrow on anything again, he's going to hand me a box), and having partial content show (which I already went over in my question as not being a reliable solution). Also, thanks for the retag. I'm not familiar with all the UX terms so I went with what sounded the closest. – Michael Celey Sep 27 '12 at 16:35
  • Are you saying fading the bottom edge isn't possible? That's nuts. – Matt Sep 27 '12 at 19:42
  • I'm saying the fadingEdge property of Android scrolling containers is ignored by the Android OS starting in 4.0. I wasn't saying I couldn't do it on my own. I just chose not to since Android turns it off and adding it back in would go against the platform. – Michael Celey Sep 27 '12 at 19:47
  • Wouldn't removing scroll bars also qualify as going "against the plaform"? – Matt Sep 27 '12 at 21:38
20

Several ideas:

  1. You've said that fading edge is not available. I assume that if it was available, you would have used it. Why not implement a fading edge by yourself? This shouldn't be too hard to implement, just draw a gradient mask in a layer over your content. If you extend the default scrollable container class (ScrollView), you can add this functionality there and make the code reusable and easily pluggable.

  2. Flashing the scrollbars. I also hate scrollbars and usually prefer them to appear only when dragging the scroll and then have them fade out as soon as the finger lifts off the touch screen. Flashing the scrollbars will show them for about a second and then have them fade out. If you flash the scrollbars once as soon as the window appears (without having the user scroll first) it could signal to the user that there should be a scrollbar here. Since the scrollbars autohide after a second or so, you won't have them clutter your display.

  3. Rectangular overlay on the bottom of your ScrollView. This is very similar to #1, but instead of adding a fading effect by yourself, you can add a rectangular overlay. This overlay will appear in a narrow rectangle adjacent to the bottom border of the view. The overlay can carry some sort of message - from a complete string (like "scroll to see more" or simply "more") to some symbol (like "..."). As soon as someone starts scrolling, the overlay will fade out. When the scrolling stops, you could bring the overlay back up if it's relevant, or maybe not, since the user obviously understands this is scrollable. I would implement this as an extension to ScrollView as well.

  4. Tooltips. Personally I hate this approach as I believe it clutters the screen. But, you can use a tooltip (rectangular tooltip, or rectangular with an arrow tip) which tells that the content is scrollable and pin it to the bottom of your view. If you user scrolls, you will fade the tooltip out. It is probably a good idea to keep the tooltip hidden for the rest of the app usage, since the user obviously understands that the content is scrollable.

  5. Auto scroll. A bit weird, but could be an eye catching feature for some apps.. You can have the content start scrolling by itself very very slowly after a couple of seconds. It doesn't have to scroll all the way to the bottom. If the user touches the content, auto-scrolling should immediately stop. You can also choose to stop auto-scrolling altogether after the user has stopped it once.

This indeed is a very difficult problem without a good solution. To be frank, even the fade effect isn't a very good solution. Not all users understand it.. pretty obvious since Google dropped it from Android 4. Leaving it as is, without any notification or indication is quite common... Click on the "StackExchange" logo on the top left of this page, it opens a popup with a list of hot questions, right? On my computer I'm not seeing any indication that this list is scrollable...

  • 2
    I love the idea of auto scrolling until the scrolling container receives an interaction. It's a cue to the user that the container can be scrolled and it draws attention to that particular area which is exactly what i was going for. Thanks! – Michael Celey Sep 27 '12 at 19:18
  • Don't forget to post a quick screencap video of what you did just to show off a bit :) – talkol Sep 27 '12 at 19:24
  • I would but I can't post any shots of what I'm working on currently. If I could, I would've shown what I was trying to accomplish in my question but unfortunately I had to use that Instagram shot from someone else. – Michael Celey Sep 27 '12 at 19:41
5

Similar to talkol's auto-scroll idea... you could have the page start off somewhere lower in your list (maybe at the bottom, maybe just a few items lower), and then very quickly scroll to the top. This gives a quick preview of all of the content, shows the user that the list can be scrolled, and can be used as some animation as the content is loading.

4

A common pattern is to show the next bit of content within the scrolling area as half cut off. It annoys people to only see half and so they scroll to see it.

  • As I pointed out in the question, this was something that was tried and there are problems with this approach as described above. – Michael Celey Nov 11 '16 at 5:51
  • If the scrollable view's in a card-like style and the card itself naturally must be half cut off if there're content more than a screen's height. – Meow Cat 2012 Mar 12 at 0:58
4

I am not sure what your content is like, but I really like this interaction process on Android Patterns.

screenshot

To quote what the site has to say:

  1. The user views an item
  2. The user swipes to the left/right
  3. The next article is shown
  4. The page indicators are updated to show the new state.

Other than the CNN or BBC news examples given on the site, News 360 also uses the same layout.

Edit: You said you want the content be scrollable. Are you fine with being able to able to scroll up or down to show more content? If that is the case, you can restrict the scrolling to top/down as given below.

Google+ Hangout Instagram

  • 1
    This doesn't really give any affordance to the action of scrolling - in fact the only indication of more content is the page indicators, which don't really shout "you can scroll through this". – dhmstark Sep 27 '12 at 16:21
  • 1
    This would work for content that is separate and can be easily split up but not quite for what I'm doing. I actually use this same behavior elsewhere in the app with an Android ViewPager. The content I need to indicate as scrollable is a horizontal row of "badges" which the user could scroll to see all the badges. I was going to make them all small enough to fit on the screen but in some cases there are just far too many. – Michael Celey Sep 27 '12 at 16:25
  • 1
    (After your edit) The scrolling is already limited to left/right. I'm more so looking for a way to indicate that the container CAN be scrolled. The two containers you show use content overhang to indicate the ability to scroll and it works with content with little spacing but for content that has a bit more space, it could appear that there is nothing beyond the last element. – Michael Celey Sep 27 '12 at 16:47
3

An alternative to showing a scroll bar is to show some other indicator of screenfuls of content. Below, this app indicates there is more content by virtue of the small dots, representing pagination.

ABC iView app

(They also use the partial-content trick, and quite deliberately so - this app is on the iPad and they are well aware of the device viewport size.)

0

Another option is to partially show the bottom of the content. That is, use up some of the vertical space to "tease" what the user is missing, fading out at the top, then fading in the bottom of whatever is visible. (Perhaps adding "..." inbetween?)

This may not be best approach for content greater than two screens tall, but if the content doesn't quite fit the screen (especially on a smaller phone), it works well to have a click on that bottom area scroll all the way to the bottom. (Show user what they clicked on.)


For taller content, perhaps a row of thumbnails at the bottom, with an indication of where you are. Think "video scrubbing", where you might be shown a few key frames of the video, but can quickly move to any frame (not just the ones shown as thumbnails). Use this as a compact place to quickly "scrub" through the entire content height.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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