7

In most GUI implementations today, scrollbars take up a dedicated space next to the scrollable content. How about presenting scrollbars as a semi-transparent overlay on top of the scrollable content? Do you know of any examples of how this has been implemented, and the impact on UX?

So far, I can think of the following pros/cons:

  • PRO: More of the scrollable content can be displayed

  • PRO: The scrollbar track bar can be wider, making it easier to click

  • PRO: The scrollable content does not need to be resized whenever a scrollbar is made visible

  • CON: The area below the scrollbar no longer responds to mouse clicks, which may be irritating to the user

Thoughts?

EDIT

Thanks for the answers! Some clarifications:

  • The scrollbar would still look like a traditional scrollbars, with arrow buttons and slider, except that is semi-transparent (allows the scrollable content to shine through)
  • I'm looking for a design that can apply to mouse as well as touch UIs
Improve this question
2
  • Your edit actually confused me a bit: How would semi-transparent help anything? You can't really have content behind a semi-transparent overlay so you don't save any space... or did I misunderstand something?
    – Phil
    May 2, 2011 at 14:49
  • 1
    scrollable content within the page can be a usability issue to begin with...further obfuscating the controls via transparency would only seem to worsen things.
    – DA01
    May 2, 2011 at 18:46

4 Answers 4

Reset to default
3

@Phil @Jan - I have a mouse with a scroll wheel, but I use the scroll bar to make larger "jumps" by clicking in the scroll bar channel and not dragging the handle. An interesting alternative would be to do something like in Windows XP where you can "auto-hide" the taskbar when it is not in use, but move the mouse to the window edge to bring it into view.

The difficulty with this method is having a new user know that they can access the scroll bar by moving the mouse to the edge.

Improve this answer
3
  • 1
    I agree that discovery is a problem with that approach, but maybe a little tab could work as a hint.
    – Jan
    May 2, 2011 at 15:26
  • @Jan- You're right about using a tab. Something similar to the tab on a hidden Hello Bar with a vertical orientation could work.
    – Ray Mitchell
    May 2, 2011 at 15:33
  • i believe the issue of discovery can be dealt with by making the scroll bar visible at first (for a few seconds) when the document loads (as if there were a mouse over it) and then fading it out gradually... this way users would be reminded of the presence of it and they would get an initial feel of the size of content...
    – user1055604
    Dec 25, 2013 at 19:03
2

I think a scrollbar in its "traditional" design wouldn't work as a transparent overlay, precisely because it hides some content from being clickable. Being used badly (and it often will be!), it's going to be a royal pain IMO.

However, the idea of having a transparent scroll control is a very interesting idea - maybe a different design would do the trick. You could for example try placing large semi-transparent scroll buttons on top and bottom of the content area so that the user is able to scroll past those buttons to click the underlying elements.

A more simpler approach would be to just show the scrollbar buttons in their traditional shape, size and position, make them semi-transparent and do away with the area in between. You'll lose the opportunity to show the user the page's complete size, but it might be more understandable.

I second Phil though: please follow up if you get to build and test anything of that :-)

Improve this answer
2

This pattern is used in Mobile Safari on iPhone (I guess on iPad as well). But I assume you're not talking about touch interfaces.

For non-touch interfaces it probably wouldn't work. Many users still use the buttons (up/down) on scrollbars, even if they have scroll wheels on the mouse (I have no idea why, but it's reality).

One other problem I see is that depending on the content it might not be clear that there is more below the fold (e.g. end of a paragraph just before the fold). Of course this also applies to touch interfaces but here the "swipe to scroll" pattern is widely used so I guess it's less of a problem.

In short: I don't think this would work. If you ever come to test it though, please post the results :)

Improve this answer
1

If you want to go semi-transparent, why not choose edge scrolling instead? It could be either implicit (scrolls when you put the mouse in the hitbox) or explicit (scroll when you enter the hitbox and click to confirm). Both cases are fairly common (especially in games with large maps) and could easily handle hinting to help newcomers learn the tricks. I think it also complements well with mobile's dragmove.

Best case with this is that scroll wheels, middle clicks + drag, and other combinations could easily be allowed to work for power users (perhaps you even promote them as an alternative). Addtionally you could build on those shortcuts with the edge scrolling. One example of that, using the explicit method, might be to allow a cntr+click to do a "page" jump (similar to page down/up).

Improve this answer

Your Answer

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

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