Data Entry II: Dragging
The following examples of controls for setting - preferrably continuous or quasi-continuous - values are taken from applications, which do not use touchscreens. But these controls could be used there, if certain restrictions are observed. Note, however, that the controls use drag operations, which are not well suited to finger-operated touchscreens (speed, accuracy).
Examples
|
|
Scrollbar from the "Leonardo the Inventor" CD, may be used for setting continuous values. Too fancy for "everyday use"! |
|
|
A control for setting continuous values (from Kai Krause's "GOO 1.0"). Uses a lot of screen space. |
|
|
Slider for setting the size in pixels of an image (proportional change only) (from Kai Krause's "Soap 1.0") |
|
|
Slider for setting the enlargement of an image (proportional change only) (from Kai Krause's "Soap 1.0"). The enlarged image is displayed in a frame left to the control. The image at the top is a preview of the whole image. The empty spaces can be used for storing views of the image. |
|
|
A button with sliders (in a drawer) for setting text color attributes (from Kai Krause's "Soap 1.0"). |
|
|
Control for adjusting lightness and contrast of an image (from Kai Krause's "Soap 1.0"). The leftmost slider sets the strength of the effects. The bulbs on the upper left act as buttons for undoing an effect or making it permanent. There are drawers for additional functions (see below). |
|
|
The same control with open drawers (from Kai Krause's "Soap 1.0"). Left drawer: Here you can store settings. Right drawer: Advanced lightness controls. |
|
|
A similar control for setting color parameters of an image (from Kai Krause's "Soap 1.0"). |
|
|
A control for setting several continuous-valued attibutes of a brush; the marbles in the drawer to the left store different settings (from Kai Krause's Soap 1.0). |
topSource: Interaction Design Guide for Touchscreen Applications