Does Your Copy Hold Up To A Quick Glance?

In: Articles

By Jessica Neuman Beck

Published on February 20, 2007

Quick—what does your site’s copy say about you?

Take a look at your stats, and you’ll see that a surprising number of the visits to your site last less than a minute. Sure, some of those may be bots or search engines, but real visitors are making decisions about your site in the time it takes to blink. A Canadian study published in the journal Behaviour and Information Technology suggests that viewers form an opinion of your website in about a twentieth of a second. The viewers who spend a little longer checking out a page still tend to make quick work of it. The average visitor scans a web page rather than reading it. If words don’t reach out and grab your visitors, your killer verbiage doesn’t mean squat.

So how do you turn scanners into readers?

For the purposes of web design, think of your writing as a series of visual cues designed to turn scanners into readers. As a dedicated scanner myself, I can attest to the effectiveness of these methods—some of them I even found myself using whilst searching for information for this article.

Break It Up

The first rule of design is the judicious use of white space (also sometimes referred to as negative space), and nowhere is this more important than on the web. My typography instructor used to tell us to look at our projects from across the room to see the way the text worked with the white space. You might not be able to do that with your web site, but you can make sure you aren’t overwhelming your viewers with too much text.

Give your words some breathing room by increasing your margins, and choose short, concise chunks of information over long, solid blocks of text. At a glance, short paragraphs seem more accessible than longer ones. Visitors are intimidated by lengthy paragraphs. Tolstoy may have been able to get away with paragraphs spanning entire pages, but Tolstoy wasn’t writing for the web. Also, you are not Tolstoy.

White space has another use—it facilitates the organization of your article into sections, which (by a happy coincidence) is the next point.

A Place For Everything and Everything in Its Place

Paragraph breaks are great, but organizing information into sections is even better. Assign headlines to each chunk of related copy. Headlines are the page scanner’s best friend; they make it easy to decide which sections to read and which can be skipped. Luanne Seymour from Adobe describes the average site scanner’s methodology in this way:

1. Scan the headlines to see what the content is about.
2. Look at the pictures to see what the content is about.
3. If the pictures are compelling, read the captions.
4. If the headlines, pictures, and captions are compelling, read the rest of the copy—if I have time.

Keeping your information organized will provide the most bang for your viewer’s metaphorical buck. You never know who will be coming to your site from a search engine. If a viewer sees something she find interesting or relevant, it doesn’t mean that she will search the rest of your article for stray tidbits.

Worth a Thousand Words (So Make Sure You’re Not Speaking Gibberish)

Break up your pages and give readers a visual cue as to what they can expect by using images and illustrations—but use them wisely.

Make sure your graphics are proportionate to the rest of the body text. Huge images that take up most of the screen not only convey very little about the subject, they also keep readers from your content. Don’t assume that everyone will scroll below the fold.

Keep it relevant. An image is like a headline; choose images that speak clearly to your point. An obscure or meaningless image is just filler. Worse, it breaks up the rhythm of your words without adding anything of value to the page. You don’t want your viewers to spend valuable time puzzling over your image choice when they could be scanning your text.

Remember the white space. Style your images so that they have enough space surrounding them to flow seamlessly with the rest of the paragraph. An attractively styled image won’t slow the eye in its journey across your page.

It’s All About the Flow

What’s all this talk about rhythm and flow?

The way people view web pages has a definite pattern to it. Nielsen Norman Group’s study on the way people view web pages showed a distinct tendency toward F-shaped eye tracking patterns. That means that the top, left, and middle of your article gets the most play, and the rest of it needs to work if it’s going to be noticed.

Feel the Heat(maps)

Why an F-shaped pattern? Blame the internet. Historically, web site designers have placed primary navigation in the header, secondary navigation in the left sidebar, and content in the center. Sound familiar?

There’s a lot of chicken-or-egg conjecture as to whether the F-shape is intrinsic to the way people view information on the internet, or if it is simply a product of years of exposure to similar-looking web sites. Studies on newspaper eye tracking, for example, found that readers tend to read in more of a zig-zag pattern. Shouldn’t that mean that we can design sites however we want?

