9
Including Useful Headings
,Let’s move from the headline at the top of your content to the headings inside the content. Headings – short and in bold or color – divide your web content on a single topic into manageable pieces.
In a typical conversation, the people who are talking to each other take turns. Headings – especially question headings – are your site visitors’ turns in the conversation.
Good headings help readers in many ways
Well-written headings in well-organized content help readers
Thinking about headings also helps authors
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 your site visitors.
Headings with keywords your site visitors are using in their searches help your SEO.
People who listen want to scan just as sighted people do. They can have their assistive software jump from heading to heading – but only if the headings are properly tagged.
For both SEO and accessibility, you must tag headings properly: <H1>headline text</H1>, <H2>heading text</H2>, and so on. Bigger, bolder text that is not tagged won’t be seen as a heading by either search engines or accessibility software.
Compare Figures 9-1 and 9-2. Which version of the information on physical exercise would you be more likely to read and use?
Figure 9-2 My suggested revision with headings
Both versions are conversational. They have the same words and the same organization. The difference is only in whether you show the organization, break up the text, and make the key messages stand out.
Eleven guidelines for writing useful headings
These 11 guidelines will help you help your site visitors:
1. Don’t slap headings into old content.
3. Choose a good heading style: questions, statements, verb phrases.
4. Use nouns and noun phrases sparingly.
5. Put your site visitors’ words in the headings.
6. Exploit the power of parallelism.
7. Use only a few levels of headings.
8. Distinguish headings from text.
9. Make each level of heading clear.
1 Don’t slap headings into old content
Going through existing content and putting in a heading every so often does not produce good information. Poorly written, arbitrary headings may confuse your site visitors instead of helping them.
Put headings into old content as a first step
To become familiar with the content you have, go through it, trying to write a heading for each paragraph. That can be a useful first step in revising.
• If you find it difficult to write a heading for a section of text, it probably means the section is not clear or covers too many points all jumbled together. Clarify the content. Break it into smaller sections.
• If you find yourself writing the same heading over different sections of content, it probably means the material is not well organized. Reorganize it to be logical for your site visitors.
Next, list the headings as if they were a table of contents. Do they make a good outline? Do they make sense as a whole? Do they flow? Is this what site visitors want to know? Are these the key messages you should be giving? If not, step back and revise, or even start with a new outline.
Thanks to Caroline Jarrett for teaching me this technique of putting headings into old content as a first step in revision. But as Caroline says, “Don’t stop there.”
2 Start by outlining
An outline is just your headings in order. Don’t stress about using roman numerals, letters, or an elaborate numbering scheme. If you just put down the headings you are going to use in the order you are going to use them, without any text under them, you have an outline.
If you use more than one level, indent a bit for the second level of your outline. You’ll see the pattern you are creating.
Figure 9-3 shows the outline for the web content in Case Study 7-1 about the International Aviation Art Contest.
Figure 9-3 The outline for a web topic
I’m now adding to the advice that I gave in Chapter 7, Checklist 7-1. There, I suggested starting by writing the questions that people ask and then putting those questions into an order that will make sense to your site visitors. What do you then do with the questions you’ve listed?
• Sometimes, you’ll keep those questions as your outline, and, therefore, your headings.
• Sometimes, you’ll decide that questions aren’t the best headings for your material. You may turn the questions into statements (key messages).
• If you find you have all “How do I…?” questions, turn them into action phrases with verbs (“Do x” or “Doing x”).
• And sometimes, if you are just labeling parts, it’s okay to use nouns as headings.
Let’s explore when, why, and how to use each of these types of headings: questions, statements, verbs, nouns.
3 Choose a good heading style: Questions, statements, verb phrases
Your three main choices for headings are questions, statements, or verb phrases (calls to action).
Questions as headings
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.
As I said in Chapter 1, I’m not suggesting that you make your entire site one big section of frequently asked questions (FAQs). Site visitors might never find their specific question. I am suggesting questions and answers (Q&A) as an appropriate writing style for the main content on each specific topic.
If your site has both a main page of content on a topic and a separate page of FAQs on the same topic, think about whether you really need both.
Did the team have to write the FAQ page because the content on the main page wasn’t satisfying site visitors’ conversations? If so, you probably don’t need both.
But don’t get rid of the FAQs! Take away the other page. Use or rewrite the FAQ page as the main page of content on that topic and don’t call it FAQs.
Questions make very useful headings in all these different types of web content:
Using Q&A can draw people into a web page. For example, seeing the question, “Why immunize?” on the web site of the U.S. Centers for Disease Control and Prevention may draw parents into that article. (Figure 9-4).
Figure 9-4 This web topic about vaccinations has some good headings and some that we might improve.
When writing questions as headings, consider these four points:
Answer your site visitors’ questions
Web writers sometimes just put their internally focused information into Q&A style. That doesn’t satisfy site visitors’ conversations. To write successful Q&A, you must understand your site visitors and what they want to know.
To gather your site visitors’ questions in their words, use all the ways we talked about in Chapter 2.
Case study 9-1 shows you how one group changed from internally focused questions to answering what site visitors really wantto know.
Case Study 9-1 Answering your site visitors’ questions
If you want to complain about a bank in the United States, you might get to the web site of the federal Office of the Comptroller of the Currency (OCC). They regulate nationally chartered U.S. banks and federal savings associations.
However, they are not the right place to go if your complaint is about another type of financial institution, such as a credit union or state-regulated bank. Few people know if their bank is nationally chartered or state regulated.
In the first edition of Letting Go of the Words, I showed the OCC page as it was then:
In the first edition, I asked questions like these about this page:
How well does this meet the needs of the site visitors it is for? Think about the mental state of people who are upset enough to complain to the government about a bank. Is their first question “What is the OCC?” Would they click on “What is a national bank?” when they don’t yet know it is a question that is important for their problem?
The web page in 2006 with my comments from the first edition of Letting Go of the Words
To their credit, the web team at the OCC came up with a great new solution to the problem that I raised. They created a site just for consumers, called helpwithmybank.gov. Here’s their new page:
The URL, the headline, and the content all help with the site’s great SEO. It’s the top search result at Bing, Google, and Yahoo for the search string: complain about my bank.
Write from your site visitors’ point of view
Write as if you were recording both sides of the conversation. One good way to do that is to use
Figure 9-5 shows you how doctors from the American College of Radiology and the Radiology Society of North America talk to patients on their web site, RadiologyInfo.org.
Figure 9-5 In Q&A style, “I” works well in the question with “you” in the answer.
Keep the questions short
People often skim a heading just enough to decide, “yes, that’s what I want to know.” They’re anxious to get to the answer.
Why short? At least three reasons:
• Long questions take up precious space.
• Headings are in bold or color, and large blocks of bold or color are difficult to read.
• 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 to essentials, just as you cut your content to essentials. If you find yourself writing a long question, ask yourself:
• Am I trying to cover several questions at once?
• Should I divide this content into more than one question and answer?
• Am I putting information in the question that should be in the answer?
• Am I using more words than necessary while still connecting with my site visitors and improving SEO?
As with many aspects of content strategy and content writing, you must balance competing demands. Keep headings short, but try to get keywords in at least a few of your <H2> headings as well as your <H1> headline. For example, in Figure 9-5, I might suggest adding “for my CT scan” to “How do I prepare?”
Consider starting with a keyword
Although questions work wonderfully well as headings, they have one downside. They don’t start with a keyword for the specific topic.
Site visitors who listen to the screen often move rapidly from heading to heading, listening only to the first bit of each one. Sighted web users similarly scan down the page often taking in only the first part of a heading.
A solution that can sometimes help is to combine a keyword with the question, as in Figure 9-6.
Figure 9-6 Dual headings like these help people who are scanning rapidly with their ears or their eyes.
However, don’t start every <H2> or <H3> heading with the same keywords. That would make the content very difficult to scan. If the keywords would be the same for each heading, put them in only some of the headings and don’t put them first. You’ll still get some SEO benefit and people will be able to use your content.
Statements as headings
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 web pages as questions. With statement headings you make your key messages stand out on the page in large bold or colored type. That’s what you see in Figure 9-7.
Verb phrases as headings
Many web conversations are site visitors asking “How do I…?” If you have one “How do I…?” question with many other types of questions, it’s fine to leave that as a question.
Example with –ing: Look ahead at Case Study 9-2.
Example with imperatives: Look back at Figure 9-2.
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.
When you find yourself writing “How do I…?” over and over, take away the repeated words and start each heading with the action word.
Two good ways to write action headings (and action links) are with
4 Use nouns and noun phrases 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 or don’t give the nouns the same meaning the writer did. Nouns as headings often don’t help either writer or 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 explanation, a noun has to carry all the meaning of the heading in a single word.
Sometimes a label (a noun) is enough
Yes, sometimes, a label is all you need. Figure 9-8 shows a gaze plot – an eye-tracking picture of one person looking for tax forms and instructions about charitable contributions. In this case, the nouns in alphabetical order as topic headings worked well.
Figure 9-8 An eye-tracking gaze plot showing the path the site visitor took on this page from the U.S. Internal Revenue Service’s web site. The page has noun headings as topic labels. They worked in this case because the site visitor was seeking the same word the site was using.
But nouns often don’t explain enough
With nouns as headings, getting the information into logical order may be difficult. Case study 9-2 shows how I might revise a set of noun-based headings in the information section of an e-commerce site.
Case Study 9-2 Turning nouns into better headings
Let’s look at L.L.Bean’s online Help Desk page on Tracking Your Order.
Notice how the first paragraph actually covers much more than how they’ll confirm your order. Notice that the last paragraph has a good suggestion that you might miss because the heading doesn’t tell you why you should care about shared email accounts.
If we rethink the actions this content describes, we might break it up more, use verb phrases, and put a set of same-page links at the top. Here’s what I might do to revise this content:
My suggested revision.
5 Put your site visitors’ wordsin the headings
The headings in your web content must resonate with your site visitors. If you write headings with words your site visitors don’t know, they may not recognize that the heading is what they need. That content also might not show up when your site visitors search – either at your site or at an external search engine.
6 Exploit the power of parallelism
People are very pattern-oriented. It’s faster and easier to scan a set of headings when all are in the same sentence structure.
Did you find the headings on the right quicker and easier to scan and remember?
Be consistent (parallel) in the style you use within the same level of heading. Change styles as you change the heading level. Look back at the outline of the International Aviation Art contest (Figure 9-3): I used questions for level 1 and noun phrases for level 2. Making each heading level its own style helps people see the pattern and hierarchy of your writing.
If you break the pattern, do it for a good reason. Notice how I broke my pattern for one heading in the revised L.L.Bean content. I did it to make that point stand out. The point about keeping your gift a secret is not part of the flow of the process that the other headings describe. It’s an “aside,” so changing the heading pattern there was purposeful.
7 Use only a few levels of headings
If you think of content as conversation and index cards, you’ll realize that the best content is in small pieces with lots of headings – but that the hierarchy of those headings shouldn’t go very deep.
A typical web article or blog should have
• one <H1>; that’s your headline (see Chapter 8)
If you find yourself needing a lot of level 3 headings or any level 4 or 5 headings, consider reorganizing the information into a better set of index cards.
And, of course, as you think about mobile, you’ll realize how much you need to break up content and how few levels of headings you can use. Figure 9-9 shows a good example from WebMD’s mobile content on health conditions.
Figure 9-9 Mobile content needs headings, too. In general, keep to one level of heading within the text.
8 Distinguish headings from text
Here, I’m using “headings” to include all levels (your <H1> headline and all the levels of headings in your content under the headline).
Make headings easy to see at glance. Use bold or a color that stands out and consider these points:
• Don’t use blue for headings. Save blue for links. Most site visitors assume that anything in blue is a link, even if it is not underlined.
• Don’t use your web site’s link color as a heading color. You don’t want site visitors to be frustrated trying to click on a heading when it is not a link.
• Don’t make bold versus color the only difference between heading levels. People have a hard time figuring out whether bold is more important than color or vice versa.
• Avoid italics. They are not as effective as bold to indicate a heading. Italics don’t stand out enough on the screen.
• Underline a heading only if it is a link. Most site visitors assume that anything that is underlined is a link.
• Avoid ALL CAPITALS for all the reasons we talked about in Chapter 3.
• If you use color for headings, make sure the color is legible against the background of your web page. Before you choose a color, reread the section on color-blindness in Chapter 3.
9 Make each level of heading clear
To help site visitors, you must distinguish headings from text and also make the hierarchy of the headings (the different levels) obvious. Good ways to differentiate levels include size, spacing, and placement.
This guideline focuses on information design. It connects back to Chapter 3. Designers, content strategists, and web writers must collaborate to get designs that make headlines and headings truly usable to site visitors.
• Size. We all associate size with hierarchy – bigger is more important. Type size for the headline <H1> should be bigger than for the headings <H2>. If you use <H3> headings and don’t change the placement, make them smaller than your <H2> headings.
– Make sure the size difference is obvious – but not too huge. About three points difference is often good – making the headline about 150% of the text size and the headings about 125% of the text size. Less difference may be too subtle; much more may waste too much precious screen space.
• Spacing. The headline might also have more space after it than other headings. (Look back at the discussion around Figures 3-12 and 3-13 for why it’s critical to put headings close to the text they introduce.)
• Placement. You can indent a level of headings. Or you can use bold or colored run-in text (not tagged as a heading) – as in this bulleted list.
While we are discussing design for headings, let me add three more really important guidelines:
• Don’t center headlines or headings. If people are scanning down the left margin of the content, they’ll miss the centered headings. If they go to the centered headings, their eyes will want to keep going to the right instead of back to the left margin of the text.
• Put lines (rules) over, not under. You don’t need lines with headings, but if you use them, consider putting them over (not under) the headings. Lines under push the eyes up into the previous block of text. Lines over help to put each heading together with the text it covers.
Make sure everything enlarges together. When your site visitors change the text size, everything should get bigger or smaller proportionately. It doesn’t help your vision-impaired site visitors if the headline or headings stay small when the text gets big enough to read.
10 Help people jump to content within a web page
If your web page has several sections with a heading over each section, consider giving people a table of contents at the top. By listing the headings at the top as links, you help your site visitors
I’ll call these “same-page links” here. I’ve also heard them called “anchor links” and “in-page links.”
Figure 9-10 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.)
Figure 9-10 Gathering up all the headings into a set of links at the top of the content helps people. They can see what the content covers and get quickly to one part.
Put same-page links first under the headline
Watching people in usability testing, it’s striking to see how quickly they focus on the links as soon as a new screen appears. When the screen has links at the top of the content area, most site visitors skip whatever comes before that set of links.
Don’t put off-page links at the top of the content area
Your site visitors bring expectations to your content. If they see links at the top in the main content area, they assume they are links to content further down that page. Don’t confuse them. Meet their expectation.
Don’t put same-page links in the left navigation column
Links in a colored bar to the left of the main content on most web pages take site visitors to other topics. Don’t put your same-page links there.
I recall a “before we revise it, let’s see how people use it” usability test where this is what happened:
The client heard the message. Their new site always has same-page links at the top of the content area. Links on the left go to other web topics.
11 Evaluate! Read the headings
How do you know that you have good headings? Of course, the best way is to do usability testing. Before you do that, however, you can do this review yourself:
Reviewing as a persona – Chapter 14
Usability testing – Chapter 15
1. Review your plan for the content.
• What do you want to happen because you wrote this content?
• Who are you in a conversation with? Which persona(s) is this content for?
• What conversation did the persona start with the web site that brought that person to this content?
2. As that persona, read the headline and the headings without any of the text under the headings.
• Do you (“channeling” the persona) understand what each heading means by itself?
• Do the headings tell a coherent story? Do they flow logically from one to the next?
• Do the headings successfully give you a “big picture”? Can you get the gist of the information on the topic?
• If you wanted only some of the information, is it clear where you would go for the specific information you wanted?
If you answer “no” as your persona 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 9
Key messages from Chapter 9:
• Good headings help readers in many ways.
• Thinking about headings also helps authors.
• Don’t slap headings into old content.
• Choose a good heading style: questions, statement, verb phrases.
– Answer your site visitors’ questions.
– Write from your site visitors’ point of view.
– Consider starting with a keyword.
– Use key message bites as headings for sections.
– Give calls to action with imperatives.
– Use gerunds (“-ing” forms) for activities that aren’t direct calls to action.
• Use nouns and noun phrases sparingly.
• Put your site visitors’ words in the headings.
• Exploit the power of parallelism.
• Use only a few levels of headings.
• Distinguish headings from text.
• Make each level of heading clear.
• Help people jump to the content they need on the page.
– Put same-page links first under the page title.
– Don’t put off-page links at the top of the content area.
– Don’t put same-page links in the left navigation column.
• Evaluate! Read the headings.
– Review your content by “channeling” relevant personas.
– Read only the headings and see if the content is useful to the personas.