The effectiveness of your online store relies heavily on the layout of your product pages. We previously looked at some overarching design principles for an ecommerce website, which apply to all pages of an ecommerce website. Here is a checklist of elements to consider for the all-important ecommerce product page design to make it effective. You do not need to include all these items, but make sure you do consider them and even do some testing around them after launching your online store.
Ecommerce product page design: three focus areas
Ecommerce product pages can be broken down into three focus areas: the visual language, the product details and the next steps. Have a look at ecommerce giant superbalist.com’s product page design as you read and see how they have designed their product pages using some of these checklist items.
1.THE VISUAL LANGUAGE
Your ecommerce product page design should mirror the style of your whole website, but focus on just one product.
a. Keep the overall layout clean and uncluttered. Have a look at this article about using white space in your website design.
b. Give users an experience of your product through your photographs and videos. Showing your product on a clean white or light background is most effective. Focus on showing different angles, scale, unique details, the product in context (lifestyle images) and ensure users have the ability to zoom in on photographs.
c. Use icons where applicable to reduce the amount of text on your page.
2.THE PRODUCT DETAILS
You need to give customers all sorts of information about a product, which they cannot see and feel.
a. Use clear, descriptive product titles (include the brand of the product if applicable).
b. Ensure the price is clearly visible.
c. Write detailed, unique product descriptions.
d. Provide easy to navigate and understand variations. These can be done using icons or colour block selectors to add some visual interest to your page. Make sure that your product picture reflects the chosen colour or design.
e. Provide stock information where necessary. A low stock notification can help persuade a hesitant buyer or reduce frustration later on for a customer looking to order in bulk.
f. Ensure all shipping/payment/returns information and costs are clearly visible and provide links should your user need more information.
g. Include additional information which could be valuable to the user, such as dimensions, care instructions, usage instructions and ingredients. This information can be packed away using tabs to create an uncluttered page.
h. Show real, honest reviews of your product. You can also use “star” ratings as another way of incorporating imagery into your page.
3.THE NEXT STEPS
There are multiple actions a user could take based on their experience of your product page. The primary action you want is for a person to actually buy your product. Not everyone buys the first product they view; they may want to browse your site and see what other options you have for them. Allow users to do their research by giving them easy ways to browse.
a. Ensure your “add to cart” button is bold and clear, preferably close to the price of the product. This should be the primary button on the page – no other actions should compete visually. Make sure your microcopy reflects the tone of your website.
b. Leave spaces for cross-selling, upselling and even “recently viewed” products.
c. Keep navigation and breadcrumbs visible.
d. Allow users to share your products across social platforms.
For all these items, ensure you keep SEO in mind for your headings, copy, image names, alt tags, etc. If you do your SEO and online marketing correctly, your product pages are likely the first page a potential shopper will visit. So make sure your product pages give a great first impression and convert potential sales to long-term fans of your ecommerce offering.
Focussing on these three areas of ecommerce product page design will set you off in the right direction. These are just some of the ecommerce UX best practices you can follow. If you are in the process of designing your own ecommerce website, sign up for our Digital Insights Newsletter to receive more advice.