Don’t click, paint! Toggle Maps Patrick Baudisch, GMD-IPSI

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 be handled the same way (e.g. multiple select)

 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.

 Channel applet

Danish Milk Pan- cakes Orange Juice Orange Juice Bacon TOTALTOTAL TOTALTOTAL French Toast French Toast English muffin English muffin Hash Browns Hash Browns Ham Eggs Root Beer Root Beer Milk Shake Milk Shake Cookie Chick Sand Chick Sand Iced Tea Iced Tea Fish sand Fish sand Fruit Pie Fruit Pie Sundae Cheese Burger Cheese Burger Ham Burger Ham Burger French Fries French Fries Cola Onion Rings Onion Rings Coffee 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

A very efficient timer interface No handles required => spiral viewer Joe: You can scroll & wrap these

“Good layout” condition “Poor layout” condition

First time users Average Task completion times (sec) 14,2 10,3 15,9 6, paint click only good layout paint click only poor layout In the subjective comparison 89% of users preferred using a painting tool.

Experts Average Task completion times (sec) 1,97 4,71 4,10 5, paint click only good layout paint click only poor 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  ~baudisch/Publications/ToggleMaps

© GMD-IPSI 1998