CMP2019M Human-Computer Interaction
Week 6 – Prototyping
• •
Iterative design Requirements analysis
Last Week
•
design is to “invite participants to creatively express something about themselves, their values, their relationships, and the ways they make sense of experience” (Wright & McCarthy, 2010, p.84).
The point of user-centered and participatory
1. 2. 3.
This Week
What is Prototyping?
Prototyping in Computer Science
Prototyping in HCI – Lo-fi prototypes
– Hi-fi prototypes
– Wizard of Oz
Tasks: Paper Prototyping and Storyboarding
4.
Iterative Design Cycle
Begin
Evaluate
Evaluate
Requirements
Design
Design
Deliver
Requirements
Implement
Implement
Begin
Iterative Design Cycle
Requirements
Requirements
Evaluate
Evaluate
Prototyping
Design
Design
Deliver
Implement
Implement
1. What is Prototyping?
“A prototype is any representation of a design idea, regardless of medium.”
“A prototype is a means for examining design problems and evaluating solutions.”
Definition: Prototype A Prototype is:
•an instantiation of a design hypothesis.
•a means to communicate ideas and intent. •a vehicle for evaluating design ideas.
Multiple audiences — intended users, design teams, and supporting organizations.
Definition: Prototype A Prototype is:
•an instantiation of a design hypothesis.
•a means to communicate ideas and intent. •a vehicle for evaluating design ideas.
Multiple audiences — intended users, design teams, and supporting organizations.
•
system:
Definition: Prototype
Prototypes can focus on different aspects of a
– Functionality
– Visual design
– Low-fi vs. Hi-fi
– Games: Vertical slice vs. Gameplay prototype
What question do you want to answer through your prototype? What results are you looking for?
Why do you think we need to bother with Prototyping?
Benefits of Prototyping A Prototype can help you better understand:
•the implications of design decisions,
•existing (and missing) functionality of your system, •and how end-users interact with your system.
Can be designed to address different audiences – think colleagues, management, or clients!
Benefits of Prototyping A Prototype can therefore help you:
•continuously evaluate project success, •and thereby save time, and save money.
Remember: Our design ideas don’t always play out the way we expect them to.
Does system provide intended experience?
Benefits of Prototyping A Prototype can therefore help you:
•continuously evaluate project success, •and thereby save time, and save money.
almost never
Remember: Our design ideas don’t always play out the way we expect them to.
Does system provide intended experience?
(You have already done bits and pieces in the workshops.)
2. Prototyping in Computer Science
Prototyping in Computer Science
•
are early versions of software, i.e., alpha versions – not feature complete or buggy
Role in Software Engineering: Usually, prototypes
•
all features in low-fi prototype, or creating hi-fi prototype of certain aspects
Horizontal vs. vertical prototype – trying to include
•
functionality, but also user interface etc.
Testing for aspects such as feature completeness,
Prototyping in Computer Science
•
Traditional prototyping cannot deal with non- functional requirements. e.g. reliability & performance
Prototyping in Computer Science
•
and validate requirements
Supports requirements specification, helps to extract
•
the user is not always priority
Sees user goals as formal use cases, understanding
•
and not good for managing user expectations
Generally hi-fi prototypes used that are expensive
•
Prototyping in Computer Science Different approach: Agile development, e.g., Scrum
•
functional system prototype
•
•
•
Generally low-fi approach to prototyping
Shifts perspective from functionality to experience
Rapid, iterative development cycles that always lead to
Often applied in games industry because of focus on fun
https://www.youtube.com/watch?v=ZvDJ5584NaI
More EA Examples:
http://www.spore.com/comm/prototypes
3. Prototyping in Human-Computer Interaction
Prototyping in HCI
We are interested in how people interact with
•
computers –
•
experience of using it:
•
– Emotional responses! Do people like interaction? Why should we care?
not just about functionality of system, but the entire – Usability and Accessibility
Prototyping in HCI
•
experiential aspect of our system?
How can we build prototypes that let us grasp
•
– Low-Fi prototyping – Hi-Fi prototyping
Two main approaches with different goals:
Lo-Fi Prototypes
•
Storyboarding
Prototyping in HCI
•
– Focus on users scenarios and goals
– Can throw away prototypes
– Produced cheaply and quickly
• Used early in the development cycle
• Requires only basic skills; suits non-programmers • Get immediate feedback
Examples: Paper Prototyping, Sketching,
What are common prototyping tools at this stage?
Tools may be simple, but realistically re-creating user experience can be hard!
Paper Prototyping
Paper Prototyping
https://www.youtube.com/watch?v=WOYmX5bUgQM https://www.youtube.com/watch?v=x48qOA2Z_xQ
Low-Fi Prototyping in HCI
•
Paper Prototyping
– Using pens and paper (and sometimes a little more) to create system prototypes
– Can be a basis for emulating system functionality
– Possibility for rapid prototyping, but hard to get polished look of final product – what can be prototyped this way?
Sketching
Low-Fi Prototyping in HCI
•
Sketching
– Even faster than paper prototyping – drawing out different screens and scenarios on paper
– Switching back and forth between different views, e.g., screenshot of system, but also sketches of how users interact with system (e.g., holding phone)
– Extends beyond mere system prototyping
– Value for other stakeholders?
Storyboarding
Low-Fi Prototyping in HCI
•
– Similar to sketching, but more formalized
– Tells entire story of user interacting with system
– Sketches of prototype AND user interactions along with short descriptions – similar to storyboards for movies
– Advantage: Accessible for other stakeholders without extensive explanations – think paper prototype vs. storyboard in management presentation!
Storyboarding
Low-Fi Prototyping Example
• • •
Tohidi et al, CHI 2006 *
Three paper prototypes for house climate control
Research participants split into groups – Evaluate only prototype 1,2 or 3
– Evaluate all three prototypes
•
quality feedback for final designs
Findings suggests multiple prototypes give higher
* Maryam Tohidi, William Buxton, Ronald Baecker, and Abigail Sellen. 2006. Getting the right design and the design right. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ’06), ACM, New York, NY, USA, 1243-1252.
Tohidi et al, CHI 2006
Hi-Fi Prototyping in HCI
• •
Hi-Fi Prototypes
Meant to look like the finished product – detailed, real and visual
•
– Users cannot easily describe in words …
Often used for graphical user interfaces (GUIs)
• The appearances they want
• How they can interact easily with the system
– But they can recognise what is acceptable and usable
Hi-Fi Prototyping
Ambient Kitchen Prototype
Hi-Fi Prototyping in HCI
•
– Get feedback from potential customers (beta testing)
Software developed for the mass market
– Compare feel of product to competitors’ products
– Use prototypes to communicate to people who are not part of the dev team
Hi-Fi Prototype Example
• Olivier et al PETRA 09 *
•
Ambient/Interactive hi-fidelity prototype kitchen
•
pressure sensors, wireless networks, cameras
Uses pervasive sensors inc. RFID, accelerometers,
•
activities in the kitchen
Creates new user experiences to assist everyday
•
• Very expensive though highly interactive
* Patrick Olivier, Guangyou Xu, Andrew Monk, and Jesse Hoey. 2009. Ambient kitchen: designing situated services using a high
fidelity prototyping environment. In Proceedings of the 2nd International Conference on PErvasive Technologies Related to Assistive Environments (PETRA ’09). ACM, New York, NY, USA.
Not final system, but exploratory – blue sky
Functionality Prototyping in HCI
•
into system functionality in action – often focus on user interface, interaction sequences etc.
Low-Fi Prototypes usually don’t give many insights
•
interaction with system – how can we emulate that?
•
HCI focuses on experience that emerges from Wizard of Oz Prototypes…?
Wizard-of-Oz Prototyping
•
usage to describe a testing or iterative design
“The phrase Wizard of Oz has come into common
methodology wherein an experimenter (the “wizard”), in a laboratory setting, simulates the behaviour of a theoretical intelligent computer application (often by going into another room and intercepting all communications between participant and system).”
• Long version: http://deepblue.lib.umich.edu/bitstream/handle/ 2027.42/174/71952.0001.001.pdf
• Short version: http://en.wikipedia.org/wiki/Wizard_of_Oz_experiment
Wizard-of-Oz Prototyping
•
– User interacts with software
– human operator (wizard!) simulates responses
Assumes you have a software prototype
•
difficult/expensive/ethical issues
Useful for lab studies when field testing would be
•
developing complex software systems
Popular in HCI to test interactions without
Wizard-of-Oz Prototyping
•
time implementing a system that turns out to have all
Benefits: You don’t need to waste your or anyone else’s
the wrong features. You can test concepts without implementing anything, and you can test a variety of them without needing many resources. You can test certain features (e.g., your game interface, or the core mechanics).
•
somewhat realistic experience to elicit the kind of participant responses that you’re looking for!
Challenge: Faking it well. You need to create a
•
Lin et al, Ubicomp 2006 *
Wizard of Oz Example
•
through step counting using pedometer
Fish n Steps – game to encourage physical activity
•
pedometer data very complex
System to implement automatic recording of
•
•
*James J. Lin, Lena Mamykina, Silvia Lindtner, Gregory Delajoux, and Henry B. Strub. 2006. Fish’n’Steps: encouraging physical activity with an interactive computer game. In Proceedings of the 8th international conference on Ubiquitous
Computing (UbiComp’06), Paul Dourish and Adrian Friday (Eds.). Springer-Verlag, Berlin, Heidelberg, 261-278.
Instead a wizard of system was used
Pedometer placed on kiosk platform, system takes
photo of pedometer screen/ID which is sent to real
person to enter step count in database
Wizard of Oz
Wizard of Oz
https://www.youtube.com/watch?v=yLvTC4nV6QY
Prototyping is a quick and cheap way of testing different design ideas and gathering feedback from prospective users.
4. Prototyping Tasks
•
You should end up with three different screens.
Task 1: Paper Prototyping
•
supports healthy eating:
Create a paper prototype for a mobile app that
– Design a welcome screen with two options: “Daily report” and “Enter meal / snack”
– Design a page for the daily report – Design a page for meal entry
•
Using your paper prototype, create a storyboard:
– George just had a giant lunch at McDonald’s. He enters his meal info and then checks the daily report.
Task 2: Storyboarding
Your examples.
Lessons learned? Easy? Difficult?
Benefits of Prototyping
•
what is the workflow of the app?
Help designers think from the user’s perspective –
•
what is potential impact on user, what is emotional state when interacting with software?
In context of persuasive or “nudging” technologies –
•
useful insights without working with users.
May seem a very simple approach, but can bring
What if you’re awful at sketching stuff?
•
Digital Prototyping Alternative to scissors & paper: Digital prototyping
Wireframe Tools
There are many free tools you can use to mock up – http://iphonemockup.lkmc.ch/?id=jXekSMThgBFRkL
fNCmdjHfAXbdEgeWObBOjkeCSTC&style=illustration – http://www.justinmind.com/prototyper/free-edition
•
interfaces.
•
but the interface more closely resembles a finished piece of software – sometimes helpful!
Essentially the same process as paper prototyping,
•
mid-fi prototypes
•
Use an image / wireframe template for background
•
(screens)
•
(You might think this is funny, but it’s actually how lots of work is done in industry…)
Powerpoint
You can use Powerpoint to easily create animated
Use hyperlinks to animate jumps between pages
Past and Future of Prototyping
•
prototype
New technologies will influence how and what we
http://www.britannica.com/EBchecked/media/50966/The-first-computer-mouse- Douglas-Engelbart-invented-the-computer-mouse
Summary
•
your design idea at an early stage of development.
Prototyping is a (cheap and quick) means of testing
•
features, prototyping in HCI focuses on experience.
Prototyping in Computer Science focuses on
•
common approaches are paper prototyping,
HCI knows high- and low-fidelity prototypes;
storyboarding, sketching, and wizard-of-oz- prototypes.