11
Using Lists and Tables
,A great way to let go of words without losing essential meaning is to use lists and tables. Lists put active space around each item. Tables take away redundant words. Both let people skim and scan.
Six guidelines for useful lists
Let’s start with six guidelines for useful and usable lists.
1 Use bulleted lists for items or options
A list is easy to skim and scan.
When you were reading the paragraph version, did you find yourself making a mental list?
Lists help people
Think “list” whenever you have several options or items. Compare the presentation of the same information in Figures 11-1 and 11-2, on what to pack for camp.
Figure 11-2 My suggested revision
2 Match bullets to your site’s personality
Round dark circles (ordinary bullets) are fine. However, if your site’s personality and your content strategy allow something more innovative, you can show that personality visually in your bullets.
More examples of graphics as bullets – Chapter 13 on illustrations
For example, the American Museum of Natural History uses different butterflies for each navigation option on the page about its butterfly exhibit (Figure 11-3).
Figure 11-3 Pictures of butterflies make good “bullets” for the links to web content about a butterfly exhibit.
This should look familiar. I used the text of this page as an example in Chapter 10.
These butterflies “flutter” a bit within their white boxes as you mouse over them. That’s okay because they move only slightly. They stay in their boxes and move only when you hover over them.
In the first edition of Letting Go, I complained that the home page of this exhibit had butterflies fluttering all around the page, interfering with what people would be trying to do. I’m glad to say that those roaming butterflies are gone. The home page of this exhibit now features an excellent short video.
Bullets should reflect the site’s personality
As you work with content strategists, brand strategists, and other colleagues to establish the site’s personality, think about the ways you and others in the organization will use bullets. The bullets don’t have to be identical throughout the site, but they should always fit the personality that part of the site is expressing. Your style guide for the site should include what content owners may use as bullets. (More on style guides in Interlude 5 after Chapter 14.)
If you use different bullets, make sure their meaning is clear. For example, the different colors of the bullets at the ABC Teach site might (or might not) indicate groupings or different sections of the site – but it’s not clear if they do or what each color represents (Figure 11-4).
Figure 11-4 This colorful site looks like fun for teachers. But if people stop to wonder whether the colors indicate different sections or ages or something else, the site has caused them to take extra time.
3 Use numbered lists for instructions
Many of the conversations people have with web sites are about how to do something: arrange travel, pay a bill, buy a product, and so on. Tasks sometimes require instructions. Instructions imply sequence. Sequence = numbered steps.
You’ll see the actual Twitter page later in the chapter (Figure 11-9).
Did you look at the paragraph at all? Did you go directly to the list? If you looked at the paragraph, did you find yourself turning it into a mental list, just as you did with the example in Guideline 1 about bullets?
Numbered lists help both site visitors and content authors.
With a numbered list, site visitors can
• see at a glance how many steps there are
• check off steps (mentally, even if they can’t write on the screen)
• read one step, do it, and find the next step easily when they come back to the list
With a numbered list, you as a content author can
• be sure you have not left out a step
• put the steps in the correct order (and save people from the potentially serious consequences of doing the steps in the wrong order)
• check that the procedure works well (by reviewing or trying out the steps)
Turn paragraphs into steps
Don’t frustrate your site visitors. If your site visitors are asking “How do I …?” give them instructions in a numbered list.
In Figures 11-5 and 11-6, 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. My revision with headings and lists is slightly longer than the original, but it is likely to be much easier for people to use.
Figure 11-6 My suggested revision
If you write instructions as paragraphs, you may forget to put down a step and not notice. Your site visitors may lose their place in the paragraph and skip a step. When you write instructions in paragraphs, you may get steps out of order without realizing it, creating problems for people who are trying to do the task.
For branching, consider a table under the step
Instructions are not always a simple list where everyone must do all the steps. Sometimes, the next step depends on which of two or more conditions are true – “If this…, do x,” “If that…, do y.”
If the process is very long and complex, think about it as a little web site rather than as one web topic. Create a pathway page where each link leads to part of the process. Look back at Chapter 6.
You can still give clear instructions. Consider Figures 11-7 and 11-8, where I show how I would clarify instructions on removing wine stains from fabric.
Figure 11-7 When instructions include “if” statements, hiding the “if” inside an instruction or putting two “ifs” in consecutive steps may confuse people.
Figure 11-8 My suggested revision to clarify the branching and alternative instructions
Follow “if, then” in instructions and tables
The original eHow instructions 5 and 6 use the structure “then, if”: “Wash in cool water and air dry if the fabric is machine-washable.” That’s backwards. You have to read to the end, decide if that’s true of your fabric, and then go back to the beginning to get the action.
Remember the concept of “given-new” – context before action – from Chapter 10, Guideline 8, Case Study 10-4. Always try to put the “if” part before the “then” part of a sentence.
However, the guideline to put context before action, if before then, conflicts with the guideline to start instructions with an action verb.
How do you do both? My solution: Make the decision point explicit with an action verb. (For example, Review the washing instructions…) Then put the “if, then” options in a table.
In the table, always put the “if” part in the first column. (More about that later in the chapter when we get to tables.)
Show as well as tell
Sometimes, a picture can help clarify a step. The Twitter example that started this section shows where to find the “delete” option (Figure 11-9).
Use numbered lists for noninstructions thoughtfully
Sometimes, you can use a numbered list when you are not giving steps. For example, blog articles like “10 Tips for …” or “5 Keys to …” are very popular. In many chapters of this book, I’ve numbered the guidelines. In these cases, it’s clear that the numbered items are not steps.
But if the same blog post included a numbered list of instructions, the two different uses of a numbered list might confuse people. If you have both types of lists – a set of instructions where people should do each step and a set of options where people should choose only one – don’t use numbers for both of those lists. Use numbers for the instructions and bullets for the options.
Case Study 11-1 shows how using both lists at once might confuse people.
Case Study 11-1 Using both bulleted and numbered lists
E-commerce sites have to explain when you can return an item and how to return it. They also want you to order something else, so they have to tell you how to reorder.
For how to reorder, Lands’ End does a great job. A bulleted list is best here because the four items are options. You do only one.
But higher up on the same web page, Lands’ End doesn’t follow that same good pattern when telling people how to return the item. They use numbers for the options and bullets for the steps.
Using bullets where this example has numbers and numbers where it has bullets would better match people’s expectations and would be more consistent. My suggested revision would look like this:
4 Keep most lists short
How long can a list be and still work well? It depends.
Short (5–10 items) is best for unfamiliar items
If people will not immediately recognize all the items in the list, break up long lists. If possible, group the items so that you can make several shorter lists each with its own heading.
Look back at Figure 11-6 about concrete to see how I broke up a list of 12 items.
Long may be okay for very familiar lists
Some lists can be long because your site visitors immediately understand the topic of the list and know how far down the list the item they want is likely to be.
For example, a list of U.S. states and territories has more than 50 items. However, if the list is in alphabetical order, the length is not a problem for most people. They find the right entry quickly, whether you use a dropdown (Figure 11-10) or an open list (Figure 11-11).
Figure 11-10 If your site visitors are familiar with the list, know which item in the list they want, and know how far down the list it will be, a long list may be okay.
If some of your site visitors want to print the list, it’s better in an open format like Figure 11-11 than in a dropdown like Figure 11-10.
5 Try to start list items the same way
People are very pattern-oriented. We find it faster and easier to read a list when all the entries are in the same sentence structure.
Which list worked best for you? Did you choose the one on the left where each item starts with a verb?
But did you first assume it would be the one on the right – because all my previous comparisons have had the “good” choice on the right?
If you did, that’s how quickly you had built a pattern from the little tables like this in this chapter. 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 web content, remember that if you set the patterns clearly and follow them well, your patterns can help people. Parallelism – starting each list item the same way – is an excellent pattern to create and follow.
6 Format lists well
Information design – the way you present information on the screen – can also help or hinder people from finding what they need easily. Information design applies to lists (and tables) as well as to all other features of typography and layout.
When designing lists, you want people to connect the list with its introduction, see at a glance that you are giving a list, and find each list item easily. Four keys to formatting lists well:
• Reduce space between the introduction and the list.
• Put a space between long list items.
Reduce space between the introduction and the list
Plain vanilla HTML puts a line of space between the text before a list and the first item in the list. To help people visually group the introduction with the list, reduce that space through a cascading style sheet (CSS). In this book, we use 12 points between paragraphs but only 6 points between the introduction to a list and the first list item.
Put space between long list items
Single spacing works for lists with short items. However, you need more space between items for numbered lists (where each item is usually a full sentence) and for bulleted lists where each item is more than aline long.
Wrap lines under each other
To make your lists look and work as lists, the bullets or numbers have to stand out. If the text wraps back to the beginning of the line (under the bullet or number), each list item looks like a paragraph with a funny symbol at the beginning. It doesn’t look like a list.
Compare the Lands, End example I used (and revised) in the first edition with the way Lands, End gives the same list now (Figure 11-12).
Put what happens on a line by itself
When giving instructions, sometimes you want to tell people what happens after they do a step. A good way to show that is to put the result on a line by itself, under the step, and indented like the step. Figure 11-13 shows what I mean.
Figure 11-13 Keep the instructions easy to follow by putting extra information under the instruction and indented with the text.
Lists and tables: What’s the difference?
Now that I have convinced you (I hope) of many good ways to use lists in your content, let’s turn to tables. Tables, like lists, are a great way to let go of words so people can grab the essential information.
Think about the difference? What is a list? What is a table? When would you use each?
How lists and tables differ
| Lists | Tables | |
| Categories of information | 1 | At least 2 |
| Number of columns | 1 (even if it wraps to look like more than one) | At least 2 |
| Shows relationship? | No | Yes |
The list of states and territories in Figure 11-11 may look like a table because it is set in four columns. It’s not. It’s a list, wrapped on itself. It has only one category of information (names of states and territories).
A table is a set of “if, then” sentences. Read the first column as the “if” clause. Read the second column (and other columns) as the “then” clause(s). For example, “If we are comparing the number of categories for lists and tables, then lists have one and tables have at least two.” “If we are comparing the number of columns…” and so on.
Six guidelines for useful tables
Use these guidelines to help your site visitors find the right information for their situation quickly and easily.
1 Use tables for a set of “if, then” sentences
When you see the same words repeated in several sentences (as in Figure 11-14), think “table.” Take the common words and make them the column headings. Remove the redundant words, as I’ve done for Figure 11-15.
Figure 11-15 My suggested revision
2 Use tables to compare numbers
When you have numbers that relate to each other, think “table.” A table is a good choice for the comparisons in Figure 11-16, but we could improve the table in several ways.
Figure 11-16 Tables make numbers easy to compare, but this table could be even better.
3 Think tables = answers to questions
Tables answer questions. You don’t have to use the question as a heading. You don’t have to have the question anywhere in yourtable. But thinking about the conversation site visitors comewith and the question(s) that the table answers can help you set upthe table.
4 Think carefully about the first column
Whenever the answer to a question is “it depends,” think “table.” What the answer depends on becomes the first column of the table. The answer to the question for each site visitor’s situation becomes the second column.
This is another case where the principle of “given-new” applies. (Look back at Chapter 10, Guideline 8, Case Study 10-4, the “yams.”)
We read sentences across the page (left to right in English and many other languages, right to left in Arabic and Hebrew). When we identify text as a list, however, we read down the page. When we see a table, we scan down the first column to find our situation and then we look across that row to get what we need.
What if the answer depends on many things?
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 the web page – and certainly to fit well on a mobile.
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 screen you want, how fast you want it to run, what weight you are willing to carry, and so on.”
For complex situations, consider asking site visitors a series of questions or giving them filters to apply to their choices rather than putting all the information in one table.
Case Study 11-2, about shipping costs, is relevant to every e-commerce site. It’s also a great case for letting go of words, for the difference between a bulleted list and a table, and for handling multiple situations at the same time.
Case Study 11-2 Knowing when to use a table
Consider the typical conversation about shipping costs for any e-commerce site.
Consider the next example with a bulleted list. Is this the best way for the site to take the next turn in the conversation?
Did you come up with the same critique that I did?
Now consider the example with a table. Would this be a better answer to our site visitor’s question?
5 Keep tables simple
Two-column tables are best both for space and ease of use. Sometimes, however, you have more than two related pieces of information to give people for each row of a table. How large can a table be before it becomes too much for site visitors?
How many columns?
Use only as many columns as your site visitors will be able to see all at once on whatever screen they are using. If all your information pieces are small, you may be able to fit three or even four columns in your table and still have people see it even on their mobiles.
Consider web constraints
The web constrains us much more than paper did.
• No fold-outs. You can’t create fold-out pages the way some old paper reports did.
• No horizontal scrolling. One of the strongest findings from usability testing is how few people notice a horizontal scroll bar.
• Small screens. You cannot assume that all your site visitors have large monitors with maximized windows. If your app or site is likely to be viewed on a mobile device, you know you need to keep your tables small. But even if all your site visitors are at desktop computers, they may still have smaller monitors than the one you are working on. They may magnify what they can see so they are not using your default resolution. They may keep many windows open and not use the entire screen for your site.
Consider breaking up large and complicated tables into a series of smaller, more specific tables. Or layer your tables – allowing your site visitors to drill down to more details through links in the table.
Consider site visitors’ conversations
The example about renting an RV back in Figure 11-16 combines size of vehicle, cost, number of days, and season all in one table – a lot of information. Yet, it may work because people are primarily using it for comparison. They actually want all that information.
The example in the case study is different. When they come to the Shipping Charges table, site visitors know where they want the package to be sent. Information for any other geographic location is not relevant and would only get in the way of their finding what they need.
That’s why I would use links to take people to the small table that is relevant to the location they want. Having small, specific tables for shipping is easier for most people than a large matrix with information for different people in different columns. People have difficulty jumping over columns that are not relevant to them.
Research shows that older adults are less able to quickly suppress nonrelevant information than younger people are. As we age, our ability to sort relevant from nonrelevant seems to decrease.
How many rows?
Although most site visitors scroll vertically today, a long table may be more difficult to use than a long list. A table shows relationships. Your site visitors must remember the column headings for a table to understand how the pieces of information in each row relate to each other.
Break very long tables into a series of smaller tables that allow you to keep the context-giving column headings close to the information.
For information on how to construct and tag a table so that screen-readers can work with it: http://webaim.org/techniques/tables/.
6 Format tables well
Information design applies to tables, too – as it does to all parts of all your web content.
Reduce lines: Help people focus on information
People use tables to see relationships along a row. Thick lines between columns stop people from moving easily 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 pieces of information. Don’t make each cell of a table into a box with thick, equal-weight borders all around it.
A few ways to format better tables:
The RV rental example in Figure 11-16 shows how effective shading can be to separate rows of a table.
Line up columns: Don’t center text in a table
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 content. In tables, set all column headings and columns with words flush left, ragged right. When you give numbers, line them up on a decimal tab.
Which table is easier to use, Figure 11-17 or Figure 11-18?
Figure 11-17 Centering makes tables look busy and hard to use.
Adapted from the web site of a bank
Figure 11-18 My suggested reformatting – aligning text on the left margin of each column and aligning numbers on the decimal point
Summarizing Chapter 11
Key messages from Chapter 11:
Lists
• Use bulleted lists for items or options.
• Match bullets to your site’s personality.
• Use numbered lists for instructions.
– For branching, consider a table under the step.
– Use numbered lists for noninstructions thoughtfully.
– Short (5–10 items) is best for unfamiliar items.
– Long may be okay for very familiar lists.
• Try to start list items the same way.
– Reduce space between the introduction and the list.
– Put space between long list items.
Tables