Top 10 design trends for creating a brilliant product page

Brands often sell lifestyle and emotions. The home page is the most suitable destination for that. But the purpose of the product page is different. It has to shape a buyer’s focus towards the product immediately.

An uncluttered and simple design of a product page makes perfect scenery for large, high-quality photography that showcases a product. Simplicity doesn’t mean throwing away most of the product details though; rather, it assumes good planning. Each element on the product page should be sharp and to the point.

I am able to count ten on-page elements that are commonly used by online fashion shops. They are all well-known — I am not bringing to light any secrets here. While the elements are the same, however, some designs allot better usability to them. Below you can find a few ideas from top clothing brands on how to enhance a product page design.

 

Disclaimer: In this page, screenshots illustrate only specific elements of the product page and are accompanied by the logo of a design owner. For the full appearance of the page, please click the image and visit the website.

 

1. Product photo

A large photo, several product views from different angles and a zoom are must-have attributes of the product page. While a good photo is a half of it, some minor effects may also affect user satisfaction, for example:

  • Most websites switch images by a click on a preview. Gap does this on a mouse hover, and this is convenient.
  • Most websites have only one image per additional color. Net-a-Porter  re-colors all previews.
  • Most websites show an enlarged photo on the same page. This is a mainstream rule. Consider following it, if you still use pop-ups from previous days.

 

2. Product video

The arrival of HTML5 to the scene has made it possible to view video directly in a browser. That means you can have an online trunk show brought right to the customer’s home. Neiman Marcus features product video side by side with images.

 

Video on product page

 

3. Product price

The price should be as easily viewed as a tag on cloth. The best place is at the top of the product card.

 

Price position on product page

 

Most top brands prefer the position right below the product name.

 

Price position on product page

 

Price position on product page

 

4. Color swatches

On a smaller surface, a color looks different. Therefore, large color swatches make more sense for the user. If they are real fabric photos that reflect the texture of the fabric, especially for soft materials or lace, they create a pleasant feel-and-touch experience.

 

Color swatches on product page

 

Color swatches on product page

 

Victoria’s Secret is my favorite here. Notice how they enlarge color swatch images at hover – it’s just perfect.

Large color swatches

 

Even if a style has only one color available, it is a good idea to show a color swatch. This will explain to a user that this is the only option, and that will simplify the search and shorten the decision-making process.

Color swatch on product page

 

5. Size selection

When you sell clothing and shoes, you can’t avoid size selection. Here are a few ideas on how to make the process convenient for the user:

 

    • Using icons for size selection to replace drop-down lists is more convenient (thank you, touch screens, for the idea!);

 

Size selection at Shoon

 

    • A good approach is to show all sizes and mark available sizes with active colors. It is easier to grasp the availability of your size this way.

 

Size selection

 

    • Linking size selection to a size guide is reasonable, no need to explain;

 

  • If you sell foreign dress brands, a good idea is to link the national size system to the manufacture’s sizing, for those who know their size with the selected brand.

Size selection

 

6. Quantity selection

Many brands still use a window to fill in the quantity, or even a drop-down number. However, the mobile world has brought us a very convenient control that has “+” and “–“ buttons. While it is especially good for responsive interfaces, it works nicely on the poor desktop too.

 

Quantity Selection

 

Some clothing shops throw the quantity selection away – hmm, buying two of the same cocktail dresses is probably not in my plans, yes. But the idea is at least worth considering.

 

7. Shipping instructions

The shipping price and shipping details are important for buyers to make a decision.

    • If you have free delivery, state it visibly:

Shipping notes on product page

 

    • Or indicate the necessary amount to be eligible for free shipping:

 

Shipping notes on product page

 

Also, I like sellers who have a link to shipping information in the product card, rather than forcing me to search for it somewhere in the footer.

 

8. Add to Shopping Bag

Now that you have designed all elements that serve the buying process, it is time to add an item to the shopping bag. You were so attentive to your buyers, but… I often forget something: size, quantity or even color. So do others… Well, here are some tips for managing this careless behavior.

  • Place all parameters under each other in a straight order;
  • Do not predefine the choice of size even if you have one size in stock. Some brands even allow a color swatch to stay unselected after the page loads providing the user should do this purposely;
  • The above rule doesn’t relate to quantity. Because you usually buy only one clothing item in the selected style and color, it’s better to place a “1” in the selection by default.
  • In some online stores, the “add to bag” button is inactive until all parameters are selected by the user. Instead, arrange some tooltip when buyers hover to remind them about the field they missed.
  • Manage errors wisely. Show the user an exact field that is omitted.

Below is my favorite error message from a popular Russian clothing shop. They suggest selecting a size right in the error message window after the “add to a bag” button is pressed. Enjoy:
Error message on product page

 

9. Product details: fabric and care

Most brands have moved product details from the top, where they used to reside, to the position under the “Add to Bag” button. I agree, less people read them. However, information about fabric composition and care instructions are important for many buyers.

 

Product Details

 

Allow finding this information to come easily using icons as above, or – at least – fonts and titles.

 

Product Details

 

10. Previous/next style

Even if the product page is great, the buyer usually wants to see more styles. Previous/ next buttons are great at the top right corner to navigate your collection. Just be sure to make them visible.

 

Previous - next buttons on product page

 

I like web stores that make it easy and convenient to shop. Know your audience, watch your competitors and create your own ideas, and your buyers will please you with an increase in sales. We will continue to collect more user interface ideas on these pages. Follow this blog for your inspiration!

 


 

You can also ask our web-design agency to review your online store for improvements. We are focused on apparel, shoes and accessories in the industry and will be happy to share our experience with you. Look at designs we have created for our clients.