Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
What's the alternative? How would you design those pages without using an internal scroll bar? –  Vitaly Mijiritsky Nov 7 '12 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 '12 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 '12 at 20:10
add comment

3 Answers 3

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

share|improve this answer
add comment

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.

share|improve this answer
    
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 '12 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 '12 at 6:27
add comment

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.

share|improve this answer
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 '12 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! –  AndroidHustle Nov 7 '12 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 '12 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 '12 at 14:24
    
@Yaniv You're right, I've never caught that. Which I guess would mean that it hasn't really been a problem, in Gmail that is. The conversation view in Gmail rarely stretches long ranges outside the viewport, which is probably why you never really (speaking from own experience, yours may differ) have a problem with unwanted inner scrolling. I do however recognize that this can be a problem on certain pages, depending on how it's layed out and how long it stretches, Gmail however is not one of them IMO. –  AndroidHustle Nov 7 '12 at 14:56
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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