Download presentation
Presentation is loading. Please wait.
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
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.