Using Bulleted Lists in Web Content

Bulleted lists on Web pages help readers scan and find what they want. Two situations that do well with bulleted lists are series and instructions. Also, beware of indenting, spacing, formatting, and whitespace.

Series

For situations where three or more items appear separated by commas, they might work better as a list. Instead of, “Bring an apple, orange, and banana” use…
Bring:

• apple
• orange
• banana

This doesn’t need numbers as order has no impact. The space between “Bring” and the list might be too much as people might not instantly associate the two with the distance, but CSS can fix this.

Instructions

When steps call for doing tasks in a specific order, numbered bullets work well. eHow.com does this nicely. Take care in situations where you have a choice. For example…

1. Peel apple.
2. Cut apple using one of the following ways:
   • Dice the apples using the chopper.
   • Cut the apple in half. Cut both halves in half for four wedges. If you want smaller wedges, cut the four wedges in half.
3. Serve.

With instructions, you can also clarify a choice like this:

• Dice the apples using the chopper.

• or

• Cut the apple in half. Cut both halves in half again for four wedges.

In this version, it’s clear you have a choice since “or” separates the choices.

Indenting

Notice Step 2 takes up more than one line and uses the indent? Some sites don’t indent lines beyond the first and it’s hard on scanning like this:

1. Dice the apples using the chopper.
2. Cut the apple in half. Cut both halves in half for four wedges. If you want smaller wedges, cut the four wedges in half.

Spacing and Long Lists

It’s also possible to break up a long series such as what to pack for sleep away camp. That list can easily get long. Break up the series by categories (i.e. clothes, toiletries, linens). Also, instead of one long list — put the list into columns to avoid wasting white space.

But what about a long list? Do the numbers throw you? Numbers typically represent order, but this list uses the alphabet. The numbers determine the number of resources.

Furthermore, the list divides into three categories. Can’t do more than one column simply because the content space is narrow. Plus, some of them have comments.