Prototyping Workshop
-
Upload
tamara-pinos -
Category
Design
-
view
115 -
download
1
description
Transcript of Prototyping Workshop
Prototyping
What is a prototype?prototypenouna first or preliminary model of something from which other forms are developed or copied
Webster Dictionary
Prototypes are not the final system, merelyrepresentations of that system
Why prototyping?Identifying user interface and other requirements.
Putting together a prototype will force you to think through the details and user experience of your product ideas.
Once you have a prototype, you'll be able to show it to people and collect detailed continuos feedback.
Keep in mind:
★ It doesn’t need to be computer based
★ It doesn’t need to be fully functional
★ we can rely on tools...
Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelitystart design end design
Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelitystart design end design
Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelitystart design end design
Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelitystart design end design
Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelitystart design end design
Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelitystart design end design
TestingTest scenarios against the prototypes and get feedback on the interaction
Scenarios can represent the workflow (storyboard) of the concept
Participants of a test session:
Facilitator
Observer
“Application” or “Human Computer”
User
Low-Fi PrototypingTakes only a few hours
Can test multiple alternatives
Can change the design as you test
Allows designers & users to work together
★ Observe how users are interacting with the interface – go with what they think!
Adapt!
Example
Your turn! Make a paper prototype of a
concept that you have analyzed in your project
Have someone else test it
Make a video!
40 mins
Hi-fi prototypesAre similar in look and feel to final product
It is useful for detailed evaluation of the main design elements (content, visuals, interactivity, functionality and media)
It often constitutes a crucial stage in client acceptance (final design document)
Developed an stage of the project when ideas are beginning to firm up
“Wizard of Oz” prototypingUser thinks having interacting with a computer, but a developer is responding to output rather than the system.
Usually done early in design to understand users’ expectations (requirements)
Trade-offs in prototypingHigh-quality graphics and animation can be used to create convincing and exciting prototypes but may also lead to premature commitment to some design decision.
Detailed special-purpose prototypes help to answer specific questions about a design, but building a meaningful prototype for each issue is expensive.
Realistic prototypes increase the validity of user test data, but may postpone testing, or require construction of throw-away prototypes.
Iterative refinement of an implementation enables continual testing and feedback, but may discourage consideration of radical transformations.
Prototyping toolsLo-fi: Hi-fi:
Pape
r, Pen
, Pos
t-it,
Scis
ors,
etc.
* Paid tools, some have trial versions available
Moc
king
bird
*
Balsa
miq*
popA
pp
Mak
eyM
akey
Litt
leBits
Ardu
ino
RAW
Pow
er Po
int /
Key
note
Illus
trat
or/P
hoto
shop
/Visi
o
invi
sio
All!Websites
Mobile appsHardware (interfaces, games, sensors)
Data Visualization3D modeling
Tink
erca
d
Prototyping toolsLo-fi: Hi-fi:
Pape
r, Pen
, Pos
t-it,
Scis
ors,
etc.
All!
Prototyping toolsLo-fi: Hi-fi:
Illus
trat
or/P
hoto
shop
/Visi
o
Websites Mobile appsData Visualization
Prototyping toolsLo-fi: Hi-fi:
Pow
er Po
int /
Key
note
Websites Mobile appsData Visualization
Prototyping toolsLo-fi: Hi-fi:
* Paid tools, some have trial versions available
Moc
king
bird
*
Balsa
miq*
Websites Mobile apps
Prototyping toolsLo-fi: Hi-fi:
* Paid tools, some have trial versions available
popA
pp
invi
sion
Websites Mobile apps
Prototyping toolsLo-fi: Hi-fi:
Mak
eyM
akey
Hardware (interfaces, games, sensors)
Prototyping toolsLo-fi: Hi-fi:
Litt
leBits
Hardware (interfaces, games, sensors)
Prototyping toolsLo-fi: Hi-fi:
3D modelingTi
nker
cad
Prototyping toolsLo-fi: Hi-fi:
Ardu
ino
Hardware (interfaces, games, sensors)
Prototyping toolsLo-fi: Hi-fi:
RAW
Data Visualization
Prototyping toolsLo-fi: Hi-fi:
Pape
r, Pen
, Pos
t-it,
Scis
ors,
etc.
* Paid tools, some have trial versions available
Moc
king
bird
*Ba
lsam
iq*
popA
pp
Mak
eyM
akey
Litt
leBits
Ardu
ino
RAW
Pow
er Po
int /
Key
note
Illus
trat
or/P
hoto
shop
/Visi
o
invi
sio
All!Websites
Mobile appsHardware (interfaces, games, sensors)
Data Visualization3D modeling
Tink
erca
d
Prototyping Timeframe
BrainstormRough ideas of interface styleTasks workflow and redesign
Fine tune interface, screen design
Usability testing and redesign
Low fidelity paper prototypes
Medium fidelity prototypes
High fidelity prototypes / restricted systems
Working systems
Early Stage
Final Stage
Ask yourselfWho is the prototype aimed at?
What is the designer (you) trying to achieve with the prototype?
What stage of the project are things at and what is the context for the use of the prototype?
What technologies (hi-fi or lo-fi) are appropriate?
How easy is it to learn them?
“The point is to explore ideas, not to build an entiresystem or product”