1. SE365 Human Computer Interaction
Basit Qureshi

2. Topics
Lo-Fidelity Prototypes
Paper prototyping
How to?

3. Design Exploration Expand Design Space brainstorming sketching
storyboarding
prototyping
Discovery
Design Exploration
Design Refinement
Production

4. Last time Brainstorming Sketching Story boarding
Collective ideas, need finding, Contextual Inquiry
Documentation: Empathy maps, Task analysis
Sketching
Sketch tasks, screens, layouts etc
Story boarding
Link various sketches to tell a story!

7. What is a Prototype?
“A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.” – Wikipedia a working representation of a final artifact
Jeff Hawkins carried around a block of wood like this in his pocket & pulled it out when meeting people and used a pen to act like he was adding things to his device
This led to the prototype in the middle and
The final product: The PalmPilot (right)

8. Types of Prototypes
Prototypes are concrete representations of a design
Prototype dimensions
representation: form of the prototype
off-line (paper) or on-line (software)
precision: level of detail (e.g., informal or polished)
interactivity: watch-only vs. fully interactive
fixed prototype (video clips)
fixed-path prototype (each step triggered by specified actions)
at extreme could be 1 path or possibly more open (e.g., Denim)
open prototype (real, but limited error handling or performance)
evolution: expected life cycle of prototype
e.g., throw away or iterative
PJ McCormick (left)
 Kerem Suer (right)

9. Types of Prototypes PJ McCormick (left) Kerem Suer (right) Karem Suer

10. Fidelity in Prototyping
Fidelity refers to the level of detail
High fidelity?
prototypes look like the final product
Low fidelity?
artists renditions with many details missing

12. Hi-fi Prototypes Warp Perceptions of the tester/reviewer Time
representation communicates “finished”
comments focus on color, fonts, & alignment
Time
encourage precision
specifying details takes more time
Creativity
lose track of the big picture

13. Why Use Low-fi Prototypes?
Traditional methods take too long
sketches → prototype → evaluate → iterate
Can instead simulate the prototype
sketches → evaluate → iterate
sketches act as prototypes
designer “plays computer”; others observe & record
Kindergarten building skills
allows non-programmers to participate

17. Paper Prototyping
Prototyping or especially paper prototyping is a research methodology that helps to visualize and test ideas and concepts in an early stage of a project.
This can be done with minimum investment in time and cost

18. Paper Prototyping: Pros
Rapid iteration —
Which would you rather throw away, 2-hours worth of coding or a sketch that took 20 minutes?
Due to the highly dynamic nature of the prototyping phase, you're always going to create some waste, so sometimes it doesn't make sense to spend a lot of time on any one design.
Low budget —
Paper prototypes can be built with supplies already in your office. All you need is paper, pencil or pen, scissors, and some creativity.
If you want to get fancier, grab some index cards or Post-Its.

19. Paper Prototyping: Pros
Fun collaboration —
It's hard not to bond when a group of people are given art supplies and asked to create.
The casual nature of paper invites more participation and feedback, which you should encourage as much as possible during early product stages.
Easy documentation —
Past versions of the prototype are right there in front of you, allowing for part of the design to be the documentation.
Additionally, technical notes can be written right on the prototypes themselves.

20. Paper Prototypes: Flow New Media
The team at Flow New Media Design shows how it starts with paper-based prototypes to “strip things back to the bare bones [and] concentrate on the important things.

21. Paper Prototyping: Pros
Detect Major Problems Early
Building a low-fidelity prototype that can be quickly exposed to user feedback enables us to visualize and solve core issues related to the product’s usability and proposed functionality
Truly Agile Design Process
Only by continually evolving our concepts will we be able to create empathetic solutions that will succeed in the current market. Low-fidelity prototypes encourage this type of shameless, stress-free environment of iteration. 

22. Paper Prototypes: Nintendo
Designers in companies such as Nintendo use low-fidelity prototyping. Designer Kazuyuki Motoyama explains that the only way to actually know what a Miiverse would feel like was to hold it. That’s when he built this prototype out of cardboard. 

