29

Looking at the gmail interface when replying a message, I can see the original message and just below it, the new message window. this pattern creates two vertical scrollbars: one in the browser window, and a second one in the inner 'new message' window. The same pattern exists here, on ux.stackexchage, when writing a new question and observing the 'Questions that may already have your answer' section just above it.

I can't seem to find many advantages of using this pattern, whereas the disadvantages are clear: small area for the inner scroll, strange mouse wheel behavior on the page etc.
From my point of view, it just seems as bad ux pattern. Can someone enlighten my eyes and give me some examples of places where an inner scrollbar pattern gives a better experience to the users?

4
  • 1
    What's the alternative? How would you design those pages without using an internal scroll bar? Nov 7, 2012 at 11:03
  • 1
    Maybe the new [gmail compose window] (gmailblog.blogspot.co.il/2012/10/…) is an answer for that. other possibilities exists.
    – Yaniv
    Nov 7, 2012 at 12:46
  • Out of interest, how would you make it accessible to people who cannot use a mouse (ie keyboard only users)?
    – simon
    Nov 13, 2012 at 20:10
  • they are the devil and to be avoided where at all possible generally.... However with gmail they have the advantage that "new mail" is a very temporary window and whilst you are operating with it you probably won't be operating with the main window. In essence it operates like a modal, only with the option to still interact with the main page remaining,. I think with this style of opening a folder on top of a folder (ala an OS) it is forgivable. Apr 8, 2015 at 15:50

4 Answers 4

13

In general I try to avoid double scrollbars whenever possible. We've had bad reactions to them in usability testing, and users have reported being stymied when faced with them.

Inner scrollbars can confuse users, and are especially frustrating due to mousewheel behavior. For mobile users, it's confusing, especially if there's no good indication that an inner area scrolls. For users with large/tall screens, having small scrolling areas can be very frustrating and seem overly restrictive restrictive.

Generally they're a sign that either:

  • your design is very 'busy' (perhaps necessarily)
  • you have content both above and below a variably-sized area, and you want to make sure the user is able to reach / see both at once
  • the design is trying to avoid putting things 'below the fold' (perhaps unnecessarily), or
  • you're avoiding non-square scrolling areas (these used to be hard to do on the web)

If you have multiple areas of long content--e.g., a table with hundreds of users in it, which have to be matched with a table with hundreds of jobs in it--then internal scrollbars might be justified, but there's almost always a better way to do it--just lay out the content so that it is "tall" and rely on the browser's scrolling feature.

Likewise, dynamic layout of a page can usually avoid the problem. Comment boxes on this site let the user resize them--but you could imagine a design which automatically increases the box size as you type, so you always have a line or two of space at the bottom. This relayout could be distracting, or it could help users focus on their input--you'd have to test it in your specific application. (And here on SE, the appearance of the live preview might impact this.)

1
  • "and you want to make sure the user is..." <- I'm curious to read the remaining of that sentence. =)
    – elias
    Apr 8, 2015 at 13:42
12

One of the immediate advantages of using inner scroll panels is to maintain page layout when there's an abundance of content that is being displayed. If all content heights are forwarded out to the parent scroll then that can easily make the page very long, and a stress to navigate in.

Another advantage, considering your point with how inner scrolling is utilized in Gmail when composing an email. You actually mention the advantage there, perhaps without even realizing it: " when replying a message, I can see the original message and just below it, the new message window". This is actually a good thing! This means that the user easily can revisit the original message, if memory fails, without having to scroll. This is convenient to make sure that the conversation is on track and that all possible questions in the email you're responding to are addressed.

8
  • 5
    I'd like to add 1 disadvantage that I have noticed using few websites. Incorrect implementation. I scroll using my mouse wheel and sometimes I stop midway on the page but I didn't stop scrolling down, after a second or so I realise that the mouse went over the BOX that allowed inner scrolling. It's not a huge problem but it makes me think "What's happening???" sliderkit This is not a srolling example but its a visual example of what I'm trying to explain, Scroll down using your mouse wheel in the middle of article, go over photos
    – Igor-G
    Nov 7, 2012 at 9:47
  • 1
    @Igor-G Yea, most definitely. I think we've all experienced that. However that's avoided (with JS?) that this inner scrolling is not recognized if the scrolling was initiated outside of this inner scroll panel. As you say, you have to implement it correctly! Nov 7, 2012 at 9:50
  • @AndroidHustle Well, google doesn't implement it correctly then. While in the inner window, scrolling up will scroll the content of this window but when reaching the top of the content, the content of the browser window starts to scroll. I find this annoying. I'm still looking for examples though of good implementation of two vertical scrollbars.
    – Yaniv
    Nov 7, 2012 at 12:40
  • These are also important for fixed layout designs. Multiple scroll bars are very common in desktop apps and very few people seem to have complaints about those. The only real problem I've encountered with multiple scroll bars is the issue mentioned where they "catch" your scrolling (also when they're there because you messed up your CSS, but that's different)
    – Ben Brocka
    Nov 7, 2012 at 14:24
  • 1
    The difference is that generally desktop apps rarely have a main scrolling content area, so the scrollbars are in fixed areas.
    – Ben Brocka
    Nov 7, 2012 at 15:09
3

Althought there are some advantages with inner scrolling (like it was mentioned before) I think you should limit or even avoid such behavior. The mouse scrolling problem (when inner window scrolls instead of the parent one drives people crazy, moreover the "new" invisible Mac OS X scrollbars make it almost impossible in some cases to guess if the area is scrollable).

Personally I think it's ok to use inner scrolling for temporary blocks (like compose or reply windows in GMail) and you should avoid using it in statically placed blocks.

There are some common patterns (like "show full text" links which will dynamically expand area if needed) which could replace inner scrolling.

2
  • 1
    Definitely agree about the OS X scollbars. I've run into this issue several times on my Mac, and only accidentally noticed that I could scroll in something internally.
    – adamb0mb
    Nov 13, 2012 at 18:38
  • Good point on the OS X. Generally it seems that scrollbars affordance is stepping backwards, mainly I think because of the mobile influence.
    – Yaniv
    Nov 14, 2012 at 6:27
0

The main disadvantage is that you have to move your mouse cursor into the inner area before you can perform the scrolling gestures. If it had just been one outer scrollbar your mouse could be anywhere inside the browser display area.

Imagine if Amazon had inner scrollbars for different sections of its page. It would drive you insane. Regardless of how bloated their middle section is, when I scroll to the bottom I know I can get to the reviews, and if I scroll to the top I will get the product name and image. Anything more than that is overkill and requires excessive focus by the user.

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.