Short answer: No. Web site viewers are accustomed to finding navigation links at the top, left, or right side of the screen. Do it much differently and your links might be overlooked. A research study from Eyetools Eyetracking Research from 2001, in which they inserted gibberish into a dead zone on E*Trade’s web site, revealed that only one in twenty-five study participants noticed anything amiss.

Happy Cog Studios recently redesigned its site, and its unique spin on the F-shape is just different enough to be interesting. The lesson: Give some thought to making the F-shape work for you before you mess with the layout of your site.

Want to keep the eye moving in the right direction? Put your most important point at the beginning of your article. Follow it with bite-sized chunks of information that hold up to a quick scan. Keep the flow by using familiar visual cues (easy-to-recognize links and navigation elements) and use recognizable icons and styles to draw attention to easily overlooked areas.

What works?

• Pull quotes: Just as in print articles, pull quotes are a great way to highlight individual lines of text. They provide a nice visual alternative to an unbroken expanse of text, and they give an air of importance to the writer’s words. Try to choose lines that are descriptive but not entirely headline-worthy. A good pull quote whets readers’ appetites without making them scratch their collective heads and ask, “Huh?”
• Blurbs: Sure, you know all about headlines, but The Stanford-Poynter Eyetracking Study found that including blurbs below headlines increased the amount of time readers spent on an average page by about 33%. Blurbs also encouraged readers to scroll down the page, which increases the likelihood that they will be bowled over by your brilliant prose. Like a pull quote, a good blurb is descriptive without completely robbing the article of all mystery.
• Icons: Web iconography instantly denotes certain site elements. A hard drive with an arrow? Download. Speech bubble? Comments. Why not make it easy on your viewers by using a few. Loopnote and Near-Time make good use of icons to break up what could have been text-heavy pages. As in the case of images, it’s important to appeal to the viewer’s sense of familiarity here. A custom set of icons has a certain cachet, but if your ideogram is too obscure, it will fail to communicate the desired message.
• Linkage: Viewers are used to identifying a certain style (blue, underlined) as a link. Boring, right? It doesn’t have to be. Style your links in such a way that they’re obvious even to people who aren’t reading your copy by making them graphically different from the rest of your text. Use a larger, bolder font for your links, as in this example from Tyssen Design, or give them a solid background color (different from the main page color). If you plan to rely on color to set your links apart, make it obvious, as in this example from Superfluous Banter. As an added bonus, use different a:hover and a:visited styles so that your viewers know where they’re going and where they’ve been. Feedburner makes good use of this. Keep in mind that links aren’t Easter eggs; they should be visible at a glance. Not everyone is going to take the time to mouse over your words.
• Lists: In web copy, lists are like M&M candies: tiny, fun, and easy to eat by the handful. Or, wait, lists may not taste quite as good. No matter—readers love lists. No pesky body copy to wade through: A list is information distilled to its essence. They’re perfect for the restless viewer because they require so little work.

What doesn’t work?

• Ads: Viewers tend to skip right over advertising, especially if it’s in the traditional right-hand column. Ads that use an unobtrusive text link are more effective than a flashing banner. If you must have ads on your site, use them creatively and sparingly to appeal to the jaded masses. Check out the ads on Fadtastic—they blend so seamlessly with the sidebar content that they look almost like site links, but they’re styled just differently enough to be obvious after a second look.
• Animation: If it looks too much like an ad, viewers will avoid it. The exception to this rule? User-controlled animation. If the viewer can stop and start the animation at will, it becomes an interactive element and can actually entice the user to stay on the site.
• Inconsistency: Nothing breaks up the flow like a mid-section layout change. People rely on visual cues to tell them how to process the information on your site, and changing those cues without good reason is confusing at best. You can use this to your advantage if, like 37signals, your inconsistent styling is actually sectioning in disguise. In that case, go crazy.

It may only take the blink of an eye for a visitor to decide to hit the back button and leave your site, but these suggestions could give him a better reason to stick around. Regular readers will reap the benefits, too—by turning your site into something easy to process by scanners, you’ll be making your information even more accessible to your returning readers by saving them the one thing that’s really important, time.

Related Topics: Basics, Information Design, Content