RKG Logo

October 1, 2004

Web Page Design for Catalogers

Filed under: Articles — Jake @ 8:39 am

Introduction

Aaron Montgomery Ward mailed the first catalog in 1872, and catalogers been working to perfect the art of selling from the printed page ever since.

Savvy catalogers understand the factors behind successful print design: cover imagery, page count, product density, copy, institutional, design, typography, color, paper, trim, and so forth.

The web, in contrast, is in its infancy. The graphical internet dates back to only 1991. The leading online firms are not more than ten years old: Yahoo launched in 1994, Amazon and Ebay in 1995, and Google in 1998.

It isn’t surprising, then, that many catalogers are more experienced creating strong print pages than strong web pages. This article offers four suggestions for improving your online presentation for human visitors.

(We’ll address optimizing your design for web “spiders” and “bots” in a subsequent column — stay tuned.)

Focus: What is the primary purpose of the page?

The most serious common problem with catalogers’ web pages is lack of focus: pages attempting to do too much.

An informal analysis of several leading e-commerce web sites revealed that a typical product detail pages averages over 100 links.

Think about that number: visitors face 100 choices on where to click next.

The problem isn’t link quantity per se; the problem is not providing sufficient visual clues as to which of these 100 links is most important.

Seth Godin discusses this in The Big Red Fez (recommended): when everything is marked important, nothing is seen as important.

Increasing Page Focus

Here’s a recipe to increase the focus of your pages.

Consider every page on your site as a direct-response ad with a single primary objective. The objective must be getting the visitor to complete a specific measurable action, such as pushing a certain button, clicking on certain links, or completing a form.

Typical objectives are “go deeper into the site”, “request a catalog”, “add to cart”, and “complete order”.

Different pages can have different objectives, and one objective may correspond to multiple links (for example, a home page would have multiple “go deeper” links), but each page must have only one primary objective.

The hard part is selecting which objective is most important for each page. Different constituencies within your firm will lobby hard for different objectives:

“The home page must stress catalog request.”

“The product category pages must pitch service subscriptions.”

“Make sure product detail pages promote cross-sells.”

“Make the ‘more info’ links more prominent.”

“The home page should urge visitors to call.”

And so forth. Don’t be swayed!

Each Page Has One Primary Objective

Catalog requests, promoting services, cross-selling, selling through information centers, and driving phone calls are all reasonable and important objectives.

And these objectives are appropriate primary goals for appropriate pages. (When a visitor reaches your catalog request page, for example, “get catalog request” is the correct objective, and secondary marketing objectives should not distract.)

But the primary goal of a home page isn’t typically “catalog request”; it is “go deeper into site.”

The primary goal of the product detail page isn’t typically “cross-sell”; it is “add to cart.”

For each page, determine its primary objective.

Emphasis The Primary Objective Through Clear Design

Once you’ve determined a page’s primary objective, use clear web design to emphasize that goal.

Using Godin’s web-visitor-as-monkey metaphor, make sure each page has a single “banana.” Emphasize the primary objective using distinctive color, size, shape, and position.

Rather than increasing the emphasis on the important, de-emphasize the less important. A page’s primary objective needn’t be marked up with garish red, huge-and-bold, or (horrors!) <blink> tags.

Instead, select a softer color palette for the entire site, and reserve strong primary colors for the key action. Surrounding the key element with additional white-space also increases its emphasis.

The Across-The-Room Squint Test

Here’s a quick check to evaluate if a page’s primary objective is visually obvious.

Print the first screen of that web page in color. (The primary objective link must be “above the fold,” as only committed visitors scroll.)

Have non-design folks view the color printout from several feet away, where text becomes illegible but design and color are still clear.

Viewers should identify the primary objective instantly:

“Well, I can’t read too well from back here, but I’d bet you want visitors click that red rectangle on the far left.”

Suggestion: To increase sales, increase your page focus. Make it clear where you want visitors to click.

Operations: Emphasize your strengths

