University of Washington HCDE 518 & INDE 545 Lo-Fidelity Prototyping HCDE 518 & INDE 545 Winter 2012 With credit to Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry

University of Washington HCDE 518 & INDE 545 Agenda  Announcements  Lecture & Discussion – Prototyping  Break – 5 mins  Activity – LoFi prototyping  Next class

University of Washington HCDE 518 & INDE 545 Announcements  P2 due Wednesday  No class next Monday (President’s Day)  R7 due Wednesday, Feb 22nd  Questions?

University of Washington HCDE 518 & INDE 545 LECTURE – LO-FI PROTOTYPING

University of Washington HCDE 518 & INDE 545 Sketches vs. Prototypes  Sketches are about exploring ideas  Prototypes are about testing ideas

University of Washington HCDE 518 & INDE 545 Sketch vs. Prototype SketchPrototype InviteAttend SuggestDescribe ExploreRefine QuestionAnswer ProposeTest ProvokeResolve Tentative, non committalSpecific Depiction The primary differences are in the intent

University of Washington HCDE 518 & INDE 545 Prototype vs. System Development  In engineering, prototyping is system development: building the first example of a system by hand  In user interface design, the effort on the functionality of the system is minimized for the prototype  Focus on the "visible" parts of the system  Still a range, in terms of fidelity and level of activity, in relation to the final product

University of Washington HCDE 518 & INDE 545 What does a prototype look like? In designing interactive systems, it can be: a series of screen designs (e.g., from photoshop) a storyboard, i.e. a cartoon-like series of scenes a PowerPoint slide show or HTML pages a video simulating the use of a system a lump of wood (e.g. to represent a cell phone) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language

University of Washington HCDE 518 & INDE 545 Why should we prototype? Evaluation and feedback are central to interaction design Users can see, hold, interact with a prototype more easily than a document or a drawing You can test out ideas for yourself It encourages reflection: important aspect of design Prototypes answer questions, and support designers in choosing between alternatives

University of Washington HCDE 518 & INDE 545 Who is the audience for prototypes?  End users  Designers  Organizations

University of Washington HCDE 518 & INDE 545 What do prototypes prototype? (Houde & Hill)

University of Washington HCDE 518 & INDE 545 Low-Fidelity Prototyping (Lo-Fi) Very far from the final product, e.g. paper, cardboard, abstract Examples: sketches of screens, task sequences, etc. ‘Post-it’ notes Storyboards Scenarios

University of Washington HCDE 518 & INDE 545 High-Fidelity Prototyping (Hi-Fi) Prototype looks more like the final system than a low-fidelity version Common hi-fi prototyping tools: Photoshop, Axure, Flash, PowerPoint

University of Washington HCDE 518 & INDE 545 Hi-Fi vs. Lo-Fi Lo – FiHi – Fi Advantages Disadvantages

University of Washington HCDE 518 & INDE 545 Hi-Fi vs. Lo-Fi – How'd we do? Lo – FiHi – Fi Advantages Fast Cheap Easy – kindergarten skills! Can simulate actual product Better sense of finished product Can judge aesthetic appeal More realistic experience Can evaluate experience Disadvantages Slow response time Can’t get feedback about aesthetics User may question design quality Users may focus on unnecessary details Takes a lot of time to make Users may lose track of big picture

University of Washington HCDE 518 & INDE 545 Horizontal vs. Vertical  How much to represent?  “Deep” or “vertical” prototyping  provide a lot of detail for only a few functions  “Broad” or “horizontal” prototyping  provide a wide range of functions, but with little detail

University of Washington HCDE 518 & INDE 545 Horizontal vs. Vertical Vertical prototype (e.g., photoshop mock up) Scenario Horizontal prototype (e.g., paper prototype) Full interface

University of Washington HCDE 518 & INDE 545 Paper Prototyping  Easy and fast to do  Helps you think of specifics  Usually good as a first round prototype  Can still do usability testing, even with paper  Thoughts on Nielsen video?

University of Washington HCDE 518 & INDE 545 Experience Prototypes w/ Paper  Spotlight: an interactive foam core and paper sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of Washington

University of Washington HCDE 518 & INDE 545 Prototypes vs. Wireframes  Prototypes are usually intended to be shown to the end user rather than kept within the design team  Wireframes are usually more of a design document to go from design to actual system  Usually contain annotations specific to the design team and are not intended for end-user consumption  Wireframes can be used as a lo-fidelity prototype to save time  Remove annotations, make it interactive

University of Washington HCDE 518 & INDE 545 Example Wireframe  excellent-wireframing-resources/ excellent-wireframing-resources/

University of Washington HCDE 518 & INDE 545 Prototyping Recommendations  Make it clear what is intended for final product and what isn’t  Avoid evolutionary prototypes  Temptation is too great to stick with bad ideas  Start with idealistic (rather than realistic) prototypes  Level of polish should reflect maturity of the prototype

University of Washington HCDE 518 & INDE 545 BREAK – 5 MINUTES

University of Washington HCDE 518 & INDE 545 Design Exercise: Lo-Fi Prototyping  A vending machine allows you to buy the following drinks:  Coffee: drip coffee, mocha, latte, or cappuccino  Tea: Breakfast, Earl Grey, Green Tea  Other: Hot chocolate, hot cider  Sugar and/or milk may be added to any drink at no extra charge. Drinks come in 3 sizes (12oz, 16oz, and 20oz, for $2, $3, and $3.50 respectively). Payment is by cash or credit card. Change is provided for cash transactions.  In groups of 2-3, create a horizontal paper prototype. Use the techniques illustrated in the Nielsen paper prototype video

University of Washington HCDE 518 & INDE 545 P3: Lo-Fi Prototyping  Due February 27th  Design a paper or other lo-fi prototype for one or more of your 3 design ideas from P2  Use techniques described in Nielsen paper prototyping video  Identify a list of tasks that could be performed in a usability test (help with this next week) and conduct an evaluation with 2-3 potential users

University of Washington HCDE 518 & INDE 545 Next Class Topics  Wednesday, February 15 th  Lo-Fi Prototyping  Discussant: John  Monday, February 20th  No class (President’s Day)  Upcoming Work  R7, P2

University of Washington HCDE 518 & INDE 545 GROUP PROJECT TIME