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.

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.

share|improve this question
1  
Some of the answers to this question may help you, as it's almost an exact duplicate: ux.stackexchange.com/questions/23358/… –  dhmholley 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. –  MCeley 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. –  MCeley 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
show 1 more comment

4 Answers 4

up vote 10 down vote accepted

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

share|improve this answer
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! –  MCeley 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. –  MCeley Sep 27 '12 at 19:41
add comment

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

share|improve this answer
add comment

I am not sure how 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

share|improve this answer
    
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". –  dhmholley Sep 27 '12 at 16:21
    
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. –  MCeley Sep 27 '12 at 16:25
    
(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. –  MCeley Sep 27 '12 at 16:47
add comment

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.

share|improve this answer
add comment

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.