1. Low-fi Prototyping November 2, 2006
About 5 minutes over – cut 2 or 3 repetitive slides -- cut Outpost video?
November 2, 2006

2. User Interface Design, Prototyping, and Evaluation
Hall of Fame or Shame?
Password dialog in Eudora Pro for Mac
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

3. User Interface Design, Prototyping, and Evaluation
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

4. Low-fi Prototyping
November 2, 2006

5. User Interface Design, Prototyping, and Evaluation
Outline
Web design patterns
Low-fi prototyping
Wizard of Oz technique
Informal UI prototyping tools
Hi-fi prototyping
What prototyping tools lack
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

6. Design Patterns Review
Which patterns do you see?
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

7. User Interface Design, Prototyping, and Evaluation
SHOPPING CART (F3)
CROSS-SELLING & UP-SELLING (G2)
SITE BRANDING (E1)
HIGH VISIBILITY ACTION BUTTON (K5)
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

8. User Interface Design, Prototyping, and Evaluation
Quick-Flow Checkouts
QUICK-FLOW CHECKOUT (F1)
PROCESS FUNNEL (H1)
SITE BRANDING (E1)
HIGH VISIBILITY ACTION BUTTON (K5)
PROGRESS BAR (H13)
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

9. User Interface Design, Prototyping, and Evaluation
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
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

11. Low-fi Sketches & Storyboards
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

13. Ink Chat

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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

15. User Interface Design, Prototyping, and Evaluation
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

16. User Interface Design, Prototyping, and Evaluation
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.
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

17. from “Prototyping for Tiny Fingers” by Rettig

19. ESP

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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

21. Constructing the Model
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

22. Constructing the Model
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

23. Constructing the Model
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

24. Constructing the Model
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

25. Constructing the Model
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

26. User Interface Design, Prototyping, and Evaluation
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”
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

27. User Interface Design, Prototyping, and Evaluation
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

28. User Interface Design, Prototyping, and Evaluation
Conducting a Test
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

29. User Interface Design, Prototyping, and Evaluation
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
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

31. User Interface Design, Prototyping, and Evaluation
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
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

33. Informal UI Prototyping Tools
Outpost
Denim
Suede
We don’t have the tried and true theories of other fields. Can’t follow a book, build it, and expect it to work.
The best tools let you enter a design, create an interactive prototype, & support testing it
This is the philosophy that our work supports!
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
Unlike designing a computer program, you do not need to consider all cases this early.
present several designs to give the client an idea of what I as the designer am thinking about.
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

35. User Interface Design, Prototyping, and Evaluation
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
two cameras: one high res for ink, one behind for tracking to avoid occlusion by users
Informal UI means it stays OUT of the designers’ way
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

36. User Interface Design, Prototyping, and Evaluation
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
Follows Outpost
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

38. User Interface Design, Prototyping, and Evaluation
Video
mention Chris Long’s GDT for designing gestures
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

39. Low-fi Prototyping & Testing
Travelshare
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

40. User Interface Design, Prototyping, and Evaluation
Denim Demo
mention Chris Long’s GDT for designing gestures
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

41. SUEDE: Informal Prototyping for Speech-based UIs
Read my important
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

42. User Interface Design, Prototyping, and Evaluation
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

44. User Interface Design, Prototyping, and Evaluation
Video
mention Chris Long’s GDT for designing gestures
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

45. User Interface Design, Prototyping, and Evaluation
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
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

46. User Interface Design, Prototyping, and Evaluation
Next Time
Midterm
Start next project assignment this week
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation

47. Further Reading Prototyping
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,
“The Perils of Prototyping” by Alan Cooper,
Web Sites
Group for User Interface Research, for DENIM & SUEDE downloads,
InfoDesign Toolkit,
CSE490f - Autumn 2006
User Interface Design, Prototyping, and Evaluation