Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 4 down vote favorite

Do you think a thinner scrollbar should be applied in components (such as combo box and text area) and wider scrollbar in containers such as window & panel?

And if not, will you apply a thinner or wider scrollbar to your application?

Thinner is a 7-8 pixels (scrollbar width) Wider is a 14-16 pixels (scrollbar width)

share|improve this question
2  
No matter if wide or thin, I personally think consistency is key - they should look the same for all elements. – kontur Jan 28 at 8:18
What would you prefer from your experience Thin? or Wide? The problem with Thin is when a combo box or other component holds lots of information the scrollbar is very small and unnoticed ... – Uri Jan 28 at 8:32
1  
Maybe you should edit your question with what concrete concerns you have with thin or wide, respectively. Generally speaking, wide scrollbars are easer to use, because they are easier to hit. And thinner scrollbars are nicer to design, because they are less intrusive. Defining your problem some more will help you get better answers - you can use the edit button under your question to add useful information :) – kontur Jan 28 at 8:53

2 Answers

up vote 3 down vote

Very similar to this answer but a more specific question. Jacob Nielsen on Scrolling and Scrollbars:

Scrollbars are easy to get right. In fact, the less work you do, the better your scrollbar. Usability is almost always enhanced when you use the built-in scrollbars rather than design your own.

So do less and stick with consistent widths. Users are expecting the scrollbars all to be the same size.

share|improve this answer
Absolutely agree. 10 years ago when it was "neat" to style up Internet Explorer's scrollbars, it was as poor user experience as it is now styling box overflow with custom scrollbar designs that the user needs to learn. – kontur Jan 28 at 9:23
While I agree that a scrollbar should look like a scrollbar, I do believe that scrollbars besides the windows scrollbars from 10 years ago are becoming more common place (take the thin apple scroll bars on iPhones and iPads). Because of this, these new scrollbars become recognizable to the user. If you had many components on a page, and you used windows style scroll bars on them you would quickly have a very messy design. – Rich Jan 28 at 9:43
1  
I also want to add, Jakob Nielsen has contributed many things to UX, but one of his major downfalls is he cares only about usability, and a lot of the time fails to balance good usability with aesthetics. – Rich Jan 28 at 9:46
@RichardTan quite right - I remember this excellent article from 2004: Design Eye for the Usability Guy on how to improve on Nielsens ideas with web design. The scrollbars may be different on different OS's but they're a consistent size. – icc97 Jan 28 at 10:39
up vote 0 down vote

Check out: http://thenextweb.com/

If you look at the "All channels" column on the left, you can see that this container is in fact scrollable. The scrollbar will only appear when the container is hovered over. This is a good way to show that the container is scrollable, but keeps the design clean when no hover is occurring.

If you are worried about the usability of a thin scroll bar, what you can do is increase the width of the clickable area. See the highlight green area below:

enter image description here

You can see that, even though the scroll bar is quite thin, you can expand the clickable area (green area) so that visually the scroll bar appears thin, but there is in fact a wide area to click and drag in.

Make sure you also allow users to use their mouse wheel if they prefer, as some people may prefer not to use scroll bars. One thing to note on the example site (http://thenextweb.com/), it has very slow scrolling within the container. I would try and match it to the speed of the browser window.

share|improve this answer
The discoverability of that is quite low though. There is absolutely no indication that that panel can scroll until you hover over it. Also, as it's a small scrollbar it's not so easy to target with the mouse cursor so would probably rely on on the middle scrollbutton / two-finger-scroll. So overall from an accessibility point of view it's not really a great way to go. – JonW♦ Jan 28 at 9:26
As mentioned in my post, the scrollbar is thin but you could make the clickable area wider than the actual scrollbar. The green area in the image is just an example, it could be even wider than this if desired. If discoverability is an issue, the scrollbar does not need to be on hover. It could simply be there always. – Rich Jan 28 at 9:51

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.