Vertical lists – writing and usability tip
Posted January 23rd, 2009 by Eva Grabinski
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:
- Choose a program
- Undergraduate programs
- Check the requirements
- Academic requirements
- Application deadlines
- Required documents
- Calculate the cost
- Tuition Fees
- Scholarships
- Student aid
- 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.
- Login to post comments
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.
Posted by disney netpal case on July 6th, 2009 at 8:09pm