View
0
Download
0
Category
Preview:
Citation preview
Prototyping
Oct 3, 2016
Announcements
A1 marks available
A2 due Wednesday
Fall 2016 COMP 3020
Questions?
Fall 2016 COMP 3020
What is a prototype?
In interaction design a prototype can be (among other things):
a series of screen sketches
a storyboard, i.e. a cartoon-like series of scenes
a Powerpoint slide show, e.g., simulation
a video simulating the use of a system
a lump of wood (e.g. PalmPilot)
a cardboard mock-up
a piece of software with limited functionality written in the target language or in another language
Fall 2016 COMP 3020
Why Prototype?
Prototypes are useful for numerous purposes including:
Promoting reflection (Schon 1983)
Clarifying requirements
Exploring alternatives
Initial user testing
Fall 2016 COMP 3020
What to Prototype
Screen layouts and information display: placement of different widgets, types of widgets, etc
e.g. should edit fields come after/before control buttons
Work flow, task design: the sequence of steps required to achieve the task
e.g. flow from one screen to another, changes on the screen
Difficult, controversial, critical areas:provide alternative solutions to be assessed
e.g. business critical reports with specific alignment of fields
Technical issues:E.g., will the graphics rendered be fast enough?
Fall 2016 COMP 3020
Low-Fidelity Prototyping
How:
Paper-based sketches
Physical mock-ups using paper, cardboard
Fall 2016 COMP 3020
Paper Prototyping
Two common types:
Index cards
Storyboards
Fall 2016 COMP 3020
Storyboards
Fall 2016 COMP 3020
Low-Fidelity Prototyping
Some issues
Sometimes difficult to fake/simulate behaviour
Client (i.e., the person paying you) might be confused by the lack of programming
Can give a mistaken impression of how hard stuff is
User/client feedback might involve requests for things that are extremely difficult to implement (e.g., speech recognition)
Fall 2016 COMP 3020
Higher-Fidelity Prototyping
Prototyping with a computer
Simulate some but not all features of the interface
Purpose
Provides sophisticated but limited scenario for the user to try
Can test more subtle design issues
Fall 2016 COMP 3020
Limiting Functionality
Vertical prototypes
includes in-depth functionality for only a few selected features
common design ideas can be tested in depth
Horizontal prototypes
the entire surface interface with no underlying functionality
a simulation; no real work can be performed
Scenario
scripts of particular, fixed uses of the system; no deviation allowed (i.e., system won’t work with deviations)
Fall 2016 COMP 3020
Limiting Functionality
Fall 2016 COMP 3020
Vertical prototype
Horizontal prototype
Scenario
Full System
Prototyping with mock-up tools…
PowerPoint, Photoshop, etc. can also be used to simulate very specific interaction scenarios
Limits flexibility, but more concrete -> higher end of low-fidelity prototype
http://www.boxesandarrows.com/files/banda/interactive/SamplePrototype.ppt
Fall 2016 COMP 3020
Interface Builders (or HTML + CSS with no interactivity)
tools for letting a designer lay out the common widgets
excellent for showing look and feela broader horizontal prototypebut constrained to widget library
vertical functionality added selectivelythrough programming
Fall 2016 COMP 3020
vertical high-fi prototypes
(a common focus for HCI research!!!)
Fall 2016 COMP 3020
Prototyping functionality: Wizard-of-Oz
Common problem: it’s difficult to prototype some piece of functionality
Need: test whether it is actually good before building it!!!
Solution: fake it! Make the interaction as authentic as possible
Key: user has no idea that the interaction is being faked
Fall 2016 COMP 3020
Wizard of OzA method of testing a system that does not exist
the listening typewriter, IBM 1983
Dear Henry
What the user sees
Speech
Computer
Fall 2016 COMP 3020
Wizard of Oz
A method of testing a system that does not existthe listening typewriter, IBM 1984
What the user sees The wizard
Speech
Computer
Dear Henry
Dear Henry
Fall 2016 COMP 3020
Wizard of Oz: the point
Up until the point the wizard is discovered, the thoughts, feelings, and actions of Dorothy and the others were all genuine
They were genuinely experiencing what it would be like to talk to a powerful and terrible wizard
Fall 2016 COMP 3020
Wizard of Oz: anti-gravity bar
http://www.youtube.com/watch?v=DL9cAcQ-gKQd
Fall 2016 COMP 3020
Wizard-of-Oz: some issues
not always as easy as it seems
need some means of controlling system
may need ways to perform hard computations quickly
must be realistic
If simulating error-prone technology (e.g., speech recognition), must include such errors in testing
COMP 3020Fall 2016
High-Fidelity Prototyping: Issues
Feedback often minimal and detail-oriented
Users reluctant to challenge designer
Little reflection on overall interaction or information flow
Client/management may think its real!
Fall 2016 COMP 3020
Summary: Hi-Fi vs. Lo-Fi
Lo-Fi Hi-Fi
Advantages » ***fast***, explore» cheap» easy – kindergarten skills!» can simulate actual product» great way to communicate with / get feedback from stakeholders» evaluate multiple ideas» encourage criticism
» better sense of finished product» interactive» can judge aesthetic appeal» more realistic experience» can evaluate the experience better» probably more convincing for stakeholders
Disadvantages » slow response time» can’t get feedback about aesthetics» poor error checking» user may question design quality» limited use for usability, testing
» users may focus on unnecessary details» takes a lot of time to make» users may lose track of big picture» not effective for developing requirements (why?)
Fall 2016 COMP 3020
Summary: Prototypes
Vertical prototypes
includes in-depth functionality for only a few selected features
common design ideas can be tested in depth
Horizontal prototypes
the entire surface interface with no underlying functionality
a simulation; no real work can be performed
COMP 3020Fall 2016
Which Prototyping Method is Best?
Choose the method that works best for what you are trying to achieve (pragmatics).
user flow » storyboardscreen layouts/page flow » paper prototypesoverall experience » video prototypelook and feel » PowerPointfunctionality » software… etc.
Alternately, maybe you are at different stages in the design. Early on, use techniques that are cheap and quick; later on, use techniques that give a stronger sense of finished idea.
Fall 2016 COMP 3020
Lifetime of Prototypes
Question: how do we integrate prototyping into the overall development cycle?
Three methods for managing this integration:
1. evolutionary
2. modular (incremental)
3. throw-away
Fall 2016 COMP 3020
Evolutionary Prototypes
design prototype
implement prototype
test prototype
system
iteratively change the prototype to incorporate changes
eventually, the reworked prototype becomes the final systemFall 2016 COMP 3020
Modular (Incremental) Prototyping
Design component
Implement component
Test component
system
Build the system as separate modules/components
Each module is designed, prototyped and build separately before being combed into a final system
Design component
Implement component
Test component
Design component
Implement component
Test component
Fall 2016 COMP 3020
Throw-Away PrototypingDesign
prototype
Implement prototype
Test prototypePrototype is used to
get rapid feedback (i.e. to learn lessons)
Prototype is built, tested, and deployed (or discarded)
Design prototype
Implement prototype
Test prototype
Design prototype
Implement prototype
Test prototype
Fall 2016 COMP 3020
Summary: Prototyping
Prototyping is a very useful way to help reduce the number of designs by:
trying them, getting input on them, exploring if they would actually work, etc.
We learned about a range of high and low-fidelity prototyping methods, for both horizontal and vertical prototypes
Prototyping can be integrated into the product design cycle in various ways, including as evolutionary, modular, and throwaway prototypes
Fall 2016 COMP 3020
Recommended