際際滷

際際滷Share a Scribd company logo

Prototyping Workshop

Tamara Pinos
Tamara Pinos

The document discusses prototyping, which involves creating preliminary models or representations of a design to test ideas and gather feedback before fully developing a product. It notes that prototypes can be low or high fidelity and do not need to be fully functional. The fidelity of prototypes increases through iterative testing and refining. Prototyping helps identify requirements, test user interfaces and experiences, and collect continuous feedback to refine the design. Both low and high-fidelity prototyping tools are discussed, along with tips for effective prototyping.

1 of 31
Downloaded 178 times
Prototyping
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
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 doesnt need to be computer based It doesnt need to be fully functional we can rely on tools...
Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
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
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!
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 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
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)
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.
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
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 apps
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 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
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
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?
The point is to explore ideas, not to build an entire system or product

More Related Content

Prototyping Workshop

  • 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. 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 doesnt need to be computer based It doesnt need to be fully functional we can rely on tools...
  • 4. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  • 5. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  • 6. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  • 7. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  • 8. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  • 9. Prototyping iterations As the Prototyping refines, the Fidelity of the prototype increases. low fidelity high fidelity start design end design
  • 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. 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!
  • 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. 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. 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. 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. 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
  • 21. Prototyping tools Lo-fi: Hi-fi: * Paid tools, some have trial versions available Mockingbird* Balsamiq* Websites Mobile apps
  • 22. Prototyping tools Lo-fi: Hi-fi: * Paid tools, some have trial versions available popApp invision Websites Mobile apps
  • 26. Prototyping tools Lo-fi: Hi-fi: Arduino Hardware (interfaces, games, sensors)
  • 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. 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. 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. The point is to explore ideas, not to build an entire system or product