User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have a web app that's meant to be targeted to both PC and tablet users. The app has two main "panes" side-by-side (a map and a legend, effectively), and I'm finding that the "scrollability" (did I just invent a word?) of the legend panel is not very discoverable on the tablet due to lack of visible scrollbars.
Can you recommend something that can cue the user into the fact that a particular portion of the UI is scrollable?
A scrollbar is the classic affordability cue that cries "scroll me!" though they can be ugly/space wasting (but not unheard of) on mobile touch devices. On a tablet though a 7px scrollbar really doesn't eat much space and can have the helpful benefit of showing how much content exists; many Android apps will show a "hidden" scrollbar that only appears when you scroll to help show your position in a scrollable element.
If it's a technical reason you're not using scrollbars, some js and other tricks can allow their use, such as iscroll JS.
If scrollbars are unwanted for non-technical reasons then you have to suggest the scollability. This can be done inelegantly by directly telling a user that X is scrollable on their first visit, but subtle cues are a more appealing and practical method. Try to make it clear that there's something beneath the fold; if text extends beyond the fold or other element is partially obscured users will quickly get the hint (balance this with aesthetic appeal, don't intentionally hide important things by the fold).
An interesting example of this suggestion is Cultural Soliton's website, as @RogerAttril put it in chat,
The scrollbar is not the only cue on that page :- the circles on the background go below the fold - like something bubbling up from below
If you are not certain that some content will be cut off, and thus imply that its a scrollable pane, you can always add a subtle drop shadow on the bottom part of the pane, from the bottom up. It kind of subconsciously implies that there is something more at the bottom. It also depends on the design, if the panes are maximized and touch the borders of the tablet - it might work. Having them on a limited areas with margins might require a different approach.
I'd agree that the scrollbar is the most recognizable cue but a "show more" "show less" button could work if the list isn't crazy long. This may be better anyway because the expected behavior on mobile may not be to scroll and are but to scroll the page. It's also difficult for people to scroll an area with finger but touch somewhere else to scroll the page. Either way, I'd usability test to find out if your solution works.
