20 tips for optimizing your eCommerce product page UX

E-commerce

Authors

profile image circle
Dominik Kobas

Dominik is UX UI designer with unique perspective on things, empathy, insight, determination and passion for UX projects.

profile image circle
Mario Stipetic

Mario has worked for New York and San Francisco-based startups and large corporate companies such as ZTE. He specializes in UX solutions for eCommerce sector.

Index

1. Intro

2. Role and importance of images in eCommerce shops

3. Adapting featured & gallery images to the user's needs

4. Image types used for eCommerce products

5. Using good product titles for great results

6. Building trust and social proof for users

7. Personalization is more important than ever before

8. Choosing and implementing user-friendly product description

9. Creating desire with storytelling

10. Designing visible CTAs buttons

11. Reviews and ratings for eCommerce stores

12. Where to position product description text

13. Saving user's time by setting the most commonly selected options as default

14. Engaging users with a suggestion list

15. Using images

16. Keep elements simple and properly grouped

17. Designing active states for personalization options

18. Designing dropdown menus

19. CTAs

20. "You may also like" suggestion element

Bonus: download Figma product page design template

1. Intro

With an increasing number of eCommerce shops each year, it is harder and harder to attract and keep customers.

To keep business successful, the goal of every eCommerce shop is to increase sales rates, raise average order value to maintain lower shipping costs, create trust and gain loyal customers. To do so, we advise the following guidelines.

Weekday's product page

2. Role and importance of images in eCommerce shops

Images are an essential part of eCommerce shops. Users tend to make most decisions based on images first. Putting extra effort into the process of making images and paying attention to small details will have a significant positive outcome for a shop.

Diesel's product page

Therefore, images are the most important part of eCommerce shops, particularly for those whose primary field is fashion or lifestyle art industries as their conversion rates virtually depend on visual elements. With such a, for example, fashion product it is mandatory to include alternate and detailed images as the buyer needs to be sure of what product they're exactly buying.

hm.com product page

3. Adapting product images to the user's needs

Choosing the right image for the product page can be challenging. There are a lot of elements of an image that should be looked out for.

We advise that only one - featured image dominate the content of a page and act as a focus point. Do not make users squint trying to look for details, rather make an image large enough for them to see all the key details they are looking. In case you are faced with any technical limitations, embed an option such as click-to-zoom or similar solutions.

It is recommended to add at least a few additional images from different angles and to include lifestyle photos. They help users to better visualize products, and in some cases, develop an emotional reaction to a product.

Example of featured and gallery images - Need supply Co. product page

Optional bonus: Having a few images of certain details of your products can be a good thing. Users simply can't interact with products online as they would in an actual store. Many people like to feel and examine what they're buying. That is an experience they are deprived of while online shopping, and they hate it.

Additionally, if a product has a function, a video can be added to it showing how the product is used.

• Skimping on pixels - a big NO

The usual mistake that should be avoided is uploading low-resolution images that prevent the user to have a detailed look at the product. That alone can trigger anxiety in users because they are not able to get crucial information from the most reliable source of information.

4. Image types used for eCommerce products

When it comes to image styles themselves, it is important to pay attention to detail and it is best to use professionally made photographs. Since users tend to decide on the trustworthiness of your shop, based on how professional-looking images are, mainly related to high resolution, the more trusting users become.

• Catalog style images

Professional catalog style images are the best choice since they are made in studios in a completely controlled environment with objects in front of a single-color background, most commonly white. The catalog images will create a uniform and consistent look throughout the whole shop. Because of consistent look users will not be overwhelmed and they will direct their focus on the product itself.

Catalog style images will also fit other eCommerce shops in case one eCommerce shop decides to expand through other retailers.
Another advantage of catalog style images is that they tone down the visual complexity of the screen, which plays an essential role when it comes to information-heavy products.

Example of catalog style images - Pull&Bear
• Lifestyle images

Lifestyle images can be made anywhere. Their main goal is to evoke emotions in the viewer and have the viewer resonate with the product. Locations, models, sets and everything else can be creative and adapted to users as long as the quality of images remains up to a standard.

Lifestyle images are also able to provide real context for users and give them an idea of what would that product look like in a real room.

Example of lifestyle images - Taylor Stitch

Ikea, stool in context

5. Using good product titles for great results

The first thing, apart from images, users look for and notice is the title. Giving products unique titles is always a good idea, but it is not always possible. Make sure to pay attention while naming products, because titles appear in search engines and titles can determine how close to the top results product pages will rank. Think about how users search for items, what would spark their interest and make them click, but steer clear from being too clickbaity. It can create distrust.

