10 Breaking Up Your Text with Headings
As you develop your web content, think about how to help people follow the flow of your writing or find just the section of an article that they need. One useful way is to use bold or colored headings within the article.
Compare Figure 10-1, the iVillage page on blood pressure without any headings, with Figure 10-2, the Familydoctor.org page on the same topic with several headings. Which would you be more likely to read?
Good headings help readers in many ways
The purpose of a heading is to help communicate the content that is under the heading. Well-written headings in well-organized text help readers by
Thinking about headings also helps writers
Headings form an outline of what you are going to write. Planning the headings is a way of analyzing the information you have, grouping it well, and putting it in an order that is logical for readers. (More about this follows in the first guideline.)
Always mark headings with the proper HTML tags, <H1>heading text</H1> for heading level 1, <H2>heading text</H2> for heading level 2, and so on. Users of screen-readers want to scan web pages just as sighted users do. They can have the screen-reader jump from heading to heading, but only if the headings are properly tagged.
Don’t just slap headings into old content
Headings can be very helpful, but they can’t save poorly written, poorly organized text. Going through existing content and putting in a heading every so often does not usually produce a good document. That’s actually a good technique as a first step in revision – a way to become more familiar with the content you are working with. But it’s a terrible technique if you stop there.
Whether you are writing new content or revising old content, if you find it difficult to write a heading for a section of text, it probably means that the section is not clear or covers too many points all jumbled together. Clarify the content. Break it up into smaller sections. If you find yourself writing the same heading over different sections of text, it probably means that the material is not well organized. Reorganize it to be logical for your site visitors.
Poor, arbitrary headings may hurt web users rather than help them.
Thanks to Caroline Jarrett for teaching me this technique of putting headings in old content as a first step in revision. Very important: This is just to get a sense of the content and to plan your revision. You will probably want to reorganize and rewrite the content with new headings in a new order.
Twelve guidelines for writing useful headings
In this chapter, we’ll consider these 12 guidelines to help you help your web users with good headings:
1. Start by outlining your content with headings
I’m not talking about formal outlining with roman numerals, letters, and so on. Just put down the headings in order. If you use more than one level, indent a bit for the second level. You can then see the patterns you are creating at a glance.
(This is the same advice that I gave in Chapter 6, Checklist 6-1, where I suggested starting by putting down the questions that people would ask. Here I’m elaborating a bit to say that sometimes you’ll keep those questions as your outline, and, therefore, your headings. Sometimes, you’ll turn them into statements (key messages). If they are all “how do I ...” questions, you’ll turn them into action phrases. And sometimes, if you are just labeling parts, you’ll use nouns. In the rest of this chapter, we’ll explore when, why, and how to use each of these types of headings.)
For example, the outline for the International Aviation Art Contest web page that I constructed in Case Study 6-1 would look like Figure 10-3.
2. Ask questions as headings when people come with questions
In many types of web content, questions work extremely well as headings. That’s because site visitors come with questions in mind. When you write their questions as the headings in your web content, you acknowledge the conversation that they want to have with you.
As I said back in Chapter 1, I’m not suggesting that you make your entire site a huge section of frequently asked questions. That would only make it hard for people to find their specific question. I’m suggesting questions and answers (Q&A) as an appropriate writing style for many of your individual web pages, like the FamilyDoctor.org page that you just saw as Figure 10-2.
In fact, Q&A is more than a writing style; it’s a fundamental viewpoint about making a web site focus on the people who are coming with questions. Of course, sometimes, you have to put a question in people’s minds that they may not have thought to ask but will recognize as important when they see it on the web page.
For example, many people wonder whether pandas are really bears. Seeing the question, “Are giant pandas bears?” on the San Diego Zoo’s site may draw them into finding out that pandas are, in fact, related to bears. And then they may keep reading the panda page (Figure 10-4).
Questions make very useful headings in all these different types of web content:
(You can also use statements as headings in these same types of documents, as you see in the panda page in Figure 10-4. I’ll talk more about statements as headings in Guideline 3 a little later in the chapter.)
Figure 10-4 This page about pandas shows both question headings and statement (key message) headings.
Writing good questions for headings is not a trivial task. Here are four keys to writing questions that work well as headings in web content:
Make them the questions people come with
Too often I find that web writers have turned their information into questions and answers, but it’s still their information – what they want to tell people about themselves, not what their site visitors come to learn. The web writers have not thought deeply enough about their audiences and the questions those people have. They haven’t organized the page by putting the questions and answers into an order that is logical to their web site visitors.
Case Study 10-1 shows how we can take a set of organizationally focused questions and turn them into a set of reader-focused questions.
Case Study 10-1: Making question headings ones that site visitors would ask
If you want to complain about a bank in the United States, you might get to the web site of the U. S. Department of Treasury. They regulate nationally chartered U. S. banks. However, they are not the right place to go if your complaint is about a bank that is chartered by a specific state – a distinction few people have thought about.
Here’s how their web page about consumer complaints and assistance started in 2006:
How well does this meet the needs of the site visitors it is for? Just think about the mental state of the person who wants to lodge a formal complaint about a bank! What adjectives come to your mind about this site visitor?
Does this site visitor really want to know what the OCC is? The upset site visitor in the picture on the previous page might not read “What is a national bank?” because he doesn’t yet know it is a question that is important for his problem.
How might the Department do a better job of getting its critical information to angry and upset people and also save themselves calls from people who should go elsewhere with their complaints? Revising the beginning and writing the question headings from the site visitors’ point of view might help.
A possible revision
Think conversation. Ask the question from the site visitor’s point of view
As I wrote in Chapter 8, if you use questions as headings, write as if you were recording both sides of the conversation. Use “I” for the site visitor in the question and “you” for the site visitor in the answer.
Which version of the question about applying for food stamps in Figure 10-5 is more natural? (I copied these short pieces from two different U. S. counties’ web sites.)
Keep the questions short
When you use questions as headings, people often skim the question just enough to decide, “yes, that’s what I want to know.” After all, the real meat of the web content is the answer to the question and people are anxious to get to it.
Long questions take up precious space on the web page. Also, as headings, the questions are in bold or color, and large blocks of bold or color become difficult to read. And – despite the power of headings – some site visitors use the headings only as landing spots to see where new sections start. They don’t actually read the headings.
Cut your questions down to essentials, just as you cut your content to essentials. For example, if your entire web page is on a particular topic, you don’t need to repeat the topic in each question on the page. Compare Figure 10-6, which has two questions totaling 22 words as the heading, with Figure 10-7, where the heading is only 12 words long.
If you find yourself writing a long question, ask yourself:
Consider starting with a key word for fast access and accessibility
Although questions work wonderfully well as headings for many types of web content, they have one downside. The key word in the heading is not at the beginning. If the question is short, sighted readers can see the key word quickly even if it is in the middle of the question. However, people who are listening to screen-readers may not get to the key word. They often skip rapidly from heading to heading, listening only to the first few words.
A solution that may also help sighted readers who scan rapidly is to combine a key word with the question, as in Figure 10-8.
3. Give statement headings to convey key messages
When you write questions as headings, you play out both sides of the conversation. You put the site visitor on the page with you – the site visitor asks the question; you answer it. When you write statements as headings, you assume the site visitor has asked the question. You keep your site visitors in mind and talk directly to them, without putting them on the page with you.
Statement headings work well in the same types of documents as questions. With statement headings, you are making your key messages stand out on the page in large bold or colored type. That’s what you see in Figure 10-9, a page about PayPal from eBay’s web site.
Figure 10-9 Action phrases like “Stay Safe” and statements like the three main headings here work very well for some web content.
pages.ebay.com/paypal/buyer/protection.html
4. Use action phrase headings for instructions
Many of the questions that users bring to web sites are “How do I ...?” If you have only one such question with many other questions on a web page, it’s fine to keep that as a question.
However, if you have a series of questions, all of which would start “How do I ...?” people may have a hard time finding the one they want.
| How do I set up an account? | Setting up an account |
| How do I view my information? | Viewing your information |
| How do I change my information? | Changing your information |
| How do I pay online? | Paying online |
| How do I get help? | Getting help |
Which set of headings is easier to scan and use?
When you find yourself writing “how do I ...” over and over, take away the repeated words and start each heading with the action word.
Action phrases make great headings in any type of instruction: manuals, procedures, or help for a web application.
Two good ways of writing action phrase headings are with gerunds (the form that ends in “-ing”) or with imperatives (the “Do this ...” form of the verb).
Instruction writers commonly use the “-ing” form when dividing web content into different tasks. An example would be the list of tasks in the right column of the table on this page. On the web, each of these headings, like “Setting up an account,” would probably link to its own web page. And the specific steps on that page would probably each start with an imperative.
The imperative works very well within a web article as a heading style for tips and short paragraphs of advice. Look at the example from Celestial Seasonings in Figure 10-10.
5. Use noun and noun phrase headings sparingly
I see a lot of nouns as headings. They work sometimes; but more often than not, they don’t work because site visitors don’t know the nouns, don’t connect to the nouns, don’t give the nouns the same meaning the web writer did. Nouns as headings often don’t help either the writer or the site visitor understand the flow of the writing – why one section logically comes before or after another section.
Nouns label things; they aren’t conversational. Unlike questions, statements, and action phrases, which provide context and some explanation, a noun has to carry all the meaning of the heading in a single word.
Occasionally, labels are all you need on a web page. For example, Figure 10-11 shows an eye-tracking picture of one person looking for tax forms and information about reporting charitable contributions. In this case, the nouns in alphabetical order worked for this web user.
Figure 10-11 An eye-tracking gaze plot showing the path a single user took on this page from the U. S. Internal Revenue Service’s web site. The page has noun headings used as topic labels. They worked in this case because the user was seeking the same words that the site uses. (Eye-tracking by Jacob Nielsen and Kara Pernice Coyne, Nielsen Norman Group. Used with permission. For more information about the study this picture comes from, see www.useit.com/eyetracking.)
Figure 10-12 is another example where labels work. It’s a page from the intranet of Salesforce.com, listing the various programs that employees may use to contribute to their community. This works because the writer and other employees use the same labels for these programs. And that is much more likely inside a company than between a company and its external web visitors.
Figure 10-12 Nouns are labels. If people coming to the site use those labels, the nouns may be useful headings. (From the Salesforce.com intranet. Used with permission. Thanks to Catherine Courage and her colleagues.)
Much more often, however, nouns as labels aren’t enough to meet the needs of busy people skimming and scanning for information.
Also, with nouns as headings, getting the information into logical order may be difficult. Figure 10-13 is the Tracking Your Order page from llbean.com. Notice how the noun headings don’t help you understand what is in the paragraphs. Notice how much is stuffed under one heading that should really be in separate sections. Notice how the last paragraph belongs with information much higher on the page.
Figure 10-13 Nouns as headings can confuse people. Also, nouns as headings are harder to get into the right order than are questions, statements, or action phrases.
Figure 10-14 is a possible revision of Figure 10-13. Notice how much more informative the action headings are. Notice how thinking of individual actions means breaking up the text into smaller pieces. Notice how the order of the pieces becomes more logical when we think about these as actions.
Figure 10-14 My suggestion for reorganizing and rewriting the L.L. Bean page about tracking your order.
6. Put your site visitors’ words in the headings
No matter what type of heading you write, the headings in your web content must make connections between what’s in your site visitor’s mind and the information you want to give. If you write the heading with words they don’t know, your site visitors may not recognize that the heading is what they need.
7. Exploit the power of parallelism
In Chapter 9, you saw the power of parallelism in lists. In the same way that it works for lists, using the same sentence structure (the same pattern) for your headings helps people scan and grab information from your web pages.
| Do It Yourself: Wallpaper | Do It Yourself: Wallpaper |
| Everyone loves wallpaper | Getting ready |
| Preparation | Preparing the walls |
| Removal of wallpaper | Removing old wallpaper |
| Straight line marking | Marking a straight line |
| Cutting the wallpaper | Cutting the wallpaper |
| Wallpaper soaking | Soaking the wallpaper |
| Hang the first sheet | Hanging the first sheet |
Did you find the headings on the right quicker and easier to scan and remember?
If you use questions for your level 1 headings, make all the level 1 headings questions. If you use action phrases for your level 1 headings, make them all action phrases. That is, be consistent (parallel) in the style you use within the same level of heading in the same article (or even the same type of web content).
If you choose to break the pattern, do it for a good reason. I broke my pattern on the revised L.L. Bean web page for one heading. I did it to shock readers and make that point stand out. The point about keeping your gift a secret is not a part of the flow of the process that the other headings describe. It’s an “aside,” so changing the heading pattern there was purposeful.
You don’t have to do all the levels in the same style. In fact, it’s a good idea to change the style for different levels. That’s one way to help people know what level each heading is at.
8. Don’t dive deep; keep to no more than two levels of headings (below the page title)
On the screen, you have less room to work with than on paper, so you can’t have as deep a hierarchy of headings in a web article as you might in a typical book chapter. Web articles should be much shorter than a typical essay or book chapter. Very long articles should be broken into different sections on different web pages.
If you have a short article with short sections, a page title and then one level of headings is best. If you have a long article, you probably want a page title and then two levels of headings. Use heading level 2 for subtopics of topics.
Figure 10-2, the article on high blood pressure from FamilyDoctor.org, has a page title and one level of headings. The outline in Figure 10-3 of the web page for the International Aviation Art Contest has a page title and two levels of headings.
9. Make the heading levels obvious
Changing the way you write the different levels is one way of making it clear that you have a hierarchy of information on the page. (The outline in Figure 10-3 has questions for heading level 1 and nouns for heading level 2.)
Another way to signal heading levels is to change the format. You can show different levels of heading with type size or placement
Make sure that the headings get larger when the rest of the text gets larger for people who change the type size. You can do that by setting headings to be a percentage of the text type, and not an absolute size.
10. Distinguish headings from text with type size and bold or color
To make all the headings (at all levels) obvious as your site visitors come to each of your web pages, use bold or color.
Whatever you choose, use it consistently, and also consider these points:
11. Help people jump to the topic they need with same-page links
If your web page has several topics with a heading over each topic, you might make those headings into a table of contents at the top of the page. A short table of contents at the top of a web page helps people
What do you call the headings as links at the top of the page? I’ve heard: “anchor links,” “in-page links,” and “same-page links.” I’m calling them “same-page links” here.
Figure 10-15 is a good example of same-page links from a U. K. group that is very concerned about making its web site easy to use. (Thanks to Tom Brinck for suggesting this example.)
Put same-page links right under the page title
Watching people in usability testing, it’s striking to see how quickly they focus on the links when they come to a web page. If there’s a list of same-page links near the top of the page, they are likely to just not see anything above that list of links.
Don’t put off-page links where people expect same-page links
Remember that people bring expectations to your web pages. They expect that a list of links within the content area at the top of a web page will take them to information on that page. Meet that expectation.
Don’t put same-page links in the left navigation column
Just as users don’t expect links at the top of the content area to go off the page, they don’t expect links in the left navigation area to stay on the page. The left navigation is usually other topics that may be related, that may be in the same section of the web site, but that are not on the same web page.
I was doing a usability test of a web site as the first step to revising the site. One of the pages that participants reached had a good set of questions and answers grouped by topic. Participants liked the questions and answers but complained that they had to scroll when they would have liked to jump to the topic they needed. Several suggested “a list of the topics at the top like you see on lots of other web pages.’
In fact, the list was on the page; it was in the left navigation column. But the participants’ reaction was “I wouldn’t look there. That’s where I look when I think my answer isn’t on this page.” (This page is gone; the site has changed.)
Link headings as you move from paper to web
Providing same-page links is one of the easiest and most useful changes you can make if you are moving a paper document to the web. (Of course, I urge you to review the entire document, rethink it for the web, probably break it up even more than it is, and so on; but in any case, make sure that each section you make into a web page has useful headings and turn them into same-page links.)
12. Evaluate! Read the headings to see what you have done
How do you know if you’ve got good headings? Use this technique with both your old content before you revise and your new content when you have a draft.
If you answer “no” to any of these questions, the headings are not working well. You may need better headings. You may need to rethink, reorganize, and rewrite the content.
SUMMARIZING CHAPTER 10
Here are key messages from Chapter 10: