Writing for scannability
February 8, 2015
1
This graphic repeats text "writing for scannability" in grayscale
Write web-based text for scannability

On the Nielsen-Norman website, my first stop for all things web usability, there’s a great little post called “Concise, SCANNABLE, and objective: how to write for the web“. Reading for instructional designers and instructors who prepare content for the web. In a nutshell, to write for our learners where we intend them to read instructional materials on the web, write your web text and then go back through and format it to include:

  • headings (use H1, H2, H3, etc. instead of plain/paragraph text)
  • large type (take a look here for how large the type should be)
  • bold text
  • highlighted text*
  • bulleted lists
  • graphics
  • captions
  • topic sentences
  • tables of contents

To the list I would add:

  • white/negative space
  • numerals (instead of written-out numbers)
  • block quotes formatting

White space is the reason that bulleted and numbered lists go such a long way in getting users to scan content. Numerals are recognized more quickly by the brain than text-based numbers (for numbers up to 1 billion). And to block quotes:

There’s much more to say about each of these heuristics, where instructional environments are concerned. Does your content warrant having your learners read the text online, rather than providing this same information for them as a downloadable document?

A colleague and I are preparing a conference session on the topic, and I’ll post more resources as we find or generate them, but I hope you’ll take a moment to click through to the links mentioned here and see what the pros have to say about these topics.

* I’m skeptical that highlighted text supports scannability; I personally tend to skip over any content that’s formatted with bright colors or imprisoned in a “highlight box”. I see boxes or bright colors and automatically assume they’re ads. But this is anecdotally just me, and I’m willing to go with what the research says works.

1 comment

  1. […] also my previous post with other tips to increase scannability of on-screen […]

Comments are closed.