Design Tip:
Lists Visitors Love To Read

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

So you've agonized over text content and spent days (or months) getting it just right. Was it worth the effort? Only if you gave as much thought to presentation as you did to content. After all, what's the use of all this great text if nobody reads it? When you start formatting text content on your pages, remember that your best friend is none other than the humble list.

Catch The Visitor's Eye

Web users are goal-oriented: they look for specific information and expect to find it quickly. They're likely to overlook even the most valuable content if the text isn't formatted for easy scanning and reading.

That's why lists are so helpful: they're easy for you to code and for visitors to read. Lists attract the eye and highlight your most important content.

What do visitors see first on a Web page? According to usability guidelines from the Northwest Alliance for Computational Science and Engineering (NACSE), the best way to help visitors locate key content is to use page elements that catch the eye.

Some of the most useful eye-catching elements are:

Both ordered and unordered lists are a great way to attract visitor attention to your most important page content. Here's an example: read the next paragraph and decide whether it's easier to scan than the bullet list above. They both contain the same content.

Some of the most useful eye-catching page elements are: images, color, headings and subheadings, larger text, bullet lists.

See what we mean?

Images and color add visual appeal to a page, so visitors tend to notice them first. But after appreciating the esthetics, most people are ready to give the text at least a cursory look. They'll pay close attention when they locate the information they need.

Coding Basic Lists

It's great when important stuff is so easy to code! The only difference between an ordered list and an unordered list is the opening and closing tag.

Here's the code for two simple lists:

Here's how those lists look in a browser:

Note that we added the important TITLE attribute to both lists. That descriptive text gives valuable information to visitors using assistive technologies like screen readers.

These examples also show you how to include basic HTML formatting inside opening and closing

tags to make the text bold or to make all or part of the link text a hyperlink.

Spacing List Contents

In a study done by the Software Usability Research Laboratory (SURL at Wichita State University, researcher Kelly Spain found definite user preferences in list spacing and presentation.

Spain tested survey participants' ability to locate specific information from a group of links displayed in three different list formats:

Participants were far more likely to locate the requested information if the links were either bulleted or had line spacing between the individual items. They complained that the no-bulleted, no-spaced list was too hard to read and interpret. At the conclusion, Spain noted that:

"This data supports the hypothesis that bullets and spaces result in more accurate information retrieval than no spaces."

Of course, the drawback to both bullets and spaces is that you use up far more valuable real estate on the screen. If the list is simply a collection of one-line items (like those in our examples), a bullet list with no spacing is fine. However, if you're adding several lines of explanatory text to each list item, consider combining bullets (or numbers) and spacing.

By increasing the overall readability and usability of your Web pages, you make the site more attractive to visitors - all without adding a single extra image.

In an upcoming issue, we'll discuss how to add style definitions to lists and show you how to compensate for unexpected browser display problems!

Rate This Tip: Not Useful Useful Very Useful