16

I'm developing a system which will only be used by trained operators. Along the side is a live feed of new records coming in to the system, which is designed specifically to be used at fullscreen in firefox at 1080p (I know, a dream)

As the sidebar fills it becomes scrollable, however the operators are going to be told they can scroll (using the scrollwheel) but won't be presented with a scroll bar.

My questions, I suppose, are 1) Am I making it too confusing? and 2) shall I represent the scrollbars with an alternative visual aid to inform the user scrolling is available?

Improve this question
6
  • 1
    Is horizontal space a serious premium for this design?
    – kastark
    Commented Jul 9, 2012 at 7:48
  • Hi, thanks for commenting, Horizontal space is a bit strange on this one (I'd screenshot if I could but the content is confidential) as it's a list covering the entire width of the sidebar. The sidebar cannot grow any further as the space to the right is required for a map layer, so the only place to go is down unfortunately. I looked in to pagination but the users may want more control over which 10 records they see at once (10 being the number of records which fit vertically)
    – TJH
    Commented Jul 9, 2012 at 8:22
  • Ah, so a traditional scrollbar won't fit in the space? That makes sense.
    – kastark
    Commented Jul 9, 2012 at 8:59
  • 1
    Perhaps go with something like OSX Lion approach - scrollbars that only appear when hovered over. Demo example. I've no idea if this is actually as usable compared with traditional scrollbars though (hence being a comment rather than an answer)
    – JonW ♦
    Commented Jul 9, 2012 at 9:22
  • 2
    @dhmholley yes, that's pretty much why I didn't suggest it as an actual answer. However you could increase the affordance by displaying the scrollbars for the first 'X' seconds when the page loads and then fade them out, but I agree it's not ideal (what if people aren't paying attention for that first few seconds for example)
    – JonW ♦
    Commented Jul 9, 2012 at 10:57

4 Answers 4

Reset to default
17

This is something we've had issues with as well - perhaps this solution may help you.

The general idea is that you have a group of elements with arrows at the top and bottom (these can be clicked to scroll). The user can also use a scroll wheel inside the area to scroll. There's no real affordance of scrolling here, but it provides an alternative method for your users to navigate (and further, allows its use on touchscreens if that's a future application).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The affordances for scrolling/further content are twofold - firstly, the arrows appearing denote that there may be more content. The second is the fading at the edges, which acts to counteract the tendency for solid objects to act as the edge of the list's gestalt (this is the same principle as people not realising you can scroll below the page fold of a page where all the elements end just before the fold).

One other option is to go with the OSX idea of appearing scrollbars as @JonW mentions above. The issue there is still with affordances for scrolling, but one method of fixing that is to cause the scrollbar to appear onHover, rather than just when the user is trying to scroll.

Improve this answer
1
  • 2
    Thanks for the detailed answer. I've actually already applied the gradient to suggest "This isn't the end" - The arrows are also a great idea I think I'll give that a try and show some of the users to get some feedback. Thanks again!
    – TJH
    Commented Jul 9, 2012 at 13:36
24

If I understand your question right, this is a very common problem since iOS and Android (and now OSX) never show any scrollbars. A good way to go are visual clues: If the canvas is full the last item shouldn't be completely visible. Here's an example from one of our apps:

Search result

Additional thought: Windows 8 Metro (and WP7) heavily rely on visual clues for horizontal scrolling. Seems to work once the user understands the concept.

Improve this answer
2
  • Thanks for the answer - agreed that the last item being partially hidden is wise. I think the concept is more familiar to smartphone/tablet users and they don't display scrollbars (Lion also). I think I may have done all I can except the arrow suggestion below. I hope this question can help others with the same problem! (which is all of us if Lion is the first of many!)
    – TJH
    Commented Jul 9, 2012 at 13:38
  • Small correction: iOS at least does show an indicator as you scroll down a page. It's obviously useful for gauging whereabouts on the page you are and how much you have left to read. Definitely worth having some kind of indication as to how much content there is.
    – DisgruntledGoat
    Commented Jul 9, 2012 at 19:25
2

Proper Cocoa (iOS, Mac) app design paradigms recommend providing a transient indicator when scrolling is possible. You can flash the scroll indicator whenever a scrollable list appears on the screen. I personally feel like the extra, subtle animation is beneficial, so you could consider showing some sort of temporary UI/animation at certain points.

Improve this answer
1

This is a persisting problem and it's aggrevating with the new trend to remove the scrollbars. I have seen users having troubles even recognising scrollability in the presense of scrollbars, let alone without them.

Making an item disappear partially is a nice idea but it seems it relies on luck (if the list item fits just on the page, there is no clue at all that there is more). Also this mechanism does not make it clear to the user how to get it in view as there is nothing visible to click/tap on. Also it does not show how many more items there are.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.