Scrollbar Tutorial
Summary:
Scroll bars are used to give the user access to a document that is larger than the window. Both horizontal and vertical scroll bars are available, but vertical scroll bars are far more common and are used most often to view long text documents. The basic scroll bar spans the right edge or the bottom edge of the window. It contains arrow buttons at the ends which invoke a scroll in the appropriate direction. The bar also contains a ‘knob’ or ‘inner bar’ that represents the current position relative to the whole document (i.e. when the ‘knob’ is all the way at the top of a vertical scroll bar, it indicates that the beginning of the document is in view). Clicking and dragging the knob changes the current position.
On more sophisticated scroll bars, the current position changes to reflect the position of the ‘knob’ while it is being dragged instead of waiting for the user to release the ‘knob’ and then calculating the new position to show. There is a considerable performance overhead involved since the document must be buffered and the view updated in real time. Clicking on the scroll bar channel (above or below the ‘knob’) invokes a block increment/decrement (usually similar to page up / page down).
Several features can be added to a scroll bar to make it more useful. One of the best examples is the vertical scroll bar implemented in Microsoft Office. This scroll bar has a tool tip that shows up when you click and drag the ‘knob’ indicating the current page or slide number. The size of the ‘knob’ also changes to reflect the size of the document (in larger documents the ‘knob’ appears smaller to show that a smaller percentage of the whole document is currently in view). The vertical bar also has a few extra buttons on the bottom to jump around the document. One of the buttons allows the user to select from a variety of browsing options (browse by page, section, comment, edit, etc.). The other two function as previous / next. For example, if the browsing option is set to ‘edit’, clicking the previous button will automatically scroll to the location of your last edit, which is a very useful means of document navigation.
Scrollbar Channel Navigation Buttons Tool-tip Knob
Figure 1: Vertical Scroll Bar Example
Where to Find It:
In JAVA, scrollbars are implemented using the JScrollBar
found in javax.swing.JScrollBar.
The Basics:
The easiest way to implement scrollbars in JAVA is to use the JScrollPane. The JScrollPane by default automatically shows appropriate scrollbars depending on the size of the content added to the pane. By default, the size of the scroll ‘knob’ in JAVA represents the percentage of the visible portion of the document (manually set using the setVisibleAmount(int) and getVisibleAmount() methods in JScrollBar). Implementing the navigation bars and dynamic tool tips as seen in the Microsoft Office vertical scrollbar (see Figure 1), is fairly complex in JAVA and is better left to more experienced developers.
Best Practices:
If implementing scrollbars manually using JScrollBar, keep the following tips in mind when configuring the scrollbar. These tips were taken from ‘Organizing the Content of Windows’ (see references).
- When users click in the scrollbar's channel, scroll the content approximately one pane at a time, leaving one small unit of overlap from the previous information pane to provide context for the user (use setBlockIncrement(int) method in JScrollBar). Remember that the pane size is the area of the window in which the document is visible.
- Scroll the content one small unit at a time when users click a scroll arrow. (The smallest unit might be one line of text, one row in a table, or 10 to 20 pixels of a graphic.) The unit controlled by the scroll arrows should be small enough to enable precise positioning of the text or graphic but not so small that users must spend an impractical amount of time using the scroll arrow (use setUnitIncrement(int) method in JScrollBar).
- Ensure that the scroll speed is fairly constant when users click the scroll arrows. Ensure that scrollbar controls run quickly yet enable users to perform the operation without overshooting the intended location. The best way to determine the appropriate scrolling rate is to test the scrolling rate with users who are unfamiliar with your application. The scroll speed is adjusted using both block and unit increment settings (see the two first tips).
- Ensure that the scrolling rate is appropriate across different processor speeds. Slower processors may not be able to refresh the view effectively if the scroll speed is too fast. The scroll speed is adjusted using both block and unit increment settings (see the two first tips).
- Place scrollbars in the orientation that is suitable for the writing system of your target locale. For example, in the left-to-right writing systems (such as English and other European languages), the scrollbars appear along the right side of the scroll pane or other component. In other locales, they might appear along the left side of the scroll pane.
Limitations:
Scrollbars are one of the most simple, intuitive UI features, however, as with other UI features, they can be used incorrectly. The most common problem is having a scroll bar that cannot scroll through the entire document. The cause of this is setting incorrect min and max values for the scrollbar (using the setMaximum(int) and setMinimum(int) methods in JScrollBar), or not compensating for a UI element that may cover a part of the view’s border. When a UI element obscures the document in any area of the view, the user must scroll the document further in order to bring it into view. The best way to avoid this is to remember that the effective view is not the same as the area of the window, but instead the area of the window where the document is visible.
References: