Don’t click, paint!
Toggle Maps
Patrick Baudisch, GMD-IPSI
The problem
The problem
Some applications, e.g. the definition of user profiles, require a large number of Boolean variables to be set
Toggle switches can be used
But: large number => time consuming.
Goal: Make it faster
Multiple select
Other applications dealing with many objects use multiple select
1. Select items with the mouse(e.g. shift click, mouse drag, lasso, ...) Cells in spreadsheet programs
Icons in desktop GUIs
Pixels in paint programs
2. Apply operation Clear cells, move icons , set pixels to a
color, ...
Interaction orders in paint programs
A) pixel selection first ,then function selection
B) function (tool) selection first,then pixel selection (painting)
Selecting vs. painting
If the function is used repeatedly, then painting is generally more efficient
and it gives immediate feedback
Let’s paint toggle switches!
toggle switches
black & white pixel
Toggle switches can behandled the same way (e.g. multiple select)
<Demo>
<Demo> Map applet
Basically that’s all!
Now let’s take a look at the details. Painting tools Painting mode Layout
Painting tools
Painting mode
Toggle first pixel (as used in “Mac Paint” ) If painting starts on a reset toggle then paint
set toggle switches If painting starts on a set toggle then paint
resets toggle switches
Advantages Since at least the first button is toggled it
always gives some feedback to the user which simplifies learning
It can be run using a single button mouse or on a touchscreen, e.g. on a palm top computer, as well.
<Demo>
<Demo> Channel applet
DanishDanish
MilkMilk
Pan-cakes
Pan-cakes
OrangeJuice
OrangeJuice
BaconBacon
TOTAL
TOTAL
FrenchToast
FrenchToast
Englishmuffin
Englishmuffin
HashBrowns
HashBrowns HamHam
EggsEggs
RootBeer
RootBeer
MilkShake
MilkShake
CookieCookie
ChickSand
ChickSand
IcedTea
IcedTea
Fishsand
Fishsand
FruitPie
FruitPie
SundaeSundae
CheeseBurger
CheeseBurger
HamBurger
HamBurger
FrenchFries
FrenchFriesColaCola
OnionRings
OnionRings
CoffeeCoffee
Layout by co-occurrence (mult. scal.)
What else can we do?
Large numbers of toggles are rendered manageable using the toggle maps concept
This opens another interesting application area: Segment continuous variables, e.g. time
Represent them as sets of toggle switches
Manipulate them as a Toggle Maps
<Demo> A very efficient timer interface
No handles required=> spiral viewerJoe: You can scroll & wrap these
“Good layout” condition
“Poor layout”condition
First time usersAverage Task completion times (sec)
14,2
10,3
15,9
6,4
0
2
4
6
8
10
12
14
16
18
paint click onlygood layout
paint click onlypoor layout
In the subjective comparison 89% of users preferred using a painting tool.
ExpertsAverage Task completion times (sec)
1,97
4,714,10
5,33
0
1
2
3
4
5
6
paint click onlygood layout
paint click onlypoor layout
Application criteria
(Toggle Maps are always applicable)
1) Low cognitive effort per toggle switch (descriptions & names, little decision making)
2) It must be possible to manipulate several toggles switches per mouse drag A) a significant number of switches must
be manipulated during individual sessions.
B) a significant co-occurrence between toggles has to exist and to be reflected by the layout (multidimensional scaling).
Application examples
Future work
Fuzzy maps: Input grades of like / dislike Gray scale images instead of b/w Drawing tools: airbrush, gradient
n-dimensional Toggle Maps to input high dimensional user profiles
Can we paint on spreadsheet cells, too?
More information...
Demo in the crystal room
Video proceedings
http://www-darmstadt.gmd.de/~baudisch/Publications/ToggleMaps
© GMD-IPSI 1998
Top Related