9 Using Lists and Tables
A great way to let go of the words without losing essential meaning is to use lists and tables. Lists put active space around each item so that people can skim through the information. Tables take away words that aren’t necessary and let people easily scan for what they need.
Nine guidelines for writing useful web lists
I’ll start the chapter with nine guidelines to help you write useful and usable lists:
Six guidelines for creating useful web tables
After the section on lists, we’ll move to tables. With these six guidelines, you can help your web users easily grab information about comparisons and relationships:
1. Use lists to make information easy to grab
If you want to tell people about several items, set them out as a list. A list is easy to skim and scan.
Major tourist attractions in Beijing include the Great Wall, the Forbidden City, the Summer Palace, and Tiananmen Square.
Major tourist attractions in Beijing include:
When you were reading the paragraph version, did you find yourself making a mental list?
Compare Figures 9-1 and 9-2. By replacing the paragraph in the original Adventure Women page with lists, we help people
2. Keep most lists short
How long can a list be and still work well? It depends.
Short (5-10 items) is necessary for unfamiliar lists
If the list is not one that people immediately recognize, providing two or more shorter lists may be better. Here are two ways to shorten lists:
Look again at Figure 9-2 where the 11 items are in two short lists.
Long may be okay for very familiar lists
Some lists can be long because users immediately understand what is in the list and where the item they want is. For example, a drop-down list of the U. S. states and territories has more than 50 entries. If the states and territories are in alphabetical order, however, the length of this drop-down list is not a problem for most people. They find the right entry quickly.
In Figure 9-3, you see how the Saint Bernard Rescue Foundation offers both a drop-down list and a map for people to select a state.
Figure 9-3 If people are familiar with a specific list, know which item they want, and know where it will appear in the list, a long list may be okay.
If you have enough web page space, group the items in a long list like an index with a letter heading for each part of the alphabet. Figure 9-4 brings back the pathway page of states you saw in Chapter 4 in the case study about getting a copy of a birth certificate.
If some of your web users want to print the list, don’t put it in a drop-down box.
For printing, put a long list in two columns, as shown in Figure 9-4.
3. Format lists to make them work well
The way you present lists can help or hinder people from using them easily. You want people to be able to connect the list with its introduction, see at a glance that you are giving a list, and find each list item easily. To help users do that,
Eliminate the space between the introduction and the list
Plain HTML puts a line of space between the text before a list and the first item in the list. However, you want people to continue directly from the introduction into the list. Eliminate that extra space. Compare Figures 9-5 and 9-6 from an Australian mortgage company’s web site.
Put a space between long items
The lists up to here in this chapter all have very short lines of text. You can also have lists where each list item is a sentence – or more. When list items become long, putting them one on top of the other can make it very difficult for web users to tell that you are, in fact, giving them a list.
Figure 9-7 shows you an example from a page about getting a commercial driver’s license in the U. S.
Wrap lines under each other, not under the bullet
To make your lists look and work as lists, the bullets have to stand out. If the text wraps back to the beginning of the line under the bullet, each list item looks like a paragraph with a funny symbol at the beginning. It doesn’t look like a list.
Where a list item wraps to a second line, start the second line – and all other lines – under the text, not back under the bullet.
If you code text as list items, HTML puts in a round circle bullet and wraps the text correctly. However, if you use graphics or other symbols for bullets, you have to be careful to get the text to wrap correctly.
Also, occasionally, I still see what looks like a regular list with regular bullets and yet it doesn’t wrap well. Compare Figures 9-8 and 9-9, which show the top of a Lands’ End information page. Figure 9-9 has the same information with changes to the format that make the list much more obvious.
4. Match bullets to your site’s personality
To indicate each list item, ordinary bullets (round dark circles) are fine; but you don’t have to restrict yourself to them. If your site’s personality allows something more innovative, you have many ways of showing that personality in your lists. Because the web is such a visual medium, it has expanded our definition of bullets to include many other symbols, icons, and even small photos or illustrations.
You can use a relevant symbol instead of ordinary bullets. Remember the fish as bullets in the case study from the Food and Drug Administration at the end of Chapter 6?
You can use a series of icons as “bullets.” In Figure 9-10, the American Museum of Natural History uses different butterflies for each navigation option on the page. (This is from the example you saw as clear writing in Figure 8-4.)
These butterflies even “flutter” a bit within their white boxes as you mouse over them.
That’s okay because they move only slightly, they stay within their boxes, and they move only when you hover over them. They don’t wander around the screen.
The fluttering butterflies on this site’s home page, however, are distracting because they interfere with what people are trying to do. (I’ll talk more about this in Chapter 11 on graphics.)
Figure 9-10 Using pictures of butterflies for an exhibit of butterflies fits well with the personality the site is presenting – and may entice more people to the exhibit.
You can use photos or illustrations in place of bullets. In Figure 9-11, the U. S. National Science Foundation news site uses a small picture related to each news item both as a “bullet” and as part of the overall visual statement about the item.
Work with colleagues to establish the personality to use for bullets
See the sidebar in Chapter 3 titled Who decides on the site’s personality?
As I mentioned in Chapter 3 when talking about how the home page reflects a site’s personality, if you are the sole owner of the site (your blog, your site as a consultant), it’s your decision. If you are part of an organization, however, it’s not your decision alone. The site (including the way you use bullets) has to send a consistent message about its personality. The bullets do not have to be identical throughout the site, but they should be equally relevant, innovative, and in the same overall design scheme.
Don’t make people wonder if the bullets have more meaning than they do
I had to spend a few minutes deciding that the abcteach site in Figure 9-12 is using colors randomly.
If you use pictures as bullets, make sure that people can easily see and instantly understand the picture.
People should not have to stop and think about bullets.
Chapter 11 is all about guidelines for pictures.
Figure 9-12 Interesting and different bullets can be a great addition to a site, but not if they make people spend time trying to find meaning for the differences. Also, this page may set up incorrect expectations. The pages beyond this home page are much more serious than this page of colored stars as bullets indicates.
I wondered at first whether the colors of the stars or the links had specific meaning. Did all the green stars lead to similar types of pages? Did the yellow stars match the yellow apple at the top?
5. Use numbered lists for instructions
Much of the web is about completing tasks: arranging a loan, returning a package, booking travel, and so on. Tasks require instructions. Instructions imply sequence. Sequence = numbered steps in a list.
Create a blog in 3 easy steps: 1. create an account; 2. name your blog; 3. choose a template.
Create a blog in 3 easy steps:
Just as with the bulleted list at the beginning of this chapter, did you find yourself turning the paragraph version of these three steps into a visual, vertical list? Or did you skip the paragraph version entirely and look only at the list?
Figure 9-13 is the original of the “create a blog” page. Note how the writer uses bold, colored text, and big colored numbers to make the instructions stand out.
Always give instructions as a numbered list of the steps that people must do to complete the task. Figures 9-14 and 9-15, from eHow and Amazon.com, present numbered steps for instructions that are longer and more complex than the blogger.com example.
6. Turn paragraphs into steps
Have you ever been frustrated by instructions that aren’t easy to follow? Don’t frustrate your web users. Realize when you should be giving instructions. I see far too many pages that are paragraphs of facts when what people really want are instructions on how to do something. If your site visitors are asking, “How do I ...?” give instructions.
In Figures 9-16 and 9-17, on how to prepare concrete for a particular type of bonding, notice how I’ve turned three dense paragraphs into sections on why, what, and how. The suggested revision with headings and lists is slightly longer than the original, but it is likely to be much more effective.
Numbered lists for instructions help both site visitors and writers. They help site visitors
Numbered lists help writers
Figure 9-17 Think of recipes when you are giving instructions – even for information as technical as bonding to concrete surfaces. Isn’t this much easier to use than the original in Figure 9-16?
In paragraph form, it’s just too easy to forget a step and never realize that you’ve done that. It’s just too easy to put down the steps in haphazard order and create problems for people who don’t realize they should have done something first until it’s too late.
7. Give even complex instructions as steps
Instructions are not always a straightforward list where everyone must do all the steps. Sometimes, you have to explain branching – where the next step depends on which of two or more conditions are true.
You can still present clear instructions even for complex situations. Consider Figures 9-18 and 9-19, where I suggest a revision to the eHow instructions on removing wine stains from fabric.
If the process is very long and complex, think about it as a little web site rather than as one web page. Create a pathway page where each link leads to part of the process. Look back at Figure 5-3 about buying a home for an example of this way of structuring a complex process.
Figure 9-18 When instructions include “if” statements, people have to figure out which to do. Formatting them as consecutive steps may confuse people.
8. Keep the sentence structure in lists parallel
People are very pattern-oriented. It’s faster and easier to read a list when all the entries are in the same sentence structure.
Create a blog in 3 easy steps:
Create a blog in 3 easy steps:
Did you choose the one on the left? That’s the one in parallel structure. But did you first assume it would be the one on the right? If you did, that’s how quickly you had built a pattern from the little tables like this in this chapter.
The other two examples you’ve seen in this table format both had the “good” choice on the right. I tripped you up (at least momentarily) by breaking the pattern I had created. (Sorry to do that; I did it to make a point.)
When you are writing your web content, remember that patterns help people if you set the patterns clearly and follow them well. Parallelism is an excellent pattern to create and follow.
9. Don’t number list items if they are not steps and people might confuse them with steps
In a procedure, people work through the list of numbered steps in order. In other lists, you may be telling people that they have a choice among different ways of doing something. If you use numbers for both procedures and other lists, you risk confusing your site visitors. They may not realize that the second type of list is showing alternatives; they make think they have a procedure and have to do it all.
Compare two pages from the Land’s End web site. Figure 9-20 is about returning items if you are in Hong Kong. Figure 9-21 is the comparable page for returning items within the U.S. Both use numbered lists, but the numbering has different meanings on the two pages.
It’s interesting how often I see both great writing and poor writing on the same web site. Different writers? Perhaps. But then, sometimes, I see information that’s great and not so great even on the same page. The same Land’s End page that may cause confusion for shoppers at the top of the page (Figure 9-21) has a wonderful example of good instructions for reordering further down the page (Figure 9-22).
Figure 9-21 People may be confused by a numbered list when they are expecting steps but are getting alternative options. People tend to start Step 1 without reading the entire list. In this case, they may try to find a Sears store when the Easy Return method might, in fact, be easier for them.
Figure 9-22 This piece from the same Land’s End web page as Figure 9-21 is a good example of how to tell people about options. (One small fix: The fax number should wrap under the bullet so that the bullets stand out.)
Contrasting lists and tables
Now that I have convinced you (I hope) of many good ways to use lists in your web content, let’s turn to tables. Tables, like lists, are a great way to let go of the words that don’t matter and let people grab the essential information.
Think about the difference. What is a list? What is a table? When would you use each?
List
Table
10. Use tables when you have numbers to compare
Think “table” whenever you have sets of numbers that relate to each other in some way. Compare Figure 9-23, the original version of real estate sales figures from a blog, with the same information put into a table (Figure 9-24).
Figure 9-23 This blog includes useful numbers, but it should be formatted as a table.
toreal.blogs.com/Toronto/Toronto_real_estate_update
11. Use tables for a series of “if, then” sentences
Tables work with words, too. For example, we can replace the sentences in Figure 9-25 with the table in Figure 9-26 by turning the repeated part of the three sentences into column headings for the table.
In cases like Figure 9-26, you know you have a useful table when you can read each row of the table as an “if, then” sentence that makes sense. For example, the first row of the table in Figure 9-26 means: “If you are applying for Designated Mechanic Examiner, you are governed by the Aviation Mechanic Examiner Handbook.”
Figure 9-26 A suggested revision. With tables, you let go of unnecessary, repetitive words and make the key information easy to find.
12. Think about tables as answers to questions
Most, if not all, tables answer questions. You don’t have to use the question as a heading or, in fact, anywhere in your table. But thinking about the question that the table is answering helps you set up the table.
Figure 9-27 Putting the shipping costs for different order values on separate lines is good. But this should be a table, not a bulleted list. (The original screen has white text on an orange background. I changed the colors to increase legibility.)
Consider the example in Figures 9-27 and 9-28. Both the original and my suggested revision use the heading Shipping (a noun, not a question). But, in fact, the information answers the site visitor who starts the conversation by asking, “What do you charge for shipping?” or “How much does shipping cost?” (And the question would have been fine as a heading.)
13. Think carefully about what to put in the left column of a table
If you think of your table as a series of “if, then” sentences, always put the “if” part first. Make that the left column.
Another way to say this: When a site visitor asks a question to which your first answer is “it depends,” that’s a clue that you need a table. What it depends on becomes the left column of the table. The answer to the question for each site visitor’s situation becomes the right column.
See the related guideline about sentences (Guideline 8 in Chapter 8).
Also, look back at the very first example in this book. Figure 1-2 includes a table as the answer to “What must I submit?” With very few words, the table conveys the message: “If you are building an airport ...” and “If you are building a heliport ...”
With most tables, people scan down the left column to find the situation that is relevant to them. Then, they move along that row to get the information they need.
14. Keep tables simple
Two-column tables are easiest to fit onto web pages and easiest for people to grab information from. However, sometimes you have more than two related pieces of information to give people for each row of a table – as in the three-column table about real estate earlier in this chapter.
How large can a table be before it becomes too much for users?
Thinking about table width
Let’s talk about width first (number of columns). The web constrains us more than paper did.
If the answer to people’s question is “it depends on many things,” you may not want to create a table. The table might have to be too complex for most web users or too large to fit well on a web page.
For example, the answer to “How much does a new laptop cost?” may be “It depends on how much memory you want it to have, what size monitor you want, how fast you want it to work, what weight you are willing to carry, what other features you want, and so on.’
For complex situations, consider asking visitors a series of questions or giving them a form to fill out, rather than putting all the information into a table.
Consider breaking up large and complicated tables into a series of smaller, more specific tables. Or layer your tables – allowing web users to drill down to more details through links in the tables.
For example, in my suggested revision to the shipping charges, I would use separate tables for shipping to different parts of the world. That would be easier for most people than a large matrix with information for different people in different columns. People have difficulty jumping over information that is not relevant to them.
Thinking about table length
Let’s talk about length next (number of rows). Although most web users scroll vertically today, a long table may be more difficult to use than a long list. A table shows a relationship; people must remember the column headings for a table to understand how the pieces of information in each row relate to each other.
Again, consider breaking up very long tables into a series of smaller tables that allow you to keep the context-giving column headings close to the information.
15. Format tables on the web so that people focus on the information and not on the lines
The way your tables look can help or hinder people from getting the information that they need. Let’s close this chapter with two important guidelines about formatting tables:
Don’t put thick lines between the columns or between the rows in a table
Making each cell of a table into a box with equal weight borders all around it doesn’t help your web users. People don’t use tables cell by cell; they use tables to see relationships along a row. Thick lines between columns stop people from moving along the row – just the opposite of what you want people to do.
Also, heavy lines draw people’s eyes. You want your site visitors to focus on the essential information in the table, not on the lines between the information.
Here are two ways to make it easy to find each row and to read across the row:
The table from the English-language visa page of the German Foreign Office (Figure 9-29) uses alternate-row shading well.
Figure 9-29 Use techniques such as alternate-row shading or very light lines to help people focus on the information in tables and to help them read across the row they need.
www.auswaertiges-amt.de/www/en/willkommen/einreisebestimmungen/liste_html
Don’t center text in a table
Notice how the column headings and the information in each column of the table in Figure 9-29 line up on the left of the column. That works well. Aligning text on the left makes each column easy to scan. Centering interferes with scanning in tables just as it does in other parts of your web pages.
In tables, set all column headings and columns with words flush left, ragged right. If you are giving numbers, line them up on a decimal tab.
SUMMARIZING CHAPTER 9
Here are key messages from Chapter 9: