1. 1 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Multi-Fidelity Prototyping of User Interfaces Adrien Coyette, Suzanne Kieffer & Jean Vanderdonckt Université catholique de Louvain (UCL) School of Management (IAG) Information Systems Unit (ISYS) Belgian Lab. of Computer-Human Interaction (BCHI) http://www.isys.ucl.ac.be/bchi

2. 2 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Motivations User interface determines how easily a user may control underlying functions of a computer program A program equipped with powerful functionalities and low quality user interfaces may be under- exploited or misused In an interactive application, the UI is probably the portion which affects the most the general acceptability of the system by end users [Niel93] [Nielsen 93]

3. 3 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Motivations  As it was the case in software engineering, HCI communities wanted to develop a well-structured method for developing user interfaces  However, the systematization, and the reproducibility found in software engineering methods cannot be transposed equally in HCI: the development life cycle remains inherently:  Open  Ill-defined  Highly iterative Limbourg [Limbourg, 2004]

4. 4 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Motivations  Designers often consider that informal techniques based on low fidelity mock up is the best alternative for the early design phase  It allows to cope with the fact the such process is eminently open, iterative and incomplete Sumner [Sumner, 1997]

5. 5 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Motivations Empirical observations: (3 points)  Such approach allows to reduce the time needed between the cycle  Permit to involve the end user in the process since few technical background is required  And rises as many usability problems than using high fidelity mock-ups Virzi and Al [Virzi and Al, 1996]

6. 6 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Prototyping Early design Late design Low fidelity paper prototypes Content: Mainly Presentation Use: Exploration, Communication Medium fidelity prototypes Content: Presentation, content, basic navigation Use: Simulation, refinement, user testing… High fidelity prototypes Content: Presentation, navigation, functionalities, content Use: Final specifications, marketing, documentation A paper based prototype A PowerPoint prototype The final user interface with few functionalities

7. 7 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Sketches Paper prototypes –familiar and unconstrained approach –fast to learn and quick to produce –focus on basic structural issues instead of unimportant details –can be performed collaboratively between designers and end-users –… Purpose –Early design phase –Get a sense of the user's needs and goals –brainstorm competing representations –…

8. 8 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Computer Assisted Prototyping DENIM (James A. Landay, James Lin, Mark W. Newman, Jason I. Hong) http://dub.washington.edu/denim/ Several levels of granularity Support for scenario- based design Good documentation No shape recognition and interpretation No code generation  No preview mode

9. 9 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Computer Assisted Prototyping JavaSketchIt (Joaquim A. Jorge, Manuel João Fonseca, Anabela Caetano, Néri Goulart ) http://immi.inesc-id.pt/project_page.php?project_id=21 Performance (speed and accuracy) Multi-stroke gestures Recognizes rotated shapes Interpretation in Java Only generates Java No scenario editor Limited widget set Mono-window

10. 10 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Eliciting requirements  17 different tools and approaches  Commercial products and literature  Systematic analysis  Applied to the same case study

11. 11 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007  Avoidance of Effort loss  Large conceptual coverage  Language neutrality  Ease of use (naturalness)  Flexible processing  Robust scenario editor  … How to choose the rendering of recognized widget? Motivations / Related works

12. 12 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Multi-Fidelity Support

13. 13 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Survey – Methodology Participants (12) 6 males and 6 females 6 users and 6 designers Average age is 30 Environment Cintiq 21 UX No keyboard / mouse

14. 14 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Survey – Methodology Procedure 1.Training 2.Test 4 realistics UIs (ticket booking, travel planner, small ad, online cv) 10 possible widgets (button, check box, combo box, radio button, text area, etc.) 4 fidelity levels (none, low, medium and high) 3.Questionnaire Computer System Usability Questionnaire (CSUQ, IBM) Semi-structured interview

15. 15 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Surveys - Results Usability criteria Efficiency (time needed to sketch UI) Satisfaction (CSUQ) Results from quantitative analysis Fidelity has no influence on the development time (ANOVA procedure) User profile had a significant influence on sketching time (ANOVA procedure)  Users performed better than designers!! Results from qualitative analysis (CSUQ, IBM) SYSUSE (system usefulness) : 4.30 INFOQUAL (information quality) : 4.90 INTERQUAL (interaction quality) : 5.36 OVERALL : 5.00

16. 16 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Surveys – Interpretation Fidelity level No influence on users’ strategy  No matter what the fidelity level is to sketch UIs High fidelity level judged faster by users Medium and high fidelity levels prefered by users Quality and aesthetics more important for designers than end users  Designers preserved alignment, symmetry, and semantic grouping of UI  Designers are slower than end users

17. 17 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Future Works  Further usability studies including Number of recognized/unrecognized shapes/texts/gestures Number of effective “widgets” that are added to the interface  Extending the coverage of sketching artifacts Other UI types Other model involved outside HCI Other UI genres …

18. 18 Interact 2007 – Rio de Janeiro, Brazil, 14 September, 2007 Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi http://www.isys.ucl.ac.be/bchi http://www.usixml.org User Interface eXtensible Markup Language http://www.similar.cc European network on Multimodal UIs http://www.usixml.org/index.php?view=page&idpage=29 SketchiXML home page