1. Info.Design © 2005 www.infodn.com Writing for the Web Workshop Crafting Usable Content

2. Info.Design © 2005 www.infodn.com Benefits of Content  Today content increasingly drives the “value” of the organization and the individual. By and large, those who are good at content will prosper. Those who are not will perish. Content Critical Gerry McGovern/ Rob Norton, 2002

3. Info.Design © 2005 www.infodn.com To Craft Content, We Decide  We must decide what parts should be grouped and labeled  We must decide how the boundaries between these parts should be perceived.  We must argue effectively why these choices support our users.

4. Info.Design © 2005 www.infodn.com We can help users by:  Providing expectations  Chunk and layer text  Make text concise  Make text clear

5. Info.Design © 2005 www.infodn.com We can help users by:  Providing expectations  Chunk and layer text  Make text concise  Make text clear

6. Info.Design © 2005 www.infodn.com  Your user wants to see the key structure in your site.  You want to put that reader “in control.” Help Users by Incorporating Expectation-Driven Structure

7. Info.Design © 2005 www.infodn.com  Build a “visual” structure by writing a blocks of text that that:  predicts (preview of coming attractions)  controls (limits the possibilities)  obligates (makes promise to the reader) Help Users by Incorporating Expectation-Driven Structure !

8. Info.Design © 2005 www.infodn.com Expectation Structure: First Sentence  Use this to introduce readers to key ideas that follow.  Or write a sentence that catches readers’ eye but then leads the reader into the key ideas.

9. Info.Design © 2005 www.infodn.com Expectation Structure: Key Ideas  Place these in the order that you will discuss them in the following information.  Use each key idea and incorporate it as a heading.

10. Info.Design © 2005 www.infodn.com Expectation Structure: First sentence in headings  Place the “subheading” ideas in the order you will present them (Lead the reader to the key ideas in the subheadings.)

11. Info.Design © 2005 www.infodn.com Example  Crate and Barrel Hell

12. Info.Design © 2005 www.infodn.com Exercise: Part 1  Envision an audience like yourselves who want content on strategies for writing for the web.  What would you want to know? Write them down.

13. Info.Design © 2005 www.infodn.com We can help users by:  Providing expectations  Chunk and layer text  Make text concise  Make text clear

14. Info.Design © 2005 www.infodn.com Chunk and Layer Text Our Goals  Users preprocess information in four seconds. Our goal is to help them.  As “architects of information” we can promote writing for the web from our chunking and labeling, perspective.  Our goal is to look at each piece of information we have assembled to help the user complete the task.

15. Info.Design © 2005 www.infodn.com Chunk and Layer Text: Process for Organizing  Shape each chunk of information so readers can “see the text” — 1.Look at each piece of information. Ask yourself, “why does the user want this information” 2.Ask: “how does this relate to the parts of the whole?”  Shape information so users can find it and use it — share it, consider it, debate it, and act upon it.

16. Info.Design © 2005 www.infodn.com Chunk and Layer Text Process for Organizing  Use headings and subheadings to show hierarchy and connections  For each chunk of information, identify a heading or a subheading. It is your goal to assemble these pieces of information so your reader can “use” them.  Place only one key idea in each grouping of information.

17. Info.Design © 2005 www.infodn.com Chunk and Layer Text : Process for Organizing (Cont.)  If you have done your work envisioning your audience, it should be very easy to look at each chunk of information and...  categorize the level of information.  identify responsibility of the person writing this piece.  assemble the pieces to meet your document’s purpose.

18. Info.Design © 2005 www.infodn.com Chunk and Layer Text: Incorporate Visual Strategies  Create visual page layout:  indent text  limit line length to approximately 10-12 words; 2-4 inches  put items and sequences in bulleted lists (of no more than 8 items)  use ample headings and subheadings  put blank lines between paragraphs (remember rules of proximity)  NEVER make readers scroll to the right

19. Info.Design © 2005 www.infodn.com Chunk and Layer Text: Incorporate Visual Strategies  Incorporate usable type:  bold key words (it’s easier to read)  use typefaces and sizes to distinguish headings and subheadings from base text (small images are an option)  use sans serif font faces (Arial) for headings (check out the type built specifically for web display)  AVOID ALL CAPS AT ALL TIMES BECAUSE IT’S DIFFICULT TO READ (ISN’T IT?)

20. Info.Design © 2005 www.infodn.com Exercise: Part 2  Based on what your audience wants to know, regroup the exercise text.  Pay special attention to the headings and subheadings you build.

21. Info.Design © 2005 www.infodn.com We can help users by:  Providing expectations  Chunk and layer text  Make text concise  Make text clear

22. Info.Design © 2005 www.infodn.com Make Text Concise: Use Fewer Words  Use 50% fewer words than you would in print.  Use chunks, headings, lists, subheadings to convey information.  Bulleted lists might introduce a longer discussion or provide links

23. Info.Design © 2005 www.infodn.com Make Text Concise: Activate the Passive  Use a character/action driven structure of writing text.  Users will want to know who is doing what.  Avoid abstract nouns (such as: “A determination was made”).

24. Info.Design © 2005 www.infodn.com Make Text Concise: Use Simple Sentences  Use simple sentences  simple does not equal “dumbed down”  Archive long texts written in a complex style  enable your reader to access dense documents

25. Info.Design © 2005 www.infodn.com Make Text Concise: Incorporate Heads & Blurbs  Build concise easy to understand headings and subheads  Incorporate blurbs  Condense the text to provide information about the information  Be sure that if the blurb links to additional text, there really is more to say.

26. Info.Design © 2005 www.infodn.com Exercise: Part 3  Based on what your audience wants to know, reshape text to help them out

27. Info.Design © 2005 www.infodn.com We can help users by:  Providing expectations  Chunk and layer text  Make text concise  Make text clear

28. Info.Design © 2005 www.infodn.com Make Text Clear: Follow Old/New Rule  Follow the “old/new rule” to ensure easy comprehension  Put “old” information at the beginning of the sentence  Put “new” information at the end  Use clear antecedents (be sure your reader knows who the character is)  Cut verbage …. TIP: Write in 4-Inch Space.

29. Info.Design © 2005 www.infodn.com Make Text Clear: Show Relationships  Use associative links  Use links rather than words to help your readers comprehend density in content.  Enable your readers to see relationships in content.

30. Info.Design © 2005 www.infodn.com Make Text Clear: Use Consistent Tone & Style  Identify a “tone” you want to incorporate on your page.  Ensure the tone supports your audience, purpose, and context  Refer to organizational style guides or CREATE ONE if you do not have a style guide.

31. Info.Design © 2005 www.infodn.com Make Text Clear: Incorporate Visual Cues  To ensure visual understanding, emphasize spatial organization  Spatial organization can engage readers, direct their attention, prioritize the information they see  Maintain visual interest; visual simplicity; and visual continuity

32. Info.Design © 2005 www.infodn.com Make Text Clear: Show Value to Readers  Relate text to what readers want to DO with the information  LAYER information that doesn’t directly support the reader, or provides more information than the reader can understand.