1 / 17

CS160 Discussion Section

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 programming effort to get it to work and to show the behavior (flow) of the interaction (see Tiny Fingers paper).

sjoey
Download Presentation

CS160 Discussion Section

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 http://www.mediaed.org.uk/posted_documents/Storyboarding.html

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

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

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

More Related