Skip to navigation

Vertical lists – writing and usability tip

One thing that appears regularly on web pages is inline lists.

Inline lists

Inline lists are blocks of text containing several list items, and are tough for website visitors to scan.

Here is an example of an inline list:

To apply to an undergraduate program: choose a program (undergraduate programs); check the requirements (academic requirements, application deadlines, and required documents); calculate the cost (tuition fees, scholarships, and student aid); and submit your application (online application).

Vertical lists

A better option for lists of items is using vertical lists.  Vertical lists help website visitors scan lists of items to find relevant information more quickly.

Here is an example of the same content in a vertical list:

To apply to an undergraduate program:

  1. Choose a program
    • Undergraduate programs
  2. Check the requirements
    • Academic requirements
    • Application deadlines
    • Required documents
  3. Calculate the cost
    • Tuition Fees
    • Scholarships
    • Student aid
  4. Submit your application
    • Online application

Bulleted versus numbered lists

So, when should bulleted versus numbered lists be used?  The answer is simple: Use numbered lists for instructions with steps that should be taken to complete a task. Otherwise, use a bulleted list.

Accessibility guidelines

It is worth noting that the World Wide Web Consortium (W3C) advises “Using vertical (bulleted or numbered) lists rather than inline lists” in their Web Content Accessibility Guidelines 2.0.

Comments

Good resources. I have a heck of a time with bullets on Dreamweaver. Most times I can't apply my css to those bullets or numbers. Any help is appreciated.

About egrabins

UW Website Redesign on Facebook