Designing scannable content

Web writers need to design content, not just write it. Poorly designed content can look complex and hard to use. Content that looks easy on the eye will encourage users to stay.

10 tips for web writers

  1. Start with the most important content
    Order information so users get what they want first. Lead with the main message, the most frequently used part of the content, or the conclusions and recommendations.
  2. Chunk content into manageable pieces
    Avoid creating walls of text by breaking content into chunks. Group related chunks.
  3. Label with meaningful headings
    Use headings to label each part of the content. Write labels that help users find the section of the content they need.
  4. Make headings easy to scan
    Begin with the most meaningful terms. Be careful with headings phrased as questions. Consider parallel phrasing. Avoid writing headings that wrap over multiple lines.
  5. Show the content structure with headings
    Use the relevant heading style (h1, h2, h3 and so on) to show the structure of the content. Never use a heading style for text that is not a heading.
  6. Write single-topic paragraphs
    Present each topic or idea in its own paragraph.
  7. Keep paragraphs short
    Try to stay under 60 words. One-sentence paragraphs are fine, but avoid a series of short paragraphs unless column widths are narrow.
  8. Format important points as a list
    Make important points or steps more visible by formatting them as a list. If the order is sequential or the number important, use a numbered list style.
  9. Make lists easy to scan
    Start with a lead-in sentence, or label the list with a heading. Avoid repeating words at the start of each item in the list. Use parallel phrasing. Try to keep items in the list concise. Avoid very long lists.
  10. Don’t embed too many links in a paragraph
    Only add links that help users complete their task. Avoid adding links that are already in menus on the page. Consider moving links out of the paragraph and grouping in a list beneath it. Move reference links to the end of the page.