Visible Range

Asko Saura

OverviewThe whole range cannot be shown simultaneously due to lack of space. The user selects the range he wants to view.

ProblemThe amount of data is often so large that focusing on some part is necessary to achieve any level of detail. The user needs a way to navigate the material by moving his viewport across the material and sometimes needs to increase and decrease the magnification used.

ExampleA student needs help on his term paper and needs to make an appointment with his teacher. The teacher is available on Wednesday, from 10 am to 1 pm, and on the following Tuesday, from 8 am to 12 pm. The student checks his calendar application to see which times are best for him.

Fig 1. Three instances of Visible Range.

The example user needs to view his schedule on the following Tuesday from 8 am on, so he uses the spin buttons to make the schedule display everything from 8 am to 7 pm. The schedule view is immediately updated.

The ‘thumb’ on the calendar scrollbar (the dark grey rectangular area in Fig. 1) can be dragged to another position to change the days shown on the detailed schedule view on the right. It can be stretched by dragging from the edges to show, for example, three whole weeks instead of two working weeks. The days shown are always kept in sync with the thumb.

The visible months and years can be adjusted from their drop-down boxes on the left. The arrow buttons at each end of the calendar scrollbar allow stepping single weeks in the overview calendar.

These three controls are all instances of Visible Range. The calendar scrollbar has an Overview beside Detail relationship with the schedule view, while all three Visible Ranges allow Continuous Filtering of the time-bound data, as the user never needs to ‘apply’ his adjustments.

Overview beside Detail arrangements of two-dimensional data - maps, for example - often contain zoom lens Visible Ranges. Good Visible Ranges are always instances of Continuous Filter.

The thumb differs from the two other controls in that the user constantly sees where it can be moved and what exactly lies beyond its boundaries. The spinners and month controls rely on the user knowing that December precedes January and so on. A working interaction idiom for Visible Range is direct manipulation, i.e. dragging the viewport to move or resize it. Having the context and current location visible at all times allows the user to rely on knowledge in the world instead of his own memory, although sometimes this is not necessary.

A trivial form of Visible Range is the ordinary scrollbar. Another example of resizing the scrollbar viewport is in the Adobe Premiere for Mac, where the user can stretch the scrollbar thumb to show the appropriate amount of detail (Fig. 2).

Fig 2. Adobe Premiere allows adjusting the zoom level and current location with an adjustable scrollbar.

SolutionOffer direct manipulation of the range, located either on the data itself when an overview can be shown, or grouped next to the details, like a scrollbar. Always keep the range controls in sync with the detail view.