Çlo-fidelityÈ prototypingtheory of Çlo-fidelityÈ prototyping visual refinement and interactivity...
TRANSCRIPT
![Page 1: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/1.jpg)
«Lo-fidelity» Prototyping
August 31, 2006
SwissCHI Event August 2006Christian Hübscher, UBS
GENERALLY ACCESSIBLE
![Page 2: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/2.jpg)
1
Table of Contents
SECTION 1 Theory of «Lo-fidelity» Prototyping
SECTION 2 Prototyping Tools
SECTION 3 Demo of Tools and Discussion
![Page 3: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/3.jpg)
SECTION 1
Theory of «Lo-fidelity» Prototyping
![Page 4: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/4.jpg)
3
Theory of «Lo-fidelity» Prototyping
Different goals – evaluation of…
! Completenes of feature set
! Usability
! Acceptance (users or sponsor)
! Technical feasibility
! …
Why Prototypes?
![Page 5: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/5.jpg)
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
![Page 6: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/6.jpg)
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
![Page 7: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/7.jpg)
6
Theory of «Lo-fidelity» Prototyping
! Sketch with pencil or whiteboard
! Wireframe
! Look of target plattform
! Look to the pixel
Level of Visual Refinement
![Page 8: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/8.jpg)
7
Theory of «Lo-fidelity» Prototyping
! Horizontal
! Vertical
Breadth / depth of a Prototype
![Page 9: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/9.jpg)
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
![Page 10: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/10.jpg)
9
Theory of «Lo-fidelity» Prototyping
The use of Prototypes in a Project
Prototypes for:
! Requirements Development
! Interaction and User Interface Design
![Page 11: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/11.jpg)
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
![Page 12: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/12.jpg)
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
![Page 13: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/13.jpg)
SECTION 2
Prototyping Tools
![Page 14: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/14.jpg)
13
Prototyping Tools
Visio Wireframe Designer (UBS internal tool)
![Page 15: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/15.jpg)
14
Prototyping Tools
Visio Web Designer (UBS internal tool)
![Page 16: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/16.jpg)
15
Prototyping Tools
Download:www.omnigroup.com/applications/omnigraffle/extras/
More for OmniGraffle und Visio:http://iainstitute.org/tools
OmniGraffle Stencil “GUI Design”
![Page 17: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/17.jpg)
16
Prototyping Tools
OmniGraffle Stencil “Wireframe Shapes”
Download:www.omnigroup.com/applications/omnigraffle/extras/
More for OmniGraffle und Visio:http://iainstitute.org/tools
![Page 18: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/18.jpg)
17
Prototyping Tools
Computer Tools:
! HTML editors (z.B. Dreamweaver)
! PowerPoint
! OmniGraffle
! Visio
«Hyperlink» in PowerPoint:
Linking of Screens
![Page 19: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/19.jpg)
18
Prototyping Tools
Turn a JavaApplication into a wireframe:
http://napkinlaf.sourceforge.net
Napkin Look & Feel (plugable Java Look & Feel)
![Page 20: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/20.jpg)
19
Prototyping Tools
http://dub.washington.edu/denim
Denim (University of Washington)
![Page 21: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/21.jpg)
20
Prototyping Tools
More tools
Some specialized commercial tools for prototyping:
! iRise:www.irise.com
! Axurewww.axure.com
![Page 22: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/22.jpg)
SECTION 3
Demo of Tools and Discussion
![Page 23: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/23.jpg)
22
Discussion
Questions to the Audience
! What tools do you use for prototyping?
! Do you have methodological lessions learned to share?
![Page 24: ÇLo-fidelityÈ PrototypingTheory of ÇLo-fidelityÈ Prototyping Visual Refinement and Interactivity Wireframes Sketch Photos hop GUI Visio GUIs (clickable) HTM L Prototy p Ð Interac](https://reader034.vdocuments.site/reader034/viewer/2022042319/5f08b0f17e708231d42340e3/html5/thumbnails/24.jpg)
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