The importance of product pages and their design on an ecommerce site should never be underestimated. They are that final push, the last chance to convince your customer that the product they are looking at is the right one for them.

The first and most essential aspect of designing any product page is simplicity. A customer wants and assumes that the product page will be focussed on just the one main product. Allowing users to find items that might better suit their requirements through the use of recommended products is great and is always encouraged but it should never compromise the prominence of the selected item. The clarity, weighting and flow of product information is also integral to how a customer expects to experience a product page. By ensuring that the title is large and at the top, flowing into clear pricing information, stock levels, product options and then a very clear buy button means that all of the really important details are above the fold on most browser windows, regardless of size and resolution.

swimrite-product-page

An example product page layout in Magento

A crisp and large product photo is also required in this area above the fold. By making sure that the image is always to a minimum of 800px square and preferably clipped out on a white background, you will not only display great quality images but be able to fully take advantage of the product zoom functionality Magento has to offer. It’s amazing how many ecommerce stores still use tiny images to demonstrate their products when in reality it’s the first thing most customers look for when navigating to a product page. Furthermore, why not upload more than one image of the product from different angles or perhaps displaying the item in use. Magento allows for a gallery of unlimited images, make the most of it.

swimrite-image-gallery

An example product page image gallery in Magento

Another incredibly important thing to remember when designing a successful product page is don’t try and reinvent the wheel. As more and more users take their shopping online they expect a familiarity from all product pages. As an example take a look at some of your favourite online stores and some of the larger ecommerce sites, I can almost guarantee that they are laid out in a very similar manner. Now is not the time to show off wacky new design skills just to be creative, this can be done much more successfully in other areas of the site such as the homepage or overall site branding.

As important as it is to keep the product page clutter free and simple, it is also essential that you provide plenty of relevant information on the product so that the customer can make an informed decision as to whether a particular product is suitable for them. The trick to balancing this need for information with a clean design is known as ‘layering’. By utilising tabbed boxes you can ensure that all of the information the user could ever require is only one click away but doesn’t intimidate them on initial page load with an overload of facts and figures.

tabbed-box2

An example of layering product information within a tabbed panel

So, what if it doesn’t work out and the customer still requires more information or has simply decided that this product isn’t for them? Well don’t throw in the towel just yet! By always ensuring that the product page has a clear ‘ask a question’ button it not only gives the overall impression that you are a company who are there to help and support but also means the user has an easy way of sourcing the extra information required. In case the product really isn’t for them, make sure that you have selected some recommended similar products to display alongside your main product. Perhaps this particular item might not be exactly what they are looking for but if your product page isn’t a complete dead end then the customer has the option to carry on browsing for a product that is more relevant to them.

ask-q

Always allow the customer to ask a question at product level

rec-prod

Make sure that the customer doesn’t get stuck in a dead end by always adding related products

One final element of product page design that is worth considering to place below the fold is customer feedback or reviews. This is not always essential, especially for smaller stores or more boutique items but it is always worth keeping in mind as a good selection of reviews on an item can really help convert potential customers into sales. If you have decided that reviews are necessary on your store product page, one way of maximising their impact but without cluttering the design and flow of information is to place an average review score (usually as a star rating) at the top of the page alongside the product title. This can then be anchored to the bottom of the page displaying more detailed review information.

This article has only been a few brief notes of things to keep in mind when designing or putting together a product page design. There are of course many other factors that are going to affect your layout and no two ecommerce stores are the same. However there are some crucial things that they all have in common: The product page is all about the last step of turning potential interest into a sale, it’s about letting your product really stand out in a clear, simple and methodical manner and it’s about providing relevant and useful information to the customer.