Ingredients of an Ecommerce Product Page

An ecommerce product page is the online equivalent of a product display in a bricks-and-mortar shop front – the window through which you can display, inform, eulogise and promote a product to the world.

Whether a visitor has arrived there by navigating through faceted search, via a search engine, a referring website, or an email marketing campaign – the product page presents the opportunity to place your product in front of a potential customer.

A product page equates to the “Evaluation” and “Purchase decision” phases of the PIEPP purchase decision model

Equating to the “Evaluation” and “Purchase decision” phases of the PIEPP purchase decision model – the product page presents one convenient location from which you can:

• Detail information on the product you are selling
• Present reasons why the visitor should buy it
• Present reasons why they should buy it from you
• Showcase any other related products with which to enhance their purchase and clarify their purchase decision

Generally, when considering the design of an ideal product page, there are a number of factors to take into account:

• Understanding customer needs, the product, and why it is the best solution
• Minimise uncertainty by providing all the information that a visitor could possibly need
• Clarity of visual imagery
• Maximise the trust factor
• Single clear, obvious purchase call-to-action
• easy selection of options (size/colour/quantity)
• Related products to enhance or upgrade the product, or clarify the purchase

Key Components

The following components would be present on the ideal ecommerce product page, in order to maximise the conversion rate and help boost sales..:

Page Heading

The page heading should lend context to the page rather than be chosen solely for search engine benefit

This should provide a clear and immediate indication of the product on the page. A visitor should be able to tell, just by looking at the page heading, what that product the page is offering. The page heading should consist of relevant descriptive keywords – lending context to the page rather than chosen solely for search engine benefit.

Keywords might include:

• Brand/manufacturer (eg. “Audi”)
• Model/product name (eg. “S3″)
• Specification/properties (eg. “2.0 Turbo FSi, Manual”)
• Generic Type (eg. “Hatchback”)
• Colour/material/style (eg. “Metallic silver”)
• Colloquialisms (eg. “Hot hatch”)
• Key features/elements (eg. “Sunroof”)

An informative product page heading might read something like this (notice how each keyword type is concatenated):

“Sony Bravia KDL37W5500U 37-inch Widescreen Full HD 1080p LCD TV with Freeview”

Imagery

“A picture is worth a thousand words” – never was this truer than on a product page, where the visitor is physically distanced from the product, and every means which can deliver extra information to a visitor without them having to hunt for it provides a mechanism to increase conversions. Images are powerful because they are “absorbed” passively - the visitor has not had to read anything to experience what the product is - they just see it!

Imagery might be used in the following ways:

• Multiple images displaying every aspect of the product, or 360° viewer
• Close up/detail/zoom functions
• Show product versions, colours, sizes, materials, etc
• Demonstrating the product usage in context
• Detailing the product box inventory

Clarity of imagery is vital to provide the most accurate representation of the product - to enable confident evaluation and maximise conversions

Clarity of imagery is vital to provide the most accurate representation of the product - to maximise definition and display the product in the most comprehensive manner possible, while maintaining the best balance between imagery and page load speeds.

Thumbnails provide a convenient compromise for imagery; large enough to determine the basic facts without affecting page-load speed – but do not necessarily provide the scale and definition required to enable a potential customer to confidently evaluate it.

Therefore a mechanism must be implemented to deliver the visitor a large-scale version of each product image in the highest resolution possible - to enable confident consumer evaluation by providing the best representation of product detail.

This might include:

• Pop-up windows containing large-scale hi-res versions
• A “div” layer that appears on page, containing a large-scale hi-res version
• Scrollable “magnifier” enlargement functionality

…or similar devices.

Video

Video can bring products to life in a way that is impossible through static images and text, and it has been proven that product sites with video convert better than those without.

Video is a powerful motivator - content can include product detail videos and demonstrations, document the product range and variants, introduce cross- or up-sell opportunities, and deliver your product message in a much more engaging manner than simple textual content alone.

• Video offers better engagement
• Delivers a message more effectively (audio +visual)
• Delivers a message quicker (no reading - listen and watch)
• Provides a richer brand experience (touch the senses more)
• Can explain and demonstrate more complex/awkward key features and USP
• Show the product “in-action”

Links embedded within video can be used to direct visitors to refine their search - providing viewers with access to further functionality, alternate products, up-sell opportunities, etc.

This scope for interactivity can be used to create a more comprehensive user experience, increase consumer confidence and conversion rates, lower the number of abandoned shopping carts and reduce return rates.

Textual Description

A product’s textual description is one of the most important elements of the page, as it:

• Confirms what the visitor has seen in the product images
• Reinforces the brand
• Contains factual information and data about the product
• Details contextual information about the product
• Explains why and how it should be used
• Motivates the visitor to buy the product

Creating your own content allows you to deliver unique insight and differentiate yourself from your competitors

The textual content provides not only the communication channel to highlight the product’s key benefits to potential customers, but also the ability to differentiate yourself and your products from your competitors.

Ignoring the standard manufacturer descriptions, which many competitors will be using, and writing original descriptions for the product pages presents the opportunity to:

• Deliver unique content and insight to differentiate yourself from your competitors
• Increase the ability of the page to rank for long-tail keywords in the search engines
• Provide a more compelling user experience.

Having identified the reason the visitor wishes to buy the product:

• Highlight the key benefits of the products
• Highlight the USPs and the benefits they bring
• Indicate the price point plus any extras (handling/shipping fees)
• Incorporate a clear purchase call-to-action

