Writing For The Web SAINT MARY’S COLLEGE Mar 6, 2007 Vinu Warrier Associate Principal Writer vinu.warrier@stamats.com 800-553-8878 ext. 5149 Agenda 1. 2. 3. 4. 5. 6. 7. 8. 9. What Web Writing is and Why it’s Important The Right Process for Web Writing Audiences for Web Writing How Web Writing Differs From Print How to Write Visual Copy How Good Writing Skills Count The Art of Editing How Web Writing Persuades The Many Kinds of Web Writing I. WHAT IS WEB WRITING AND WHY IS IT IMPORTANT? All Web Users Have Goals • • • • • Locate knowledge Complete a task Amuse themselves Keep up/keep current Interact/connect Users Accomplish Goals Through Words, not Pictures • • • Content = everything on site, but words come first Reading is the number one thing people do on the Web—most spend overwhelming amount of time reading words on pages A Web site communicates primarily through language (not code) Language has the Biggest Impact on User Experience • Language is as important as design • Users make decisions based on what they read • Users should be called “Readers” Yet Writing for the Web is not Taken Seriously • • • Good writing is the exception rather than the rule Many don’t yet acknowledge that writing is a big part of what online experience is about Writing is the most important link in the chain of devices, technologies, software, and interfaces that drive people across the Web What Readers Often Find: Writing Blunders •Catalogs and brochures http://www.atlantic.edu/program/degrees/aasDegrees/accountDegree.htm •Information dumps http://arngren.net •Non-visual text layouts http://www.barclaycollege.edu/Information/default.asp •Non-persuasive prose http://www.smc.edu/comm/ •Too many choices www.classesusa.com Just Plain Bad Writing Your inquiry about the use of the entrance area at the library for the purpose of displaying posters and leaflets about Welfare and Supplementary Benefit rights, gives rise to the question of the provenance and authoritativeness of the material to be displayed. Posters and leaflets issued by the Central Office of Information, the Department of Health and Social Security and other authoritative bodies are usually displayed in libraries, but items of a disputatious or polemic kind, whilst not necessarily excluded, are considered Individually. Why Does This Happen? • • • • Copy is institution-driven, not audience-driven Copy developed independently of architecture and design Copy is an afterthought Web sites developed by webmasters, chief technology officers, programmers, etc. with quantitative, non-writing backgrounds Writing for the Web is Crucial to Quality Sites • • • • Quality content/copy differentiates successful Web sites from others Successful Web sites employ professional writing, editing, and publishing strategies and tactics. Successful Web sites make life easier for readers, have large and loyal audiences, help accomplish institutional goals, and present an accurate and productive image to the world. Successful Web sites do not depend on technology to be successful. What Web Writers do: • • • • • • • Provide accurate, compelling copy Convey right messages to right audiences at right time and place Guide audiences to information, education, and action Create language that draws search engines Write new copy and creatively repurpose existing material Develop copy in ways that make the site accessible to all readers Lay foundation for successful Web sites Web Writer Skills Make a Difference • • • • • • • Copywriting Editing & proofreading Attention to detail Time management Layout Conceptual thinking Creative expression EXERCISE 1: WRITE A BRIEF ANALYSIS OF YOUR WEB WRITING PROCESS. II. THE RIGHT PROCESS FOR WEB WRITING What Web Writers Write • • • • • • Marketing material Instructional & academic copy Journalism Factual information Legal information Additional assets – Images & diagrams – Sound & video – Captions When the Process Fails • Content doesn’t move through editorial process fast enough • Lack of a review process • Too many writers or not enough writers • No one single source or final authority • Poor communication flow in writing teams The Key Elements of a Good Process 1. 2. 3. 4. 5. 6. Clarify goals Understand readers Write Web-appropriate copy Write concise copy Reshape copy Socialize copy Who’s in Charge? Professional content management requires professional publishing processes if it is to succeed Those who understand site content is built on well-written copy first Those who are skilled in process, technology, and communication Those who will facilitate crossdepartmental collaboration Process Begins with Information Architecture Provides organization and layout Welcome Readers of content Develops navigation, search, and metadata Built on language classification The backbone for content 1st Task 2nd Task 3rd Task The Web is a Publishing Medium A Web site publishes content targeted at a group of readers and will benefit from an editorial infrastructure: • Managing Editor/Publisher: responsible for whole site • Editor (s): responsible for nature and quality of content per section • Author(s): creates content • Copy Editor: ensures content is understandable and readable A Working Editorial Process Delivers: Complete and accurate information Information in a user-friendly format Consistent and natural writing style without errors Multiple writers drawing from a variety of information sources A Systematic Approach to Content Creation • • • • Develop a publishing & promotional schedule Review, repurpose, remove old content Periodic content review at least once a year Regular content review once a month: – Critical Information – Accuracy – Search – Applications & forms – Links Measure Process by Measuring Content Usability tests, focus groups, Web logs & analytics, and reader surveys determine: The value your copy delivers and how quickly and easily readers complete tasks The way people respond to it and the actions it drives them to undertake Value The overall accuracy and timeliness of content & metadata How much staff time it costs to create, edit, and publish content Response Action In a Good Process Web Writers Collaborate • • • • • • Information architect—organization of content & navigational structure Content strategist—plans content, key messages, themes, tone, style Web editor—managing ongoing content & coordinating contributions (now done by CMS) Designers—designs overall look & interface Developers—building site through authoring tools (Flash) or scripting/markup languages (HTML, CSS) SEO specialists—optimizing Web pages for search Sample Goal Categories • • • • • • • • • • Establish institutional/departmental identity Exchange information Inform Instruct Motivate Persuade Provide news Provide technical support Recruit Request information EXERCISE 2: LIST YOUR AND PRIORITIZE YOUR CONTENT GOALS. III. AUDIENCES FOR WEB WRITING Web Writers Need to Know • • • • Grammar, punctuation, spelling, language Publishing conventions and policies Awareness of copyright, libel, and obscenity issues How to check materials and sources for accuracy • Awareness of search engine optimization techniques • Academic world in which they function Reader Characteristics • Practical and impatient • Conservative • Skeptical • Fickle • Seeking guidance Web Readers are Impatient • Less experienced readers spend an average of 35 seconds on a homepage and one minute on an interior page. • More experienced readers spend an average of 25 seconds on a homepage and 45 seconds on an interior page. (Web User Experience 2004 Conference) Web Writers Need to Find Out: • Who are we talking to? • What are their tasks? • How can we help them be effective? • How do we measure task completion? Ask Your Team: • What is critical to your readers? • What are they not getting? • How do they consume content? Identify & Limit Readers/Audiences • Prospective students • Prospective graduate students • Prospective faculty • Community leaders • Alumni • Donors • Parents • Current students Listen Before you Write • • • Go beyond research to audiences Only way of engaging audiences meaningfully Enables you to put a human face on your audiences Listening Opportunities • • • Add feedback opportunities through links to quick surveys Build onsite discussion areas/blogs Visit outside discussion areas/blogs Create Personas • Focus on a representative audience member/type • Identify their goals and tasks (1-3) • Create fictional identities • Build from usability research Personas Should Include: • • • • • Personal Information Home, age, hobbies, media habits, personality Academic Information Major, GPA, high school or program year, extracurricular interests Internet Usage Experience, primary uses, favorite sites, hours online, computer connection User goals Information preferences, academic goals, outside needs, competitor information University objectives Connect him to faculty and research, retention, promote accomplishments Profile: Dhalsim the Dutiful It’s 7am Friday morning and Dhalsim has been up for at least an hour. He has been performing a literature review for his professor and wants to impress him. It is an honor to work with Dr. Gildafresh, a world-renown Engineer. He knows it is important to make his family and others who depend on him proud. Lately he has been thinking a lot about what he should do next year since he’ll be graduating. He is torn between staying in the United States and returning to India. He would like to be near his family, but it is more important that he finds a good job to help support his other siblings. Getting a good job after graduation was ultimately why he chose Electrical Engineering as a graduate degree. His whole family has been sacrificing a lot to pay for college in the U.S. and he feels obligated to help finance his other siblings high education opportunities. Written for Specific Readers www.providence.edu EXERCISE 3: IDENTIFY KEY READERS AND SKETCH A PERSONA FOR ONE. IV. HOW WEB WRITING DIFFERS FROM PRINT Print Content • Linear and provides pre-determined order • Documents form a whole & provide entire information • Uses familiar conventions: table of contents, prefaces, indexes, etc. • Never changes Web Content • Non-linear and encourages visitor to take their own path • More flexible and up-to-date • Content divided into multiple hyperlinked pages • More informative and less conceptually driven How People Really Read The Web • Surveys and studies consistently show that around 80 percent of test users always scan a page first before reading a section word by word. Reading • Progression is word by word across the page and down • Key information is not visually called out • Meaning is gathered from the syntax (the way words are put together to form phrases or clauses) vs. Scanning • Progression is rapidly around the page as user looks for key words and phrases • Key information is visually called out • Meaning clusters around key words and phrases as the user finds them. Typical Web Page • Lots of running copy • No visual call-outs • Left-to-right, top-to-bottom progression Scannable Web Page • Headers and short intro paragraphs • Photos and graphics • Bulleted lists, boldface copy, boxed copy www.parisreview.com Write Classic Newspaper Structure • Header that summarizes • Lead/intro paragraph delivers the conclusion • Body copy delivers the details • Who, what, why, where, when www.latimes.com Readers’ Web Preferences • • • • Users can enter a site at any page and move anyway they choose Online version of a given topic should be about half word count of print version Users read about 25 percent more slowly from screens than from paper Users don’t like to scroll through blocks of text To Meet Reader Preferences • • • • Make every page independent & able to explain itself Link to background or explanatory information Place most important information at top of page Orient & guide Encourage Scanning Visually • Illustrations • Photos with captions • Large type • Graphics/photos • Color For Scannable Copy, Write: • Short paragraphs • Heads and Subheads • Bulleted Lists • Highlights and boldface • Quotes and sidebars Map Section Content & Copy • Use outline, storyboard, flowchart, 3 x 5 cards, diagrams • Welcome Readers Provides organization and layout of your section content • Determines length & type of pages • Transforms your section into site or sub-site 1st Task 2nd Task 3rd Task How to Map Copy • • • • Study site architecture and content inventory Study the template—layout, design elements, position of images & photos, links Develop an eyepath between elements and text – Visual hierarchy – Guides readers Write in relation to visual environment V. HOW TO WRITE VISUAL COPY Long vs. Short Copy • • • • Short copy invites, introduces, and persuades – Top-level pages Long copy should be deeper on site – Two clicks in Long copy needs to be well-written and relevant – Compelling message, info, etc. – Gives readers what they want to hear Long copy doesn’t need to look long – Break up text into small paragraphs with heads, subheads Start With Good Heads • • • • Main idea of the page and clearly indicates content No longer than seven words on average Clear to reader why it’s important Use four-level text hierarchy on 1st and 2nd tier pages Break Up Text • • • • • Start page with conclusion (inverted Pyramid style) Two- to three-sentence paragraph of introductory copy to summarize Short paragraphs divide information into useful chunks Each paragraph should contain one main idea; second paragraph contains second main idea, etc. Sometimes one or two sentences per chunk Love Subheads • • • Keep readers moving forward Emphasizes word, phrase, or idea from copy Breaks up blocks of copy into readable chunks Depend on Lists • • • • • • Best way to highlight important information Eases reading and slows down scanning eye Satisfy the list-hungry Use more lists than print, but limit items to 9 Use numbered when sequence is important Use bulleted when sequences is not important Favor Quotes, Sidebars, & Captions • • • • Pull quotes (a newspaper convention) and sidebars help break up monotony Should be more abbreviated in length than body text Must be focused on a specific subject area Captions must uniquely identify illustration, table, or photo EXERCISE 4: REWORK YOUR PAGE TO MAKE IT VISUAL AND SCANNABLE. VI. HOW GOOD WRITING SKILLS COUNT Web Copy Should: • • • Be direct, clear, and concise Balance information and appeal Speak to different audiences differently, yet maintain consistent tone The Web Doesn’t Need Much Copy • • • • Full sentences and paragraphs get in the way of reader needs Readers want to get to the point Most people don’t read full sentences on the Web Write concise links that give precise info Follow Orwell’s Rules 1. Never use a metaphor, simile, or other figure of speech that you are used to seeing in print. 2. Never use a long word when a short one will do. 3. If it is possible to cut a word out, always cut it out. 4. Never use the passive [voice] where you can use the active. 5. Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent. 6. Break any of these rules sooner than say anything outright barbarous. Overwritten • Macbeth was very ambitious. This led him to wish to become king of Scotland. The witches told him that this wish of his would come true. The king of Scotland at this time was Duncan. Encouraged by his wife, Macbeth murdered Duncan. He was thus enabled to succeed Duncan as king (51 words). Better • Encouraged by his wife, Macbeth achieved his ambition and realized the prediction of the witches by murdering Duncan and becoming king of Scotland in his place (26 words). To the Point http://dukemed.duke.edu/ VI. THE ART OF EDITING Good Web Writing to do List • • • • • Avoid clever or cute headings Limit metaphors Use simple sentence structure Control humor and stay away from puns Use an informal but not incorrect style when appropriate Determining Pace • • Pace should be appropriate to reader expectations, voice, tone Pace should be varied by page and by paragraph – Mix long and short sentences – Start sentences differently • Reverse verb-noun relationship • Pace should change based on specific pages and tasks – Recruiting messages that build excitement – Privacy links that explain policy • Pace determines how slowly or quickly people read – Quick: short words, short sentences – Slow: pace is a crucial element in holding audience attention and creating momentum Active Voice • • • • Emphasizes person or thing acting Built on strong verbs instead of forms of “to be,” past participles, and strings of pronouns Helps make text concise, interesting, and clear Active voice: – You can use graphic frames to keep footers visible at all times. • Passive voice: – Graphic frames can be used to keep footers visible at all times. Omit Unnecessary Words • Weak linking verbs – You will want to test your Web pages with different browsers. – Test your Web pages with different browsers. • Prepositions with verbs – Wrong: I have separated out different attributes that can be applied to the tag. – Right: I have separated different attributes that can be applied to the same tag. • Too many Prepositions – Wrong: The most important part of the functionality of the site is meeting the marketing goals. – Right: A site’s most important function is meeting marketing goals. Omit Unnecessary Words II • Intensify words and vague adjectives (very, really, a bit, mainly, etc.) – Wrong: Ipods are very common and very popular. – Right: Ipods are common and popular. • Phrases that needlessly repeat meaning – Wrong: The Writer’s Guideline is a service provided free of charge. – Right: The Writer’s Guideline is a service provided free. • Redundant adjectives, adverbs, conjunctions, and phrases – Wrong: This revolutionary new product adds audio to your site. – Right: This revolutionary product adds audio to your site • Verbs converted to nouns – Wrong: Take into consideration the cost of maintaining data. – Right: Consider the cost of maintaining data. Web Style Considerations • • • • Consistency of word choice and terminology, spelling, and grammar Use informal but not incorrect language For international audiences: simple sentences, controlled vocabulary, unambiguous meaning Avoid sexist, discriminatory language Paragraph Structure • Start paragraphs with topic sentences: – Gets to the point – Provides context and explains why information is important – Previews organization • • Use topic sentences in combination with specific heads and subheads Follow topic sentence with 1,2,3 structure based on cause and effect – Writing for the web is challenging for most people. • The web works differently than print • Web audiences are impatient • The Web is constantly changing Word Choice • Avoid buzzwords and clichéd modifiers – “State of the Art,” “Cutting-edge,” “Academic Excellence” • Favor simple words over ten-dollar words – “Use” instead of “utilize” – “Ease” instead of “facilitate” • Use concrete, precise, definite, specific words – “Ten” instead of “a lot” – “Bright orange” instead of “colorful” – “Blue-eyed” instead of “beautiful” Turn Copy into Links • "In the following section you will be provided with a range of information that should help you decide which is the right mortgage for you." vs. • “Click here to find the right mortgage for you.” Avoid Overediting • • • • • Eliminates necessary info, kills emotion, drains life from copy Removes ability of passage to connect with audience on deeper level Creates “Dead Fragments”: Original MLK 1963 – I have a dream that my four children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character. Overediting MLK 1963 – Have sons judged by character and not color. Key Editing Questions • • • • Is this clear? Is there a simpler way to say this? Is there a shorter way to say this? Is this necessary? EXERCISE 5: EDIT AND REWRITE YOUR PAGE FOR CONCISION. VIII. HOW WEB WRITING PERSUADES What Marketing Copy Can Do • Send consistent messages • Balance institutional integrity with the need to appeal to various audiences • Extend institutional brand and build/enhance reputation • Communicate character Map Marketing Content • Work from Existing Architecture • Provides organization and layout of your marketing • Clarifies and balances tone • Determines when to sell/not sell Welcome Readers Sell Inform Inform Marketing Tips • Write like you are closer to the reader than in print – Balance formal/informal tone • Write to your audience one-to-one – Use 2nd person POV: “You” • • Be honest and accurate – Validate claims: links to off-site supporting information, third-party input/endorsements (i.e. academic rankings) Be sensitive to tone and subtext – “We will respond to your email within 24 hours.” Emphasize Benefits Over Features • • • • • • What’s in it for me? Get reader’s attention right away and be specific Use concrete heads and subheads and action verbs Avoid hyperbole, negative constructions, and superlatives (most, best, perfect, greatest) Make calls to action clear: what should readers do Use human voices Features-driven Copy “At X college, we pride ourselves on the personal attention our professors give their students. Our student-to-faculty ratio is 13:1, and our class size averages 22 students.” Benefits-driven Copy “The only teacher/student ratio that matters is 1:1. Many colleges talk about small classes and how that facilitates interaction. Well, elevators are small too, and not much communication happens in there. The point is this: real interaction happens between two people, one on one, and that’s the kind of teaching that takes place at Hollins.” http://www.yorku.ca/web/index.htm Your Sub-Site Should Welcome, Persuade, and Guide • • • • Communicate how your site/section works Establish an institutional brand while conveying your sub-brand Convey what you can do for readers Keep readers feeling like they belong http://www.ucla.edu/ Keep in Mind • • • It’s not an essay It’s not about you It’s not a brochure EXERCISE 6: REWRITE A PAGE OF YOUR SECTION TO EMPHASIZE BENEFITS. IX. THE MANY KINDS OF WEB WRITING Web Writing Types • On the Web you also write: – Legal pages, glossaries, support information – Instructions for form completion – Links, animated text, and dynamically generated text – Site maps, error pages, copyright and update pages, etc. Copy Readers will Read • • • Clear directions and instructions Comprehensive service or product descriptions Sincere copy that builds trust Copy Readers won’t Read • • • • Long policy pages Instructions on how to use or navigate site Long FAQ pages Self-serving copy – Mission statements Page Titles, Footers, Contact Info, Forms, Instructions Help readers understand where they are and why they are there Help readers know what to do next Simple, clear, and obvious and compelling Should work like good signage Links Provide shortcuts to relevant information Make Web fundamentally different from other media Work best when you provide only most pertinent links Links should answer reader questions: – Where am I going? – Where have I been? – What will this link do? – What’s in it for me? Web Writers Write Metadata • Metadata is language linked to the search process • Works on keyword phrases and one word metatags embedded in HTML • Built on heads, subheads, running copy • Connects to the Web Community To Write Metadata Do keyword research with WordTracker™ Use real text, not graphical text Work into heads and subheads Employ keyword phrases throughout entire page Writing in Meta-Tags <> • • • • • • • List all possible query terms & synonyms in keywords meta-tag Use a controlled vocabulary of common terms from subject areas Use only keywords that describe main topic of page Create single-line title text of no more than 60 characters for <TITLE> tags Titles should be clear out of context Give different pages different titles Write short summary for each page in description meta-tag (150 characters or less) What is Web Accessibility? • • • Americans with Disabilities Act (ADA) Section 508 Web Accessibility Initiative/WCAG Web Accessibility Accommodations • • Deaf/auditory – Captions for audio content – Reading-centered layout – Images for context Blind/visually impaired – Screen readers – Text & voice-based browsers (e.g. Lynx) How Does it Impact Content Authors? Most accessibility issues are design dependent, however there are a few things a writer can do to make sure their copy is accessible to all users. – Text equivalents for non-text images for visually impaired • Write alt tags for all images on your Web site – Captions for hearing-impaired • Ensure proper association of captions for captioned content – Maintaining clear and simple language appropriate for site content The Importance of Alt Tags Alternative text tags—text contained in the HTML code only—appear in place of images when the browser preferences are set for text only (image viewing option is turned off). Including them on your site enables visually impaired user reader programs (speech synthesizers) to read the alt tag aloud. On a PC, when a user mouses over an image, the alt tag becomes visible—it appears as text. Alt tags are not generally visible on a Mac unless the images are turned off. Establish Standards • Graphic design interface/identity guide • Content/copy guide • • AP or Chicago Manual of Style for language • “Web site” vs. “web site” • “Home page” vs. “homepage” • Develop a Web style guide Standards & accessibility guide EXERCISE 9: IDENTIFY SEARCHABLE KEY WORDS AND PHRASES. In Closing, Remember These Content Rules • Web users are interested first and foremost in content. • Content is written language first • Design can and should support language. • Readability (that is, the user’s ability to get what he/she wants from the site as quickly and as easily as possible) should never be sacrificed for design purposes. …and These Copy Tips • • • • • • Visualize the language you use Write instructions as if they were for you Search for and answer unspoken questions Say it plain first, then gussy it up Develop a flexible style Talk to your Web designer and team …and Keep in Mind • • • • Knowledge (content) is heart of a college or university You publish more, read more, communicate more than anyone/anything Academics are original information workers You should be good at writing and publishing Web content Resources • Content Critical: Gaining Competitive Advantage Through High-Quality Web Content; Gerry McGovern and Rob Norton • The Web Content Style Guide: An Essential Reference for Online Writers, Editors and Managers; Gerry McGovern and Rob Norton • www.useit.com (Jakob Nielsen) • Information Architecture for the World Wide Web; Louis Rosenfeld and Peter Morville • Don’t Make Me Think: A Common Sense Approach to Web Usability; Steve Krug • Designing Web Sites That Work: Usability for the Web; Tom Brinck, Darren Gergle, & Scott D. Wood Thank you! Vinu Warrier Associate Principal Writer vinu.warrier@stamats.com 800.553.8878 office www.stamats.com