Multi-Fidelity Prototyping of User Interfaces

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


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]


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

[LimbourgLimbourg, 2004]


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

[SumnerSumner, 1997]


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 AlVirzi and Al, 1996]


Prototyping

Early design

Late design

Low fidelity paper prototypesContent: Mainly Presentation

Use: Exploration, Communication

Medium fidelity prototypesContent: 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


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– …


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 generationNo preview mode


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

gesturesRecognizes rotated shapes

Interpretation in Java

Only generates Java

No scenario editor

Limited widget setMono-window

http://immi.inesc-id.pt/project_page.php?project_id=21


Elicit ing requirementsElicit ing requirements

17 different tools and approachesCommercial products and literatureSystematic analysisApplied to the same case study


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


Multi-Fidelity Support


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


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


Surveys - Results

Usabil i ty 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


Surveys – Interpretation

Fideli ty 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


Future Works

Further usability studies includingNumber of recognized/unrecognized shapes/texts/gesturesNumber of effective “widgets” that are added to the interface

Extending the coverage of sketching artifactsOther UI types Other model involved outside HCI Other UI genres …


Thank you very much for your attention

For more information and downloading,http://www.isys.ucl.ac.be/bchi

http://www.usixml.orgUser Interface eXtensible Markup Language

http://www.similar.ccEuropean network on Multimodal UIs

http://www.usixml.org/index.php?view=page&idpage=29SketchiXML home page

http://www.isys.ucl.ac.be/bchi

http://www.usixml.org/

http://www.similar.cc/

http://www.usixml.org/index.php?view=page&idpage=29

Multi-Fidelity Prototyping of User Interfaces

Software

Transcript of Multi-Fidelity Prototyping of User Interfaces