Letting go of the words

1. Letting goof the words By Laurie Dudasik Writing Content for Web Usability

2. sandiapixels.com/resources Slides are available to download! Presentations

3. Letting go of the words • Janice (Ginny) Redish • Recommended by Steve Krug, author of “Don’t Make Me Think: A common sense approach to web and mobile usability”

4. topics • The importance of writing to satisfy a conversation • Design and Topography • Tips on dividing your content for a better user experience • Writing tips to help you focus on your key messages

5. Content = conversation • Every use of your site or mobile app is a conversation started by the visitor No problem! Just do it here on my homepage. I need to send a file

6. Benefits to writing well • Writing “well” for online content simply means having successful conversations • Great web writing: • Answers your visitors questions • Lets your visitors “grab and go” when it’s what they want to do • Encourages further use – now or on a return visit • Markets successfully to your site visitors • Improves search engine optimization (SEO) • Improves internal search • Is accessible to all

7. When writing…. • …your focus should be to create “on-demand” content • Visitors usually want to grab what they need then continue-on to their next question, do their next task, make a decision, get back to work, etc. • Break your text into short sections with clear headings • Start with your key messages • Write short sentences and short paragraphs • Using lists and tables • Writing meaningful links • Illustrating your content

8. Revise your goals • Revise your site’s goals to reflect what your visitors should do. • We want to sell a lot of shoes. • We want people to buy shoes from us. • We want to give out a lot of information on this topic. • We want to answer people’s questions about this topic. • We want to increase subscriptions. • We want site visitors to feel so engaged with us that they subscribe.

9. Design • Steve Krug: Don’t Make Me Think: A common sense approach to web usability • Integrate content and design from the beginning • With REAL content • Avoid “greeking” (lorem ipsum dolor…..)

10. typography • Set a legible sans serif font as the default • Make the default text size legible for your visitors • Set a medium line length as the default • Don’t write in all capitals • Only underline links • Use italics sparingly

11. Serif vs. san-serif • Sans is French for “without” • There are other differences • how wide the rounded parts of letters like “b” and “d” • how clearly the font differentiates between the letter l and the number 1 • Research in the mid-twentieth century, people often claimed that serif fonts were better for sustained reading. But for your online readers, this doesn’t work. Why? • The research is more than 60 years old • There was very little familiarity with san serif fonts at the time of the research • Web page content is broken into smaller pieces with smaller paragraphs, shorter sentences, lists, tables, etc…

12. Font size • Choose a fairly large default text size – but not too large. • Very large font sizes should be reserved for headlines and sub-headings • Janice recommends allowing your user to change the font size themselves.

13. Set a medium line length • This is a paragraph of information written in Verdana with a line length of 100 characters per line. Although university students in one research study read lines that were this long faster than shorter lines, in another study, other students read the medium lines fastest. In both studies, the students preferred the medium length. Do you find this comfortable to read? • This is a paragraph of information written in Verdana with a line length of 50 characters per line. This is the length that students preferred even when they read longer lines faster. Research on paper over many years found that people do best with lines of text about this long. Do you find this comfortable to read? • This is a paragraph of information written in Verdana with a line length of 25 characters per line. Whole paragraphs in very short lines are difficult for people because it’s hard to get the meaning with so few words on a line. Do you find this comfortable to read?

14. Don’t write in all capitals • ALL CAPITALS TAKE UP 30% MORE SPACE ON THE PAGE. THEY SLOW READING SPEED BY ABOUT 15%. THEY ARE ALSO BORING. PEOPLE’S EYES GLAZE OVER, AND THEY TEND TO STOP READING. ALSO, WHEN YOU WRITE WITH ALL CAPTIALS IN EMAIL AND ON THE WEB, PEOPLE THINK YOU ARE SHOUTING AT THEM. • All capitals take up 30% more space on the page. They slow reading speed by about 15%. They are also boring. People’s eyes glaze over, and they tend to stop reading. Also, when you write with all capitals in email and on the web, people think you are shouting at them. First paragraph Second paragraph

15. Only Underline links and use italics sparingly • There is a wide assumption that anything that is underlined on a webpage is a link – don’t try to think your design is above this assumption; it will drive your users nuts • Use italics to show a book title within a sentence. Use them to show emphasis. But please, do not put entire paragraphs in italics. • Also, Italics Don’t Work Well for Headings.

16. Why do people come to the web? • For information Not a complete document • For instructions Not the full manual • For the answer to a single question Not a handbook • People desire usable, manageable pieces. The Right information in the right amount at the right time to the right person in the right medium

