How to indicate container is scrollable without scroll bars

Question

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.

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.

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

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.

Answer 5

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.

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

Answer 6

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.