Çlo-fidelityÈ prototypingtheory of Çlo-fidelityÈ prototyping visual refinement and interactivity...

«Lo-fidelity» Prototyping

August 31, 2006

SwissCHI Event August 2006Christian Hübscher, UBS

GENERALLY ACCESSIBLE

1

Table of Contents

SECTION 1 Theory of «Lo-fidelity» Prototyping

SECTION 2 Prototyping Tools

SECTION 3 Demo of Tools and Discussion

SECTION 1

Theory of «Lo-fidelity» Prototyping

3

Theory of «Lo-fidelity» Prototyping

Different goals – evaluation of…

! Completenes of feature set

! Usability

! Acceptance (users or sponsor)

! Technical feasibility

! …

Why Prototypes?

4

Theory of «Lo-fidelity» Prototyping

! Interaction Designer himself

– Goal: check of design ideas / «reflection-in-action»

– Focus: concepts, structure, feasibility

! Project Team

– Goal: check and demonstration of ideas etc. in the group

– Focus: explaining of ideas and concepts

! User

– Goal: evaluation of requirements, usability testing

– Focus: functionality, interaction with functionality

! Sponsor / Management

– Goal: persuasion, demonstation of work progress etc.

– Focus: functionality, look

Target Groups of a Prototype

5

Theory of «Lo-fidelity» Prototyping

The Five Dimensions of a Prototype

Is it enough to characterize prototypes as "Lo-fi" and "Hi-fi"?

No, there are five useful dimensions:

! Level of Visual Refinement

! Richness of Interactivity

! Breadth of Functionality

! Depth of Functionality

! Richness of Data Model

Source: McCurdy, M., Connors, C., Pyrzak, G., Kanefsky, B., and Vera, A. 2006. Breaking the fidelity barrier: an examination of ourcurrent characterization of prototypes and an example of a mixed-fidelity success. In Proceedings of the SIGCHI Conference onHuman Factors in Computing Systems (Montréal, Québec, Canada, April 22 - 27, 2006). R. Grinter, T. Rodden, P. Aoki, E. Cutrell, R.Jeffries, and G. Olson, Eds. CHI '06. ACM Press, New York, NY, 1233-1242. DOI= http://doi.acm.org/10.1145/1124772.1124959

6

Theory of «Lo-fidelity» Prototyping

! Sketch with pencil or whiteboard

! Wireframe

! Look of target plattform

! Look to the pixel

Level of Visual Refinement

7

Theory of «Lo-fidelity» Prototyping

! Horizontal

! Vertical

Breadth / depth of a Prototype

8

Theory of «Lo-fidelity» Prototyping

Visual Refinement and Interactivity

Wireframes

Sketch

Photoshop GUI

Visio GUIs(clickable)

HTML Prototyp

– Interactivity +

–

Vis

ual R

efinem

ent

+

HTMLWireframes

9

Theory of «Lo-fidelity» Prototyping

The use of Prototypes in a Project

Prototypes for:

! Requirements Development

! Interaction and User Interface Design

10

Theory of «Lo-fidelity» Prototyping

User Interface Prototypes for Requirements Development

Users

Project Team

Requirements ElicitationInterviews

ObservationsCardsorting

etc.

Requirements Analysis

Visualization ofRequirements

Paper & Pencil Prototypeor

Wireframe Prototype(Visio Wireframe Designer)

Requirements Verificationwith users

(and other stakeholders)

Source: UBS AG, User Experience and WB Security

11

Theory of «Lo-fidelity» Prototyping

User Interface Prototypes for User Interface Design

Conceptual

interactiondesign

Evaluation(Usability Expert

and/or users)

RequirementsSpecification

Prototype"InteractionConcepts"

Wireframe Prototype(Visio Wireframe

Designer)

RecentPrototypes

Prototype"User Interface

Details"Visio Web Designer

Prototypeor

Interactive Prototype(e.g. HTML)

Evaluation(Usability Expert

and/or with users)

Detailed

userinterfacedesign

Iterativerefinement

Iterativerefinement

Source: UBS AG, User Experience and WB Security

SECTION 2

Prototyping Tools

13

Prototyping Tools

Visio Wireframe Designer (UBS internal tool)

14

Prototyping Tools

Visio Web Designer (UBS internal tool)

15

Prototyping Tools

Download:www.omnigroup.com/applications/omnigraffle/extras/

More for OmniGraffle und Visio:http://iainstitute.org/tools

OmniGraffle Stencil “GUI Design”

16

Prototyping Tools

OmniGraffle Stencil “Wireframe Shapes”

Download:www.omnigroup.com/applications/omnigraffle/extras/

More for OmniGraffle und Visio:http://iainstitute.org/tools

17

Prototyping Tools

Computer Tools:

! HTML editors (z.B. Dreamweaver)

! PowerPoint

! OmniGraffle

! Visio

«Hyperlink» in PowerPoint:

Linking of Screens

18

Prototyping Tools

Turn a JavaApplication into a wireframe:

http://napkinlaf.sourceforge.net

Napkin Look & Feel (plugable Java Look & Feel)

19

Prototyping Tools

http://dub.washington.edu/denim

Denim (University of Washington)

20

Prototyping Tools

More tools

Some specialized commercial tools for prototyping:

! iRise:www.irise.com

! Axurewww.axure.com

SECTION 3

Demo of Tools and Discussion

22

Discussion

Questions to the Audience

! What tools do you use for prototyping?

! Do you have methodological lessions learned to share?

23

Contact Information

Christian HübscherInteraction Designer / Usability ConsultantUsability & Workbench Consulting+41 44 236 96 36christian.huebscher@ubs.com

UBS AGPostfach8098 ZürichTel. +41-44-234 11 11

www.ubs.com