As a successful catalog company, you know how to take calls, answer questions, ship products quickly, handle returns, and solve customer problems.

These are tremendous strengths, and your pages should ensure shoppers become aware of them:

  • Provide your 800 number clearly atop every page.
  • On your “About Us” page, describe your friendly and skilled phone staff and short-hold times.
  • Promote your live web chat, your fast email response speed, and your impressive shipping speed.
  • Offer customer testimonials and emphasize your high levels of customer satisfaction. (Advice: don’t tout your own excellent service; use objective third-party scores, like BizRate.)

Suggestion: To increase sales, promote your service and fulfillment strengths.

Speed: Faster is better

Fast-loading pages get used more often.

Consider Google.

Google offers excellent search results, but an equally important key to Google’s success is its blindingly fast speed. (Experiment: run the same query on Alexa, MSN, Yahoo, and Google and note response times.)

Establish a concrete targets for reducing your site load times over the next quarter.

Monitor the speed of the home page, a typical product category page, a typical product detail page, and a typical on-site-search query. Make sure your timing tool uses sampling to obtain fair estimates, as response times vary with internet load, server load, and database load.

Benchmark load times for key competitor sites, too.

Speeding Up Your Site

To speed up your site, first analyze where the time is being spent.

If your database-driven pages are slow, optimize queries, add indexes, or cache common results. If that isn’t enough, upgrade software, hardware, and distribute database work across multiple servers.

If the whole site is slow, consider faster web server software, hardware upgrades, and investing in additional servers.

Make sure your server has multiple fast connections to the internet, and consider caching services like Akamai or Savvis.

Speeding Up Your Site II

Gain speed by transmitting fewer bytes.

Use smaller images where you can, optimizing image resolution for web presentation. Use Cascading Style Sheets (CSS) to reduce HTML bloat. Move common CSS and client-side scripts off the page into their own files, so browsers can cache them.

Make sure all image tags include HEIGHT and WIDTH tags, so browsers needn’t wait for images to begin rendering.

Use HTTP content compression to shrink your pages. While this technology is common at dot-coms, a recent study by Port80 indicated only 4% of Fortune 1000 websites use this effective technology.

Insist your designers, service reps, and management team spend time using your site through an AOL dialup. Though DSL is increasingly common, your site must be responsive at dial-up speeds . and your broadband users will also appreciate your speedup efforts.

Suggestion: To increase sales, make your site faster.

Usability: Follow norms

In 1999 Jakob Neilsen offered his insightful “Law of Web User Experience.”

This law observes that your web users spend most of their time on other web sites.

Accordingly, deviating too far from web norms confuses your users and harms sales.

Stay abreast of current web norms by keeping notes as your surf and shop online. Monitor leading websites. Monitor your competition.

If you see many sites using a certain visual or navigation convention, consider using the same convention.

For example, the following are becoming e-commerce norms:

  • Place the site search button in the upper left
  • Provide “bread crumbs”to keep visitors from getting lost
  • Use “tabbed” displays to simplify pages
  • Use home-page thumbnails to promote categories (vs. products)
  • Use standard link decoration
  • Design for 800×600 pixels.

Your Visitors Don’t Think About Your Products As Often As You Do

We could extend Neilsen’s law to note that most of your web visitors spend far less time thinking about your products than you do, and are far less fluent in your terminology than you are.

Be kind to these visitors: avoid industry jargon (or link to explanations); explain important concepts; provide information layers for both the novice and expert shopper.

Establish a program of periodic usability tests to watch how typical users use and comprehend your site. Such tests need not be elaborate or expensive, and can reveal common stumbling blocks in your page design.

Tip: hire a firm specializing in web usability for your first few rounds of testing to learn the ropes, then train internal folks to conduct and analyze usability sessions.

Suggestion: To increase sales, follow web norms.

Conclusion

These four suggestions will help improve your web page design.

May all your pages have clear focus, emphasize your strengths, load quickly, make sense to your visitors — and enjoy great conversion this holiday season!