maya cakmak, matt kay, brad jacobson, king xia video · university of washington human-computer...
TRANSCRIPT
![Page 1: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/1.jpg)
University ofWashington
human-computer interactionCSE 440 WINTER 2014FEB 24 - WEEK 8 - TUESDAY
VIDEO PROTOTYPES
Maya Cakmak, Matt Kay, Brad Jacobson, King Xia
Slide credits: James Landay, Scott Klemmer
![Page 2: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/2.jpg)
University ofWashington
Video prototypes•Videos that illustrate how users will interact with a
system
2
![Page 3: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/3.jpg)
University ofWashington
Prototype fidelity
3
Storyboarding
Fidelity
Time
![Page 4: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/4.jpg)
University ofWashington
Prototype fidelity
3
Storyboarding
Paper prototypes
Fidelity
Time
![Page 5: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/5.jpg)
University ofWashington
Prototype fidelity
3
Storyboarding
Paper prototypes
Fidelity
Time
Digital mockups
![Page 6: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/6.jpg)
University ofWashington
Prototype fidelity
3
Storyboarding
Paper prototypes
Fidelity
Time
Digital mockups
...
![Page 7: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/7.jpg)
University ofWashington
Prototype fidelity
3
Storyboarding
Paper prototypes
Fidelity
Time
Digital mockups
...
Brainstorming
Video
proto
types
![Page 8: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/8.jpg)
University ofWashington
Prototype fidelity
3
Storyboarding
Paper prototypes
Fidelity
Time
Digital mockups
...
Brainstorming
Video
proto
types
Brainstorm2-5min
Prototypes2-5hours
Fancy&Slick2-5days
![Page 9: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/9.jpg)
University ofWashington
Video prototyping - advantages
4
![Page 10: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/10.jpg)
University ofWashington
Video prototyping - advantages•Fast and cheap
4
![Page 11: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/11.jpg)
University ofWashington
Video prototyping - advantages•Fast and cheap•Self-explanatory and portable communication tool
–Creates common ground
4
![Page 12: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/12.jpg)
University ofWashington
Video prototyping - advantages•Fast and cheap•Self-explanatory and portable communication tool
–Creates common ground•Serves a list of requirements for developers
–Much better than a long list of written specs
4
![Page 13: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/13.jpg)
University ofWashington
Video prototyping - advantages•Fast and cheap•Self-explanatory and portable communication tool
–Creates common ground•Serves a list of requirements for developers
–Much better than a long list of written specs•Ties interface design to tasks
–Add what’s necessary, remove what is not
4
![Page 14: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/14.jpg)
University ofWashington
Video prototyping - advantages
5
![Page 15: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/15.jpg)
University ofWashington
Video prototyping - advantages•Forces consideration of how people react to
design
5
![Page 16: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/16.jpg)
University ofWashington
Video prototyping - advantages•Forces consideration of how people react to
design•May better illustrate context of use
5
![Page 17: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/17.jpg)
University ofWashington
Video prototyping - advantages•Forces consideration of how people react to
design•May better illustrate context of use•Can help scope a minimum viable product
5
![Page 18: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/18.jpg)
University ofWashington
Video prototyping - advantages•Forces consideration of how people react to
design•May better illustrate context of use•Can help scope a minimum viable product•Changes what design teams argue about
5
![Page 19: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/19.jpg)
University ofWashington
What to include in the video?• Setting
– People involved?– Environment?– Task being accomplished?
• Sequence– What steps are involved?– What leads someone to use the app?– What task is being illustrated?
• Satisfaction– What's the motivation for the user?– What's the end result?– What need are you "satisfying"?
6
Remember fromstoryboarding?
![Page 20: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/20.jpg)
University ofWashington
What to include in the video?•The whole task: motivation, steps, success
–Tasks that your design enables/supports
7
![Page 21: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/21.jpg)
University ofWashington
Steps for making the video
8
![Page 22: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/22.jpg)
University ofWashington
Steps for making the video•Start with an outline (or better, a storyboard)
8
![Page 23: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/23.jpg)
University ofWashington
Steps for making the video•Start with an outline (or better, a storyboard)•Decide on the shots you need
8
![Page 24: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/24.jpg)
University ofWashington
Steps for making the video•Start with an outline (or better, a storyboard)•Decide on the shots you need•Find actors and settings for your shots
8
![Page 25: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/25.jpg)
University ofWashington
Steps for making the video•Start with an outline (or better, a storyboard)•Decide on the shots you need•Find actors and settings for your shots•Shoot!
8
![Page 26: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/26.jpg)
University ofWashington
Steps for making the video•Start with an outline (or better, a storyboard)•Decide on the shots you need•Find actors and settings for your shots•Shoot!•Edit: cut, add overlays, narrate
8
![Page 27: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/27.jpg)
University ofWashington
Considerations
9
![Page 28: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/28.jpg)
University ofWashington
Considerations•Audio vs. silent movie with title cards
9
![Page 29: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/29.jpg)
University ofWashington
Considerations•Audio vs. silent movie with title cards• Interface can be paper*, mockups*, real or invisible
(just showing the task)
9
![Page 30: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/30.jpg)
University ofWashington
Advice
10
![Page 31: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/31.jpg)
University ofWashington
Advice•Focus on the message; not the production value!
10
![Page 32: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/32.jpg)
University ofWashington
Advice•Focus on the message; not the production value!•Edit as little as possible because that takes A LOT
of time! Use “pause” to pre-edit.
10
![Page 33: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/33.jpg)
University ofWashington
Tips and tricks
11
![Page 34: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/34.jpg)
University ofWashington
Tips and tricks•Add structure to better explain context
–begin with a title–follow with an “establishing shot” (show context)–create series of closeup & mid-range shots, interspersed
with title cards to tell the story–place a final card with credits at the end
11
![Page 35: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/35.jpg)
University ofWashington
Tips and tricks•Add structure to better explain context
–begin with a title–follow with an “establishing shot” (show context)–create series of closeup & mid-range shots, interspersed
with title cards to tell the story–place a final card with credits at the end
•“Time-lapse photography” lets images appear and disappear in response to interaction–e.g., illustrate pop-up menu by recording clip of pressing
button, pause camera, add menu, restart camera
11
![Page 36: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/36.jpg)
University ofWashington
Examples
12
•Critique•Identify tricks
![Page 37: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/37.jpg)
University ofWashington
Buddy Map
13
![Page 38: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/38.jpg)
University ofWashington
Centr
14
![Page 39: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/39.jpg)
University ofWashington
Consumester
15
![Page 40: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/40.jpg)
University ofWashington
Kaching
16
![Page 41: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/41.jpg)
University ofWashington
Reminders•Presentations: Thu/Fri•Upcoming assignments (will be posted this week):
–Assignment 4: Communicating the design–Reading assignment 3
•Maya is away next week
17
![Page 42: Maya Cakmak, Matt Kay, Brad Jacobson, King Xia VIDEO · University of Washington human-computer interaction CSE 440 WINTER 2014 FEB 24 - WEEK 8 - TUESDAY VIDEO PROTOTYPES Maya Cakmak,](https://reader034.vdocuments.net/reader034/viewer/2022042313/5edcea95ad6a402d6667cd5e/html5/thumbnails/42.jpg)
University ofWashington
18
AlcoholHabits
Pet informaticsDrugs
Success in a courseDecision making
EldercareFood spoilage
GIRelationshipsMood factors
SpeechSunlight
MayaMayaKingKingMattMayaBradKingBradMattBradBradMatt