Does Your Copy Hold Up To A Quick Glance?

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

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.

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:

Scan the headlines to see what the content is about.

Look at the pictures to see what the content is about.

If the pictures are compelling, read the captions.

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.