Six Functional Parts, The Home Page

The home page sets the shopper’s expectations for the rest of the site and lays out the framework. The home page performs the following jobs:

Store Framework

The store framework—or page layoutsets the expectations for the customer for each subsequent page within the website. It usually consists of the top banner of the store, the left navigational bars, the primary content area (middle), and often has a third column on the right side used typically for advertisements. The top banner and left navigational areas are usually consistent throughout the remainder of the store.

To help the customer remain oriented in the site, there are static elements that start on the home page and then remain constant. For example, the company logo and top of the page identification banner help ground the shopper in the store even though page content changes.

Company Information

The company name, logo, and positioning statement are important informational elements. In addition, a toll-free number provides another means to order or to ask questions and should be readily noticeable and available on the home page and all other pages of the store.

A link to a company information area will provide the company name, address, telephone number, parent company, and a key contact name. It may tell a little about the company itself, how long it has been in business, the types of markets it serves, and the range of products it produces. There may be a photo of the main office to establish credibility. This area can reinforce the value proposition and reassure customers that they will get the promised quality, service, or other attribute when they order.

Ecommerce Shopping Online

He scans the list of categories, scrolling down a couple of screens, scrolls back up, then icks "paper," which takes him to a page that asks him to enter his zip code. He just wants to see if they have the product first, so he clicks the "continue" button. An "error" message fills the screen insisting that he enter his zip code. It tells him he must do this before he will be allowed to continue shopping. He looks at his watch—now he’s only got 15 minutes until his client shows up. "That’s it for that one," he says to himself and types in the URL for the second store.

Again he looks at a cluttered home page and anticipates that this will not go well either. He ally needs the brochure paper, so he scans the list of links on that home page. He looks for something that will give him a clue as to what he should click. He sees a link for "forms and paper" and clicks the link, hoping he won’t get one of those zip code demands again.

A list of 40 paper products appears. He hadn’t realized there were so many different kinds of paper. He begins scanning and scrolling the list when the telephone rings. After the call, he has only five minutes left to prepare for his appointment. He looks back at the long list and decides to bag it and pick up the supplies on his way home from work. He makes a mental note make sure his secretary orders extras of everything before her next vacation.

Sub Category and Product Detail Pages

Because customers can’t pick up virtual merchandise and read labels, the product detail page represents the product or behaves like the product package. It must clearly communicate what the product is and what the customer will receive as a result of its purchase. Anytime a page offers a product for sale, it must provide the following information for each of the products offered:

  • What it is—the description, picture, uses
  • Relevant and complete compatibility, sizing, color, or other information
  • What’s contained in the package—what the customer will receive
  • Other items needed for immediate operation (batteries, cables, assembly, UL specifications)
  • Spare or complementary items (extra batteries, film, or a carrying case)
  • "Care and feeding" of the product (special polish, cleaning instructions)
  • The price and any hidden charges (extra shipping or handling)
  • The manufacturer’s or designer’s name
  • Sample content (for example, sample book pages)

The customer must know clearly what the product is and what it looks like. And for customers who know exactly what they are looking for, accurate descriptions and specific product numbers or models must be included so they may easily recognize the correct product. Our research across more than 25 major elcommerce websites identified incomplete or inadequate information. In many cases, the web stores did not provide complete compatibility information.

Shoppers will not purchase from a site that cannot confirm their choice or be specific about what the product is that they are purchasing.

Product detail pages let customers know what they’re getting and what else they may need or want. In this example, product features—the "speeds and feeds"—are listed. This includes products they may need to purchase in order to use the product. It also features other products the customer may want. Good clothing stores recommend coordinated accessories to give customers ideas to complete ensembles for a variety of social occasions.

Write for the Successful Websites

People tend to print pages if they are too saturated with text Printable pages should be a core design requirement, because many people print Internet documents for future reference. Use background colors, text colors, and fonts that print well on a variety of printer types.

Some colors, for example, do not show up when printed because of conflict with background and text colors. Avoid "white" text unless you’re sure that it is visible when printed. It is also important to be careful that your printed page does not print a blank last page. The designer should print out pages on the site to make sure that actual information is on each page.

Page Design Tips and Considerations

Page copy should be succinct and easy to scan using short paragraphs. subheadings. and bulleted lists. Text labels must be self-explanatory. Follow magazine or newspaper article principles, and put your major message in the headline, with supporting points visible and clearly understood. In the first few seconds on the page, shoppers must know what the product is and why they might need or want it. Good visual design is a craft.

Text and Background Contrast

Provide a highly readable landscape by applying the following recommendations:

  • Use high-contrast colors between the text and background by using plain color or subtle patterns for backgrounds.
  • Avoid intense colors such as red.
  • Considerations for color-blindness should be taken into account.

How Does Your WebStore Stack Up?

Regardless of the size of your online store or your organization, there are questions that you can ask of your site as a potential influencer of site design and customer experience. A website self-evaluation shows opportunities to improve site usability. Comparing your competitorssites against the same criteria and analyzing the results reveals areas of focus to remain at a competitive advantage or to catch up. Read the rest of this entry »