Çlo-fidelityÈ prototypingtheory of Çlo-fidelityÈ prototyping visual refinement and interactivity...
TRANSCRIPT
«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 [email protected]
UBS AGPostfach8098 ZürichTel. +41-44-234 11 11
www.ubs.com