Designing better product pages

Hi, my name is Julia, and I am an Art Director at Clay, one of the top UX design agencies.

I’m going to share my vision and experience with you in a series of articles. This one is dedicated to designing a better product page on an e-commerce fashion website.

The product page is the core of e-commerce websites. It is where most users decide whether or not they’ll purchase a product, so it should be treated with extra attention. I hope that my insights will help you design a better experience.

Introduce a Lifestyle Not a Product

Even though product images are mostly held on the client side, as a designer you have the power of introducing the full concept and influencing the client’s product presentation strategy.

Brands nowadays don’t just sell products, they sell lifestyles. That’s why Instagram sales are increasing, and every big brand has an account, that allows customers to shop.

People get inspired by outfits and lifestyle images. It’s easier to associate with a person wearing sneakers than with the sneaker itself.

If you design for a mono-brand store, consider that context, real-life dynamics, and emotion create a stronger relationship between the customer, the brand, and the whole community. Note how Mango & Urban Outfitters complement their formal footage with a real-life outfit photo, featuring the selected product.

Smart Insights’ studies show that 77% of shoppers would like to see other customer’s photos rather than professional shots before making a purchase decision. They probably seem more realistic and trustworthy and are easier to identify with.

The Baymard Institute suggests allowing users to upload their own images to the site. This may result in a mutually beneficial partnership with fashion bloggers, magazines and retailers. For example, MADE.com allows users to tag their photos in an Instagram post to be featured on their website.

Since socialization, globalization, diversity celebration, the mixture of styles, irony, openness, and transparency are increasing values of western society, I believe that even luxury brands will move from being too serious and distant to having a more lively dialog with the customer. Just look at these recent posts by Balenciaga & Vetements ❤.

Respect the Industry Standard

When designing a new product for an existing market, make sure that you consider the established interface patterns and mechanics.

The average product page is divided into two columns: photos on the left, and product information and actions on the right. Users are already familiar with this layout, so use it, and they won’t have to learn a new UI and will move straight to the product.

COS & Farfetch product pages

Sticking to the dual layout does not mean that all product pages should look the same. There is still room for creativity within those limits. As an example Rick Owens website makes use of the whole browser window to showcase the product, which brings style and freshness to the traditional layout.

Allow Buying an Outfit

Allow customers to shop the whole look and buy similar or complementary products. People often get inspired by the whole outfit as an image and buying other components of the look can be a crucial part of their shopping experience.

Showcase the Product

Apart from using lifestyle photos, you should introduce the best of the product, which means an accurate and comprehensive demonstration of its properties as well as helping the customer imagine the product.

Here are some tips that will help you make your formal footage awesome:

• Show product both on the invisible mannequin and on a model.
• Provide model measurements and product measurements where possible.
• Capture close-up details: lining, stitching, fabric, tags, zippers, buttons.
• Shoot a video: seeing the product in motion helps to imagine it better.
• Treat all product images consistently. Make sure that your products are all the same size and are centered within each image identically. Images should have identical zoom, y-position, sharpness, white balance settings, etc.
• If a product, e.g. a coat, has a zip or buttons show it both open and closed.
• Show products in scale. If the size and proportions of the product are not initially obvious, set photos near a reference object of known size, e.g, bags, shoes and jewelry should have at least one photo on a model.
• Show more photos from different angles simultaneously. On websites like ASOS the user has to remember how the product looks from the front when he looks at the back view, and vice versa. This makes the evaluation and imagination process more difficult, long, and tiresome for the customer.

Farfetch shows two images at the same time. Mango does an even better job, getting rid of the image carousel and showing them as a grid.

• Provide easy photo zooming. Zooming a photo is an interaction that lacks consistency across the web because all websites behave differently. Whatever zoom mechanics you choose, make sure your interface indicates how it behaves. Make use of custom cursor shapes for it.

Do Not Use the Carousel

Numerous studies show that carousels don’t work because nobody actually clicks through them. Even though they mean promo carousels, some of those drawbacks are true for the product photo carousel as well:

• Carousels show only 1–2 photos at a time.
• They demand aiming at a tiny control with a cursor.
• Clicking cannot be done on “autopilot”, and each click steals attention from the product to navigating.

More and more progressive brand’s websites are moving to a spacious layout with large photos taking the full left side of the page. Users navigate between them by scrolling, which can be performed almost automatically, and demands no attention to the process of navigation itself.

