Next month at Stanford’s Publishing on the Web Conference, we’ll be giving a talk titled “10 Mistakes Web Sites Still Make—And How to Fix Them.”
At the conference we’ll go into lots of details, show before-and-after screenshots, and answer participants’ questions. As an appetizer, we offer this brief rundown of four of the 10 mistakes—in increasing order of importance.
#4: Squandered Vertical Space
Oversized elements hog the top of the page, pushing what’s most important “below the fold,” where it is invisible unless users scroll down. Here’s the scary news: An awful lot of site visitors simply do not scroll down.
Solution: Keep logos, banner graphics, display copy, and other top-of-page elements shallow. Don’t waste vertical space on non-informational “theme art” and low-value text blocks such as “Welcome!” messages.
#3: Unconventional Navigation
“Creative” schemes that stray from Web conventions force users to learn—or guess at—the new rules. Many will give up quickly; others won’t bother to try.
Solution: Avoid barnyard maps, orbiting planets, and other such “concept navigation.” Use familiar formats such as text within tabs or buttons, and place the nav at the top or left side of the page. Make sure text links are recognizable as “clickable” by using a single, unique color and, to eliminate all doubt, underline the link. Resist the urge to invent Flash-driven widgets to perform tasks such as scrolling and linking, for which there are straightforward and well-known routines.
#2: Un-Webified Text
Long columns of dense, grey, unformatted text are hard to digest and painful to read on computer screens—just the opposite of what impatient, mission-oriented scanners are looking for.
Solution: Shorten all print-derived text drastically. Carve long pieces into bite-sized sections labeled with clear headings, and provide top-of-page “document navigation” to the sections. Help scanners grab information at a glance by highlighting key text with bullets, bold type, and links. And put the bottom-line information at the top. (See an example of how to rework a text article for the Web.)
#1: The Dump
The site looks and acts like a magazine that’s been dumped on to the Web—a serious mismatch of message and medium.
Solution: Rather than aping the print publication’s setup using categories such as “cover story,” “volume and number,” and magazine-specific departments, organize the site around the Web audience’s areas of interest. Rewrite “clever” headlines and decks in a more straightforward style.
Above all, a magazine Web site needs to make the leap from inert print content to interactive tools and experiences. By carving up, indexing, and feeding its print-based content into databases, a site can offer useful related material, custom Web feeds and alerts, flexible browsing and searching of archives, personalized presentation of pages, and “power tools” such as recipe finders and product selectors.
While most of us are focused on moving print publications to the Web, two Web sites are working in the opposite direction.
Here are the keys to well-built paragraphs:
