Skip to main content

Improving the user experience with scroll bars

Posted by kirillcool on September 14, 2006 at 12:12 PM PDT

One of the more interesting UI rules is the Fitts' law that estimates the time that it takes to complete a movement to a specific UI target. One of the consequences of this law is that if you have a small target located far away, it will take a long time to target it. One option is to make the target bigger, and another option is to make the target closer.

One of the examples of more "problematic" UI target are the scrollbar buttons. They are usually quite small (12-16 pixels) and are situated on the opposite sides of the scrollbar. We can pretty much rule out the option to make them bigger, so we're left with making them closer. Apple's scrollbars "fix" address this issue by putting the scroll buttons together (see the screenshots at this HIG topic.

Now you can get the same and more in the latest drop of Substance 3.1. The SubstanceLookAndFeel.SCROLL_PANE_BUTTONS_POLICY
client property specifies the location for scrollbar buttons. The value should
be one of the SubstanceConstants.ScrollPaneButtonPolicyKind
enum. Available values:

  • NONE - no buttons are shown.
  • OPPOSITE - the default policy. The decrease button
    is on one side of the scroll bar, the increase button is on another side of the scroll bar.
  • ADJACENT - the decrease button is right next to the
    increase button of the scroll bar.
  • MULTIPLE - the combination of two. There are two decrease
    buttons, one on each side of the scroll bar (one of them is right next to the increase button).
  • MULTIPLE_BOTH - Two pairs of decrease / increase
    buttons on each side of the scroll bar.

The following screenshot shows horizontal scrollbar under different policies and
orientations. The first scrollbar is under the default OPPOSITE
policy. The second scrollbar is under the ADJACENT policy
in LTR application. The third scrollbar is under the MULTIPLE policy
in LTR application. The fourth scrollbar is under the ADJACENT policy
in RTL application. The fifth scrollbar is under the MULTIPLE policy
in RTL application. The sixth scrollbar is under the NONE policy.
The seventh scrollbar is under the MULTIPLE_BOTH policy.

The following screenshot shows vertical scrollbar under different policies.
The first scrollbar is under the default OPPOSITE
policy. The second scrollbar is under the ADJACENT policy.
The third scrollbar is under the MULTIPLE policy.
The fourth scrollbar is under the NONE policy.
The fifth scrollbar is under the MULTIPLE_BOTH policy.

Thanks for the comments and suggesting the NONE and MULTIPLE_BOTH policies. Thanks to Romain for his suggestion to make the default gradient painter less dark.