Info.Design © Writing for the Web Workshop Crafting Usable Content

Info.Design © 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

Info.Design © 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.

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

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

Info.Design ©  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

Info.Design ©  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 !

Info.Design © 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.

Info.Design © 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.

Info.Design © 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.)

Info.Design © Example  Crate and Barrel Hell

Info.Design © 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.

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

Info.Design © 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.

Info.Design © 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.

Info.Design © 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.

Info.Design © 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.

Info.Design © Chunk and Layer Text: Incorporate Visual Strategies  Create visual page layout:  indent text  limit line length to approximately 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

Info.Design © 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?)

Info.Design © 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.

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

Info.Design © 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

Info.Design © 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”).

Info.Design © 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

Info.Design © 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.

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

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

Info.Design © 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.

Info.Design © 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.

Info.Design © 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.

Info.Design © 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

Info.Design © 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.