6 Focusing on Your Essential Messages
In Chapters 3 and 4, we looked at home pages and pathway pages – at “getting to the information.” In Chapter 5, we started on information pages by considering how to break up documents and large blocks of information into separate web pages. In this chapter, we’ll talk about what to put into each of those information pages.
First, let’s expand our picture of how people get to your information pages. The top line in this new picture is the one we focused on as we discussed home pages and pathway pages. The other lines bring in the realities of other ways people reach your information pages, whether you are blogging or writing content deep within a site.
What do you do when you get to information pages? Do you immediately start to read it all or do you first skim and scan?
Most people don’t jump right in and read. They skim and scan, even on information pages. They are deciding:
They look at the page title, and they look for headings and key words in the text.
For users to know they’ve gotten where they want to go, links and page titles must match. We’ll talk about that in Chapter 12, which is all about links.
Six guidelines for focusing on your essential messages
You’ll see lots of examples of good headings in web writing throughout the book, and Chapter 10 is all about writing useful headings.
When they decide they are on the right page, most web users want to focus immediately on the information they came to get. The rest of this chapter gives you six guidelines to help busy web users get what they need.
1. Give people only what they need
A good mantra for the web is less is more.
What do your site visitors want to know? Need to know?
That content may be important to you, but if it isn’t important to your site visitors, drop it entirely, put it at the bottom of the page, or layer it with a link to another page.
How do you know what people need to know? How do you know what counts as an essential message?
One good way is to use the process in Checklist 6-1.
Checklist 6-1 Process for Selecting Web Content
If you do not have a draft or previous web page, write answers to the questions in your list. Just answer the question. Don’t add fluff.
Case Study 6-1 shows how we might apply this process to create a web page inviting people to participate in an art contest.
Case Study 6-1: Using users’ questions to plan a web page
Think like a site visitor: If you saw a link about entering an art contest, what would you expect to find on the page the link takes you to?
International Aviation Art Contest
“Create an Air Show Poster” is the theme of this year’s contest for children ages 6 to 17. Enter now.
Think about the conversations site visitors would want to start about this topic.
Thinking of people’s questions is a great way to analyze web content even if you do not end up using the question-and-answer format in writing your web pages.
Continuing in this mode, you might end up with these questions, in this order:
The answers would make a good web page about the contest. It might look like this:
2. Cut! Cut! Cut! And cut again!
Remember that most web users don’t want to read much. They want to grab information. The key to successful writing on the web is to let go of the words without losing the essential messages.
Use the process in Checklist 6-2.
Checklist 6-2 Process for Cutting Down to Essential Messages
Consider Figure 6-1, the web page about a new PlayStation 2 model. Does the typical potential buyer of this gaming device want to read these paragraphs of text?
Figure 6-1 This page, labeled “Description,” seems to be trying to get people excited about buying the product. Yet it gives people two long paragraphs to read.
If we let go of many of the words in the description in Figure 6-1, we might end up with Figure 6-2. Doesn’t this make the essential messages stand out more?
Leave in enough to be clear
As you write and revise web content, remember that you are conversing with real people. Those people bring all of their previous experience and knowledge – and also their lack of experience and knowledge – to understanding what you are writing.
It is possible to cut so many words that you leave out information that people need in order to understand your messages. Caroline Jarrett and Whitney Quesenbery learned this important lesson when usability testing The Open University’s web site.
Here’s the relevant piece of a web page that they were testing:
“You need: 360 points” – short, simple, plain English words. From the writers’ point of view, the essential message here is only “360.” The writers assumed everyone would understand what the rest of the words mean.
For anyone already enrolled at the university, that assumption is probably valid. Students know this is saying you need to accumulate 360 course points to get an undergraduate degree in this field (like credits to graduate with a major at a U. S. university).
But Caroline and Whitney were investigating how well the site works for newcomers to The Open University. And many of those people had a different understanding of those few simple words.
For this audience, a few more words are needed: “To get a degree in this field, you must take enough courses to earn 360 points.’
This story illustrates how important it is to
3. Start with the key point. Write in inverted pyramid style
Whatever your essential message is, put it first. Many web users read only a few words of a page – or of a paragraph – before deciding if it is going to be relevant and easy for them to get through. If they think it might not be, they move on. They may jump down the page to a heading or a bulleted list or to very briefly try another paragraph. And that may be all the time and attention that they’ll give to a page.
Like many other usability specialists, I have seen that behavior with most web users and most web sites over many years. And now our observations have been confirmed with eye-tracking data. Eye-tracking captures exactly where people’s eyes go as they work with web pages. We can look at an individual’s pathway through a web page. We can also accumulate data over many people and show the most common ways of using a specific web page.
Figure 6-3 shows accumulated eye-tracking data (called a heat map) for a web information page. Notice how people looked in an F pattern – across the lines at the top of the information and then at the beginning of the bulleted list. Notice how, after the first few lines, they looked more at the beginning of lines than all the way across. (That’s typical skimming behavior.) Notice how readership trails off down the page.
Blind web users act similarly. Blind web users scan with their ears. They listen to only a few words before deciding whether to keep going. With their screen-readers, blind web users can jump to the next link or the next heading or the next paragraph – and they do so at an amazingly rapid pace.
Figure 6-3 This heat map from eye-tracking shows the typical F pattern of web reading on information pages. Readers looked most at the first paragraph and then at the beginning of the bulleted lines.
The colors show the concentration of eye fixations, with red indicating the heaviest concentration and blue the least.
Eye-tracking by Jakob Nielsen and Kara Pernice Coyne, Nielsen Norman Group. Used with permission. For more about the study this picture comes from, see www.useit.com/eyetracking.
Journalists and technical writers know that many readers skim the headlines and the first paragraphs of articles. That’s one reason they write in “inverted pyramid” style – with the main point first.
For many web content writers, using inverted pyramid style requires a major shift in thinking and writing. For school essays and reports, you may have been taught to write in narrative style, telling a whole story in chronological order and building up to the main point at the end – the conclusion. That’s not a good style for the workplace or for the web. Busy web users don’t have time for that when they are trying to find information. They want the conclusion first.
Jakob Nielsen has advocated inverted pyramid style since 1996. See his Alertbox column at www.useit.com/alertbox/9606.html
Chip Scanlan’s web column on inverted pyramid style is at www.poynter.org/column.asp?id=52&aid=38693
Although it may be difficult at first to learn to write in inverted pyramid style, it’s a very useful skill. As Chip Scanlan says:
[Inverted pyramid style] also an extremely useful tool for thinking and organizing because it forces the reporter to sum up the point of the story in a single paragraph. Journalism students who master it and then go on to other fields say it comes in handy for writing everything from legal briefs to grant applications.
And, I’ll add, for writing successful web pages.
Figure 6-4, a blog article about insurance, shows a good example of inverted pyramid style.
Inverted pyramid style draws readers into the material right at the beginning – often with a small story or with interesting and relevant facts. To see the impact of starting with information that draws the reader into the material, compare two versions of the same information about literacy levels in Figures 6-5 and 6-6.
If you studied technical writing, you may have the benefit of having already learned the “key message first” style. See for example, Blicq and Moretto, 2001. Ron Blicq has taught this style for many years, calling it “pyramid style” rather than “inverted pyramid style.” His emphasis is the same as what I’m calling “inverted pyramid here” – focus on your main reader and put the key message up front.
Figure 6-4 Inverted pyramid style writing starts with the key message. (I changed the colors of the text and background from the original to increase contrast and legibility.)
insuranceplanet.blogspot.com
Did version 2 do a better job of drawing you in? Were you more likely to stop reading part way through the first paragraph of version 1?
4. Break down walls of words
Even with inverted pyramid style, keep your paragraphs short and use bulleted lists. Break up the text.
Walls are barriers. Large blocks of text that look like wall-to-wall words are barriers to web users. Very short paragraphs or bullet points work best.
If you are moving from writing for paper to writing on the web, think of the pieces you need as even smaller than what you would plan for a paper document. Each small topic needs its own heading. Each question and answer needs the question as a heading and the answer in short sentences or as a bulleted list.
Case Study 6-2 shows how breaking down walls of words increased business for an e-commerce company.
Case Study 6-2 Breaking down walls of words made the difference!
When CompareInterestRates.com tried a variety of changes to their online form, the only change that made a significant difference was moving from paragraphs of text to a bulleted list. Here’s how the original web form started:
The top of the old form
CompareInterestRates.com is owned by Loanbright, an e-commerce company that helps mortgage companies get business.
What Loanbright tried
Working with Caroline Jarrett, a usability consultant, Loanbright tried several variations of the form, with combinations of these changes:
How people get to the form – and what the study measured
People get to the form by clicking on a web page ad or through a sponsored link on a search engine page. What matters to Loanbright is the conversion rate: the percentage of users who complete and submit the form compared to those who arrive at it. Loanbright can serve up different versions of the form from the same ad or sponsored link, so they were able to measure conversion rate for different variations of the form within the same “stream of traffic.’
What they found
The new forms increased conversion rates from 5 to 7.3 percent in one stream of traffic and from 10 to 12.5 percent in another stream of traffic. In the world of conversion rates, that is excellent improvement.
At first, however, it was not clear which change was contributing most to the success. With detailed statistical analysis, it became clear that only reworking the text at the top had a significant impact. Here’s one of the variations showing the bulleted list at the top instead of a wall of words.
Usability testing with eye-tracking supported the conclusion from the conversion rate study. All the participants in the usability test preferred the bullet points.
See Jarrett and Minott, 2004, for the complete story of this study.
5. Market by giving useful information
On the web, you market best by giving users the factual information they want as easily and quickly as possible. Because web users see so much less at a time on the screen than on a piece of paper, there isn’t the same room for non-factual “happy talk” as there is in a brochure or advertising flyer. And because web users are so often goal-oriented, they don’t want to be distracted by information that isn’t relevant to gathering up all the facts.
In Figure 6-7, the credit union is using lots of space at the top of the page for text that adds nothing to the information in the table. Most web users will go right to the table. What users need at the top are explanations of the terms such as APR and Loan to Value. (Don’t expect web users to notice the asterisk in an online table or to scroll to the bottom of the page to read a footnote. That’s a major difference between paper and web pages. On the screen, very few people connect an asterisk with footnotes or think of footnotes at all.)
Figure 6-7 People come to financial sites to look up facts. They don’t usually read the marketing blurbs on pages like this. They just want the rates.
All sites sell – products or themselves
Some sites sell products. The main purpose of an online store or a travel site or a hotel site is to derive revenue from online sales. E-commerce sites sell best by
Other sites sell themselves. Information-rich sites that aren’t primarily “commercial” may not derive direct revenue from their online presence.
But they are, in fact, marketing themselves – usually as the place to go for whatever information they specialize in. And they succeed best when site visitors get what they want: reliable, credible, up-to-date, factual information that is easy to find, easy to understand, and easy to use. That’s more important to most site visitors than a mission statement, organization chart, or detailed history.
The web is primarily a “pull” technology; marketing specializes in “push’
On paper, companies market by sending information to people. The company starts the conversation. That’s a “push” technology – the company is pushing information out to potential customers.
“Push” does exist in the web world. When people register at a site, they often agree to receive notices that come to them in email. Many sites invite people to sign up for newsletters on specific topics that then also arrive “pushed” to them in their email.
Most web contacts, however, are “pull” technology. People come to your web site on their own initiative to “pull” information from the site. As we’ve seen throughout this book, the web is most often used as a conversation started by the site visitor. If site visitors start the conversation, you must satisfy the need they came for first – before you try to market to them.
Marketing departments are accustomed to thinking in terms of how to draw people in. On the web, however, your primary worry should be how not to drive away the people who have chosen to come to your site.
Take advantage of “marketing moments” – market after the visitor is at least partially satisfied
A “marketing moment” is a time and place on the web site when site visitors are ready for a marketing message. A marketing moment is not meant to distract your site visitor. A marketing moment is a natural follow-on or complement to what your site visitor is doing.
The time to market on a web site is after your site visitors have satisfied at least part of their need. Many online bookstores are particularly adept at taking advantage of “marketing moments,” as in the example from Barnes and Noble in Figure 6-8.
The Founders credit union (Figure 6-9) does a great job of getting people directly to the facts; but then it misses the opportunity to market to them from the facts.
Figure 6-8 Barnes & Noble, like other online bookstores, takes advantage of marketing moments – when site visitors are at the information they came for.
Figure 6-9 This credit union has made the rates easy to see, with no marketing fluff before the numbers; but it has also stranded its visitors. It could market to them now by making the types of loans into links or by putting inviting links next to the loan names.
6. Layer information to help web users
Layering is a way of dividing web information. When done well, it’s a great way to
To close this chapter, let’s look at three typical examples of layering on web sites and then at two case studies that might give you new ideas for using layering in your web site.
Layering from a brief description to the full article
Many web sites entice site visitors with a little bit about an article, a topic, or a product on the home page or on a pathway page and then provide a link that goes to a web page with more information. That’s layering. Figure 6-10 shows a well-done example of this typical web layering from the BBC’s web site.
Layering from an information page to more on other web pages
Information pages can also be pathways to more information – details, tangential information, or related topics.
Figure 6-10 This is an example of the typical layered architecture of web sites: home page → pathway page → information page.
One of the great advantages of the web over paper is the way that you can make connections for people to information beyond what you want to put on your main page. The links can go to more details on the same topic, related topics, other sites, calculators, lists of providers, message boards, specific contact forms, other online activities, and so on. Figure 6-11 shows just the top few sections of a page from the U. K. government’s site, Directgov. Several other sections further down the page also have related links after the brief paragraphs.
Layering from part of the page to a short explanation
The links in Figure 6-11 all come after the text – not embedded in the paragraph.
The link I’m featuring in Figure 6-12 is embedded in the paragraph, but it opens only a small definition window.
An important issue for information pages is whether and when it’s okay to embed links to other topics on other web pages. I cover that issue in Chapter 12 on links.
A third type of layering is to provide definitions, technical details, or other “extra” information on top of the main page so that people don’t lose the page they are reading. You can do this with a small second window that overlays part of the main window or with a rollover.
Figure 6-12 shows how the San Diego Zoo links words some readers may not know to definitions that come up in a small second window.
(A word about definition windows: Make each word and definition its own file. Don’t just jump people to the right definition in a very long file that contains the entire glossary. People may not realize what has happened. They may start to scroll in the long file and get lost. Putting all the definitions together is satisfying only the unlikely scenario that someone wants to read your glossary. It is not satisfying the much more likely scenario that the reader wants to quickly understand what a particular word means and then to go on in the original article. If you think that people may want more definitions, include a link to an A-Z index in each definition window.)
Figure 6-12 Glossary items are a good use of small secondary windows that allow people to look at the main page and the small window at the same time. Here we are looking at the definition of “prey” from a link in the first paragraph of the San Diego Zoo’s article on the cheetah.
Be wary of putting information into pop-ups. Many web users have pop-ups turned off.
Figure 6-13 shows how Traffic.com provides more information on each problem it has marked on the map that the site visitor is looking at.
Bringing up extra information in a rollover or a small second window that does not completely overlay the original window has two major advantages:
When you use small second windows for this type of layering, include a Close Window link, as the San Diego Zoo site does. For many web users, a text link or button reminding them to close the window is faster and easier than having to remember the little x in the corner.
Figure 6-13 On the maps at traffic.com, you can click on any of the warning triangles and get details of the problem. The new layer opens on the map, so you don’t lose the overall information or your sense of place.
Layering in innovative ways
Let’s turn now to two particularly interesting and useful examples of layering.
Case Study 6-3: Summarizing archived paper documents
Even when you know that a paper document is not going to work well on the web, you may not have the time or resources to change it. Or you may want to keep the old document as it was on paper for historical, archival reasons. And, yet, you may also want to make the key messages in that document more accessible to your web users.
What can you do? One way is to create a new, shorter first layer with the key messages higher in the web hierarchy and link that layer to the old document.
That’s what Laurence Dusold at the U. S. Food and Drug Administration (FDA) did when he developed the web site for the FDA’s Center for Food Safety and Applied Nutrition (CFSAN). Dusold’s team extracted the key messages from old journal articles into short web pages. Here’s an example from an article about knowing when fish is fresh:
This “key messages” page may be all that most site visitors want. Anyone who wants the full article can get to it from the link at the bottom of the key messages web page.
Over time, Dusold’s team has revised the longer articles that the key message pages link to. The original journal article on fish had a title but no internal headings, no lists, no graphics. It was simply long paragraphs of prose. In the years since it first went up, the writers have gone back to the article and put in subheadings, broken the paragraphs up more, turned some sections into bulleted lists (with traditional black circle bullets), and made some parts into lists like the key message summary, with fish as bullets.
The beginning and a piece from the middle of the updated version of the longer, original article – reachable from a link on the “key messages” page.
The linked article is now much more usable online than the original journal article was. It has become detailed web information rather than just a paper document archived on the web site.
Dusold tells me that half the pages they work on in a year are new pages and half are updates and reworking of old pages. That way, they continually strive to bring useful layers of information to their site visitors.
Case Study 6-4: Opening layers on the same web page
Layering does not have to take web users from one web page to another. You can keep all of the information on one page, layering it by opening and closing overlays on the same page.
For a user group like injured workers checking on their claims for workers’ compensation, this type of layering solves many potential problems.
Think about the web content writers and their constraints
The workers’ compensation claim system is a process that the writers cannot change. It has defined steps that they must explain.
Think about how best to provide all this information to these web users
Thinking about Joe, the injured worker, and about the information that they needed to provide, the web team at the Washington State Department of Labor and Industries created a web site with
The three screens that follow show you how this works.
The same screen after you have clicked on “Complete all required paperwork’
The same screen after you have clicked on two of the questions
When I show this example, people ask me how it’s done and whether it’s accessible for people who listen to web sites with screen-readers. The answer is “yes.” It’s done with Show/Hide using Javascript.
Brian Criss, the webmaster responsible for creating these pages, tells me that 99.99 percent of the people coming to their web site have Javascript enabled. Show/Hide does not reload the page or load a new page.
(Reloading a page is a problem for people with screen-readers because the screen-reader assumes it is a new page and starts reading again from the top of the page.) On these pages, when a screen-reader user clicks on a link that opens text just below or next to the link, the screen-reader continues reading whatever is open – thus, reading the newly shown information as intended.
SUMMARIZING CHAPTER 6
Here are key messages from Chapter 6: