Introduction
Sometimes, the best way to present information is in a list. In fact, it’s one of the most powerful methods we have to help our users read most efficiently. Nielson Norman Group studies showed: “We observe readers gravitate towards bulleted lists with fervor. Web readers want to digest content quickly.”
Carly has a newborn baby with colic who needs to be held almost constantly. Carly recently applied for a current account online, but had to do it with her one free hand. In the end, she went with the bank who highlighted the different accounts’ key features in a list, purely because it took less effort to scroll.
The benefits of lists
Lists are:
- attention grabbing
- support scanning behaviour of users
- reduce reading time
- help users understand the relationship of items.
Different types of lists
Lists are typically displayed as either bullet points or numbered, but they can also be custom shapes. Whichever list we choose, it’s essential the appropriate HTML elements are used.
The official names of lists developers use are:
- Unordered lists: when the items have no particular order, usually presented in bullet points.
- Ordered lists: for sequential information, that’s automatically numbered by the browser. Please note, if an ordered list has the CSS. list-style-type set to “none”, then it effectively turns the list into an unordered list, which can have unintended consequences for screen reader users.
- Nested list: a list inside another list.
- Description or definition lists: groups of related terms and descriptions.
Unordered list example
- List item 1
- List item 2
- List item 3
Ordered list example
- List item 1
- List item 2
- List item 3
Nested list example
- List item 1
- List item 2
- List item 2a
- List item 2b
- List item 3
Description or definition list example
Cryptids of Cornwall:
- Beast of Bodmin
- A large feline inhabiting Bodmin Moor.
- Morgawr
- A sea serpent.
- Owlman
- A giant owl-like creature.
Comparing a list with a chunk of text
Compare the two different versions of the same text below.
Mortgages from Nationwide – Version 1
We understand how important a decision getting a mortgage is. It’s not just about taking out a mortgage, it’s about getting the keys to your new home, improving the one you’ve got or arranging your finances for the future.
Mortgages from Nationwide – Version 2
We understand how important a decision getting a mortgage is. It’s not just about taking out a mortgage, it’s about:
- getting the keys to your new home
- improving the one you’ve got
- arranging your finances for the future.
Hopefully you found the second version easier to digest. That’s because the important points have been pulled out and sit on separate lines.
Images or assets
https://www.w3.org/WAI/tutorials/page-structure/content/#unordered-list
Things to check
Have you?
- Used informative headings to introduce lists?
- Created items of similar line length so none are overpowering the other?
- Used consistent grammatical/tense/syntax/formatting?
- Not repeated the same word at the beginning of each item?
- Only used an ordered list if there is a necessary hierarchy or progression in the structure?
- Not used the underline, CAPS (except for acronyms) or strikethrough style?
- Aligned text to the left?
- Made sure the lists are in a logical, predictable order?
- Checked the list is marked up appropriately so screen readers can identify the necessary information?
- If users are expected to compare items on a list, made sure the items are all visible at the same time? For example, when filling in a form, include a list of boxes or radio buttons instead of a drop-down menu.
- Removed all non-essential items from lists and avoided any repetition?
Thank you for your feedback