While carousels disappear, the two-column layout stays. Sometimes the right column is fixed on the screen while the left column containing the photos scrolls in the usual way.

Acne Studios, Ambush, and some other brands put large images on the page, allowing customers to view the product closely without additional clicks. Full-size images often don’t fit inside the browser height, and the user has to scroll down to see the rest of the image. I feel like this approach pushes the accents in the wrong direction a bit, as it’s more important to comprehend the product, imagine it and decide on it, rather than view close-up details, which is usually the second step of evaluation after the user has decided that he’s interested in the product.

Do Not Truncate Thumbs

Baymard studies show that 50–80% of users don’t see the photo at all if its thumb is truncated in the thumbnails section due to space saving reasons.

Design a layout where all photo thumbs are initially visible, and they will not only help the user quickly see the desired angle or close-up but also provide quick and intuitive navigation to the desired photo.

Design for Edge Cases First

Because they are not that rare in e-commerce.

There is always the temptation to make your product info super minimalistic and clean, allowing the product to be the king. But the truth is that users really need many details to decide, and the shop usually wants to pique the shopper’s interest.

So before, imagine the product is on sale or has a special offer. You can have a sale timer, “sold out” or “low in stock” label, or show the product is low in stock only in size M. Long product name, brand name, ID, VAT inclusion and in-store availability info must be on the page initially. We cannot just collapse them under the “More Info ▾” link for the purpose of cleanliness.

Trying to fit all these elements together after you have already approved sleek and clean mockups with the client can be a pain, as they most likely will create a mess. It’s easier to remove things rather than add, so design like everything is “on” at the same time, to ensure that it all looks readable and harmonic. Then design for the minimum and the average number of elements. It is best if the content doesn’t change positions, causing them to “jump” from page to page, this will help users to form a spatial habit.

Describe Product and How to Get It

Group the product info properly and think about what additional information can be helpful:

• Show the size guide link near sizes selector.
• Show model measurements near the model photos.
• Place units converter near model/product measurements.
• Show care instructions near the composition.
• Allow notification of missing sizes.
• Show shipping costs right away. Baymard studies reveal that 64% of users look for the shipping costs on the product page immediately, and 24% of them claim to have skipped a purchase because they couldn’t find them. This can be especially crucial for international orders when shipping sometimes costs double the price of the item itself (story of my life).

To keep your page sleek and minimalistic, follow the progressive disclosure approach: don’t overwhelm your customer with a lot of info at the beginning. Allow users to dive into the details as they wish. You can fit a lot of information if you use collapsable/expandable list or tabs. But remember to keep it simple to discover and use descriptive names: “Composition and Care” is much more informative than “More info”.

Be Polite and Helpful

UX politeness and care for the user means that you foresee any difficulties and problems the user might face, and try to avoid or prevent them. You should imagine questions that may arise, and provide the comprehensive info in advance.

The interface should be responsive to the user’s actions and provide unambiguous visual feedback to them, especially to those that don’t have an obvious impact on the displayed content, like adding a product to the wishlist or bag.

UI tone of voice is undervalued by a lot of designers, who focus mostly on representing the brand image or showcasing the product with the use of various decorative design methods. While bold design and great pictures rouse interest, desire, and other emotions, a caring UI will create a loving and trustful relationship with your site and prompt users to return.

Here are some tips on how to make your UI a nice fella:

• Make sure contact & help links are easily discoverable.
• Don’t hesitate to duplicate useful info. You may place info about shipping and returns on every single product page and throughout the whole checkout flow, so whenever the user needs it he won’t have to wade through the FAQ.
• Product ID should be there for the support needs.
• Don’t reproach the user for mistakes when he had never actually made any. For example, if the user tries to add a product to the bag without choosing the size, gently draw his attention to the missing selection with animation or tooltip, but avoid red, all caps, warning signs, sounds or animations that are associated with mistakes.
• Add visual feedback for adding the bag/wishlist and logging in. This is much more crucial than it looks at first sight, according to NNGroup studies.

Allow Syncing Across Devices

According to Appsee, 37 percent of users do research on mobile but switch to desktop to complete the purchase, so make sure you:

• Suggest they log in to sync their bag and wishlist. It’s important to tell the user how he would benefit from signing up. Syncing is a strong motivation to sign up as it provides a more seamless shopping experience.
• Make sure sharing options are easy to find and allow to share items as well as the whole bag.

___________

I hope my tips were useful. Don’t hesitate to share your feedback, insights, and ideas in comments.