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