17. Divide your content thoughtfully • Questions people ask • Topic or task • Product type • Information type (for example, policies, or procedures) • People • Life event • Time or goal

18. Questions people ask Ah! There it is… That’s the question my client is asking How do I get tweets to show up on my mobile device? How much is my car worth?

19. By topic or task Large, informative heading “Bite size” key message at top Logical divisions in left navigation Small paragraph sections Verb phrases – calls to action Each category has just enough information – useful and not overwhelming

20. Product type (e-commerce)

21. Information type • i.e. News, Events, Press Releases, Blog articles… • Be sure that people can move laterally to related information • A policy and the procedures for carrying out that policy • Tips or advice about a topic and products related to that topic • The news release about a research study and the research report

22. “Requirements” says this is a page of policy, not instructions for how to. The addition of related links is helpful “If, then” is a great sentence structure for many types of information. List and link to all sub-sections of the page so that it’s up front and obvious

23. Divide by People (good example)

24. Divide by people (bad example) Tax agents must be a secondary audience, but the location of this box next to and just like search may confuse people This information architecture works only if HMRC divides topics and tasks into these categories the same way that site visitors divide what falls under each “hat” they wear.

25. Divide by Life Event or goal What stage are you looking for? What is your goal?

26. Just give them what they want 2006 2012 2014

27. PDf’s – when to use and when not to use

28. Focus on key messages • Give people only what they need • Cut! Cut! Cut! And cut again! • Think “bite, snack, meal.” • Start with your key message • Layer information • Break down walls of words • Plan to share and engage through social media

29. Give people only what they need • Online, less is more! • For example, ask yourself: • Do they really care about the entire history of your project? • Do they really want to hear how much you welcome them before you show them what you have to offer at what price? • You may have to come to terms that what you think is important, is not what your visitors find important… • Consider dropping unnecessary information entirely, moving it to the bottom of the page, or layer it through a link to a deeper page.

30. content you already have • 1. Trying putting it aside. • I know this is difficult, but you should rethink your topic without being constrained by what the site now says. • 2. Does it fit into your current or updated social media and marketing strategy? • If not, revise or drop entirely • 3. Adopt your persona’s perspective. • Think about the topic from your site visitors’ point of view. Try to write in a way that will cater to many different personalities. • 4. Does the content answer questions? • What would your users ask about the topic? • 5. Place the answers to these questions in logical order • 6. Cut, paste, rewrite, edit. • Use the original content you set aside in Step 1 to help “answer” the list of questions you came up with

31. …Cont. • 7. See what’s left • Look over what is left from the original content. Do your site visitors care about any of this? • 8. Get more answers. • If you have questions on your new list that have not been answered from that original content, it’s time to seek out the answers and add them to your revised content. • 9. Read your new draft • Does it flow logically? Are you using the words that your site visitors would use? Are the answers short, straightforward, and clear? • 10. Discard what you haven’t used. • It’s time to let go… don’t take it personally ;-) *Note* Follow these steps for new content as well, but you won’t have any “original” to use as a source.

32. An example of overwhelming information

33. Suggested revision

34. Cut! Cut! Cut! And cut again! • Process for cutting down to essential messages: • Start with your new draft • Focus on the facts. Cut the flab. • Focus on your site visitors and what they want to know. • Cut out words that talk about you or the organization – unless your site visitors want or need that information. • Put your new draft away for a day or two. • Then, take it out and see if you can cut some more without losing your essential messages. • Read it out loud. • Ask a colleague to read it out loud. Ask a few representative site visitors to read it out loud. • Listen carefully and revise.

35. Think “Bite, snack, meal” • Bite = headline, link, or both plus a very brief description (think Facebook “link-share” layouts) • Snack = key message or brief summary. The snack can be a bit on the home page, a separate bold or italic line at the top of an article, the first bit of information in a blog post, or the summary to a very large report. • Meal = the details. The meal can be the rest of an article or blog post, a deeper web page linked from the snack, or the full report.

37. Start with key messages • If possible, put it in your “bite”. At the very least, put it in your “snack” • Inverted pyramid, borrowed from journalists and technical writers:

38. This heat map from eye-tracking shows the typical “F” pattern of web reading at the beginning of articles. Bulleted lists towards the top contribute to this. The colors show the concentration of eye fixations, with red indicating the heaviest concentrations and blue the least.

39. Layer information • Layering is a way of dividing information that: • Keeps site visitors from being overwhelmed • Helps site visitors who want different levels of information

40. Break down walls of words Before: • Use very short paragraphs or bullet points • Walls are barriers, and text can easily appear as a “wall” After:

41. There is so much more!