Note: Keep in mind that some users use primarily Google for navigating the web and looking for the desired product. Because of that, those users might have different user experiences from others.

Examples of titles, left- bad use of the title, right - correct use of the title

6. Building trust and social proof for users

More important than the title is utilizing area around it since that is where the user's attention goes right after. That is a good place and opportunity to build trust with your users through reviews or your guarantee policies that will ensure product purchase and delivery satisfaction. The more expensive the product, the more research the user will conduct before buying to make sure their decision is satisfying.

Example of social proof- Everlane

7. Personalization is more important than ever before

After users establish some trust, they usually look for personalization options, which are most popular with Millenials and, on the rise, with gen Z. Making a clear and easy way for users to utilize personalization options is more important than ever before.

Allowing users to choose from a broader range of product options, such as size, color, and style, is key to growing and becoming a new leader in the industry. When possible, adding options for creating a unique product, e.g. adding custom text to a T-shirt, can bring more traffic to the shop.

Example of personalization options - Everlane

8. Choosing and implementing user-friendly product description

The amount of information accompanying a product tends to vary, naturally. The first thing to decide is whether products are on the information-heavy side, or if they are visually heavy. Some simple examples are fashion eCommerce sites, where users get the most information from images and some details from the description. Another example is an open marketplace platform for eCommerce such as Amazon, which has a variety of products available where in some instances user's priorities are detailed information rather than images.

It is important to have in mind that a product description has to answer all questions users might have while looking at the product page. An easy way to do that is to think about what frequent questions would pop up regarding this product and answer them clearly and concisely, which would ensure the content is user-friendly.

We advise that you always talk to your end customers because you will get far better insight into what are they looking for in a product. For example, one portion of your customers are maybe interested in knowing the exact materials and colors you used for a clothing item. If they have a hard to to find all details the conversion rates will drop.
We have plenty of experience in conducting similar user research so you can always contact us for any advice.

Example of product details -Taylor Stitch

9. Creating desire with storytelling

When storytelling is done well, it enables users to imagine in what way a product could help them and users will focus on possible results, rather than features.

Complement storytelling with additional lifestyle images that represent the product or stance of the brand when it comes to a certain topic. That way it is possible to create a community of people, who have the same stance, around your products and give them value beyond material goods.

Combining images and text in storytelling can be a challenging task. Pay attention to the size of paragraphs and the amount of text to avoid overwhelming viewers and losing their interest.

Example of storytelling - Harry's

10. Designing visible CTAs buttons

The most important button on the whole page is certainly Call-To-Action (CTA). For that reason, make sure it is easily visible, below personalization options, and use a clear copy on the button.

If storytelling is used for the product page, make sure there is an additional CTA at the very bottom of the page to make it easy for users to proceed to the next step where they will have a clear overview of all options.

Example of actionable elements - ShopBop.com

11. Reviews and ratings for eCommerce stores

Example of social proof - Everlane.com

Creating good reviews and rating system is necessary. Reviews bring great value to users and they tend to rely upon them when making a purchase.

Creating a good review system seems easy, but there are a few challenges. For example, in some cases, users decide to review different parts of service. You could encounter one user writing a review about the product quality, while others might review the service of handling an order and customer support on the same page. All reviews are useful but sometimes they can create confusion for users.

The solution is to create a good review form where there are separate sections for each part of the product. That way users do not have to go through lengthy reviews if they are looking for specific information. Adding suggestions or questions in the process of writing review can help out a reviewer on what to focus on to make review helpful for others.

12. Where to position product description text

Left - positioning under images, Right - positioning in the sidebar

There are many different formats of eCommerce shops. Making the correct decision derives from paying attention to what formats and kinds of images will appear on product pages. If the size is uniform, then arranging other parts of the page will come more naturally. However, if the size of images varies, then positioning and sizing of the text field is dependent on those images. Otherwise, images could push important information further down the page and interrupt the flow.

One way of handling that is making the text field the same width as images, if it is placed underneath them, or placing text in the sidebar under the CTA button and thus keeping them separate. That way the consistency in design will be maintained and breaking the layout will be less likely.

13. Saving user's time by setting the most commonly selected options as default

Examples of personalization

The personalization section is one of the hurdles which can make or break a conversion. The main goal of every website or app is to keep the required action steps from users at a minimum. It is also possible to have more steps which are split up and simplified in order not to overwhelm users.

