CS160 Discussion Section
Feb 27 2007
David Sun
Rapid Prototyping
• Interface builders can easily show the look-andfeel of a design but requires considerable
programming effort to get it to work and to
show the behavior (flow) of the interaction (see
Tiny Fingers paper).
• What are some of the problems with paper
(low-fi) prototyping?
– Hard to store, search, modify.
– Not really interactive (user must play the computer)
SILK
• A sketch interface for illustrating interface
behaviors during early stages of interface
design.
• Storyboards: a sequence of sketches of the
application's interface state to illustrate
application's behavior in response to enduser actions.
– The focus is on behavior, flow, metaphor rather
than implementation details.
SILK (Cont’)
• Basic notation:
– Screen: a sketch of the interface in a particular
state.
– Arrows: connecting two screens. Source is the
component the end-user interacts with by
clicking to bring the screen to the destination.
• Storyboard model constructs a tree (graph)
representation of the program. Not the
entire tree needs to be constructed since
the focus is on key sequences.
Video of SILK
DENIM
DENIM VIDEO
Storyboards (review)
• Tell the user’s experience of completing
their tasks
• Series of frames depicting key steps in
reaching the user’s goal
– Can use a pin board for easy
rearrangment/editing
• It’s about the user, not the equipment
Storyboards (more review)
• Describe the interaction context
– Useful to show user in at least 1st frame
(establishing shot)
– Show relationship between the user and the
environment
– Show relationship between the user and the
system
• A series of actions or operations toward a
goal
– Choose the goal
– Plan ordered set of actions to achieve the goal
– Depict each action and outcomes
Examples
• http://vis.berkeley.edu/courses/cs160fa06/WWW/lecturesWWW/sketchingstoryboarding/walk028.html
• http://vis.berkeley.edu/courses/cs160fa06/WWW/lecturesWWW/sketchingstoryboarding/walk031.html
• http://vis.berkeley.edu/courses/cs160fa06/WWW/lecturesWWW/sketchingstoryboarding/walk033.html
Uses
• Communication and visualization
– Large amount of info or sequence of events
– Motion and mechanisms
• Brainstorming
– Solving complex problems; exploring alternatives
• Planning
– Like planning in detail what to film
– Forces designer to think through the possible
outcomes with the design
Shots
• Wide
– taken from a long way away
– people look quite small in this kind of shot
– can see what sort of place the scene is set
in
• Long
– closer than a wide shot
– can see the person from head to toe
– can still see what's around them
http://www.mediaed.org.uk/post
ed_documents/Storyboarding.ht
More shots
• Medium
– from just below their waist to just above
their head
– close enough to see people's expressions
– can see what they are doing with their
hands as well
• Close-up
– shows just the head of the person
– use when it's important to see someone's
expression
Example: Yahoo
• http://kevnull.com/presentations/iasu
mmit2006/iasummit.swf
Exercise
• Storyboard your interface and one of
your tasks
– think about
– think about
system
– think about
– think about
outcomes
the user and goal
the environment and your
the steps
the initial state and the
Administrivia
• Please create a webpage for your
project so I can link it to the course
site.
– Project submissions
– Supplemental material
• Please ANONYMIZE the contextual
inquiry subjects in your reports.