1. High-Fidelity Prototyping
HCDE 518 & INDE 545
Winter 2012
With credit to Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry

2. Agenda Announcements Lecture – HiFi Prototyping Break – 5 mins
Discussion – Practical HiFi prototyping techniques
Discussion questions
Next class

3. Announcements
No class next Monday (President’s Day)
Questions?

4. LECTURE – HI-FI PROTOTYPING

5. Overview Hi-Fi Interface Prototyping Experience Prototyping
Wizard of Oz
Practical Hi-Fi Prototyping Techniques

6. 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

7. Wizard of Oz A method of testing a system that does not exist
From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.
Wizard of Oz
A method of testing a system that does not exist
the listening typewriter, IBM 1984
Dear Henry
Speech Computer
What the user sees

8. Wizard of Oz A method of testing a system that does not exist
From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.
Wizard of Oz
A method of testing a system that does not exist
the listening typewriter, IBM 1984
Dear Henry
Dear Henry
Speech Computer
What the user sees
The wizard

9. Name Origin From the book & movie

10. 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

11. Wizard of Oz Human ‘wizard’ simulates system response good for:
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

12. WoZ Example - Sketch-a-move

13. Other WoZ Examples Eye Toy prototype: Virtual Peers for Autism
Virtual Peers for Autism

14. BREAK – 5 MINUTES

15. 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

16. 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)

17. PowerPoint Advantages: Disadvantages: 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

18. Example Prototypes
Tutorial:

19. Axure A commercially available wireframes maker/prototyping tool
Free license for students
Contains good documentation and tutorials
Advantages
Great for websites
Can transition from wireframe->Prototype->Functional system
Can automatically generate design specs

21. Examples - Axure Website: http://share.axure.com/W2D1BW/ Demo video:

22. Balsamiq Mockups Another commercially available prototyping tool
Free trial, or $79 to buy
Advantages
Can make lo-fi appearing prototypes that are interactive

23. Photoshop Advantages Disadvantages Can look & feel like real thing
Needs use of HTML to simulate interactions

24. Photoshop Tools Download iPhone template: Android Template:
Android Template:
More free PS widgets:
To do screen shots (saves to clipboard)
Windows: alt+print screen button
Mac: Command-Control-Shift-3

25. Visual Studio Advantages: Disadvantages:
Fast to put together interfaces
Can evolve into a fully functional prototype
Disadvantages:
Requires programming knowledge to start creating interactivity
Windows only

27. OmniGraffle
Vector based diagramming and prototyping tool allows you to import ‘stencils’ that work to build complex images

28. Hardware Prototyping Great for making devices “off the screen” Arduino
Phidgets

29. Arduino Prototyping tool for physical devices
Allows you to interface with hardware and for physical devices to communicate with your computer

30. Arduino Project example
Snore-detecting pillow:

31. Phidgets “Physical Widgets” Easier than Ardunio
Sliders, buttons, sensors, lights, RFID, motors, etc.
Easier than Ardunio
Uses snap-in and USB
Only requires basic knowledge of Java programming

32. Phidgets Example – Gumball Machine

33. Phidgets – Interactive Flower

34. 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

35. More Resources Overviews of rapid prototyping tools:
Your classmates’ R6 posts

36. 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?

37. 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?

38. Next Class Topics Monday, February 20th Wednesday, February 22nd
No class (President’s Day)
Wednesday, February 22nd
Empirical Evaluation
Discussants: Jessica & Sarah
Upcoming Work
R7, P3

39. Group Project time