5 Steps to More Scannable Lists

It’s a golden rule of web writing: use lists to make your content more scannable.

The problem is that using a list—ordered or unordered—in and of itself does little to make things much more scannable. As you can see in the screenshot below, a lot goes into making key pieces of text content literally catch the eye, and bullets alone don’t add much to the equation.

scannable lists

Let’s think for a moment about what scanning is all about. We scan content for two reasons:

  1. Because we’re looking for something we know we want.
  2. Because we want to get the gist of a message without putting in the effort to read.

But what to do bullets and numbers do in a list? Bullets say, “Here, starting on this line, is a new idea that’s parallel to those on the other lines that also have bullets.” Similarly, the numbers in an ordered list simply say “Here’s the next step in the process.”

You need to do more than add a bullet or a number to actually make your list content easier to scan. Here are a few ideas.

Shorten list text

The more prose you have, the less scannable it is. A good starting point for making your list text scannable is to shorten it so that it can actually be scanned in context.

So, for example, you might try to make all the list items fit on single lines, so that the eye can take in their initial words all at once.

Use a keyword or verb at the start

Now, if those initial words seem pretty random, your list still won’t be much more scannable. Here’s an example.

  1. Take 3 large eggs.
  2. Next, crack them gently into a bowl.
  3. Now, grab your favorite whisk.
  4. Roll up your sleeves and beat the eggs till they’re light and fluffy.

Run your eye down the left-hand side of the list—which is, after all, where you’re most likely to go to try and scan a list’s contents—and you won’t be very clear about what’s going on.

But what if we put a keyword at the start of each point? (Note that by “keyword”, I mean a word that’s central to our understanding of the list item’s meaning, not an SEO keyword.)

  1. Ingredients: Take 3 large eggs.
  2. Prepare: Break them gently into a bowl.
  3. Utensils: Grab a fork or whisk.
  4. Action: Beat the eggs till they’re light and fluffy.

Or we could use a verb to introduce the action in each point:

  1. Take 3 large eggs.
  2. Break them gently into a bowl.
  3. Grab a fork or whisk.
  4. Beat the eggs till they’re light and fluffy.

These are purposely facile examples. Hopefully, they show you the possibilities for more complex text and ideas that you’re working with.

In each case, the openings of each item help to tell a coherent story. And since they’re all short sentences, their beginnings can be taken in almost all at once.

Bold keywords or phrases

To make those keywords in your list jump off the page even more, why not use bold text? That could look like this:

  1. Ingredients: Take 3 large eggs.
  2. Prepare: Break them gently into a bowl.
  3. Utensils: Grab a fork or whisk.
  4. Action: Beat the eggs till they’re light and fluffy.

Or this:

  1. Take 3 large eggs.
  2. Break them gently into a bowl.
  3. Grab a fork or whisk.
  4. Beat the eggs till they’re light and fluffy.

Or this:

  1. Take 3 large eggs.
  2. Break them gently into a bowl.
  3. Grab a fork or whisk.
  4. Beat the eggs till they’re light and fluffy.

In this last example, we gain the value of the bullets, which draw the eye to the start of the sentences, where the actions are, and the value of bolding, which adds to the story by telling us what each action engages.

Use appropriate finishing punctuation

We’ve got a pretty scannable list right now. But one way to muck things up is to let an old-school punctuation “guru” at it. For some reason, many of the more formal writers I’ve come across (and many of whom seem to have “final” approval on web copy) want to add needless punctuation to the ends of bulleted items in a list. Most often it’s a slew of spurious semicolons, but some people add useless commas instead.

Here’s all you need to know about finishing punctuation on list items.

  • If the list items are full sentences, start each one with a capital letter and finish each one with its own full stop (as in the case of this list).
  • If the list items are sentence fragments, leave them in lowercase letters, and end only the last list item with a full stop. Make sure you introduce the list itself with a sentence stem that agrees grammatically with the openings of each list item.

Yep, it’s that simple.

Include white space between list items

Finally, you can boost the scannability of a list by making sure the list items have a little space between them.

This can help prevent your list from looking like a paragraph of text with some dots or numbers running down its side. It’s especially helpful if your list includes items that run over multiple lines, like the one below.

scannable lists

These are fairly basic ways of making bulleted and ordered lists more scannable. But if you have some tips of your own, share them with us in the comments.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Sarah Land

    Very nice. So many people struggle with this.

  • Russ

    Hi Georgina

    Some really useful info in there!

    1. What are your thoughts on whether bullets should be indented (moved to the right inside the column) or hanging (pushed to the left of the column edge)?

    2. In your experience, does the type of bullet affect readability?

    Thanks
    Russ

    • georgina

      Hey Russ,
      I can’t give you research on this, just my thoughts I’m afraid.

      1. I’d argue for indented bullets rather than hanging, to show that the list is contained by the body text. This may be a print-reading hangover, but in content where boxes and sidebars abound (like on many websites) I think indentded bullets surrounded by sufficient space and using the advice in this article do a better job of showing that the list is a subset of the material in the body than do hanging bullets.

      2. As long as the bullet stands out in the page context, I think you’ll probably have done all you can with it. The rest depends on how you treat the text it precedes.

      Your thoughts? :)
      Georgina

  • EggHead

    Good info. I followed your tutorial, now I got 18 beaten eggs. And then what?

    • georgina

      :) I’d make an omelette, but really, it’s up to you ;)

      • SolrWind

        May I recommend a soufflé?

  • mike

    Haha! Excellent comment :))

  • SolrWind

    Before I read your advice, I thought on my own what I would do to make lists more scannable.

    Our thoughts were exactly the same — 1:1 (strange minds think alike?) — minus the punctuation advice. I end each point with either a period or nothing. Vertical whitespace is probably the first thing I’d go for. Followed by shortening the list text, which, like you said, ideally fits on one line.