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. Prototyping

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 doesn’t need to be
computer based
★ It doesn’t 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!

12. Example

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

18. Prototyping tools
Lo-fi: Hi-fi:
Paper,Pen,Post-it,Scisors,etc.
All!

19. Prototyping tools
Lo-fi: Hi-fi:
Illustrator/Photoshop/Visio
Websites Mobile appsData Visualization

20. Prototyping tools
Lo-fi: Hi-fi:PowerPoint/Keynote
Websites Mobile appsData Visualization

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

23. Prototyping tools
Lo-fi: Hi-fi:
MakeyMakey
Hardware (interfaces, games, sensors)

24. Prototyping tools
Lo-fi: Hi-fi:
LittleBits
Hardware (interfaces, games, sensors)

25. Prototyping tools
Lo-fi: Hi-fi:
3D modeling
Tinkercad

26. Prototyping tools
Lo-fi: Hi-fi:
Arduino
Hardware (interfaces, games, sensors)

27. Prototyping tools
Lo-fi: Hi-fi:
RAW
Data Visualization

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”