On product pages, there are a lot of interaction points - shifting through images, expanding sections (e.g. product details), carousels, FAQ sections, and personalization options. The main goal is to avoid unnecessary interactions from users. That is why it is suggested to place a default selection state as the most common option with users.

Sometimes assuming and preselecting an option, e.g. size, can have a negative outcome, therefore it is important to get to know the target audience and know if that is something they want or not.

With other personalization options, which do not have a direct impact on the user's viewpoint, it is acceptable to have a preselected option. If an eCommerce shop has many returns because of wrong orders, such as color, then making default statenoneand making users choose is the way to go and keep logistic costs down.

14. Engaging users with a suggestion list

Example of suggestions, left - gallery style, right - carousel style

Suggestions are a good way to keep users engaged and create cross-sells, but it is often overlooked when designing. Three important things to keep in mind when designing suggestions are:

  • keep products easily visible
  • add only essential information (price, title, and image)
  • make suggested options relevant to the opened product page

Many eCommerce shops put three to four images on the visible part of a carousel, and the rest of them available through arrow navigation. That might seem like a good solution, but it is not as effective as choosing fewer images but making them visible during browsing. 

The more images users see, without having to navigate manually, the more likely they are to engage. Therefore:

  • Have up to 3 rows of images
  • Don't have more than 4 options per row
  • Keep consistency in style of images used


15. Using images

Example of image and gallery
Do's
  • Put a lot of images
  • Make sure images are catalog or lifestyle style
  • Make sure images help users better visualize products
  • Use high-resolution images
  • Have a gallery of images(put gallery left, right or bottom of the featured image)
  • Make sure gallery images, if placed left or right, are closer to margins (avoids the clutter of information)
  • If possible, include 360-degree shots images or videos
Don'ts
  • Have only one image in the gallery
  • Have low-res images that look good when in the gallery, but not when resized as the featured image


16. Keep elements simple and properly grouped

Do's
  • Pay attention to the hierarchy of elements
  • Have up to two elements in one grouping
  • Watch out for relation between the spacing of connected elements and groups and separated ones
Don'ts
  • Make too many option/input fields, the goal is to make purchasing convenient for users
  • Write a color option, rather show it

17. Designing active states for personalization options

