Lo-Fidelity Prototyping

1
Lo-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 Discussion Prototyping
• Break 5 mins
• Activity LoFi prototyping
• Next class

3
Announcements

• P2 due Wednesday
• No class next Monday (Presidents Day)
• R7 due Wednesday, Feb 22nd
• Questions?

4
LECTURE LO-FI PROTOTYPING
5
Sketches vs. Prototypes

• Sketches are about exploring ideas
• Prototypes are about testing ideas

6
Sketch vs. Prototype
Sketch Prototype
Invite Attend
Suggest Describe
Explore Refine
Question Answer
Propose Test
Provoke Resolve
Tentative, non committal Specific Depiction
The primary differences are in the intent
7
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

8
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

9
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

10
Who is the audience for prototypes?

• End users
• Designers
• Organizations

11
What do prototypes prototype?
(Houde Hill)
12
Low-Fidelity Prototyping (Lo-Fi)

• Very far from the final product, e.g. paper,
  cardboard, abstract
• Examplessketches of screens, task sequences,
  etc. Post-it notes Storyboards Scenarios
  

13
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

14
Hi-Fi vs. Lo-Fi
Lo Fi Hi Fi
Advantages
Disadvantages
15
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 Cant 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
16
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

17
Horizontal vs. Vertical
18
Paper Prototyping

• Easy and fast to do
• Helps you think of specifics
• Usually good as a first roundprototype
• Can still do usability testing, even with paper
• Thoughts on Nielsen video?

19
Experience Prototypes w/ Paper

• Spotlight an interactive foam core and paper
  sketch/storyboard Credit Sue-Tze Tan, Dept
  Industrial Design, University of Washington

20
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

21
Example Wireframe

• http//www.smashingmagazine.com/2009/09/01/35-exce
  llent-wireframing-resources/

22
Prototyping Recommendations

• Make it clear what is intended for final product
  and what isnt
• 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

23
BREAK 5 MINUTES
24
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

25
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

26
Next Class Topics

• Wednesday, February 15th
• Lo-Fi Prototyping
• Discussant John
• Monday, February 20th
• No class (Presidents Day)
• Upcoming Work
• R7, P2

27
Group Project time