User Interface Design by Sketching A Complexity Analysis

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

Sketchi. XML 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 - ITEA 2 Call 3 – Ref. 2008026 - Eureka Project 3674 ∑! 3674 EICS 2010, 19– 23 June 2010, Berlin, Germany 2

Other sketch-based software SILK: Landay & Myers, 1995 Java. Sketch. It: Caetano et al. , 2002 DENIM: Lin et al. , CHI’ 2000 Ink. Kit: Plimmer et al. , CHI’ 2004 EICS 2010, 19– 23 June 2010, Berlin, Germany Gabbeh: Naghsh et al. , DSVIS’ 2005 Sketch. Read: Alvarado, 2004 3

Catalogue of widgets EICS 2010, 19– 23 June 2010, Berlin, Germany 4

Multi-fidelity 1: none 2: low 3: medium 4: high EICS 2010, 19– 23 June 2010, Berlin, Germany 5

Multi-platform EICS 2010, 19– 23 June 2010, Berlin, Germany 6

Two experiments Experiment 1 (XP 1) • Determine the most preferred and drawn gestural representations for each object depending on the user type (designer vs standard user) Experiment 2 (XP 2) • Study the potential influence of the level of fidelity on the sketching task EICS 2010, 19– 23 June 2010, Berlin, Germany 7

XP 1: participants 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 EICS 2010, 19– 23 June 2010, Berlin, Germany 8

XP 1: 2 -phase analysis 1 st phase • Catalogue of 32 widgets • How do participants sketch the widgets? Widget representations 2 nd phase • Categories of representations • How do participants rank the representations? Most common object representation EICS 2010, 19– 23 June 2010, Berlin, Germany 9

XP 1: List box representations used during the 2 nd phase EICS 2010, 19– 23 June 2010, Berlin, Germany 10

Different widget representations

Two experiments Experiment 1 (XP 1) • Determine the most preferred and drawn gestural representations for each object depending on the user type (designer vs standard user) Experiment 2 (XP 2) • Study the potential influence of the level of fidelity on the sketching task EICS 2010, 19– 23 June 2010, Berlin, Germany 12

XP 2: purpose Usability study of the potential influence of widget representation complexity on user performances Measures and usability criteria • Speed (efficiency) • Accuracy (effectiveness) EICS 2010, 19– 23 June 2010, Berlin, Germany 13

Complexity characterization of widget representations EICS 2010, 19– 23 June 2010, Berlin, Germany 14

XP 2: experimental design 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 EICS 2010, 19– 23 June 2010, Berlin, Germany 15

21 -inch Wacom Cintiq 21 UX touch screen flat panel EICS 2010, 19– 23 June 2010, Berlin, Germany 16

XP 2: results 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 EICS 2010, 19– 23 June 2010, Berlin, Germany 17

Widget classification EICS 2010, 19– 23 June 2010, Berlin, Germany 18

Influence of widget characteristics One-Way ANOVA Procedure Variables: sketching times & delete operations EICS 2010, 19– 23 June 2010, Berlin, Germany 19

XP 2: interpretation 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) EICS 2010, 19– 23 June 2010, Berlin, Germany 20

Sketchi. XML A tool for fast user interface prototyping 2 experiments • Identification of the preferred representations • Complexity analysis of widget representations EICS 2010, 19– 23 June 2010, Berlin, Germany 21

Conclusions 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) EICS 2010, 19– 23 June 2010, Berlin, Germany 22

Requirements for sketching tools 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 EICS 2010, 19– 23 June 2010, Berlin, Germany 23

Acknowledgments FP 7 Human project ITEA 2 Call 3 Usi. XML project Contact information suzanne. kieffer adrien. coyette @uclouvain. be jean. vanderdonckt EICS 2010, 19– 23 June 2010, Berlin, Germany 24