Digital Web Magazine

The web professional's online magazine of choice.

Does Your Copy Hold Up To A Quick Glance?

Got something to say?

Share your comments on this topic with other web professionals

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?

What doesn’t work?

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.

Got something to say?

Share your comments  with other professionals (19 comments)

Related Topics: Basics, Information Design, Content

 

Jessica Neuman Beck does a lot of things, but sleeping isn't one of them. She is one-half of couldbe studios and all of Cranky Pals, where you should go (respectively) if you need affordable, accessible web design or creepy freak toys for your kids. Currently she divides her time between geeking, writing and running a business.

Media Temple

via Ad Packs