Video Prototyping in HCI
description
Transcript of Video Prototyping in HCI
![Page 1: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/1.jpg)
Video Prototyping in HCI
![Page 2: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/2.jpg)
Outline
Why prototype? Tools & Techniques
![Page 3: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/3.jpg)
What is a video prototype?
shows your
System in Context Big budget not required
![Page 4: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/4.jpg)
System
A paper prototype
from flickr: dan gavie
![Page 5: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/5.jpg)
System
A paper prototype A physical prototype
![Page 6: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/6.jpg)
System
A paper prototype A physical prototype An on-screen mockup
![Page 7: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/7.jpg)
Context
Who (is the user)? What (are they doing)? When (in their day does this fit in?) Where (are they
sitting/standing/working/ playing)? How (is your system helping them
with their task)?
![Page 8: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/8.jpg)
Tradeoffs
![Page 9: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/9.jpg)
In other words...
![Page 10: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/10.jpg)
But...
You should budget ~1 hour per minute of video
It’s easy to fiddle for a long time
![Page 11: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/11.jpg)
Some Tips - How to light
from http://www.exposure.co.uk/eejit/light/
![Page 12: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/12.jpg)
How to light
Fill lighting Bounce off a surface (softens shadows)
Key lighting Main light, shine at angle on subject
Back lighting Optional, especially for video prototypes
(helps separate from background)
![Page 13: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/13.jpg)
Short version for you
Light more than you think you need Use a room lamp to either shine on
subject, or bounce off a white surface to help fill in shadows
![Page 14: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/14.jpg)
Audio
If possible, use an external microphone Avoid tape noise! Get closer to your subject
Audio is make-or-break for communicative power
![Page 15: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/15.jpg)
Which software? (Mac) iMovie ’06
Doesn’t support some newer video formats Has some initial learning cost But is really easy and relatively powerful Just one video track + some overlays
iMovie ’08 Slicker, but lacks some basic features Better video format support
Final Cut Express Very powerful, non-linear, multi-track editing Not easy to jump into
![Page 16: Video Prototyping in HCI](https://reader037.fdocuments.us/reader037/viewer/2022103100/56813b2d550346895da3f7de/html5/thumbnails/16.jpg)
Which software? (Windows)
Windows Movie Maker Highly frustrating (but reportedly better
in latest version) Adobe Premiere Pro
Powerful, but again, learning curve