Low-fi Prototyping
description
Transcript of Low-fi Prototyping
![Page 1: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/1.jpg)
Prof. James A. LandayUniversity of Washington
Autumn 2006
Low-fi Prototyping
November 2, 2006
![Page 2: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/2.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 2
Hall of Fame or Shame?• Password dialog in
Eudora Pro for Mac
![Page 3: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/3.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 3
Hall of Fame!
• Password dialog in Eudora Pro for Mac
• Most passwords are mixed case– caps lock often leads to
failure to authenticate• Good idea to inform user
that Caps Lock is on• Flashing and “!”
unnecessary
![Page 4: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/4.jpg)
Prof. James A. LandayUniversity of Washington
Autumn 2006
Low-fi Prototyping
November 2, 2006
![Page 5: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/5.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 5
Outline• Web design patterns• Low-fi prototyping• Wizard of Oz technique• Informal UI prototyping tools• Hi-fi prototyping• What prototyping tools lack
![Page 6: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/6.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 6
Design Patterns Review• Which patterns do you see?
![Page 7: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/7.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 7
• SHOPPING CART (F3)• CROSS-SELLING & UP-SELLING (G2)• SITE BRANDING (E1)• HIGH VISIBILITY ACTION BUTTON (K5)
![Page 8: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/8.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 8
Quick-Flow Checkouts
• QUICK-FLOW CHECKOUT (F1)• PROCESS FUNNEL (H1)• SITE BRANDING (E1)• HIGH VISIBILITY ACTION BUTTON (K5)• PROGRESS BAR (H13)
![Page 9: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/9.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 9
Why Do We Prototype?• Experiment with alternative designs• Get feedback on our design faster– fix problems before code is written– saves money
• Keep the design centered on the user–must test & observe ideas with users
![Page 10: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/10.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 10
Fidelity in Prototyping• Fidelity refers to
the level of detail• High fidelity?– prototypes look like
the final product
• Low fidelity?– artists renditions
with many details missing
![Page 11: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/11.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 11
Low-fi Sketches & Storyboards
![Page 12: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/12.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 12
Low-fi Sketches & Storyboards
• Where do storyboards come from?– film & animation
• Give you a “script” of important events– leave out the details – concentrate on the important interactions
![Page 13: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/13.jpg)
Ink Chat
![Page 14: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/14.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 14
Why Use Low-fi Prototypes?
• Traditional methods take too long– sketches -> prototype -> evaluate -> iterate
• Can instead simulate the prototype– sketches -> evaluate -> iterate– sketches act as prototypes• designer “plays computer”• other design team members observe & record
• Kindergarten implementation skills– allows non-programmers to participate
![Page 15: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/15.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 15
Hi-fi Prototypes Warp• Perceptions of the tester/reviewer– representation communicates “finished”• comments focus on color, fonts, & alignment
• Time– encourage precision• specifying details takes more time
• Creativity– lose track of the big picture
![Page 16: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/16.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 16
The Basic Materials • Large, heavy, white paper (11 x 17)• 5x8 in. index cards• Post-its• Tape, stick glue, correction tape• Pens & markers (many colors & sizes)• Overhead transparencies• Scissors, X-acto knives, etc.
![Page 17: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/17.jpg)
from “Prototyping for Tiny Fingers” by Rettig
![Page 18: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/18.jpg)
![Page 19: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/19.jpg)
ESP
![Page 20: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/20.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 20
Constructing the Model• Set a deadline– don’t think too long - build it!
• Draw a window frame on large paper• Put different screen regions on cards– anything that moves, changes,
appears/disappears• Ready response for any user action– e.g., have those pull-down menus already made
• Use photocopier to make many versions
![Page 21: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/21.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 21
Constructing the Model
![Page 22: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/22.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 22
Constructing the Model
![Page 23: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/23.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 23
Constructing the Model
![Page 24: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/24.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 24
Constructing the Model
![Page 25: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/25.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 25
Constructing the Model
![Page 26: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/26.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 26
Preparing for a Test• Select your users– understand background of intended users– use a questionnaire to get the people you need– don’t use friends or family
• I think “customers” are OK (Rettig disagrees)
• Prepare scenarios that are– typical of the product during actual use– make prototype support these (small, yet broad)
• Practice to avoid “bugs”
![Page 27: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/27.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 27
Conducting a Test• Four testers (minimum)– greeter – puts users at ease & gets data– facilitator – only team member who speaks
• gives instructions & encourages thoughts, opinions– computer – knows application logic & controls it
• always simulates the response, w/o explanation– observers – take notes & recommendations
• Typical session is 1 hour– preparation, the test, debriefing
• Read the paper we handed out for details on conducting a test
![Page 28: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/28.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 28
Conducting a Test
![Page 29: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/29.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 29
Evaluating Results• Sort & prioritize observations– what was important?– lots of problems in the same area?
• Create a written report on findings– gives agenda for meeting on design
changes• Make changes & iterate
![Page 30: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/30.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 30
Advantages of Low-fi Prototyping
• Takes only a few hours– no expensive equipment needed
• Can test multiple alternatives – fast iterations• number of iterations is tied to final quality
• Almost all interaction can be faked
![Page 31: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/31.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 31
Wizard of Oz Technique• Faking the interaction. Comes from?– the film “The Wizard of OZ”• “the man behind the curtain”
• Long tradition in computer industry– e.g., prototype of a PC w/ a VAX behind
the curtain• Much more important for hard to
implement features– speech & handwriting recognition
![Page 32: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/32.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 32
Problems with Low-fi Prototypes• “Computer” inherently buggy• Slow compared to real app
– timings not accurate• Hard to implement some
functionality– pulldowns, feedback, drag, viz …
• Won’t look like final product– sometimes hard to recognize
widgets• End-users can’t use by
themselves– not in context of user’s work
environment
![Page 33: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/33.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 33
Informal UI Prototyping Tools
Denim
Suede
Outpost
![Page 34: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/34.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 34
Informal UI Prototyping Tools• Support advantages of low-fi paper prototypes– brainstorming
• consider different ideas rapidly• do not require specification of details
– incomplete designs• need not cover all cases, just illustrate important
examples• Add advantages of electronic tools– evolve easily– support for “design memory”– transition to other electronic tools– allow end-user interaction
![Page 35: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/35.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 35
Designers’ Outpost:A Tangible Interface for Designing Information Architectures
• Combines physical & virtual– physical post-its, virtual
feedback• Supports existing practice
– affordances of paper– collaboration– large, persistent
representation• Adds advantages of e-media
– editing, reuse, distribution– hand-off later to other tools
![Page 36: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/36.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 36
![Page 37: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/37.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 37
DENIM: Designing Web Sites by Sketching
• Early-phase navigation & interaction design• Integrates multiple views– site map – storyboard – page sketch
![Page 38: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/38.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 38
Video
![Page 39: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/39.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 39
Travelshare
Low-fi Prototyping & Testing
![Page 40: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/40.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 40
Denim Demo
![Page 41: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/41.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 41
SUEDE:Informal Prototyping for Speech-based UIs
• Support design practice– example scripts–Wizard of Oz (WoZ)– built-in iterative design• design – test – analysis
• Fast & fluid design– no speech recognition or
synthesis– need not be programmer
Read my important
![Page 42: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/42.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 42
![Page 43: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/43.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 43
TOPIARY:Informal Prototyping for Location-enhanced UIs
• Create location-based scenarios– place people, places, & things
on map• Use scenarios as conditions
on storyboard transitions• Iterative design
– Wizard of Oz (WoZ)– Place Lab Wi-fi location sensor
• Fast & fluid design– no GPS or other special
hardware required– need not be programmer
![Page 44: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/44.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 44
Video
![Page 45: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/45.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 45
Summary• Low-fi testing allows us to quickly iterate– get feedback from users & change right away
• Informal prototyping tools bridge the gap between paper & high-fi tools
• High-fi UI tools good for testing more developed UI ideas– generally ignore the “insides” of application
![Page 46: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/46.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 46
Next Time• Midterm• Start next project assignment this
week
![Page 47: Low-fi Prototyping](https://reader030.fdocuments.net/reader030/viewer/2022013012/5681683b550346895dde07c7/html5/thumbnails/47.jpg)
CSE490f - Autumn 2006 User Interface Design, Prototyping, and Evaluation 47
Further ReadingPrototyping
• Books– Paper Prototyping: The Fast and Easy Way to Design and Refine
User Interfaces, by Carolyn Snyder, Morgan Kaufmann, 2003• Articles
– “Prototyping for Tiny Fingers” by Marc Rettig, in Communications of the ACM, 1994
– “Using Paper Prototypes to Manage Risk” by Carolyn Snyder, http://world.std.com/~uieweb/paper.htm
– “The Perils of Prototyping” by Alan Cooper, http://www.chi-sa.org.za/Documents/articles/perils.htm
• Web Sites– Group for User Interface Research, for DENIM & SUEDE
downloads, http://guir.berkeley.edu – InfoDesign Toolkit, http://www.infodesign.com.au