Writing And Formatting Web Content That Works V03 Notes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Writing And Formatting Web Content That Works V03 Notes

on

  • 2,021 views

 

Statistics

Views

Total Views
2,021
Views on SlideShare
2,021
Embed Views
0

Actions

Likes
1
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Writing And Formatting Web Content That Works V03 Notes Document Transcript

  • 1. Slide 1 Web Content That Works for Today’s Audiences Know how. Know now. Effective Web Content For Editors, Writers, Developers By Anita Schaepe, Web Editor – CIT © 2009 By Anita Schaepe, Web Editor and Content Consultant - CIT, IANR, 2009 Effective, because today’s web users have limited time and attention spans, need to complete tasks and transactions quickly or else they will quit or go elsewhere. Effective= users can complete tasks they set out to do. Studies show readers spend less than 5 seconds on a page (more for home navigational pages- up to 30 sec.) determining if you have the information they need. Catch them while you can. You have 4.4 seconds. GO.
  • 2. Slide 2 Know how. Know now. Effective web content is:  Scannable  Concise  Personable  Meaningful 2 Users come to your site to do 1 of 3 things: 1) Find information; 2) Learn a process, 3) Make a transaction. (shop, buy, register, bank, etc) We will cover each of these elements in more depth. Can we have it all? Simplicity doesn’t have to be meaningless or mean talking down to people or dumbing down language. In fact, talk down to them and you’ve lost your audience. But overload your writing or your page and you’ve lost them, too. Simple sentences appeal to everyone— highly scannable. 1.Write simply; use bullets, subheads, bold fonts, visual cues 2. Get to the point. Avoid non-essential info. Provide calls to action 3. Treat it like a conversation. Users want to interact with a site 4. Show & Tell what content users will find here
  • 3. Slide 3 Know how. Know now. Scannable  Create pages that can be skimmed quickly  Use clues  Visual  Textual  Navigational  Give obvious calls to action.  Focus on text, not graphics. 3 “Scent of information”: an obvious trail to the desired information or product. (Jared Spool- www.uie.com) Visual cues, textual cues, navigational cues Make calls to action obvious. Use RH column, bars, graphics. For registration, Apply here, order here, contact us, etc. How users read on the web: http://www.useit.com/alertbox/9710a.html Focus on text: Most photos get <1 second of notice.
  • 4. Slide 4 Know how. Know now. Use white space effectively  Leave a blank line between paragraphs or when leading up to a list  Avoid running text too far to the right  Keep it clean 4 Running text too far to right reduces readability and speed. Use photos, white space to break up text.
  • 5. Slide 5 Know how. Know now. Use bullet points and lists  Easily scanned  Moves reader to linked page or article  Bullets - un-ordered lists  Numbered lists - ordered lists  Give a brief description of content Coping in Stressful Times During Drought Emotional, physical, and financial aspects of drought- related stress for farm families discussed. (PDF version 524 KB; 4 pages) 5 HTML documents are preferred for reading online. Offer PDF as alternative. Label links to PDFs and other sites by title or topic, not by URL address. This is difficult to decipher onscreen: (http://www.ianrpubs.unl.edu/epublic/live/g1525/build/g1525.pdf) and can interfere with formats. Unlike print publications, it is unnecessary to show the address. Users will access the link by clicking, not typing. List related links of interest including docs. Give a brief description. One sentence or sentence fragment: The emotional, physical, and financial aspects of drought-related stress are discussed, along with recommended coping strategies. (*PDF 703 KB, 4 pages) * PDF requires Adobe Acrobat Reader. Download free. . (Exception for very widely recognized URL’s such as www.whitehouse.gov, or www.Google.com )
  • 6. Slide 6 Know how. Know now. Concise  Readers are impatient!  Be brief  Online reading is difficult  Most important information FIRST  Avoid fluff 6 Being Concise also helps with the ability to scan the page. It is more difficult and uncomfortable to read online than sitting back in your easy chair to read the paper or a novel. Background info may be good information to include in a subpage or elsewhere down the page, but not in the first paragraph. Put yourself in your user’s place. We are impatient and selfish! Provide the facts and information, calls to action, tools, your readers most likely want FIRST, and then links to deeper information, html documents, outside links…. Avoid fluff such as “Welcome” messages and all non-essential information Note about PDFs: Users may have a difficult time reading them; may not know to increase type size or how to use bookmarks, they may take a long time to load for some. We saw this over and over in usability tests performed at UNL.
  • 7. Slide 7 Know how. Know now. Use inverted pyramid style  KISS (Keep It Short and Simple)  Lead with summary  Next - important supporting information  Last – details  Remember, web readers are IMPATIENT! 7 KISS to avoid the Kiss of Death—be long and boring and they are gone! According to Jakob Nielsen of Nielsen Norman Group and useit.com, guru of web usability, readers read 25% slower online than in print, so we should give them about half as much text! Begin with the conclusion! Follow with most important supporting information, then details This helps readers scan for personally valuable information quickly. The readers are in control of what and how much they wish to read.
  • 8. Slide 8 Know how. Know now. Get to the point quickly  Users want information QUICK  Use subheads, sidebars and links  Use one subhead before user must scroll  Write shorter, more concise sentences 8 Nielsen calls this “lean forward style,” and “active, reader driven” content. Use short words, no more than about 5 syllables whenever possible. Word length is one important measure of reading ease by all indexes. (Even though many readers do understand longer words, the shorter the better for fast reading. Time less spent- more tasks accomplished.) On the Web users want to go places, do things, and get the information they need quickly Use subheads, sidebars and links for lengthier articles or background information. Offer printer- friendly pages for reading offline. Write short, concise sentences, short words and short paragraphs - more concisely than you would for lengthier, journals or publications. Make short paragraphs, breaking up the page with appropriate white space (use blank lines or horizontal rule <hr> to visually separate). Use no more than about 5 lines (on the screen) per paragraph. One idea per paragraph. A one sentence paragraph is OK.
  • 9. Slide 9 Know how. Know now. Personable  More conversational than standard print  Use “You” to draw reader in  Text is interaction  Target reader  Use “Words that Work”  Be objective, not promotional  Avoid “marketese” 9 from Dr. Frank Luntz’ Words That Work Use carewords-words that people care about or search with. Ref: www.customercarewords.com According to Ginny Redish, Letting Go of the Words, research shows that people inside an organization overestimate the words their readers know by 25%-30%. Just over half of consumers (54%) claim any familiarity at all with the term ’sustainability,’ and most of these consumers cannot define it appropriately upon probing. – Source: Hartman Group, 2007
  • 10. Slide 10 Know how. Know now. Meaningful  Divide information  Small chunks  Hyperlink together  Give options to dig deeper  Be specific  Link labels should mean something  7-10 words optimal  Tell them what they will get  Offer links, related pages, calls to action 10 Divide into small content-rich chunks. Link labels should be “dull as dirt” Cannot be cute or include clever titles---should be able to read out of context and know what is meant If you offer promise of more information, make sure you deliver what is expected. Put addresses in the usual 3-4 address line format-as expected.
  • 11. Slide 11 Know how. Know now. Use active voice  Use subject, verb, object  Avoid passive tense  Use strong, specific, actionable verbs.  Begin lists with an action verb or with a specific noun.  Use the imperative form for instructions 11 Example: Passive – A new tool is being researched by the industry to optimize production. Vs. Active – The industry is researching a new method for optimizing production. Imperative example: Use the imperative form when instructing: (as I did above) • Use the UNL Winter Wheat Variety Selection Tool to screen varieties for the traits you are interested in, or, •Read about the variety characteristics and view images in the Virtual Tour. •Check Wheat Variety Testing results from UNL. After locating a few varieties that sound good to you check to see how your selected varieties performed in trials near you. Select the crop year and a list of available tables will show by county or region (html & .xls formats). (politely)
  • 12. Slide 12 Know how. Know now. Examples: before 12
  • 13. Slide 13 Know how. Know now. BYF after 13 Blank lines, bolded, short paragraphs, important program information first. Visual cues, calls to action.
  • 14. Slide 14 Know how. Know now. Before 14 Notice the flashy yellow New sign, which appears promotional can be detracting. Includes lengthy welcome message, blocks of text which are not the first items users would come here for.
  • 15. Slide 15 Know how. Know now. Use of bullets 15
  • 16. Slide 16 Know how. Know now. Good 16 Too much text, but uses bullets.
  • 17. Slide 17 Know how. Know now. Better 17 Ordered list, key points in bullets, links to further info, first things first
  • 18. Slide 18 Know how. Know now. 18 Another example of bulleted information and links to more information
  • 19. Slide 19 Know how. Know now. Search Engine Optimization (SEO)  Recognizes and reads  Page titles, html headers and first words  Increase search rankings  Use keywords  Avoid jargon  Link to outside reputable sites  From within the text  Related links 19 Use HTML Headers, not larger fonts. SEO= Search Engine Optimization. Increasing the probability that your pages will show up near the top of a Google or other search engine list. Repeat essential key words, ‘carewords’, search words Page Title = the descriptive title that shows up in the blue browser bar at top of screen, is bookmarked by users, and is listed by search engines in a search. Users may hunt for links in text to more information; Referrals to your site from outside sources increase trust and reputation, in turn increasing SEO Running text clear across screen makes it slower to read or scan
  • 20. Slide 20 Know how. Know now. Descriptive Page Titles 20 Page titles coded correctly show up at top of blue browser bar, and as titles when you bookmark a page. They can be lengthy and should contain keywords, or words that users search with
  • 21. Slide 21 Know how. Know now. Web Exceptions to Style  Passive voice: If the key word is an object, place it first. “Passive voice redeemed for web headings”  Numerals are preferred online for numbers  Easier to scan and pick out quickly  Leave out punctuation in bulleted lists 21 Web Exception: When the key word is an object, place it first. It needs to be first in a headline or bullet list for scanning or search engine use; “Positive parenting skills are practiced by caring adults.” Use sparingly. Rephrase when possible. 1, 2, 3, rather than one, two, three; and 10 versus ten
  • 22. Slide 22 Know how. Know now. Best Fonts and Contrast  High contrast black on white  ALL CAPS are to be avoided even in headers  Sans serif fonts are easier to read quickly  Don’t mix font types on a page 22 Reverse of white on black can be effective sometimes. All caps is slower reading. Sans serif according to studies, is easier to read quickly. Have we adapted? Verdana, Arial, Calibri are all good choices.
  • 23. Slide 23 Know how. Know now. Copy edit and test  Look at it onscreen as viewers would  Proofread; put it away; proofread again.  Consult a Web style guide  Read it out loud; does it get across essential info concisely?  Usability Testing 23 DUH, but check it in all common browsers for effect, clarity, graphics. Usability testing: Assign a neutral audience member a specific task; follow their actions, watch for errors, frustration. Succes. Meant for correcting glaring issues of user success. Remember, users are IMPATIENT. and have millions of options at their fingertips. Test, tweak, test again. (Lana’s presentation follows this one for in depth info on usability studies.) Visit http://usability.unl.edu for more info and our findings
  • 24. Slide 24 Know how. Know now. A nod to the experts:  Ann Wylie, Wylie Communications: Three tips to creating copy that clicks, www.wyliecomm.com  Jakob Nielsen of www.useit.com:  Tips to attract online readers  Writing for Reuse  Writing for the Web 24 Killer Web Content, Gerry McGovern- www.gerrymcgovern.com www.Customercarewords.com
  • 25. Slide 25 Know how. Know now. Additional references  Letting Go of the Words: Writing Web Content that Works, Janice (Ginny) Redish, 2007, Morgan Kaufmann Pub.  User Interface Engineering, Jared Spool- www.uie.com  The Web Style Guide 3rd Edition (online), Basic Design Principles for Creating Web Sites, by Patrick J. Lynch and Sarah Horton 25 We in CIT keep a house style guide as a wiki and in addition I have added, or begun, a web style guide and web projects style guides which is part of that. The intention is to make it a webpage within our department pages that can be shared with our authors and web developers.