1. Low-fidelity Prototyping
CS 160, Spring 2003
Professor John Canny
Jan 5
9/20/2018

2. Outline Low-fidelity prototyping Wizard of OZ technique Administrivia
Informal user interfaces
Sketching user interfaces electronically
9/20/2018

3. Why Do We Prototype? Get feedback on our design faster
saves money
Experiment with alternative designs
Fix problems before code is written
Keep the design centered on the user
9/20/2018

4. 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
9/20/2018

5. Low-fidelity Sketches
9/20/2018

6. Low-fi Storyboards Where do storyboards come from?
Film & animation
Give you a “script” of important events
leave out the details
concentrate on the important interactions
9/20/2018

8. Ink Chat Black: page content Red: page title Green: annotations
Blue: links
9/20/2018

9. Why Use Low-fi Prototypes?
Traditional methods take too long
sketches -> prototype -> evaluate -> iterate
Can 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
9/20/2018

10. Hi-fi Prototypes Warp Perceptions of the tester/reviewer? Time?
formal representation indicates “finished” nature
comments on color, fonts, and alignment
Time?
encourage precision
specifying details takes more time
Creativity?
lose track of the big picture
9/20/2018

11. The Basic Materials Large, heavy, white paper (11 x 17)
5x8 in. index cards
Tape, stick glue, correction tape
Pens & markers (many colors & sizes)
Overhead transparencies
Scissors, X-acto knives, etc.
9/20/2018

13. 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
9/20/2018

14. Preparing for a Test Select your users Prepare scenarios that are
understand background of intended users
use a questionnaire to get the people you need
don’t use friends or family
Prepare scenarios that are
typical of the product during actual use
make prototype support these (small, yet broad)
Practice to avoid “bugs”
9/20/2018

15. Conducting a Test Four testers (minimum) Typical session is 1 hour
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
9/20/2018

16. Conducting a Test (cont.)
Greet
get forms filled, assure confidentiality, etc.
Test
facilitator hands written tasks to the user
must be clear & detailed
facilitator keeps getting “output” from participant
“What are you thinking right now?”, “Think aloud”
observe -> no “a-ha”, laugh, gape, etc.
9/20/2018

17. Conducting a Test (cont.)
Debrief
fill out post-evaluation questionnaire
ask questions about parts you saw problems on
gather impressions
give thanks
9/20/2018

18. 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
9/20/2018

19. 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
9/20/2018

20. Wizard of Oz Technique Faking the interaction. Comes from?
from the film “The Wizard of OZ”
“the man behind the curtain”
Long tradition in computer industry
prototype of a PC w/ a VAX behind the curtain
Much more important for hard to implement features
Speech & handwriting recognition
9/20/2018

21. Administriva Contextual inquiry due next Weds
Any questions about project, class, etc?
Break for 5 minutes
9/20/2018

22. Informal UIs for Early Stage UI Design – “Design Exploration Phase”
Brainstorming
put designs in a tangible form
consider different ideas rapidly
Incomplete designs
do not need to cover all cases
illustrate important examples
Present several designs to client
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.
9/20/2018

23. Goal of Research in Informal UI Design Tools
Allow designers to
quickly sketch interface ideas
test these ideas with users
transform to a more finished design without reprogramming
9/20/2018

24. Quickly Sketch this... Quickly sketch a design idea
Work on overall layout and structure (NOT look)
Iterate on the design rapidly with design team
9/20/2018

25. Add Behavior... This is NOT just a sketching program. We also
want behavior!
9/20/2018

26. Transform it to this... and after several iterations....
There aren’t many successful examples of supporting these early stages of UI design.
Need to keep the fluidity of paper and still unleash the power of the computer.
It is a hard problem and something like this has never been done before!!
9/20/2018

27. Drawbacks of Current Tools
Require specification of lots of detail
must give specific instance of a general idea
e.g., exact widgets, fonts, alignments, colors
designers led to focus on unimportant details
evaluators focus on wrong issues
Take too much time to use
poor support for iterative design
sketched interface took 5 times longer with traditional tool (no icons)
designers must bridge gap between how they think and specialization for the tool, for example, a designer may decide they need some informative text. Using the tool they need to specify a string, the font, the style, the size, etc.
force designers to concentrate on the wrong elements (e.g., color, alignment, fonts), -> Black found they will push one design too far -- tunnel vision
evaluators to focus on unimportant low-level details,
Anecdotal evidence has shown that evaluators give more “useful” comments on electronic sketches than on more finished-looking interfaces (mention Yin-Yin and Architects)
70 seconds for ONE screen in a design of many screens
9/20/2018

28. Paper Sketches Advantages Drawbacks support brainstorming
do not require specification of details
designers feel comfortable sketching
Drawbacks
do not evolve easily
lack support for “design memory”
force manual translation to electronic format
do not allow end-user interaction
1) Sketch rough pictures of screen layouts. Initial goal is to work on the overall layout and structure
3) Many UI designers have a graphic design or art background (over half)
Disadvantages:
1) need to often throw away sketches and start over.
2) hard to visualize the different decision points of the design process. Design history
and annotations are often more valuable to the client than the design itself.
3) manual translations may need to occur several times as we iterate
4) must have a human “play computer” to test the design. this is often unrealistic
9/20/2018

29. Sketching Interfaces Like Krazy What is SILK????
Interaction is what computers can give us.
So I have built a tool named SILK.
The idea of SILK is to support the conceptual phases of design without the limitations we have seen for paper and existing electronic tools
9/20/2018

30. Designing Interfaces with SILK
1)Designer sketches ideas rapidly with electronic pad and pen
SILK recognizes widgets
easy editing with gestures
2)Designer or end-user tests interface
widgets behave
specify additional behavior visually
3)Automatically transforms to a “finished” UI
SILK will blend the advantages of both paper-based sketching and traditional user interface builders, yet will avoid many of the limitations of these approaches.
Widgets behave: e.g., the “elevator” of the sketched scrollbar can be dragged up & down.
The designer may need to specify additional behavior to illustrate the sequencing between widgets.
Transformation requires some guidance to finalize details of the UI (e.g., textual labels, colors)
At this point, programmers can add callbacks and constraints that include the application-specific code to complete the application.
9/20/2018

31. Specifying Behaviors Storyboards Expresses many common behaviors
Sequencing behavior between widgets?
before
after
Storyboards
series of rough sketches depicting changes in response to end-user interaction
Expresses many common behaviors
TRANSITION
Unfortunately with hand-drawn storyboards, has been shown to be a powerful tool for designers making concept sketches for early visualization. Designers do this on paper now!
Storyboards used to specify the dynamic behavior between widgets
The success of HyperCard has demonstrated that a significant amount of behavior can be constructed from sequencing screen upon button presses alone!
9/20/2018

32. SILK Storyboards Copy sketches to storyboard window
Draw arrows from objects to screens
Marks for sequencing may be similar to those that many people use when designing on a whiteboard or on paper. ARROWS
can draw arrow from any object or background to any screen
Switch to run mode to test
SILK changes screens on mouse clicks
9/20/2018

34. DENIM: Designing Web Sites by Sketching
Early-phase information & navigation design
Integrates multiple views
site map – storyboard – page sketch
Supports informal interaction
sketching, pen-based interaction
Sketch-based tool for information and navigation design for the early phase of web site design.
REVIEW this slide.
9/20/2018