KnobSlider: Design of a Shape-Changing Parameter Control UI and Study of User Preferences on Its Speed and Tangibility

Abstract

Professionals such as sound engineers or aircraft pilots heavily use physical knobs and sliders on their interfaces. The interfaces have advantages over touchscreen interfaces, especially when the users need to quickly and eyes-freely respond to changing situations such as when musicians are improvising, or there is smoke in a cockpit. However, unlike touchscreen interfaces, the physical interfaces are often bulky and crowded and lack of adaptability to user preferences or small spaces. To have advantages from both physical and touchscreen control interfaces, we explore design space of control interfaces and suggest design guidelines in the following steps. We first conduct a formative study with eight professionals who use knobs and sliders. Based on their feedback, we propose design requirements for future parameter control interfaces. We then introduce the design of the KnobSlider, a shape-changing device that combines the advantages of a physical knob and a slider in a time- and space-multiplexing way. To increase users' acceptance on shape-changing control interfaces, we investigate subjective preference on speed of shape-changes by using pairwise comparison with different maximum speeds. We also investigate how tangibility-showing KnobSlider on a video or showing it in the physical world-affects users preference and suggest speed design guidelines for future studies.

Keywords: contextual inquiry; design exploration; dial; knob; parameter control interfaces; preference study; shape-changing interfaces; slider.

Figure 1

KnobSlider is a shape-changing device that changes between a rotational knob and a linear slider to accommodate users' needs. In the situation depicted (A) a sound engineer uses it as a slider to coarsely control a sound volume. She/he then presses the central button to change the device into (B) a low control-display (CD) gain knob, and (C) she/he can use it for fine adjustment.

Figure 2

Participants using knobs and sliders in their professional activities: (P1) a camerawoman with 4 knobs and a slider on a custom made device; (P2) a graphic designer using a graphic tablet with a slider placeholder; (P3) a light artist using custom knobs and sliders on a tablet in a dark environment; (P4) a light engineer using physical knobs and sliders while observing a stage; (P5) a sound engineer communicating with musicians on the far stage while using sliders; (P6) a sound engineer controlling a knob while watching a screen; (P7) a pilot using flight simulator for his training; (P8) a pilot using physical controls in a flight.

Figure 3

Two states of low-fidelity prototypes: slider (left) and knob (right). (1) slap bracelet, (2) party whistle, (3) accordion, (4) roly-poly, (5) twisty toy, (6) origami, (7) stackable disk, (8) zip-line, (9) fish bone, (10) dukta pattern.

Figure 4

Hypothetical actuation methods for the low-fidelity prototypes. The left shows slider state and the right shows knob state of each prototype. Idea 1 (slap bracelet) with motor actuation. The motors pull strings to make the slider (left), and loosen them to make the knob (right) Idea 2 (party whistle) with pneumatic actuation. The air pump inflates to make the slider (left), and deflates to make the knob (right). Idea 3 (accordion) with pneumatic actuation. The air pump puts the same amount of air into two chambers to make the slider (left). It inflates the outer and deflates the inner one to make the knob (right). Idea 4 (roly-poly) with electromagnet actuation. The magnets pull neighbor prisms to transform to the knob (right). When they change polarity, it goes back to the slider (left). Idea 5 (twisty toy) with motors. Motors rotate each face to transform the slider (left) to the knob (right). Idea 6 (origami) with motor actuation. The left motor pulls strings to fold the object to the knob (right). The right motor pulls the strings back to make the slider (left). Idea 7 (stackable disks) with two motors. The right motor pulls the top-most disk to make the slider (left). The left motor pulls it back to make the knob (right). Idea 8 (zip-line) with motor and magnetic actuation. The motor pulls the strings to make the knob. An under-table plotter with magnetic head moves the right end to make the slider. Idea 9 (fish bone) with Shape Memory Alloy (SMA) actuation. When SMA is heated, the bone bends and make the knob (right). When the SMA is cooled, the bone goes back to the straight slider (left). Idea 10 (dukta pattern) with motor actuation. The motor pulls the string to form the knob (right), and loosen it to form the slider (left).

Figure 5

(A–C) KnobSlider working prototype without the top cover to expose the slider's timing belt and the slider mechanism. (A) In slider shape, the movement of timing belt is conveyed through the gears, (B) during transformation, the edges of blocks start to lock the bottom central gear, (C) the edges completely lock the bottom central gear, the rotation of the knob does not affect the timing belt.

Figure 6

Elements of KnobSlider, here without the top cover to expose the slider's timing belt.

Figure 7

The assembly view of KnobSlider. The device consists of forty pieces of the printed case (yellow), five pulleys, a timing belt, a rotational sensor, five servo motors (blue).

Figure 8

A closer look at the piece in the red box in Figure 7, to show how two motor holders are connected through the connecting piece. They are showing the bottoms of the motor holders and top of the connecting piece. The connecting piece is showing the top to show the grooves for connection. The dots on the red lines indicate which part should meet which part when assembled. (1) The prominent part of the motor holder 2 goes under the servo motor arm on the motor holder 1. (2) The groove on the connecting piece looking like the servo motor arm locks the prominent part and the servo motor arm. (3) The second groove on the connecting piece additionally holds the motor holder 2.

Figure 9

The system diagram of KnobSlider. Five servo motors are powered by an external source (5V). They are controlled by an Arduino, and the Arduino communicates with a PC. The rotary sensor in KnobSlider communicates with the PC separately.

Figure 10

A participant in the video condition. She/he is looking at a video of KnobSlider changing its shape on a screen. The size of the device on the screen is controlled to have the same size in the device condition.

Figure 11

Two speed variables explored in the experiment. Max speed is the maximum speed that the motors will have over shape-changes. We use three amounts of maximum speed, 20, 200, and 100°/s. Speed profile is the changes in the speed during shape-changes. Square: the speed of shape-change is constant over time. Mountain: the speed increases a constant acceleration until it reaches the maximum speed and decreases with the same absolute amount of the acceleration.

Figure 12

The Bradley-Terry-Luce model output of different max speed and tangibility variables. The red bars show the preference ability of physical device (tangible) condition with different conditions of max speed, and the green bars show the preference ability of video (non-tangible) condition of the same device with different conditions of max speed.

Figure 13

The Bradley-Terry-Luce model output of speed profile variable. The participants preferred the square profile over the mountain profile, when the max speed was accumulated.