4

The scrollbar thumb has two purposes.

  1. To grab hold of to scroll down the content.
  2. To give a visual indication of how much content is contained.

However, this raises the theoretical possibility that there is so much content in the container than the scrollbar could get down as small as 1px in height.

So, to combat this - should we set a minimum height that a scrollbar thumb can become?

The drawback for this is that it then negates the benefit number 2 above - it makes the contents seem smaller than in actually is, plus it is unusual behaviour as as far as I'm aware, scrollbars always reflect the size content they control. But then a fixed minimum size does improve the ability of point 1 - the scrollbar is easier to get hold of than it otherwise would be.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

(Obviously, one consideration should be that if we've got so much data that the scrollbar becomes tiny then it means we're using the wrong control, or need to rethink the content, but for the sake of this question assume it has to be a scrollbar).

  • I would think a minimum height wouldn't be problematic, if a user sees a 10px tall thumb on a 1000 word file and a 10px thumb on a 10,000 word file no user with think "hey the ratio for the thumb to text amount isn't proportional!" they'll think "yup, thats a lot of text to scroll through". – DasBeasto Oct 12 '15 at 14:28
  • @DasBeasto From a developmental perspective it may be tricky though. It means the scroll speed will have to amend based on the amount of content. And that's probably no easy task. Maybe it isn't done currently because of this issue. – JonW Oct 12 '15 at 14:37
  • The visual indication plays an important factor here. For a user, setting a Scroll bar with minimum height would indicate a long read and might result into them skipping it (if available to). Whereas the Correct height will easily have them know the length of the read, and might have them read it after all if it's short. – Swapnil Borkar Oct 12 '15 at 15:38
  • Is this for the Web or a mobile platform? – tohster Oct 12 '15 at 15:44
  • 1
    @JonW got it, thanks. The reason I asked is, mobile users: 1. Often use the scrollbar only as a last resort, preferring instead to swipe the content to scroll; and 2. have different minimum requirements with scrollbars because of thumb size. – tohster Oct 12 '15 at 16:00
6

Yes, you should.

While there are parts of your scenario that we don't know, there are some generalities than can and should be applied based on known formulas and user expectations. One of those is the thumb minimum size.

Take a look at the image below:

enter image description here

here you have scrollbars from lots of different systems across decades. However, you'll notice that with the exception of Apple Lisa, they all share something in common: despite the amount of content you may imagine (since is not shown, but can be deducted) and the technical ad UI approach, the thumb is always at least as high as the scrollbar width.

This is easily proven if you use a native scrollbar in most operating systems: the default will be immediately applied, you have to do nothing. Microsoft says the following:

The minimum sizes for a Thumb control are determined by two system parameters, VerticalScrollBarButtonHeight and HorizontalScrollBarThumbWidth. The minimum size for a Thumb control in a vertical Track is 1/2 * VerticalScrollBarButtonHeight and the minimum size for a Thumb control in a horizontal Track is 1/2 * HorizontalScrollBarThumbWidth.

However, you may want an even higher minimum value, for which you have 2 options:

1. Set a fixed height

This will require some calculations, because you'll need to consider the scrollbar, its controls and the new minimum height. So if you set your thumb at 30px height as minimum, then you'll need to make room for this and "fire" the scrollbar 30px earlier. You can see a VB sample implementation document here but it basically means this:

<Track.Thumb>
  <!-- Set the height of the Thumb.-->
  <Thumb Height="30"/>
</Track.Thumb>

2. Set a variable height This is what I'd recommend, and there's a calculation for this:

ThumbSize = TrackLength * ViewportSize / (Maximum – Minimum + ViewportSize)

you'll need to specify ViewportSize property for this

of course in iOS you don't have persistent sidebars, but that's another story. For the purposes of your question, it's enough to say that the thumb height won't visually aid the user since the scrollbar itself is not visible

  • sorry devin, untrue "the thumb is always at least as high as the scrollbar width", really the windows minimum thumb size will be shorter than it is wide – Jedi Commymullah Oct 14 '15 at 0:51
1

So, to combat this - should we set a minimum height that a scrollbar thumb can become?

Yes, for both reasons you state. The scrollable content could be so large that the thumb shrinks to 0 pixels, thus effectively negating both points: A thumb of size zero can neither be dragged nor seen.

The drawback for this is that it then negates the benefit number 2

No, it would rather not. The user does not need this precise a measurement (everything is rounded to pixels, anyway) and it is sufficient to know the viewport is showing a "really small" part of the full thing.

plus it is unusual behaviour as as far as I'm aware, scrollbars always reflect the size content they control

Not so unusual - at least, the Windows scroll thumb will not shrink smaller than to a few pixels in size.

1

No, you don't need to adjust the height to solve your problem.

The height is an indicator for tracking current screen position relative to the full document. Setting a minimum height defeats this purpose.

What you should adjust instead is the click area for the thumb control.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Note: Is this something you can easily control? Probably not without redesigning the scrollbar control.

  • 1
    Actually, we have done this already (it's a custom scrollbar control). But we're concerned about the discoverability of this. Plus it still means it's theoretically possible to have a scrollbar of 1px high, or less. So not only does that give the impression it's hard to grab, but 1px high items may present issues to people with low visibility. – JonW Oct 22 '15 at 8:02
  • Well yes, you need to make sure it's visible. A 1 to 2px line is visible though with sufficient contrast. If you have a custom scrollbar already then it's easy enough to test. The thumb control has a hover state no? See if people can see the change when they move the mouse close when it's very small? This technique of larger hit area than the visual element is readily used for touch screens. – nightning Oct 22 '15 at 15:06

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.