Are inner scrollbars a bad ux?

Question

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?

Answer 1

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.)

Answer 2

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.

Answer 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.

Answer 4

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.