Do's
  • Make sure to make buttons easily distinguishable for users to see which one is selected(in an active state) to avoid confusion
  • Make sure that all color options have border-radius to make them visible(we're looking at you, white) in the background when active and not

Don'ts
  • Put dark borders around color options, rather make them a light gray color or use an asymmetric style of highlighting it to make it distinguishable

18. Designing dropdown menus

Outline select
Underline select
Do's
  • When there is a dropdown menu, choose the option which has fewer details to avoid creating busy areas
  • If the under-line style field is used, it is okay to go with darker colors since they won't be as intrusive as others would
  • Place help link next to the relevant field

Don'ts
  • Leave out arrow-down icon when using dropdown menus
  • Group dropdown menus too close
  • Use confusing labels and captions on menus

19. CTAs

Do's
  • Make CTAs stand out from the rest of the design
  • Add icons for better recognition when browsing
  • Give more additional spacing between the CTA and content below it, unless it is connected to CTA button, e.g. the FAQ, size guides, shipping&delivery
  • Make sure there is only one primary CTA option, make others secondary by reducing details of a button(e.g. removing fill or border, or both)
Don'ts
  • Use the same style options for primary and secondary CTA buttons
  • Make CTA seem as normal text and make users think it is not clickable
  • Use an inconsistent look for CTA buttons through the shop

20. "You may also like" suggestion element

Do's
  • Make suggestions consist of only three elements - image, title, and price
  • Spark interest in users by giving them essential information at a glance
Don'ts
  • Put only images without other elements, users might confuse them for galleries or might find them deceiving because the price is not specified

What will be the most important 2020 fashion eCommerce trend based on your professional experience?

Note: we will publish selected answers and get back to you by email
Thank you! Your submission has been received!
We will notify you by email when we will publish the results.
Oops! Something went wrong while submitting the form.

6. Video is still on the rise

Video is already pretty popular on eCommerce—but it’s still growing.

There’s no mystery why retailers are gravitating toward more videos—they can increase conversions, click-through rates, and web traffic. In fact, Forbes found that 65 percent of customers are more likely to make a purchase after watching a product video. 

Shoppers are attracted to this advertising method because it feels more authentic and can provide valuable information. Dollar Shave Club experienced first-hand how effective video marketing can be when its unexpectedly funny first video received nearly five million views and generated 12,000 orders within the first two days of its release.

Source: HubSpot.com

This format is so beneficial because it’s very easy to share and elicits an emotional reaction from viewers. The Aberdeen Group found that companies utilizing video in ad campaigns boosted revenue 49 percent more quickly year-after-year than those that do not.

According to Cisco, video will be 82 percent of all internet traffic by 2022. That’s up four-fold over 2017 and demonstrates just how important video will be to eCommerce (and all businesses) in the coming years.

Experiment with one or more of the following video formats and add embedded videos to your product pages or link to videos in your Jilt post-purchase emails to pique customer interest and boost revenue.

Product demos

  • Allow consumers to see product from 360-degree angle
  • Highlight and explain major features
  • Answer common customer questions

How-to videos

  • Delve deeper into a product’s features and demonstrate how to use them
  • Popular video type for social media
  • Get customers excited about everything your product can do

User-generated customer reviews

  • Build trust about your product
  • Add a layer of authenticity to your reviews

Lifestyle

  • Build a narrative around your brand and tell stories about your product
  • Videography feels more like a movie or short film
  • Great for your social media platforms

6. Shoppable ads on social media

Both Google and Instagram introduced shoppable ads in the past couple of months. We will only see more of this trend, making it super easy to shop while you're scrolling on the Instagram. The photo-sharing social media platform is quickly becoming the central hub for branded fashion content and powerful user-generated marketing. In the fashion industry, it can be difficult to build trust. By turning to influencers, fashion brands can gain endorsements from trusted product curators who boast massive followings.

Not only that, but retailers could learn a thing or two from Instagram when it comes to shopping on mobile. The app has made the customer journey to purchase super easy with a native payment integration into the app.

7. Shared economy trend in fashion

Brands like Uber and Airbnb made solved huge problems for us, making it easier and cheaper to book a place or get a ride. Shared economy is slowly entering the fashion world, and we can only expect to see it more in 2020. The sharing economy is making it easier than ever for consumers to get expensive looks affordably, either through renting or swapping outfits.

While the idea has been around for a while, with services such as Rent-the-Runway catering to designer tastes, it’s Chinese consumers that are taking the concept mainstream. In a competitive economy, China’s post-’90s generation rents outfits to keep up with fast-changing trends.

The impact of the shared economy on the fashion e-commerce is dramatic. Brands can offer users great outfits without having to worry about wholesaling or manufacturing. Instead, they can simply focus on providing an easy-to-navigate customer experience. It’s no wonder such accessible and affordable models are taking their place among the top fashion e-commerce trends.


8. Brands are reducing wait time with the help of chatbots

eCommerce customers love chat. According to one study, 51 percent are more likely to make a purchase if they can have a live chat, and 44 percent say having their questions answered in real-time is one of the most important features an eCommerce site can offer.

And that’s cool… except it’s a big ask for a small company, and an impossible ask for someone running an eCommerce business solo.

That’s where chatbots come in. Rather than answering every question yourself in real time, why not have a robot do it—or, at least, serve as an initial screener?

It’s estimated that by next year, 85 percent of all customer service interactions will be handled by chatbots. (Oh, and the same study estimated that by next year, the average person will have more total conversations with bots than with their spouse. Welcome to our horrible automated future!)

And chatbot technology isn’t just available to companies that can afford AI developers or ones that have been building a secret army of robots in a sub-basement. There are plenty of affordable and simple chatbot apps available right now for both Shopify and WooCommerce.

If you’re on the fence about adding one, keep this one stat in mind: 29 percent of people say they’re more likely to buy something on a website with live chat, even if they don’t use it.

9. Increased number of direct-to-consumer brands

Direct-to-consumer brands, which handle every single aspect of their business from design to manufacturing to sales and distribution, are on the rise. There have been a number of high-profile successes in the space recently, including Casper, Warby Parker, and other brands you hear advertising on literally every podcast—so now, lots of others are following suit

There’s a strong appeal to running a DTC operation.  Without a bunch of middlemen siphoning off any money, you can cut costs and increase quality, like The Black Tux did by manufacturing their own tuxedos for their online rental store. You’re not at the mercy of major retailers, meaning you control your brand experience at every step. You “own” every single one of your customers and it’s easier to gauge the effectiveness of your marketing.

That being said—DTC is still a tough game. Managing every single aspect of a retail business is a significant undertaking that requires capital, organization, and lots of talented, specialized employees. However, as more bespoke DTC brands gain serious traction and siphon off significant market share from the mega-retailers, it’s a space that’s undeniably worth keeping an eye on—or, in the most ambitious cases, joining in on.

10. Omnichanel > Online

Due to Amazon's increasing popularity, a lot of bookstores went out of business. And few years later, Amazon is

There’s something almost poetic about it. Amazon drove countless brick-and-mortar bookstores out of business—and now that they’re gone, Amazon has started opening its own brick-and-mortar bookstores. There are now more than 50 Amazon Books locationsaround the U.S.

But—those stores don’t just sell a curated selection of popular books. They also serve as a place for people to come check out Amazon’s gadgets like the Kindle and Echo, and even to handle package pick-ups and returns. Amazon is using their physical locations for book sales, sure—but through another lens, that almost seems secondary to the other purpose of bridging other key gaps between the online and brick-and-mortar experience. With their stores, Amazon can now get the sales boost of people playing around with their gadgets, like Apple does at its Apple Stores. And by incorporating a staffed shipping department into the stores, Amazon can make the delivery and returns process on complicated orders go much smoother than they could via any online-only instructions or chats.

Amazon is far from the only one looking to establish a physical presence to shore up the vulnerabilities left by a virtual-only business—and secure even more customers by giving them that in-person, three-dimensional, tactile experience. Last year, more online-only retailers, including Rent the Runway, Everlane, Allbirds, and Adore Me, started making the move to add more physical locations, featuring curated collections and the in-person service touch, and that trend is continuing on now. It’s estimated that digital brands will open at least 850 physical stores in the next five years.

And as that trend continues, it will be interesting to see how many of the stores start stocking more inventory, rather than just a small sample, to achieve one of the other key benefits of the brick-and-mortar experience: The instant gratification of walking out with a shopping bag in-hand.

Summary

As technology and customer preferences continue to evolve, the eCommerce world is adjusting with it. That’s reflected in the trends we’ll see in the industry next year.


  1. Online shops are fighting high return rates with - reviews.
  2. AR shopping
  3. Search grows beyond text
  4. Mobile is the new desktop
  5. Video is still on the rise
  6. Shoppable ads on social media
  7. Shared economy trend in fashion
  8. Brands are reducing wait time with the help of chatbots
  9. Increased number of direct-to-consumer brands
  10. Online shops are going offline

What the experts have to say;
In your opinion, which of the trends will have the biggest impact on the world of fashion e-commerce in 2020?

Mostly, Artificial Intelligence looped into the Fashion Industry. As we can both agree how big an impact AI has on the market and has a huge scope as well. On those lines we provide conversational automation to the fashion e-commerce stores as well, therefore, powering fashion e-commerce and AI amalgamated with ML, NLP, NLU, NLG together.

Niharika Ayyagari - Verloop

Virtual reality shopping app

Crevia Soh is a founder of Aiverc, design watch online shop. She wanted to create a luxury watch that was bold and different, and allowed people to express themselves.

Greater personalization without a doubt, combined with ever increasing competition for customer loyalty.
profile image circle

Margarita Goroshkevic - AllRiot

Greater personalization without a doubt, combined with ever increasing competition for customer loyalty.
profile image circle

Margarita Goroshkevic - AllRiot

What will be the most important 2020 fashion eCommerce trend based on your professional experience?

Note: we will publish selected answers and get back to you by email
Thank you! Your submission has been received!
We will notify you by email when we will publish the results.
Oops! Something went wrong while submitting the form.

Download free Figma product page design template

The file is in .fig format and it is free to download
Download template

Schedule a free 20-minute eCommerce UX design consultation

We will be glad to e-meet to know more about your project.
Schedule Consultation

Download the UX design Request for proposal (RFP) template for free here

The file is in .doc format and it is free to download
Download RFP template

You might be interested in...

We ensure that our designs meet  the high standards  of all three sides: customer, client and aesthetic/functionality.

Top 10 fashion e-commerce trends for 2020

What features users want to see in their favorite fashion eCommerce stores? Discover the 10 eCommerce trends that will have important impact on customers in 2020.

See Post

20 tips for optimizing your eCommerce product page UX

The goal of every eCommerce shop is to increase sales rates, raise average order value(to maintain lower shipping costs), create trust and loyal customers. To do so, eCommerce shops need to follow a few guidelines.

See Post

Top UX consultants in London 2019

Finding a good UX consultancy agency in London can be difficult. There is a huge number of agencies but only some of them offer a true multi-discipline approach with concern about the overall product quality.

See Post