2

I'm designing mobile application and one of the screen has a few objects falling out of a screen. There's only two rows of information so I think vertical scrollbar would not really look good. Height of each row is fixed so re-sizing is not an option.

I have two options right now:

  • Momentary display scrollbar before hiding it. This will need to rely on user actually spotting it as they entered the screen.
  • Add fading/bleeding effect to the edge that has additional content.

Is there other alternative to indicate this additional content?

Improve this question
5

2 Answers 2

Reset to default
3

One visual cue to convey that there is more to be seen outside the viewport is to let the bottom region fade into dark gradually.

Consider this depicted example.

Without visual cue:

enter image description here

With visual cue:

enter image description here

The pattern uses the same visual cue as the rotating date pickers.

The solution somewhat sacrifices the last row of the viewport since the fade makes the text a bit harder to read. But as long as you remove the fade once the vieport is scrolled to the bottom nothing is lost.

Improve this answer
6
  • Thanks, this is actually what I qualified as fading edge tho.
    – RobGThai
    Aug 16, 2012 at 11:56
  • @RobGThai ohh, wow.. how did I miss that... ok, then you had already thought of that then. ok, well, I would still argue that this would be a better cue than momentarily showing a scrollbar though. However that could also work if it clearly shows that more content is present beneath the viewport (text cut in half etc..). in the example I posted it doesn't show very clearly in its original state that there is more content beneath the viewport since the text is intact.
    – AndroidHustle
    Aug 16, 2012 at 12:11
  • @RobGThai is there any reason why you just don't simply combine the two cues you've listed into your interface? I think they would convey the discoverabilty excellently, with no need of any other/additional cue. Just curious..
    – AndroidHustle
    Aug 16, 2012 at 13:28
  • As a matter of fact, I could do just that. As for tech savvy people, fading edge is more than enough. However, our target audience could be someone who use touch-enable phone for the first time in their life. That's why we wanna go a step further to find out if there's a better way to do this.
    – RobGThai
    Aug 16, 2012 at 15:58
  • If you add a scroll bar that's only visible while scrolling, yo'll give the user an idea of how much content there is to scroll in. Further, the user can use the scroll bar as a navigation to give a hint about where in the content area the visible area currently is.
    – Henrik Ekblom
    Dec 18, 2012 at 16:12
2

Instead of using a scrollbar, you could have a scroll icon (e.g., in the lower right corner) or a "next" icon. This icon can either perform scrolling (I'm not sure how well-supported scrollBy is on mobile devices) or switch visibility between the two rows.

Improve this answer

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.