How to indicate container is scrollable without scroll bars

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

    Some of the answers to this question may help you, as it's almost an exact duplicate: http://ux.stackexchange.com/questions/23358/scrolling-without-scrollbars

    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.

    Are you saying fading the bottom edge isn't possible? That's nuts.

    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.

    Wouldn't removing scroll bars also qualify as going "against the plaform"?

    They provide the functionality for it in their SDK still and even the Google+ app hides scroll bars so I would say that no, it doesn't go against the platform.

  • talkol

    talkol Correct answer

    9 years ago

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

    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!

    Don't forget to post a quick screencap video of what you did just to show off a bit :)

    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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM