In-page scrollbars - Yes or no? Or maybe

Question

Is it bad UX to put a scroll bar in a module with a list, is there ever a case to use this?

My developer says its a bad idea and just annoys users.

Should this kind of thing never be used?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Facebook do something like this on this menu item below to choose your page you want to act as, but I do find the interaction a little irritating, so perhaps I've answered my own question - lol

Answer 1

You definitely should try to avoid nesting scrollable areas inside a webpage if possible: scrollable areas are breaking page interaction (nested block will be scrolled instead of outer page itself while using tracking pads or mouse wheels for scrolling).

There are some exceptions:

1. You may use nested scrolling panes if they're shown temporary (like in Facebook example you've mentioned in your question: the scrolling list in popup which is shown for a moment and will not break the page scrolling itself).

2. Editable areas like comments may be scrolled while being edited (and reverted back to non-scrollable mode then editing is done).

3. Web apps which may occupy the whole browser window and avoid scrolling of the content by using dynamic layout so it's OK to use nested scrolling panes (since main content area could never be scrolled anyway).

And in a case if you can not avoid using scrollable areas always showing a scrollbar is a good idea: users will notice that the area can be scrolled and will be aware of the area behavior.

Answer 2

If an area is scrollable, let the user know by putting in a scroll bar. Often, a scroll bar will already appear if you have this situation, so taking the effort to remove a scrollbar is pointless to me.

But first I think you have to really think about your listitems. If you want all of the items to be visible, making a new page for the listitems may be better.

For example, if you have a site where you sell multiple kinds of items, you can make one large page with a lot of small lists like this:

Fruits                Drinks
+------+-+            +------+-+
|apple | |            | tea  | |
| pear | |            |coffee| |
| ...  | |            | ...  | |
+------+-+            +------+-+

But in such a case, my preference would be a link for each category with the lists on their dedicated page. This also allows extra flexibility (prices, other extra info) and is clearer to the user.

I personally only use listviews for forms and not for navigation.

Answer 3

I think one of the main problems with this is type of interaction, besides being annoying when the page scrolls instead of the module, is that more often than not the default desktop browser window designs now hide the scroll bars unless you are scrolling. Additionally, mobile devices do not show the scroll bars either and some of the older (but not that old) mobile browsers flat out do not allow scrolling and cut off the data that is hidden from view. Or some even require two finger scroll to scroll inside a box that has no indication that it is scrollable.

Personally I think that a "more" or "view full list" button at the bottom of the module is a better way to deal with this issue. When this button is clicked it would expand the size of the box to allow the full list into view. This may make your layout less pretty while it is open, but form should follow function and the user is more interested in the list of items rather than any whitespace created by the box being opened to full size.

------------------
| List item      |
| List item      |
| List item      |
| List item      |
| List item      |
| List item      |
| List item      |
------------------
     View More
------------------

Answer 4

Actually, that is the whole purpose of that class of controls: listbox, listview, etc.. There are times when we as developers need to present a large list of items in a constrained space. Where large is defined as more items than will fit in the space available. These controls nicely encapsulate the idea of presenting the list.

As a developer, I can manage the presentation of the data-set in a control that is built around this need, without blowing out the rest of the page or form. As a user, I appreciate having the list in context with the other controls on the same page and not having the size of the list make the page hard to use.

Where would your developer propose to put this set of items to make it available to the user? A separate window or pop-up would be more annoying than having a list with a scroll-bar.