程序代写代做代考 database CMP2019M Human-Computer Interaction

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.