Design & UX
Article
By Georgina Laidlaw

5 Steps to More Scannable Lists

By Georgina Laidlaw
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.

--ADVERTISEMENT--

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.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?