high-fidelity prototyping
DESCRIPTION
High-Fidelity Prototyping. HCDE 518 & INDE 545 Winter 2012. With credit to Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry. Agenda. Announcements Lecture – HiFi Prototyping Break – 5 mins Discussion – Practical HiFi prototyping techniques Discussion questions - PowerPoint PPT PresentationTRANSCRIPT
University of Washington HCDE 518 & INDE 545
High-Fidelity Prototyping
HCDE 518 & INDE 545Winter 2012
With credit to Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry
University of Washington HCDE 518 & INDE 545
Agenda Announcements Lecture – HiFi Prototyping Break – 5 mins Discussion – Practical HiFi
prototyping techniques Discussion questions Next class
University of Washington HCDE 518 & INDE 545
Announcements
No class next Monday (President’s Day)
Questions?
University of Washington HCDE 518 & INDE 545
LECTURE – HI-FI PROTOTYPING
University of Washington HCDE 518 & INDE 545
Overview
Hi-Fi Interface Prototyping Experience Prototyping Wizard of Oz Practical Hi-Fi Prototyping Techniques
University of Washington HCDE 518 & INDE 545
Experience Prototyping
The key is making the interactions and experience as authentic to the real thing as possible
Typically a Hi-fidelity experience Use Wizard-of-oz to save time and avoid
complicated implementation
University of Washington HCDE 518 & INDE 545
Wizard of Oz A method of testing a system that does not exist
the listening typewriter, IBM 1984
Dear Henry
What the user sees
SpeechComputer
From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.
University of Washington HCDE 518 & INDE 545
Wizard of Oz A method of testing a system that does not exist
the listening typewriter, IBM 1984
What the user sees The wizard
SpeechComputer
Dear Henry
Dear Henry
From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.
University of Washington HCDE 518 & INDE 545
Name Origin
From the book & movie http://www.youtube.com/watch?
v=NZR64EF3OpA&feature=related
University of Washington HCDE 518 & INDE 545
Important Note
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
University of Washington HCDE 518 & INDE 545
Wizard of Oz
Human ‘wizard’ simulates system response interprets user input according to an algorithm controls computer to simulate appropriate output uses real or mock interface wizard sometimes visible, sometimes hidden
“pay no attention to the man behind the curtain!”
good for: adding simulated and complex vertical functionality testing futuristic ideas
University of Washington HCDE 518 & INDE 545
WoZ Example - Sketch-a-move
http://www.youtube.com/watch?v=O-XNwam3LOs
University of Washington HCDE 518 & INDE 545
Other WoZ Examples
Eye Toy prototype: http://www.youtube.com/watch?v=IZUQqssE7Jk
Virtual Peers for Autism http://www.articulab.justinecassell.com/projects/
samautism/index.html
University of Washington HCDE 518 & INDE 545
BREAK – 5 MINUTES
University of Washington HCDE 518 & INDE 545
P4: Hi-Fi Prototyping
Due March 7th in class and on CollectIt Iterate on your design from P3 to a more high-fidelity
interactive prototype Can be PowerPoint, HTML, programming, etc. Must simulate the experience of using it
Conduct another usability evaluation with 2-3 participants (can be same participants as before)
Demo prototype during final class presentation
University of Washington HCDE 518 & INDE 545
Practical Prototyping Tools
Creating Hi-Fi, semi-functional prototypes with minimal effort PowerPoint Prototyping UX-Specific Tools
Axure, Balsamiq Photoshop + HTML/Dreamweaver Visual Studio OmniGraffle Hardware Prototyping (Arduino, Phidgets)
University of Washington HCDE 518 & INDE 545
PowerPoint
Advantages: Almost everyone has it
Ubiquitous format Fast and easy to use Can use hyperlinks to simulate interaction
Disadvantages: Must be used at a computer
e.g., difficult to do mobile-based interactions Somewhat limited functionality Cannot be reused for final implementation
University of Washington HCDE 518 & INDE 545
Example Prototypes
http://www.boxesandarrows.com/files/banda/interactive/SamplePrototype.ppt
http://courses.washington.edu/info360/examples/powerpoint-prototype-example.ppt
Tutorial: http://www.boxesandarrows.com/view/interactive
University of Washington HCDE 518 & INDE 545
Axure
A commercially available wireframes maker/prototyping tool
Free license for students http://www.axure.com/
Contains good documentation and tutorials
Advantages Great for websites Can transition from wireframe->Prototype->Functional system Can automatically generate design specs
University of Washington HCDE 518 & INDE 545
University of Washington HCDE 518 & INDE 545
Examples - Axure
Website: http://share.axure.com/W2D1BW/
Demo video: http://axure.com/features
University of Washington HCDE 518 & INDE 545
Balsamiq Mockups
Another commercially available prototyping tool Free trial, or $79 to buy
Advantages Can make lo-fi appearing prototypes that are
interactive
http://www.balsamiq.com/products/mockups
University of Washington HCDE 518 & INDE 545
Photoshop
Advantages Can look & feel like real thing
Disadvantages Needs use of HTML to simulate interactions
University of Washington HCDE 518 & INDE 545
Photoshop Tools
Download iPhone template: http://www.teehanlax.com/blog/?p=1628
Android Template: http://chrisbrummel.com/google-android-gui-psd
More free PS widgets: http://www.greepit.com/2009/03/25-free-psd-resources-
for-designers/ To do screen shots (saves to clipboard)
Windows: alt+print screen button Mac: Command-Control-Shift-3
University of Washington HCDE 518 & INDE 545
Visual Studio
Advantages: Fast to put together interfaces Can evolve into a fully functional prototype
Disadvantages: Requires programming knowledge to start creating
interactivity Windows only
University of Washington HCDE 518 & INDE 545
University of Washington HCDE 518 & INDE 545
OmniGraffle
University of Washington HCDE 518 & INDE 545
Hardware Prototyping
Great for making devices “off the screen” Arduino Phidgets
University of Washington HCDE 518 & INDE 545
Arduino
Prototyping tool for physical devices
Allows you to interface with hardware and for physical devices to communicate with your computer
http://www.arduino.cc/
University of Washington HCDE 518 & INDE 545
Arduino Project example
Snore-detecting pillow: http://www.youtube.com/watch?v=DmFLO-
fjGsU&feature=related
University of Washington HCDE 518 & INDE 545
Phidgets
“Physical Widgets” Sliders, buttons, sensors,
lights, RFID, motors, etc. Easier than Ardunio
Uses snap-in and USB Only requires basic
knowledge of Java programming
http://www.phidgets.com/
University of Washington HCDE 518 & INDE 545
Phidgets Example – Gumball Machine
University of Washington HCDE 518 & INDE 545
Phidgets – Interactive Flower
http://www.youtube.com/watch?v=9VJA8CPT-DQ
University of Washington HCDE 518 & INDE 545
General Tips
There are more tools here than you can learn to use proficiently
Find out what's currently being used by companies, researchers, or in jobs you'd like to do
Take the time to learn one or two prototyping techniques very well Perhaps your P4 assignment can be a good start
University of Washington HCDE 518 & INDE 545
More Resources
Overviews of rapid prototyping tools: http://www.adaptivepath.com/blog/2009/03/24/
rapid-prototyping-tools/ Your classmates’ R6 posts
University of Washington HCDE 518 & INDE 545
John’s Discussion Questions Should low-fi prototypes be developed entirely by designers, entirely by
developers, or by a team representing both areas of expertise? Why? Is the answer different for high-fi prototypes?
Can a low-fi prototype involve coding/functional interaction? Or does this make it high-fi by definition?
When you're designing a screen-based application, the interactions can be relatively easy to sketch out in low fidelity in such a way that most of the user experience is captured/conveyed. This is much more difficult with a tangible, interactive product, where the physicality defines much of the experience. Is there really such a thing as a low-fi prototype for such a product? Or is there a baseline of somewhat-high fidelity that must be reached before the prototype becomes a useful representation?
University of Washington HCDE 518 & INDE 545
John’s Discussion Questions The Houde and Hill article argues that storyboards can be prototypes. Do
you agree? Or, put another way, does something need to have a degree of interactivity to transcend from sketch to prototype?
Rudd et al. briefly touch on the very important distinction of horizontal and vertical prototypes. Is one 'better' than the other? When might you want to use each kind?
Rudd et al. present a fairly dichotomous view prototyping divided into low-fi and high-fi. Is this division granular enough? Or is further distinction useful? For example, think about Experience Prototyping -- is this just another way of framing high-fi prototyping? Or is there a useful difference?
University of Washington HCDE 518 & INDE 545
Next Class Topics
Monday, February 20th No class (President’s Day)
Wednesday, February 22nd
Empirical Evaluation Discussants: Jessica & Sarah
Upcoming Work R7, P3
University of Washington HCDE 518 & INDE 545
GROUP PROJECT TIME