1. Introduction to Web Authoring Bill Hart-Davidson hartdav2@msu.edu AIM: billhd30 Session 10 www.msu.edu/~hartdav2/wa.html

2. Today in Class… 1.Information Design for Task-Oriented Communication - examining tutorials to derive structure - try out a tutorial 3.Preparing to design your own tutorial: do the task! 4.Storyboarding 5.CACMC representatives In Class Activity to post for today: link to your team process log

3. Don’t Forget You are keeping a project log for this project.

4. Tutorials: Semantic Structure 1.Look at the three sample tutorials on the class page. 2.Describe the “semantic structure” of a tutorial (see Zeldman) based on these three*. 3.There are some cues on the “structure” slides ahead…remember those? 4.Now go find another tutorial example on the web - how does your structure hold up when compared with this example? *Bonus: express the structure using actual references to html elements

5. Why Semantic Structure? I will use the structure we collectively describe to build the CSS for this project. You will be deciding your own fate, to some degree, because you’ll be creating your own tutorials to fit within the structure.

6. UA: Format & Features UA is organized in a task-oriented manner, often in the form of discrete steps which the user follows. Overview of task Pre-reqs Steps 1 through N Troubleshooting Variations Formats can vary quite a bit in length and style, ranging from whole books (e.g. Web Design for Dummies) to user forums where specific queries are made FeaturesFeatures

7. UA: Visuals UA visuals tend to be functional in nature and include text and type elements, graphic elements, diagrams, and pictures. They serve 2 general purposes… To illustrate a procedure or feature To orient the user Arrows that point to the next step, type that distinguishes a “Warning”, numbers for steps examples Arrows that indicate the direction to turn a knob, screen shot highlighting a menu choice

8. What’s In a Proposal? “Chunks” title local navigation (within the tutorial itself) global navigation (from tutorial to other tutorials) authors table of contents overview summary (what you will learn) pre-requisites (what you need to do the tutorial) rationale (why what the tutorial teaches is useful) task task title task description step image, process image, outcome example (e.g. code snippets) description of task outcome (a.k.a. “success condition” and/or “failure condition”) error recovery finished product (description? Image?)

9. Storyboarding: Preparing for Next Time Do the task you are trying to teach For each step, draw the “scene”…for most of the tutorials, this will be what’s on the desktop of the user’s computer …or…take a screenshot!

10. Screenshot: making a powerpoint presentation Here we see the user viewing a slide. Note the other slides in the presentation can be accessed using the slider on the right.

11. In class next time: We’ll make storyboards of your task using screenshots & powerpoint.