CS160 Discussion Section

1
CS160 Discussion Section
Feb 27 2007 David Sun
2
Rapid Prototyping

• Interface builders can easily show the
  look-and-feel 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)

3
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 end-user
  actions.
• The focus is on behavior, flow, metaphor rather
  than implementation details.

4
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.

5
Video of SILK
6
DENIM
DENIM VIDEO
7
Storyboards (review)

• Tell the users experience of completing their
  tasks
• Series of frames depicting key steps in reaching
  the users goal
• Can use a pin board for easy rearrangment/editing
• Its about the user, not the equipment

8
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

9
Examples

• http//vis.berkeley.edu/courses/cs160-fa06/WWW/lec
  tures-WWW/sketchingstoryboarding/walk028.html
• http//vis.berkeley.edu/courses/cs160-fa06/WWW/lec
  tures-WWW/sketchingstoryboarding/walk031.html
• http//vis.berkeley.edu/courses/cs160-fa06/WWW/lec
  tures-WWW/sketchingstoryboarding/walk033.html

10
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

11
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

12
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

13
Example Yahoo

• http//kevnull.com/presentations/iasummit2006/iasu
  mmit.swf

14
(No Transcript)
15
(No Transcript)
16
Exercise

• Storyboard your interface and one of your tasks
• think about the user and goal
• think about the environment and your system
• think about the steps
• think about the initial state and the outcomes

17
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.