• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Pattern Group F. Basic E-Commerce > Keep Key Elements above the Fold

Keep Key Elements above the Fold

The exact information shown ABOVE THE FOLD (I2) depends on what customers need to see first. If you hide crucial facts too far down the page, customers may never see them. The key e-commerce elements to keep above the fold include the following:

  • Standard navigation and shopping tools. Customers want to use the standard navigation bars, shopping tools, and search tools right away if the current product is not the one they want. Forcing customers to backtrack to find a different product only frustrates them.

  • A small product thumbnail that is clickable. Unless all your customers have fast Internet access, use FAST-DOWNLOADING IMAGES (L2). To keep the initial product detail page fast and simple, keep your product shot small and in JPEG or GIF format. Provide a higher-resolution, more finely detailed image of each product so that customers can examine it for important particulars that help them make a purchase decision. Whereas the product shot on the first page must work on the lowest-bandwidth connections with browsers that do not have special visualization plug-ins for the detailed shot,[2] you could use a high-resolution image that can pan, if the product encompasses a room or an outdoor space. For some products, the back side might be as important as the front, in which case you can make the link go to a product image that customers can rotate.

    [2] Visualization plug-ins, like QuickTime, that provide panning and rotating, are not always included with Web browsers. Most customers will not download and install these plug-ins to use your Web site.

  • A needs-oriented description that goes along with the product title. This description can be just enough to show customers the major differences between this product and others. Make sure the description answers customers' needs, such as how a jacket “keeps out the cold.” This brief description may also be used elsewhere on the site.

  • The product price and currency (unless options change the price greatly). Because nine times out of ten the price is a part of the decision-making process, your customers expect to find this information quickly and easily. Price gives customers a quick understanding of the relative costs of similar products. In some cases, when the product's price varies by 50 percent or more, showing a low price might mislead customers, and showing a high price might turn them away. In these cases, show either a range of prices or a base price and a typically configured price.

  • Product option quick picks or a configuration button. If a product has several options—whether configuration, style, or something else— quick picks and configuration buttons are easy ways to let customers select their options while they are in the context of the current product, so that they can browse and choose. Implement this feature with a pick list when short textual descriptions are sufficiently descriptive, or with a pop-up window that takes customers through a configuration PROCESS FUNNEL (H1) that returns the choice to the parent product detail window (see Figure F2.3).

    Figure F2.3. Nordstrom shows the options for this product. The red arrow directs customers to choose size first and then color. The color pick list is generated according to the size chosen.

    (www.nordstrom.com, October 3, 2001)

    In some cases, showing product availability on an option-by-option basis may be difficult. Unfortunately, customers who want the blue version of a product, for example, will be frustrated and might cancel a purchase if they find out later in the process that the blue version is not available after all. The best solution is to show only the options that are currently in stock. See SHOPPING CART (F3) for ideas on how to do this.

  • Overall ratings of your product, if appropriate. To help your customers understand how the current product stacks up against similar ones, give them a summary of how the company rates it, how outside experts (magazine reviews or awards) rate it, and how customers rate it. Ratings should use standard scales of either five stars or an industry-specific standard.

  • An idea of when the product will arrive so that the customer can plan for its arrival. This estimate might come from your inventory system, your production system, or your typical deployment schedule. Failing to include this information, or providing inaccurate information, will greatly increase your support costs.

  • A product item number (if the site is a sales channel). If customers use the site to order items by phone or in person, a product part number greatly simplifies the task of locating the exact product desired.

  • The Add to Cart ACTION BUTTON (K4). Customers might be sold by the title, description, photo, ratings, and price alone. Make it easy to order the product by keeping a visible Add to Cart action button high on the page. If applicable to your site, a Wish List link, used for storing products for future purchase or for purchase by friends and family as a gift, works well when it is near the Add to Cart button.

  • Links to more detailed information. Let customers know that more information exists and is only a click away, by making links to these resources visible above the fold. If customers want more in-depth reviews, for example, they should be able to click right to Reviews. If customers are concerned about the product's physical dimensions, they should be able to link to Product Specs. Both bits of additional information could be on the same page, below the fold, but the links will make customers aware that more information exists and will provide quick routes to it.

    You could also supply more detailed information through direct product comparison tools. Comparators, recommenders, and selection guides can help make the selection process easier. For complex products with similar features, such tools might even be required for customers to make selections online, without a human attendant to help.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint