Website Design

Web Design Advice for E-commerce Product Pages

In web design tips for a product page part two we look at product page content and different product page types.

Product Page Content

Basic product page content is structured around the fold, which is the point where the screen cuts off the remainder of the page. Since the user must scroll in order to see what is below the fold, they must make an active choice whether or not to continue browsing. The initial above-the-fold section is where most of the important information appears, so we will start there:

  • Header: This is the area containing the brand logo and navigation options menu. It is similar on most web pages, so it does not need to be particularly large. Brands often opt for minimised versions of navigation even on desktop, like a hamburger icon.
  • Product description: This section includes the product’s name, price, a value proposition, and at times a review snapshot (i.e., a star rating). The description identifies the product and makes a concise pitch as to why the visitor should purchase it.
  • Product Images and Media: This area holds the primary product images, typically in a carousel for visitors to view from various angles. This section includes viewing options like different models or colour choices.
  • Call-to-Action (CTA) Button: This button leads to the purchase page. Near the CTA are purchase options like sizes and quantity.
  • The rest of the content items listed do not necessarily have to be located below the fold. They are not quite as immediately essential as those that are listed above.
  • Supporting Information: This area includes detailed how-it-works product information, i.e. weight, dimensions, FAQs, specific product parts breakdowns are included here.
  • Peer Endorsement: This section consists of testimonials, reviews, lists of notable people or brands who have used the product and more.
  • Supporting Graphics: Included here are non-essential imagery to assist with scrolling, like illustrations or animations that make the page more alive and interactive. Typically, they are connected to the general site branding.
  • Recommended products: This list of other products is displayed for the visitor to consider. If the visitor ultimately decides not to buy the original product they came for, they can continue browsing other product pages instead of simply leaving the site. They might also decide to purchase additional items.
Web Design Singapore

Different Product Types and How They Influence Product Page Web Design Content

The product page’s content varies depending on the type of product or service. The most common difference is between physical and digital products which are visible and nonvisible respectively.

There is an inherent disadvantage for physical products in the digital realm, and a major goal of their page is to substitute successfully for a brick-and-mortar store. This goal might be accomplished by using more resources in the media, providing extra details in product specifications, or by highlighting generous shipping and return policies such as free shipping, easy and free returns, and/or extended return periods.

Singapore Website Design and Development

Physical products such as wine or candles rely on non-visual senses. As a result, they often have similar page strategies to digital goods, especially, in their emphasis on persuasive descriptions. However, since they rely on personal taste, a trend for this arena has been the use of onboarding quizzes which precede the product page. These quizzes ask visitors questions about their preferences. They are fun, but also strategic. They use the input to make the product page seem like it has been specially curated for them.

In some cases, digital products and services are not photographable so images cannot be displayed. Frequently a service is unfamiliar or novel. In this case, more time is required to establish familiarity with the brand and what they are offering. As a result, pricing is usually saved until later. The visitor might be scared away when a price is listed before a complete understanding of the offer.

On the other hand, physical products are able to be more straightforward. For example, a visitor viewing a t-shirt on-line is familiar with t-shirts, and will either think it does or doesn’t look good enough to buy.