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

8. Storyboards (more review) Describe the interaction context –Useful to show user in at least 1 st 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/lectures- WWW/sketchingstoryboarding/walk028.htmlhttp://vis.berkeley.edu/courses/cs160- fa06/WWW/lectures- WWW/sketchingstoryboarding/walk028.html http://vis.berkeley.edu/courses/cs160- fa06/WWW/lectures- WWW/sketchingstoryboarding/walk031.htmlhttp://vis.berkeley.edu/courses/cs160- fa06/WWW/lectures- WWW/sketchingstoryboarding/walk031.html http://vis.berkeley.edu/courses/cs160- fa06/WWW/lectures- WWW/sketchingstoryboarding/walk033.htmlhttp://vis.berkeley.edu/courses/cs160- fa06/WWW/lectures- 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. http://www.mediaed.org.uk/post ed_documents/Storyboarding.ht ml 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/iasu mmit2006/iasummit.swfhttp://kevnull.com/presentations/iasu mmit2006/iasummit.swf

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.