user interface design by sketching: a complexity analysis of widget representations

Suzanne Kieffer, Adrien Coyette, Jean Vanderdonckt

Université catholique de Louvain, Belgium

{suzanne.kieffer, adrien.coyette, jean.vanderdonckt}@uclouvain.be

Berlin, Germany – June 19-23, 2010

A design tool for the user interface prototyping• Multi-stroke bi-directional sketching of representations• Object recognition based on a graphical grammar• Multiple gesture representations of the same object• Multiple levels of fidelity

http://www.usixml.org/, funded by- ITEA2 Call 3 – Ref. 2008026- Eureka Project 3674

2EICS2010, 19–23 June 2010, Berlin, Germany

∑! 3674

EICS2010, 19–23 June 2010, Berlin, Germany3

DENIM: Lin et al., CHI’2000

JavaSketchIt: Caetano et al., 2002

Gabbeh: Naghsh et al., DSVIS’2005SILK: Landay & Myers, 1995

InkKit: Plimmer et al., CHI’2004 SketchRead: Alvarado, 2004

EICS2010, 19–23 June 2010, Berlin, Germany4

EICS2010, 19–23 June 2010, Berlin, Germany5

1: none2: low3: medium4: high

EICS2010, 19–23 June 2010, Berlin, Germany6

Experiment 1 (XP1)• Determine the most preferred and drawn

gestural representations for each object depending on the user type (designer vs standard user)

Experiment 2 (XP2)• Study the potential influence of the level of

fidelity on the sketching task

EICS2010, 19–23 June 2010, Berlin, Germany7

2 groups of 30 subjects• Designers: people with relevant experience in

computer science and user interface design

• End-users: people without any prior knowledge in computer science or user interface design Involve the end-user early in the software

development life-cycle

EICS2010, 19–23 June 2010, Berlin, Germany8

1st phase• Catalogue of 32 widgets• How do participants sketch the widgets? Widget representations

2nd phase• Categories of representations• How do participants rank the representations? Most common object representation

EICS2010, 19–23 June 2010, Berlin, Germany9

EICS2010, 19–23 June 2010, Berlin, Germany10

Experiment 1 (XP1)• Determine the most preferred and drawn

gestural representations for each object depending on the user type (designer vs standard user)

Experiment 2 (XP2)• Study the potential influence of the level of

fidelity on the sketching task

EICS2010, 19–23 June 2010, Berlin, Germany12

Usability study of the potential influence of widget representation complexity on user performances

Measures and usability criteria• Speed (efficiency)• Accuracy (effectiveness)

EICS2010, 19–23 June 2010, Berlin, Germany13

EICS2010, 19–23 June 2010, Berlin, Germany14

Participants: 11 volunteers (22<age<28) with significant pen-based interaction experience

Task: series of widget sketches with a constant rotation between the widget and the fidelity level

Setup: 4 fidelity levels x 12 widgets x 2 iterations

EICS2010, 19–23 June 2010, Berlin, Germany15

EICS2010, 19–23 June 2010, Berlin, Germany16

21-inch Wacom Cintiq 21UX touch screen flat panel

Fidelity level has no influence on user speed and accuracy Interpretation: users do not change their sketching strategy whatever the fidelity level is

Widget representation has a highly significant effect on user speed and accuracy Further investigation: which specific widget characteristics lead to such a statistical difference

Widget classification according to relevant characteristics based on recursive partitioning and recognition rate

EICS2010, 19–23 June 2010, Berlin, Germany17

EICS2010, 19–23 June 2010, Berlin, Germany18

EICS2010, 19–23 June 2010, Berlin, Germany19

One-Way ANOVA Procedure Variables: sketching times & delete operations

Basic widgets• Label, text field, picture (2 shapes)• Check-box, radio button (juxtaposition)

Complex widgets• Button, text area (inclusion)• Slider (intersection)• Combo box, list box, progress bar, and toggle

button (complex inclusion)

EICS2010, 19–23 June 2010, Berlin, Germany20

2 experiments• Identification of the preferred representations• Complexity analysis of widget representations

EICS2010, 19–23 June 2010, Berlin, Germany21

The level of fidelity has no impact on the sketching of any individual widget

The quality of the recognition depends on the type of widget representation

Any representation of an object to be sketched should minimize the amount of constraints (e.g. inclusion, intersection, sequence)

EICS2010, 19–23 June 2010, Berlin, Germany22

Naturalness supports creative design process

Non-obtrusion avoids disturbing the designer during the prototyping phase

Continuity during drawing improves and facilitates the prototyping task

Recovery enables the re-use of previous material

EICS2010, 19–23 June 2010, Berlin, Germany23

FP7 Human project ITEA2 Call 3 UsiXML project

Contact informationsuzanne.kiefferadrien.coyette @uclouvain.bejean.vanderdonckt

EICS2010, 19–23 June 2010, Berlin, Germany24