Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Prototyping
What is a prototype?
prototype
noun
a first or preliminary model of something from which other
forms are developed or copi...
Why prototyping?
Identifying user interface and
other requirements.
Putting together a prototype
will force you to think t...
Prototyping iterations
As the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelity
sta...
Prototyping iterations
As the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelity
sta...
Prototyping iterations
As the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelity
sta...
Prototyping iterations
As the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelity
sta...
Prototyping iterations
As the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelity
sta...
Prototyping iterations
As the Prototyping refines, the Fidelity of the prototype increases.
low fidelity high fidelity
sta...
Testing
Test scenarios against the prototypes and get feedback on
the interaction
Scenarios can represent the workflow (st...
Low-Fi Prototyping
Takes only a few
hours
Can test multiple
alternatives
Can change the design
as you test
Allows designer...
Example
Your turn!
Make a paper prototype of a
concept that you have analyzed in
your project
Have someone else test it
Make a vid...
Hi-fi prototypes
Are similar in look and feel to final product
It is useful for detailed evaluation of the main design
ele...
“Wizard of Oz” prototyping
User thinks having
interacting with a
computer, but a
developer is
responding to output
rather ...
Trade-offs in prototyping
High-quality graphics and
animation can be used to
create convincing and
exciting prototypes but...
Prototyping tools
Lo-fi: Hi-fi:
Paper,Pen,Post-it,Scisors,etc.
* Paid tools, some have trial versions available
Mockingbir...
Prototyping tools
Lo-fi: Hi-fi:
Paper,Pen,Post-it,Scisors,etc.
All!
Prototyping tools
Lo-fi: Hi-fi:
Illustrator/Photoshop/Visio
Websites Mobile appsData Visualization
Prototyping tools
Lo-fi: Hi-fi:PowerPoint/Keynote
Websites Mobile appsData Visualization
Prototyping tools
Lo-fi: Hi-fi:
* Paid tools, some have trial versions available
Mockingbird*
Balsamiq*
Websites Mobile ap...
Prototyping tools
Lo-fi: Hi-fi:
* Paid tools, some have trial versions available
popApp
invision
Websites Mobile apps
Prototyping tools
Lo-fi: Hi-fi:
MakeyMakey
Hardware (interfaces, games, sensors)
Prototyping tools
Lo-fi: Hi-fi:
LittleBits
Hardware (interfaces, games, sensors)
Prototyping tools
Lo-fi: Hi-fi:
3D modeling
Tinkercad
Prototyping tools
Lo-fi: Hi-fi:
Arduino
Hardware (interfaces, games, sensors)
Prototyping tools
Lo-fi: Hi-fi:
RAW
Data Visualization
Prototyping tools
Lo-fi: Hi-fi:
Paper,Pen,Post-it,Scisors,etc.
* Paid tools, some have trial versions available
Mockingbir...
Prototyping Timeframe
Brainstorm
Rough ideas of interface style
Tasks workflow and redesign
Fine tune interface, screen de...
Ask yourself
Who is the prototype
aimed at?
What is the designer (you)
trying to achieve with the
prototype?
What stage of...
“The point is to explore ideas,
not to build an entire
system or product”
Upcoming SlideShare
Loading in …5
×

Prototyping Workshop

Overview of Prototyping and some tools

  • Be the first to comment

Prototyping Workshop

  1. 1. Prototyping
  2. 2. What is a prototype? prototype noun a first or preliminary model of something from which other forms are developed or copied Webster Dictionary Prototypes are not the final system, merely representations of that system
  3. 3. 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...
  4. 4. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  5. 5. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  6. 6. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  7. 7. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  8. 8. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  9. 9. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  10. 10. Testing Test 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
  11. 11. Low-Fi Prototyping Takes 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!
  12. 12. Example
  13. 13. 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
  14. 14. Hi-fi prototypes Are 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
  15. 15. “Wizard of Oz” prototyping User 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)
  16. 16. Trade-offs in prototyping High-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.
  17. 17. Prototyping tools Lo-fi: Hi-fi: Paper,Pen,Post-it,Scisors,etc. * Paid tools, some have trial versions available Mockingbird* Balsamiq* popApp MakeyMakey LittleBits Arduino RAW PowerPoint/Keynote Illustrator/Photoshop/Visio invisio All! Websites Mobile apps Hardware (interfaces, games, sensors) Data Visualization 3D modeling Tinkercad
  18. 18. Prototyping tools Lo-fi: Hi-fi: Paper,Pen,Post-it,Scisors,etc. All!
  19. 19. Prototyping tools Lo-fi: Hi-fi: Illustrator/Photoshop/Visio Websites Mobile appsData Visualization
  20. 20. Prototyping tools Lo-fi: Hi-fi:PowerPoint/Keynote Websites Mobile appsData Visualization
  21. 21. Prototyping tools Lo-fi: Hi-fi: * Paid tools, some have trial versions available Mockingbird* Balsamiq* Websites Mobile apps
  22. 22. Prototyping tools Lo-fi: Hi-fi: * Paid tools, some have trial versions available popApp invision Websites Mobile apps
  23. 23. Prototyping tools Lo-fi: Hi-fi: MakeyMakey Hardware (interfaces, games, sensors)
  24. 24. Prototyping tools Lo-fi: Hi-fi: LittleBits Hardware (interfaces, games, sensors)
  25. 25. Prototyping tools Lo-fi: Hi-fi: 3D modeling Tinkercad
  26. 26. Prototyping tools Lo-fi: Hi-fi: Arduino Hardware (interfaces, games, sensors)
  27. 27. Prototyping tools Lo-fi: Hi-fi: RAW Data Visualization
  28. 28. Prototyping tools Lo-fi: Hi-fi: Paper,Pen,Post-it,Scisors,etc. * Paid tools, some have trial versions available Mockingbird* Balsamiq* popApp MakeyMakey LittleBits Arduino RAW PowerPoint/Keynote Illustrator/Photoshop/Visio invisio All! Websites Mobile apps Hardware (interfaces, games, sensors) Data Visualization 3D modeling Tinkercad
  29. 29. Prototyping Timeframe Brainstorm Rough ideas of interface style Tasks 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
  30. 30. Ask yourself Who 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?
  31. 31. “The point is to explore ideas, not to build an entire system or product”

×