By Laurie Dudasik LETTING GO OF THE WORDS Writing Content for Web Usability

sandiapixels.com/resources SLIDES ARE AVAILABLE TO DOWNLOAD! Presentations

 Janice (Ginny) Redish  Recommended by Steve Krug, author of “Don’t Make Me Think: A common sense approach to web and mobile usability” LETTING GO OF THE WORDS

 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 TOPICS

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

 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 BENEFITS TO WRITING WELL

 …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 WHEN WRITING….

 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. REVISE YOUR GOALS

 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…..) DESIGN

 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 TYPOGRAPHY

 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… SERIF VS. SAN-SERIF

 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. FONT SIZE

 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? SET A MEDIUM LINE LENGTH

 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 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 and on the web, people think you are shouting at them. DON’T WRITE IN ALL CAPITALS First paragraph Second paragraph

 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. ONLY UNDERLINE LINKS AND USE ITALICS SPARINGLY

 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. WHY DO PEOPLE COME TO THE WEB? The Right information in the right amount at the right time to the right person in the right medium

 Questions people ask  Topic or task  Product type  Information type (for example, policies, or procedures)  People  Life event  Time or goal DIVIDE YOUR CONTENT THOUGHTFULLY

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?

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

PRODUCT TYPE (E-COMMERCE)

 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 INFORMATION TYPE

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

DIVIDE BY PEOPLE (GOOD EXAMPLE)

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.

DIVIDE BY LIFE EVENT OR GOAL What stage are you looking for? What is your goal?

JUST GIVE THEM WHAT THEY WANT

PDF’S – WHEN TO USE AND WHEN NOT TO USE When a PDF is appropriate?When is a PDF file not appropriate? You save printing and shipping costs; you shift printing to the readers When your visitors don’t need the whole document Many people would rather go online than go to a library When your visitors are mostly on mobile devices People can get what they want at any time – no need to know when the library is open; no need to only work in the daytime When your visitors don’t want to (or a restricted to) printing a lot of documents Faster search capabilities than via a paper-copy When your visitors are not comfortable with downloading PDF files Can be accessible from any locationWhen your visitors need accessible information (some screen readers may not be able to read/translate graphics and text in a PDF)

 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 FOCUS ON KEY MESSAGES

 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. GIVE PEOPLE ONLY WHAT THEY NEED

 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 CONTENT YOU ALREADY HAVE

 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 ;-) …CONT. *Note* Follow these steps for new content as well, but you won’t have any “original” to use as a source.

AN EXAMPLE OF OVERWHELMING INFORMATION

SUGGESTED REVISION

 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. CUT! CUT! CUT! AND CUT AGAIN!

 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. THINK “BITE, SNACK, MEAL”

 If possible, put it in your “bite”. At the very least, put it in your “snack”  Inverted pyramid, borrowed from journalists and technical writers: START WITH KEY MESSAGES

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.

 Layering is a way of dividing information that:  Keeps site visitors from being overwhelmed  Helps site visitors who want different levels of information LAYER INFORMATION

BREAK DOWN WALLS OF WORDS Before: After:  Use very short paragraphs or bullet points  Walls are barriers, and text can easily appear as a “wall”

THERE IS SO MUCH MORE!