WRA 320 Technical Writing

Transcription

1 WRA 320 Technical Writing Fall 2004 Bill Hart-Davidson Session 15: Storyboarding

2 Tell us about your project What 1. Activities go on there? 2. Actions make up those activities? 3. Operations characterize the specific conditions? What do you aim to transform and why?

3 Target the Activity to Observe Participants + Actions + Activity We will observe (participants) doing (actions) for the purpose of (activity). We will observe EMTs going on a call to provide care and transport for emergency victims

4 What is a Storyboard? In the movies: In web design: A shot-by-shot sketch of the action created so the production team can visualize and better plan a sequence A document that allows 1. An individual or a whole group of people to contribute to the visual look and technical details of a design 2. Planning of design tasks

5 A Storyboard is not A prototype Hi fidelity It is the planning document a team can use to determine what it will take to produce the prototype The visual part of the storyboard is there to help the team make production decisions so it may resemble certain aspects of the final design, or it could be a more conceptual drawing like a flow chart or map of interaction

6 A Storyboard has two parts Media Player View 1 Objects Banner 4 nav buttons Media player scripts To do List Item Item item A sketch of the design And an outline of the info on the page

7 Two scenes :: current & transformed scenarios How things are, now Item Item item

8 What goes in the sketch? A representation of the design work that must be accomplished by the person implementing the design. You should represent each thing that you need to produce, edit, etc. on your storyboard visual

9 Example: A UI visual For example, here is a visual of a leftmargin navigation bar This sketch shows what functions the team has decided that nav bar will support how many buttons it will take and in what order the buttons will appear With these decisions made, now we can begin to break down design tasks

10 Example: UI design tasks Create button icons and integrate into Media Player Screen Template Write javascript for contextual back button User test the button sequence and layout: are they in the right order? Do we need more space between buttons?

11 What goes in the info part? In general, the information sheet portion of the storyboard documents the decisions made and the questions that still remain These can then be added with a to-do list Media Player View 1 Objects Banner 4 nav buttons Media player scripts To do List This Itemsample is Item VERY simplified for item display purposes

12 An Information Architecture Visual Here, the team is considering which pages and objects make up the login sequence from a user s point of view Login View document object

13 Ex: Part of an IA info sheet? View Name: Main Menu Text Images Title src Author.css Name src owner function This might be just part of an info sheet call it a text & images list which helps you plan what needs to be created, how things will be labeled, etc.

14 Using Storyboards Effectively Make the storyboard the focus of your design work, initially before you begin coding or editing Follow this sequence: describe (in your head or to somebody else), draw (visual part), and document decisions/questions (on the info part) Determine the number of basic grids you ll need to have, then do a storyboard for each one Make the to-do list last; it should be the final thing you do once your storyboards are finished

15 Using Storyboards Effectively, part 2 Treat the storyboard as the place to help keep a running tally of the tasks you are doing..and the ones you still need to do Keep the storyboard handy as you begin coding the UA site Use the storyboard to pick up where you left off last time Trade storyboards with peers for consultation before you waste time coding a bad design we ll do this on Tuesday