User Interface Design by Sketching: A Complexity Analysis of Widget Representations

2,325 views

Published on

User interface design by sketching, as well as other sketching activities, typically involves sketching objects through representations that should combine meaningfulness for the end users and easiness for the recognition engines. To investigate this relationship, a multi-platform user interface design tool has been developed that enables designers to sketch design ideas in multiple levels of fidelity with multistroke
gestures supporting widget representations and
commands. A usability analysis of these activities, as they are submitted to a recognition engine, suggests that the level of fidelity, the amount of constraints imposed on the representations, and the visual difference of representations positively impact the sketching activity as a whole. Implications for further sketch representations in user interface design and beyond are provided based on usability guidelines.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,325
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

User Interface Design by Sketching: A Complexity Analysis of Widget Representations

  1. 1. 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
  2. 2. <ul><li>A design tool for the user interface prototyping </li></ul><ul><ul><li>Multi-stroke bi-directional sketching of representations </li></ul></ul><ul><ul><li>Object recognition based on a graphical grammar </li></ul></ul><ul><ul><li>Multiple gesture representations of the same object </li></ul></ul><ul><ul><li>Multiple levels of fidelity </li></ul></ul><ul><ul><li>http://www.usixml.org/, funded by </li></ul></ul><ul><ul><li>- ITEA2 Call 3 – Ref. 2008026 </li></ul></ul><ul><ul><li>- Eureka Project 3674 </li></ul></ul>EICS2010, 19–23 June 2010, Berlin, Germany ∑ ! 3674
  3. 3. EICS2010, 19–23 June 2010, Berlin, Germany DENIM: Lin et al., CHI’2000 JavaSketchIt: Caetano et al., 2002 Gabbeh: Naghsh et al., DSVIS’2005 SILK: Landay & Myers, 1995 InkKit: Plimmer et al., CHI’2004 SketchRead: Alvarado, 2004
  4. 4. EICS2010, 19–23 June 2010, Berlin, Germany
  5. 5. EICS2010, 19–23 June 2010, Berlin, Germany 1: none 2: low 3: medium 4: high
  6. 6. EICS2010, 19–23 June 2010, Berlin, Germany
  7. 7. <ul><li>Experiment 1 (XP1) </li></ul><ul><ul><li>Determine the most preferred and drawn gestural representations for each object depending on the user type (designer vs standard user) </li></ul></ul><ul><li>Experiment 2 (XP2) </li></ul><ul><ul><li>Study the potential influence of the level of fidelity on the sketching task </li></ul></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  8. 8. <ul><li>2 groups of 30 subjects </li></ul><ul><ul><li>Designers: people with relevant experience in computer science and user interface design </li></ul></ul><ul><ul><li>End-users: people without any prior knowledge in computer science or user interface design </li></ul></ul><ul><ul><ul><li> Involve the end-user early in the software development life-cycle </li></ul></ul></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  9. 9. <ul><li>1 st phase </li></ul><ul><ul><li>Catalogue of 32 widgets </li></ul></ul><ul><ul><li>How do participants sketch the widgets? </li></ul></ul><ul><ul><li> Widget representations </li></ul></ul><ul><li>2 nd phase </li></ul><ul><ul><li>Categories of representations </li></ul></ul><ul><ul><li>How do participants rank the representations? </li></ul></ul><ul><ul><li> Most common object representation </li></ul></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  10. 10. EICS2010, 19–23 June 2010, Berlin, Germany
  11. 12. <ul><li>Experiment 1 (XP1) </li></ul><ul><ul><li>Determine the most preferred and drawn gestural representations for each object depending on the user type (designer vs standard user) </li></ul></ul><ul><li>Experiment 2 (XP2) </li></ul><ul><ul><li>Study the potential influence of the level of fidelity on the sketching task </li></ul></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  12. 13. <ul><li>Usability study of the potential influence of widget representation complexity on user performances </li></ul><ul><li>Measures and usability criteria </li></ul><ul><ul><li>Speed (efficiency) </li></ul></ul><ul><ul><li>Accuracy (effectiveness) </li></ul></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  13. 14. EICS2010, 19–23 June 2010, Berlin, Germany
  14. 15. <ul><li>Participants: 11 volunteers (22<age<28) with significant pen-based interaction experience </li></ul><ul><li>Task: series of widget sketches with a constant rotation between the widget and the fidelity level </li></ul><ul><li>Setup: 4 fidelity levels x 12 widgets x 2 iterations </li></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  15. 16. EICS2010, 19–23 June 2010, Berlin, Germany 21-inch Wacom Cintiq 21UX touch screen flat panel
  16. 17. <ul><li>Fidelity level has no influence on user speed and accuracy  Interpretation : users do not change their sketching strategy whatever the fidelity level is </li></ul><ul><li>Widget representation has a highly significant effect on user speed and accuracy  Further investigation : which specific widget characteristics lead to such a statistical difference </li></ul><ul><li>Widget classification according to relevant characteristics based on recursive partitioning and recognition rate </li></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  17. 18. EICS2010, 19–23 June 2010, Berlin, Germany
  18. 19. EICS2010, 19–23 June 2010, Berlin, Germany One-Way ANOVA Procedure Variables: sketching times & delete operations
  19. 20. <ul><li>Basic widgets </li></ul><ul><ul><li>Label, text field, picture (2 shapes) </li></ul></ul><ul><ul><li>Check-box, radio button (juxtaposition) </li></ul></ul><ul><li>Complex widgets </li></ul><ul><ul><li>Button, text area (inclusion) </li></ul></ul><ul><ul><li>Slider (intersection) </li></ul></ul><ul><ul><li>Combo box, list box, progress bar, and toggle button (complex inclusion) </li></ul></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  20. 21. <ul><li>2 experiments </li></ul><ul><ul><li>Identification of the preferred representations </li></ul></ul><ul><ul><li>Complexity analysis of widget representations </li></ul></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  21. 22. <ul><li>The level of fidelity has no impact on the sketching of any individual widget </li></ul><ul><li>The quality of the recognition depends on the type of widget representation </li></ul><ul><li>Any representation of an object to be sketched should minimize the amount of constraints (e.g. inclusion, intersection, sequence) </li></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  22. 23. <ul><li>Naturalness supports creative design process </li></ul><ul><li>Non-obtrusion avoids disturbing the designer during the prototyping phase </li></ul><ul><li>Continuity during drawing improves and facilitates the prototyping task </li></ul><ul><li>Recovery enables the re-use of previous material </li></ul>EICS2010, 19–23 June 2010, Berlin, Germany
  23. 24. <ul><li>FP7 Human project </li></ul><ul><li>ITEA2 Call 3 UsiXML project </li></ul><ul><li>Contact information </li></ul><ul><ul><li>suzanne.kieffer </li></ul></ul><ul><ul><li>adrien.coyette @uclouvain.be </li></ul></ul><ul><ul><li>jean.vanderdonckt </li></ul></ul>EICS2010, 19–23 June 2010, Berlin, Germany

×