Introduction to Web Authoring Bill Hart-Davidson AIM: billhd30 Session 10

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

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

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

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.

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

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

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

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!

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.

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