1 / 39

High-Fidelity Prototyping

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

marlin
Download Presentation

High-Fidelity Prototyping

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. 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 SpeechComputer What the user sees

  8. Dear Henry 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 SpeechComputer What the user sees The wizard

  9. Name Origin • From the book & movie • http://www.youtube.com/watch?v=NZR64EF3OpA&feature=related

  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 • 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 http://www.youtube.com/watch?v=O-XNwam3LOs

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

  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: • 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 • 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

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

  20. Examples - Axure • Website: http://share.axure.com/W2D1BW/ • Demo video: • http://axure.com/features

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

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

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

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

  25. OmniGraffle

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

  27. 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/

  28. Arduino Project example • Snore-detecting pillow: • http://www.youtube.com/watch?v=DmFLO-fjGsU&feature=related

  29. Phidgets • “Physical Widgets” • Sliders, buttons, sensors,lights, RFID, motors, etc. • Easier than Ardunio • Uses snap-in and USB • Only requires basicknowledge of Java programming • http://www.phidgets.com/

  30. Phidgets Example – Gumball Machine

  31. Phidgets – Interactive Flower • http://www.youtube.com/watch?v=9VJA8CPT-DQ

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

  33. More Resources • Overviews of rapid prototyping tools: • http://www.adaptivepath.com/blog/2009/03/24/rapid-prototyping-tools/ • Your classmates’ R6 posts

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

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

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

  37. Group Project time

More Related