Lists

Making text scannable with lists

Human beings communicate by talking, which often leads to writing that is conversational or prose-heavy. However, long sentences are not scannable, and users want to know quickly what they are reading without looking at every word. Enter lists!

Great things about lists

• You can break up text into small, easily digested bits of information
• You can get your point across much easier
• Your pages will look much neater and be more scannable

Any time you find yourself using lots of commas, it's a chance to consider restructuring your information.

Types of lists

There are two list types commonly used on the web, bulleted lists and numbered lists, which will be familiar for users of MS Word or other word processing software.

Bulleted list

Bulleted lists, also called "unordered lists", are great for listing anything that doesn't need to come in a specific order.

• Example bulleted list item
• Second example list item
  • Subitem of the second item

Numbered list

Numbered lists, also called "ordered lists", are used to list items that require a specific order. One example might be a list of steps required.

1. Read through your text for directions that are in a paragraph
2. Identify each individual step
3. Restructure the directions into a numbered list to make it easier for your users
4. Success!

An example

Un-scannable sentence

Hawaii’s diverse natural scenery, warm tropical climate, abundance of public beaches, oceanic surroundings, and active volcanoes make it a popular destination for tourists, (wind) surfers, biologists, and volcanologists alike.

Restructured into scannable lists

Hawaii's attractions include:

• diverse natural scenery
• warm tropical climate
• abundance of public beaches
• oceanic surroundings
• active volcanoes

Many people enjoy Hawaii:

• tourists
• surfers
• wind surfers
• biologists
• volcanologists

Structured HTML lists vs. Wanna-be lists

Beware: just because something looks like a list, doesn't mean it's behaving as a list. Make sure you use your WYSIWYG list icons to create lists, not make them by hand. Here's an example:

1) This list is actually made of paragraphs and breaks in the HTML.
2) I made it by hand typing the numbers and pressing Shift-Enter for create a new line.
3) Screen readers and other assistive technologies will not be able to tell that it is a list.
4) Using this approach decreases the accessibility of your website and makes it look less nice.

The code looks like this:

<code lang="html">
<p>1) This list is actually made of paragraphs and breaks in the HTML.<br>
2) I made it by hand typing the numbers and pressing shift-enter for create a new line.]<br>
3) Screenreaders and other assistive technologies will not be able to tell that it is a list.<br>
4) Using this approach decreases the accessibility of your website and makes it look less nice.</p>
</code>

Go forth and make lists!

I hope this has been helpful. Remember, always look over your paragraph content to see if there's a way it can be restructured into lists. Your readers will thank you.