Make That Text Dance
September 10, 1998
As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see IE Developer Center.
Executive Editor, Sidewalk
Words are design tools, too. How you use them online helps determine whether users spend time with your pages or hit the Back button. Here are seven ways to make text work more effectively on the Web—and, in most cases, on paper, too:
- Help users make decisions and act on them.
- Design for scanners, not readers.
- Give your text structure. . .
- . . .And make the structure visible.
- Explain the page's benefit above the fold.
- Write lists.
- Write tight.
So far, the Web appears to be less about entertainment than about decision support for daily living. Useful sites make it faster or easier for users to make decisions—what to buy, what to do, where to go—and act on them.
Think of your site as a funnel. Users enter with a fuzzy notion in their heads ("It's time to do something about the kitchen") and exit having made a useful decision ("Let's install new counters"), or, better yet, acted on it ("Let's find a kitchen contractor in town"). Text plays two key roles in this process: It guides users through it, step by step, and provides them with the data and advice they need to make decisions en route.
Tone is important. Use active voice. Speak informally. Be candid and tell it straight: Web users are wary of ulterior motives and prose that's too promotional.
People encounter a lot of text in their lives and read very little of it beginning to end. Instead, they scan quickly, looking for visual clues to whether a page is useful or interesting enough to be worth reading. If they don't find what they want quickly, they bail out. Design accordingly: Assume users will skip 99 percent of your content, and make it easier for them to find the 1 percent they really want. To do this, give your text structure, and make the structure visible.
Take a modular approach: Organize content in short chunks, typically a paragraph or so, with each chunk aimed at helping a user take one step toward a decision. Arrange the chunks in logical order: for example, a sequence in time, or the steps in making a decision. (Before you write, try organizing a page as an outline—I, A, 1, a, and so forth.) Assume users won't read all the chunks—if information presented elsewhere is crucial to understanding a particular chunk, repeat it.
Employ parallel construction to make prose easier to scan and understand. When you cover a series of similar ideas or facts, present each in a consistent way, with the same components presented in the same way in the same order. Users appreciate familiarity, predictability, and consistency.
Label the chunks clearly so that the user can instantly tell what they're about. Highlight the most important points in your text. Use these points of entry into a page to identify, summarize, and promote the surrounding text:
- Images and captions
- Tables and listings
- Boxes and sidebars
- Bullet lists
- Numbered lists
- Very short text
It's more important for the names of things be clear than clever. Make labels painfully obvious. Headlines should make perfect sense before you read what's under them.
Above the fold means the area visible at 640x480—still the most common monitor resolution. Assume users won't scroll unless you give them good reason to. Content visible above the fold should make it clear, implicitly or explicitly, how a user will benefit from reading the page:
- What you'll learn
- What data you can search or sort
- What you can do
- What you can buy
- Where you can go
- Whom you can contact
Traditional stories aren't necessarily the most Web-friendly way to deliver information. Users' eyes are drawn more to lists: structured collections of items with a common theme, anything from a series of bullet points to a collection of hyperlinks. Maybe this is why:
|Oral, linear form that works best orally or in print||Visual, non-linear form that works best in interactive media|
|Hard to scan quickly||Easy to scan quickly|
|Hard to update, normally have short shelf life||Easy to update, often have long shelf life|
|Long, unstructured text repels the eye||Short, structured text (bullets, numbers) attracts the eye|
|Hyperlinks detract from narrative||Hyperlinks make lists more useful|
How long is too long? It varies by topic and level of reader interest. Pages on the upper levels of a site attract more casual passersby, so they should be shorter and faster. As users drill deeper on a topic, they're willing to accept more and denser information on a page. Even so, one rule of thumb is that text should be half as long online as it would be in print. Rough word counts I've used:
- 100 words for a navigation page
- 200 words for a summary or overview
- 400 words or more for an in-depth treatment (This article, with about 960 words, is quite long for the Web.)
To write tight:
- Avoid lengthy leads, especially anecdotes. You'd be surprised how often you can simply chop the first paragraph of a manuscript (as I did just before turning this one in).
- Use fewer opinions and more facts.
- Cut transitions. Use headings to change the subject instead.
- Rewrite, cut, rewrite, cut, rewrite, cut. No first or second draft is ready to publish.
- Skip the fancy ending. The user's mind is probably already starting to wander.
Mike Gordon spent two decades as a newspaper writer, editor, and designer before coming to Microsoft, and has been working exclusively online since 1993.