University of Washington HCDE 518 & INDE 545
Lo-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 & 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
Sketch PrototypeInvite AttendSuggest DescribeExplore RefineQuestion AnswerPropose TestProvoke ResolveTentative, non committal Specific 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’ notesStoryboardsScenarios
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-FiLo – Fi Hi – Fi
Advantages
Disadvantages
University of Washington HCDE 518 & INDE 545
Hi-Fi vs. Lo-Fi – How'd we do?
Lo – Fi Hi – 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., photoshopmock 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
http://www.smashingmagazine.com/2009/09/01/35-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 15th
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