WHAT LIES BENEATH

Jun 01, 2001 9:30 PM  By

All the work you put into getting your Website up and running comes together in one place: the user interface.

An attractive home page is a critical part of the user interface. But a great interface design is more than a pretty face for your site. Equally important is the information architecture: the underlying organization of content and features that determines how customers experience your site. A successful user interface immediately engages customers, shows them what you have to offer and how to find it, and guides them to the buying point quickly and easily.

From the foundation up

Solid site architecture optimizes the path to purchase — the path that customers take to buy a product. In addition to helping customers find products quickly, an optimal path to purchase provides opportunities for dynamic merchandising and data mining, and supports sales through a combination of commerce and content.

Good architecture starts on the home page, where universal elements such as shopping tools and product categories should be visible at a glance — not “hidden” within a pull-down menu or at the bottom of a long home page where customers will have to scroll and scroll again to see it.

Because English-speaking people read from left to right and from top to bottom, keeping the universal elements at the top or left of each page ensures that they’re always easy to find. The top center of the screen is also a prime location for tools you want users to be able to find fast. For example, if your inventory is large and diverse, an advanced search tool might be a good choice for front and center. If a high percentage of your Web sales come from customers placing print-catalog orders online, you might want to reserve that location for a “catalog quick order” tool.

A simple, intuitive, balanced category structure helps people comprehend the contents of your site at a glance and gives them an easy way to navigate with a minimum of searching and clicking. In general, fewer categories are better than more, and each category should contain roughly the same number of products. A typical business-to-consumer site should present no more than nine main categories and subcategories at one time, with no more than 50 products per category and no more than nine thumbnails displayed per page. A large business-to-business site with thousands of products may need to expand on these numbers, however.

If it usually takes more than three clicks to get from your home page to a product detail page, your products may be “buried” too deep within categories for customers to find them easily. Reorganizing product groups at a higher level can often solve this problem. For example, a diamond pendant would take six clicks to buy under the category structure Apparel > Jewelry > Diamonds > Women’s > Gifts > Pendant. You could reduce it to three clicks by restructuring your categories to Women’s > Jewelry & Gifts > Pendant.

And don’t neglect the details: Clear, attractive thumbnails on the category and subcategory pages are just as important as the large shots on the product pages. The thumbnails, after all, are what capture the customer’s interest enough to get him to click through to the product.

Laying on the graphics

Good graphic design for the Web should showcase your product, express your brand, and create an enjoyable, consistent user experience. It should also make the most of the Web’s capabilities as an interactive medium by guiding users throughout. A few concepts to keep in mind:

  • Keep it simple. Avoid cluttering up a page with too many graphics, cross-sells, animations, and so on. While these can be powerful tools, using too many of them on the same page dilutes their impact and distracts the customer from the primary image. The same goes for colors and fonts. Too few is usually better than too many.
  • Create a clear visual hierarchy. Every page should have one primary area of focus with a clear goal: either to sell a product or to move the customer through to a purchase point. Use graphics size and placement, font types and sizes, color, white space, and other design elements to emphasize the primary content on each page and make it clear to the user exactly where he should go next.
  • Consistency, consistency, consistency. A consistent user interface makes your site easier for customers to use and less likely to create problems that generate customer service costs after the sale. The same tools should appear in the same location on every page. Functional elements such as buttons and clickable text should work the same way everywhere. And graphics, colors, fonts, and other design elements should maintain a consistent look and feel throughout the site.

The all-important product pages

Everything on the product page should support the sale of that product. Here are some considerations:

  • Page layout. The primary product shot should be the most prominent element on the page and should always be located above the “fold” (the vertical center of the page), as should the “buy” button, if at all possible. The customer should never have to scroll to see or buy the product. Placing cross-sells, links, and other visuals below or to the right of the main product image (never to the left) helps ensure that the main image is the first thing people look at when they open the page. A simple page layout also improves readability and enables the page to load quickly.
  • Colors and fonts. Almost all product images look best on a white or near-white background. What’s more, minimizing the number of fonts improves readability and helps maintain a clean look. Avoid reversed text (light text on a dark background), as it is extremely difficult to read.
  • Photography. Use multiple product shots (including enlarged, detailed, and alternate views), and be consistent in terms of type of shot (on or off model, silhouette, in studio, on location), angle, style, display size, and so on. Even if you are repurposing product shots from your print catalog, all photographs should be individually optimized for the Web. If a particular photo isn’t working well online, you may need to reshoot the item. Photography is still one of the greatest expenses in creating a Website, so make sure every planned product shot is going to work at the size your template requires before you commit to a template or start shooting.

In the early days of e-commerce, the small group of technically savvy people who actually shopped online were generally intrigued enough by the concept to overlook any less-than-optimal page design and architecture. Today, the novelty has worn off, and e-commerce is a powerful mainstream sales channel — one that must meet the needs of shoppers at every economic and educational level. In today’s e-commerce environment, the future belongs to those i.merchants who, like their brick-and-mortar counterparts, strive to make the shopping environment as attractive, easy, and intuitive as possible.

Ken Burke is president/CEO of Multimedia Live, a Petaluma, CA-based media consultancy.