University of Washington HCDE 518 & INDE 545 High-Fidelity Prototyping HCDE 518 & INDE 545 Winter 2012 With credit to Jake Wobbrock, Dave Hendry, Andy

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


Agenda Announcements Lecture – HiFi Prototyping Break – 5 mins Discussion – Practical HiFi

prototyping techniques Discussion questions Next class


Announcements

No class next Monday (President’s Day)

Questions?


LECTURE – HI-FI PROTOTYPING


Overview

Hi-Fi Interface Prototyping Experience Prototyping Wizard of Oz Practical Hi-Fi Prototyping Techniques


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


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.


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.


Name Origin

From the book & movie http://www.youtube.com/watch?

v=NZR64EF3OpA&feature=related


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


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


WoZ Example - Sketch-a-move

http://www.youtube.com/watch?v=O-XNwam3LOs


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


BREAK – 5 MINUTES


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


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)


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


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


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



Examples - Axure

Website: http://share.axure.com/W2D1BW/

Demo video: http://axure.com/features


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


Photoshop

Advantages Can look & feel like real thing

Disadvantages Needs use of HTML to simulate interactions


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


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



OmniGraffle


Hardware Prototyping

Great for making devices “off the screen” Arduino Phidgets


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/


Arduino Project example

Snore-detecting pillow: http://www.youtube.com/watch?v=DmFLO-

fjGsU&feature=related


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/


Phidgets Example – Gumball Machine


Phidgets – Interactive Flower

http://www.youtube.com/watch?v=9VJA8CPT-DQ


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


More Resources

Overviews of rapid prototyping tools: http://www.adaptivepath.com/blog/2009/03/24/

rapid-prototyping-tools/ Your classmates’ R6 posts


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?


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?


Next Class Topics

Monday, February 20th No class (President’s Day)

Wednesday, February 22nd

Empirical Evaluation Discussants: Jessica & Sarah

Upcoming Work R7, P3


GROUP PROJECT TIME

Documents

University of Washington HCDE 518 & INDE 545 High-Fidelity Prototyping HCDE 518 & INDE 545 Winter 2012 With credit to Jake Wobbrock, Dave Hendry, Andy