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