CS160 Discussion Section Feb 27 2007 David Sun. Rapid Prototyping Interface builders can easily show the look-and- feel of a design but requires considerable.

CS160 Discussion SectionFeb 27 2007 David Sun

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)

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.

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/cs160-fa06/WWW/lectures-WWW/sketchingstoryboarding/walk028.html

• http://vis.berkeley.edu/courses/cs160-fa06/WWW/lectures-WWW/sketchingstoryboarding/walk031.html

• http://vis.berkeley.edu/courses/cs160-fa06/WWW/lectures-WWW/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

http://www.mediaed.org.uk/posted_documents/Storyboarding.html

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

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/iasummit2006/iasummit.swf

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

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.