23. Paper Prototyping: Pros
Choice of 2D or 3D
3D prototypes add a level of interaction that 2D prototypes do not achieve. While building it might take slightly longer, a 3D prototype encourages manipulation and could draw a higher level of engagement in the concept-testing phase. The three-dimensional nature will add realism and open the door to valuable feedback.

24. Paper Prototypes: Hitachi
Business origami is a paper prototyping method developed by Hitachi to facilitate the design of services and systems. It was developed in-house but eventually attracted the attention of other organizations. The paper cut-outs of various objects improve prototyping systems and interactions with them.

25. Paper Prototypes: LEGO
LEGO Serious Play was created to facilitate innovation and business performance. The sets can be used to build low-fidelity prototypes of business and service experiences. Liquid Agency, for instance, used this method to prototype an answer to the question, “What type of health care do we aspire to offer that would make a difference today and tomorrow?

26. Paper Prototyping: Cons
False positives —
While paper prototyping can be useful for individual processes, you need to explain the context. Otherwise, you might get feedback based on your efforts (“How creative!”), not based on your actual product (“The navigation is confusing.”).
No gut reactions —
Research should be based on your users' reactions, as those come naturally without thought. Because paper prototypes require the user to imagine what the final product will be like, you're getting feedback on a deliverable instead of reactions to something that resembles the product.
Can be slower than prototyping tools —
Given the wide selection of prototyping tools out there like UXPin, Invision, ProtoPie, and others, you can get prototyping quite quickly (and less messier) with the added benefit of collaborative features. It all depends on your preferences.

27. Paper Prototyping: How to
Define goals
Which main features do you want to expose your users to? List two to three pieces of core functionality that you will include in the low-fidelity prototype
Core features
E.g. Color customization, Geo-map, contact form
Complimentary features
Price list, reward points, returns policy

28. Paper Prototyping: How to
Business model canvas. (Image credit: Aberdeen Global Service Jam) 

29. Paper Prototyping: How to
Concept development and sketches for flower seed packaging. (Image credit: Shavonne Maclin)

30. Paper Prototyping: How to
2. Define methodology
Decide what kind of low-fidelity prototype would suit your project best.
What could you build quickly that would help users to deliver valuable feedback?
How could you display and test the concept simply, investing the least amount of resources?
To find the simplest method possible, continue asking the question, “Is there a simpler way to show this?” until you arrive at a feasible way to depict the product’s features.

31. Paper Prototyping: How to
2. Define methodology
The level of detail that is right for your prototype will depend on a few factors:
What type of user will be exposed to this prototype?
What resources are accessible to you? 

32. Paper Prototyping: How to
Inputting a QR code

33. Paper Prototyping: How to
Geolocation feature (for browsing nearby)

34. Paper Prototyping: How to
3. Execute! Show it
Low-fidelity prototyping is not about how sophisticated your model looks, but about the conversation it generates about the future of the product.

35. Paper Prototyping: How to
4. Test
List questions for a user
“What, in your opinion, is the key benefit offered by this product concept?
“Which features didn’t you see that would make you want to use it?”
“On a scale of one to five, how much do you like this concept?” “Why?”
“Having looked at this concept today, what do you remember most about it?” “What do you recall?”
“How did looking at this concept make you feel?” (Help them by providing a list of emotions — happy, frustrated, angry, excited, bored, etc.
Having to explain the limitations of your low-fidelity prototype is normal. In fact, it is expected

36. Paper Prototyping: How to
5. Iterate- Learn from user.
Collect your users’ feedback and find similarities in their evaluations of the concept
Build an affinity diagram to identify the most common suggestions.
Incorporate their feedback, and move on to building a high-fidelity prototype that reflects the product’s look and feel with a greater level of detail.
Repeat the testing session with as many users as needed.

37. Paper Prototyping: How to
Geolocation feature (for browsing nearby)
a template to visualize prototype changes over time

38. Paper Prototyping: Resources
Printable Mock ups
How to make paper prototypes