0

Should the scrollbar width be thin/sleek or thick so that user can grab using mouse and scroll? I know most of them prefer using a mouse while scrolling. In terms of usability should width be thick or sleek?

For reference:

enter image description here

  • Vertical or horizontal bars? What's the use case? If I need to scroll a small amount of lines then mouse wheel is perfect, if I need to jump in the middle of a long video using my finger on a touch screen or a remote keyboard with a small touchpad on my media center... – Adriano Repetti Sep 6 '17 at 14:03
  • @Adriano Repetti Both. Use Case: For a table, Vertical Navigation, Scroll within a long container. – NB4 Sep 7 '17 at 6:07
  • How users will interact with it? Mostly scrolling from top to bottom and reading content or searching for something jumping here and there again and again? – Adriano Repetti Sep 7 '17 at 7:06
  • @AdrianoRepetti for reading content. – NB4 Sep 7 '17 at 7:07
  • Web or desktop application? It has to be similar to an existing application, like MS Office, or it has to integrate inside it? Would you like to make it similar to an existing product (well established standard de-facto or competitor)? Is there any brand/product design guideline/identity you're breaking? Will it be used mostly with a touch screen/touch pad or with mouse? Do you have any space constraints? – Adriano Repetti Sep 7 '17 at 7:15
1

Your scrollbar should be at least as thick as the smallest browser thickness since your users spend most of their time on other websites/applications and therefor expect the scrollbar to be at least as big as in their browser.

https://codepen.io/sambible/post/browser-scrollbar-widths

According to this post, the smallest you should go is 15px in width. This is a good middle value between usable and aesthetic and users will feel familiar with the scrollbar.

  • 'at least as thick as the smallest browser thickness' but that link says Edge is 12px, are you just discounting it because Edge isn't used a much yet or should we not actually use the smallest browser thickness. – DasBeasto Sep 6 '17 at 13:25
  • Edge has not enough users to use 12px as the lowest since a lot of other users could feel this is to small, i know 12px is the smallest used but that does not mean we should use the smallest. I think 15px is the golden middle in this case, edge users wont feel aesthetically offended and all other users will feel like on every other scrollbar. – Pectoralis Major Sep 6 '17 at 14:19
0

Ideally, if you have a lot of content to scroll past and if you think scrolling using a mouse wheel is tedious, you'd want a larger scrollbar.

However, scrollbars on Mac OSX hide unless you hover near them. On Chrome and firefox - Windows, you can change the width of the scrollbar on hover. So you can have, say a 4px default scrollbar and increase the width to 8px when the user hovers over it. Personally, I think this hits the sweetspot between the 2 options.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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