It is extremely important to ensure that all information pertaining to the product is documented comprehensively – providing any specifications, detail and benefit statements in a clear but concise manner. Tabs or toggle div layers can help show and hide more in-depth data should the visitor want to see more information such as product specification or sizing charts.

When most people visit a website they:

• Do not read long portions of text
• Do scan pages
• Look for visual clues to highlight important bits of data or nuggets of information.

Therefore, copy should:

• Present the important data in a “bite-sized” format
• Use bullet point lists or similar devices
• Aid identification and digestion of the salient points.

Copywriting requires careful setting of tone and style, establishing a tone for all of the copy throughout your site requires identification of the target audience and the understanding of how to appeal to them - sometimes a familiar, colloquial style might be more appropriate for an audience than a straight, informational style. The language you use must combine your audience’s needs with your own brand DNA.

“Filler” or flowery wording makes copy long-winded, loses punch and runs the risk of annoying visitors to your page. Copy should be short and to-the-point – although not to the extent of losing vital detail or sales messages.

Trust Factor

Trust is the most important element of successful ecommerce, and can lead to important long-term relationships

It has been shown that trust is the most important element of successful ecommerce (Cheskin & Sapient, 1999; Corritore Kracher Wiedenbeck, 2001), and can lead to important long-term relationships (Ganesan, 1994).

Trust is a primal gut feeling - often formed instinctively on first impressions from a combination of historical experience and perceived integrity, versus risk assessment (as risk increases trust decreases).

Website design plays a large role in forming these first impressions:

• Does the website look credible?
• Has it been designed by a professional designer?
• Does it provide the functionality expected of it?

In order to maximise the trust factor, it is important to exhibit honesty and ethical behaviour, address visitors concerns, and manage risk. Therefore, important trust signals might include:

• Careful attention to product copy
• A clear privacy policy
• A clear returns policy
• Implementation of comprehensive security mechanisms (eg. secure servers)

The implementation of services (and display of logos) such as Verisign, and McAfee Secure (HackerSafe) or Trust Guard can have a beneficial effect on perceived trust factor and increase conversion rates - as consumer confidence in the payment gateway increases, the barriers to conversion are removed.

Media reviews and customer feedback can also improve the conversion rate - the supporting 3rd party reviews increasing perceived trust in the product.

The Call-to-Action

Once a visitor has reviewed all the necessary information about the product, they need to know what to do next. A call-to-action indicates the objective it wants the visitor to complete whether it is adding an item to a shopping trolley, completing a contact form, or signing-up for a newsletter.

A successful call-to-action will often make use of:

• A single, focussed call-to-action – no alternative buttons competing for attention
• Convention (use of a button or similar device)
• Proactive language – must include a verb e.g. “add” or “buy”
• Proximity to the product image - signals “association” to the product (Gestalt principles of design)
• Visual hierarchy: Prominent location
• Visual hierarchy: Contrasting colours
• Visual hierarchy: Large Size
• Visual hierarchy: White space to make it stand out

Seth Godin’s litmus test is to find the call-to-action in less than 3 seconds - after which time you can assume your visitors have left

According to Seth Godin the litmus test is to be able to find the call-to-action in less than 3 seconds - that is the amount of time you have until you can consider that your visitors have given up and left.

In this day and age, with ever more competition and increasingly web-savvy visitors, reduce that figure to a single second only; if you cannot find the call-to-action the instant you look at the page, then the design and implementation should be re-appraised.

As Seth Godin says,
“Force yourself to design each and every page with one and only one primary objective… Make it big. Make it blue (or red). Make it obvious!”

Peer/User Reviews

Media reviews and customer feedback about the product help boost conversions. Indeed, as an expected component of a product page, the absence of user reviews may actually impact negatively on the conversion rate.

Customer feedback can not only document extra functionality and experiences using the product, but positive feedback and reviews can improve the conversion rate, due to an increase in perceived trust.

Bottom line - consumers trust other consumers more than they trust you.

Additionally users who do write a positive review on your website are much more likely to make repeat purchases with you because in doing so (writing the review) they have “bought into” your website and brand.

Related Products

Related products offer opportunities to increase basket size, and enable visitors to clarify their purchase decision

A proven technique to increase revenue on ecommerce sites is the practise of cross-selling – offering the visitor secondary products related to the product they are viewing.

This is because not only do these related products offer opportunities to increase basket size, but displaying a number of related items actually enables visitors to clarify their purchase decision by providing the opportunity for comparison and justification.

Cross-selling can be implemented in a number of different ways, at different points in the purchase cycle - however, techniques appropriate for the product page include:

• Alternative “similar products”, of the same type as the current product
• Related products (ranges, sets, collections, compendiums, omnibuses)
• Related products (accessories, spare parts, components)
• Related products (”also bought” by customers who bought the current product)
• Related products (top sellers, special offers - retailer-compiled lists)
• Lists created by visitors, which include the current product
• Tag cloud relating to the current product (to instigate further searches)
• Similar items by category (to instigate further searches)

Conclusion

Think of the user, and what they need to pass through the purchase cycle.

All the ecommerce product page components listed above address a user’s need at a given point during the purchase cycle - the more effectively each component meets the user’s demands, the more likely that user will convert.

If you make their life easy for them in their first purchase with you, consumers will also reward you with their repeat business.