Writing for the Web


Published on

Presentation for Connecticut Library Association Conference

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Writing for the Web

  1. 1. Writing for the Web Jeff Wisniewski [email_address] facebook.com/wisniewski.jeff
  2. 2. Nation Shudders At Large Block Of Uninterrupted Text <ul><li>WASHINGTON—Unable to rest their eyes on a colorful photograph or boldface heading that could be easily skimmed and forgotten about, Americans collectively recoiled Monday when confronted with a solid block of uninterrupted text. </li></ul><ul><li>Dumbfounded citizens from Maine to California gazed helplessly at the frightening chunk of print, unsure of what to do next. Without an illustration, chart, or embedded YouTube video to ease them in, millions were frozen in place, terrified by the sight of one long, unbroken string of English words. </li></ul><ul><li>-The Onion </li></ul>
  3. 3. you’re probably not going to read this <ul><li>Built in 1995, the Fanny Millstein Library is located at the University of Pittsburgh at Greensburg, approximately 35 miles east of Pittsburgh, PA. The library, originally housed in Powers Hall, was established to provide academic support and to serve the research needs of the Greensburg Campus' students, faculty and staff. Currently the library contains over 78,000 volumes and provides access to a vast array of information resources through the University Library System's Digital Library. There is also a computer lab and wireless network available to students for research and class work. Open seven days a week during the Fall and Spring terms, the library greets an average of 60,000 patrons each year. To learn more about the library, please visit our online tour, view our presentation, Welcome to the Millstein Library, or enjoy reading Millstein Matters. </li></ul>
  4. 4. but you might read this: <ul><li>The Millstein Library at Pitt Greensburg (located 35 miles east of Pittsburgh): </li></ul><ul><ul><li>Is open seven days a week during the Fall and Spring terms </li></ul></ul><ul><ul><li>Has a computer lab and wireless network </li></ul></ul><ul><ul><li>Has access to millions of e-books, magazine, newspaper and journal articles </li></ul></ul><ul><li>Want to learn more? Visit our online tour , view Welcome to the Millstein Library (ppt) , or read Millstein Matters . </li></ul>
  5. 5. Krug’s 3 laws of usability <ul><li>“ Don’t make me think.” </li></ul><ul><li>“ It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.” </li></ul><ul><li>“ Get rid of half the words on each page, then get rid of half of what is left.” </li></ul><ul><li>Krug, S. (2006), Don’t Make Me Think: A Common Sense Approach to Web Usability, Berkeley, CA: New Riders </li></ul>
  6. 6. worth the effort? <ul><li>“ The rewritten web site scored 159% higher than the original in measured usability.&quot; </li></ul><ul><li>http://www.useit.com/papers/webwriting/rewriting.html </li></ul>
  7. 7. the typical library website visitor <ul><li>Usually focused on getting a job done </li></ul><ul><li>Usually inexperienced </li></ul><ul><li>Visit infrequently </li></ul><ul><li>Has low recall </li></ul><ul><li>Is impatient </li></ul>
  8. 8. how users read online <ul><li>They generally don’t, they scan* </li></ul><ul><li>Move in an “F” like pattern down the page </li></ul><ul><li>Pay particular attention to first words of headings </li></ul><ul><li>*until they find content </li></ul><ul><li>that’s meaningful for them </li></ul>
  9. 11. why scan? <ul><li>Reading on a computer monitor is typically at least 25% slower than reading the equivalent content on a paper-based format, so, simply, it takes more time and effort. </li></ul><ul><li>Reading from a monitor causes both eye strain and eye fatigue </li></ul><ul><li>People tend to look for easy to recognize clues that will quickly lead to the the information they want. </li></ul>
  10. 12. reading slower: Implications for style <ul><ul><li>keep things as brief as possible </li></ul></ul><ul><ul><li>many web visitors will read only the first or second sentences of a paragraph </li></ul></ul>
  11. 13. information foraging <ul><li>Certain words or phrases function as trigger words. </li></ul><ul><li>They give off strong “scent” because they look like they will lead the user closer to their information goal. </li></ul><ul><li>Users are willing to click repeatedly so long as the scent is getting stronger </li></ul><ul><li>The choices users make are rapid and people will often pick the first likely looking link </li></ul>
  12. 14. page titles <ul><li>Highly important! </li></ul><ul><li>Be specific when creating titles; no two pages should be titled alike </li></ul><ul><li>Use something like this format: </li></ul><ul><ul><li>Descriptive phrase | Subsection| Section | Organization </li></ul></ul>
  13. 17. page titles: TIPS <ul><li>Make the first word of the title the most important descriptor of the page </li></ul><ul><li>Do not begin with a generic term (&quot;Welcome to&quot;) or an article (&quot;The”) </li></ul><ul><li>Should make sense when viewed completely out of context, as part of a long list of other page titles, as in search engine results lists </li></ul><ul><li>Should be unique </li></ul><ul><li>Must be written in mixed case </li></ul>
  14. 18. lists <ul><li>Set their contents apart from the rest of the page and can very effectively highlight text </li></ul><ul><li>Bulleted: sequence doesn’t matter </li></ul><ul><li>Numbered: sequence matters </li></ul><ul><li>Full sentences are not appropriate </li></ul>
  15. 19. headings <ul><li>Set apart by font, size, weight, white space </li></ul><ul><li>Help your readers see your point without having to read the entire page </li></ul>
  16. 20. headings
  17. 21. headings <ul><li>Common problems: </li></ul><ul><ul><li>Unfamiliar words in headings or links </li></ul></ul><ul><ul><li>Confusable headings or links - two or more items appear to describe the same thing </li></ul></ul><ul><ul><li>Headings or labels that are equally similar for some goals </li></ul></ul>
  18. 22. Headings: TIPS <ul><li>Have information-carrying content within the first three words </li></ul><ul><li>Include keywords that are important for search engine optimization (SEO) </li></ul><ul><li>Have strong scent </li></ul>
  19. 23. links <ul><li>most effective when they reduces clutter by dividing chunks of information into individual web pages </li></ul><ul><li>Visually differentiated </li></ul><ul><li>The best links contain trigger words and give off a strong scent, drawing the user closer to their goal. </li></ul>
  20. 24. creating effective hyperlinks: TIPS <ul><li>Make the text in your links meaningful </li></ul><ul><li>Use words that people known and understand Remember &quot;old and boring” </li></ul><ul><li>Underline links to make them stand out. This was the default link display in early HTML browsers </li></ul><ul><li>Engineering's (UIE) research shows that links with 4 to 9 words are most effective </li></ul><ul><li>Be sure to make visited and unvisited links contrast with the base font color </li></ul>
  21. 25. creating effective hyperlinks <ul><li>Avoid using “standard” link colors and underlined text for anything that isn't a link </li></ul><ul><ul><ul><ul><li>For example, this is not a link, but it sure looks like one. </li></ul></ul></ul></ul><ul><li>Nothing but links should be underlined </li></ul><ul><li>Don’t reuse link colors </li></ul>
  22. 26. tips for creating effective hyperlinks <ul><li>“ Click here” should NEVER be a hyperlink </li></ul>
  23. 27. inverted pyramid style <ul><li>the conclusion comes first </li></ul><ul><li>In the next paragraph, you summarize the most important items. </li></ul><ul><li>Only then do you get to the details. </li></ul>
  24. 28. highly classified <ul><li>compose your page text as if you were writing a classified ad, where you're paying by the word. User attention is an expensive resource… </li></ul><ul><li>-Seth Godin </li></ul>
  25. 29. simplify words and structure <ul><li>This section describes the types of identification that would satisfy the application requirements for a library card. </li></ul><ul><li>What identification is needed when applying for a library card? </li></ul>
  26. 30. general writing: TIPS <ul><li>Use half (or less) the word count of conventional writing </li></ul><ul><li>Get to the point, immediately! </li></ul><ul><li>Use fewer, smaller and simpler words </li></ul><ul><li>Save the details for those who want to “learn more” </li></ul>
  27. 31. use pronouns <ul><li>They personalize the text and add clarity </li></ul><ul><li>Refer to your organization as “we” </li></ul><ul><li>Refer to the reader as “you” in the text and as “I” in questions </li></ul>
  28. 32. pronouns <ul><li>Example: </li></ul><ul><ul><li>Faculty, staff and students must return books by the end of the loan period. If books are returned after the due date, fines will accrue. </li></ul></ul><ul><ul><li>You must return books by the due date. You will be fined if books are returned late. </li></ul></ul>
  29. 33. <ul><li>The most valuable of all talents is that of never using two words when one will do. </li></ul><ul><li>Thomas Jefferson </li></ul>
  30. 34. use &quot;old&quot;, &quot;boring&quot; words to make your content more findable -Jakob Nielsen
  31. 35. plain language in a nutshell <ul><li>Common, everyday words </li></ul><ul><li>&quot;You&quot; and other pronouns </li></ul><ul><li>Write directly to reader </li></ul><ul><li>The active voice </li></ul><ul><li>Short sentences </li></ul><ul><li>Be positive where possible </li></ul>
  32. 36. adult literacy levels in the U.S. Source: http://nces.ed.gov/naal/kf_demographics.asp
  33. 37. plain language <ul><li>Plain language is appropriate for the medium and is consistent with the way people behave online </li></ul><ul><li>improves the clarity of your communication </li></ul>
  34. 38. plain language is not <ul><ul><li>Unprofessional, disrespectful, or inaccurate. It does not “dumb down” information for the public. </li></ul></ul><ul><ul><li>Using plain language is respectful because it values the readers’ time . </li></ul></ul>
  35. 39. plain language tool <ul><li>http://www.online-utility.org/english/readability_test_and_improve.jsp </li></ul>
  36. 40. plain language <ul><li>Google hack: </li></ul><ul><li>Site:yoursite.com </li></ul><ul><li>Advanced search </li></ul><ul><li>Reading level> annotate results with reading level </li></ul><ul><li>“ Resist the urge to write like a grad student or a bureaucrat.” </li></ul><ul><li>-Yahoo! Developer Network </li></ul>
  37. 41. jargon <ul><li>The language used by people who work in a particular area or who have a common interest </li></ul><ul><li>Efficient and effective for those “in the know” </li></ul><ul><li>Opaque, confusing, and distancing for those who are not (tip: that’s almost everyone!) </li></ul>
  38. 42. avoid jargon <ul><li>Reference Ask a question </li></ul><ul><li>Circulation Check out </li></ul><ul><li>Library Terms That Users Understand </li></ul><ul><li>http://www.jkup.net/terms.html </li></ul>
  39. 43. avoid noun sandwiches - a string of nouns one after another <ul><li>Remote patron authenticated licensed database access. </li></ul>
  40. 44. eliminate redundancies <ul><li>ask the question ask </li></ul><ul><li>absolutely essential essential </li></ul>
  41. 45. use active voice and action words <ul><li>Contact information can be edited here </li></ul><ul><li>Becomes….? </li></ul><ul><li>Images can be uploaded </li></ul><ul><li>Becomes…? </li></ul>
  42. 46. ‘ cause you’ve got…personality? <ul><li>A formal tone adds “distance” to an already asynchronous medium </li></ul><ul><li>In general, formality is inconsistent with the web’s immediate, informal, social nature </li></ul>
  43. 48. say it visually? <ul><li>Sometimes a picture IS a worth a thousand words </li></ul><ul><ul><li>Data based items </li></ul></ul><ul><ul><li>Instructions </li></ul></ul><ul><ul><li>Reference to a real world object </li></ul></ul>
  44. 50. strategies to encourage good writing for the web
  45. 51. develop editorial guidelines for your site <ul><li>How will you handle abbreviations? </li></ul><ul><li>How are capitalization in headings, bullet points, and numbering used on this site? </li></ul><ul><li>What rules will you follow for punctuation? </li></ul>
  46. 52. Use a pre-publication checklist
  47. 53. lead by example <ul><li>Make sure the pages that you work on exemplify the practice of good writing for the web. </li></ul>
  48. 54. include writing and editorial guidelines in the standard briefing for all new web site authors <ul><li>Work with your webmaster to make sure that new authors not only receive an account and a password to post web pages, but they have some time with an individual who can describe the editorial guidelines </li></ul>
  49. 55. invite key content providers to be observers in usability testing <ul><li>Seeing is believing. </li></ul><ul><li>Some people will fail to recognize the problems with writing online as if it were print until they see actual users failing. </li></ul><ul><li>Try to have different people in your library take a turn at being an observer in a usability test and the debrief session. </li></ul>
  50. 56. Questions? Discussion?
  51. 57. selected resources <ul><ul><li>Talk Like a Person </li></ul></ul><ul><ul><li>http://developer.yahoo.com/ypatterns/social/core/conversation.html </li></ul></ul><ul><ul><li>Plain language </li></ul></ul><ul><ul><li>http://www.plainlanguage.gov/ </li></ul></ul><ul><ul><li>Writing User Friendly Content </li></ul></ul><ul><ul><li>http://www.uxbooth.com/blog/writing-user-friendly-content/ </li></ul></ul><ul><ul><li>First 2 Words: A Signal for the Scanning Eye </li></ul></ul><ul><ul><li>http://www.useit.com/alertbox/nanocontent.html </li></ul></ul><ul><ul><li>Writing Content that Works for a Living </li></ul></ul><ul><ul><li>http://www.alistapart.com/articles/writingcontentthatworksforaliving </li></ul></ul><ul><ul><li>Poynter Eyetracking </li></ul></ul><ul><ul><li>http://eyetrack.poynter.org/ </li></ul></ul>
  52. 58. Thank you