GENERALLY ACCESSIBLE

«Lo-fidelity» Prototyping SwissCHI Event August 2006 Christian Hübscher, UBS

August 31, 2006

Table of Contents SECTION 1 SECTION 2 SECTION 3

Theory of «Lo-fidelity» Prototyping Prototyping Tools Demo of Tools and Discussion

1

SECTION 1

Theory of «Lo-fidelity» Prototyping

Theory of «Lo-fidelity» Prototyping Why Prototypes? Different goals – evaluation of… ! Completenes of feature set ! Usability ! Acceptance (users or sponsor) ! Technical feasibility !…

3

Theory of «Lo-fidelity» Prototyping Target Groups of a Prototype ! 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

4

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 our current characterization of prototypes and an example of a mixed-fidelity success. In Proceedings of the SIGCHI Conference on Human 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 5

Theory of «Lo-fidelity» Prototyping Level of Visual Refinement

! Sketch with pencil or whiteboard

! Wireframe

! Look of target plattform

! Look to the pixel

6

Theory of «Lo-fidelity» Prototyping Breadth / depth of a Prototype

! Horizontal

! Vertical

7

Theory of «Lo-fidelity» Prototyping

Photoshop GUI

HTML Prototyp

Visio GUIs (clickable)

Wireframes

HTML Wireframes

Sketch

–

Visual Refinement

+

Visual Refinement and Interactivity

–

Interactivity

+ 8

Theory of «Lo-fidelity» Prototyping The use of Prototypes in a Project Prototypes for: ! Requirements Development ! Interaction and User Interface Design

9

Theory of «Lo-fidelity» Prototyping User Interface Prototypes for Requirements Development Users Requirements Elicitation Interviews Observations Cardsorting etc.

Requirements Analysis

Requirements Verification with users (and other stakeholders)

Visualization of Requirements Paper & Pencil Prototype or Wireframe Prototype (Visio Wireframe Designer)

Project Team Source: UBS AG, User Experience and WB Security

10

Theory of «Lo-fidelity» Prototyping User Interface Prototypes for User Interface Design

Evaluation (Usability Expert and/or users) Recent Prototypes Requirements Specification

Conceptual interaction design

Evaluation (Usability Expert and/or with users)

Iterative refinement

Prototype "Interaction Concepts" Wireframe Prototype (Visio Wireframe Designer)

Source: UBS AG, User Experience and WB Security

Iterative refinement

Detailed user interface design

Prototype "User Interface Details" Visio Web Designer Prototype or Interactive Prototype (e.g. HTML) 11

SECTION 2

Prototyping Tools

Prototyping Tools Visio Wireframe Designer (UBS internal tool)

13

Prototyping Tools Visio Web Designer (UBS internal tool)

14

Prototyping Tools OmniGraffle Stencil “GUI Design”

Download: www.omnigroup.com/applications/omnigraffle/extras/ More for OmniGraffle und Visio: http://iainstitute.org/tools

15

Prototyping Tools OmniGraffle Stencil “Wireframe Shapes”

Download: www.omnigroup.com/applications/omnigraffle/extras/ More for OmniGraffle und Visio: http://iainstitute.org/tools

16

Prototyping Tools Linking of Screens Computer Tools: ! HTML editors (z.B. Dreamweaver) ! PowerPoint ! OmniGraffle ! Visio

«Hyperlink» in PowerPoint:

17

Prototyping Tools Napkin Look & Feel (plugable Java Look & Feel) Turn a JavaApplication into a wireframe:

http://napkinlaf.sourceforge.net

18

Prototyping Tools Denim (University of Washington) http://dub.washington.edu/denim

19

Prototyping Tools More tools Some specialized commercial tools for prototyping:

! iRise: www.irise.com ! Axure www.axure.com

20

SECTION 3

Demo of Tools and Discussion

Discussion Questions to the Audience ! What tools do you use for prototyping? ! Do you have methodological lessions learned to share?

22

Contact Information Christian Hübscher Interaction Designer / Usability Consultant Usability & Workbench Consulting +41 44 236 96 36 [email protected]

UBS AG Postfach 8098 Zürich Tel. +41-44-234 11 11

www.ubs.com

23