5 Most Common UX Design Elements that Ruin Product Pages (with Solution)

Product Page UX Design Elements

There’s an issue in e-commerce product pages that are lurking just under the surface, and the site owners may be blissfully unaware of it until they start wondering why their sales just aren’t meeting their expectations.

Even during an era when so much of the world’s commerce is taking place online, with the most significant sales numbers growing year by year, they might find nothing but cobwebs in their stores. Sure, their stores may not be Amazon, but they should still be attracting customers, shouldn’t it?

So, the shop checks everything. Everything from the personal branding of the website, to the copy, and to the images. All assets and elements are reviewed and reevaluated. It might be a while before they realize it: the problem could be the UX design elements.

The Right Way to Get A Customer’s Attention

Even if your website seems outwardly “perfect”, has the right standards, and even a great appearance, the UX contribute heavily to how customers will receive your site.

If you have some specialized plugins to determine how engagement is going, they might give you some insight. If you see a definite disconnect between the site visitors and how much of them are checking out, the experience within the site may be causing them to turn away elsewhere.

In some product pages, mistakes that could be what’s deterring your customers in what should otherwise be a thriving market. After all, consider these statistics:

E-commerce Statistics from 2019

  • Return customers: 30% of online shoppers that have previously had positive experiences with a store are more likely to return.
  • They will let you know: 30% of customers are also quite active in interacting with a site by leaving reviews and feedback about the service.
  • They don’t like surprises: Unexpected additional costs or strange experiences in online shopping have roughly 60% of shoppers abandoning their cart during checkout.
  • Mobile experience will shape the game: Mobile shopping is now responsible for 46% of online orders.

That is what it comes down to in the end: design and the elements. The design is an integral part of the user experience that must not be overlooked, especially when trying to make sure that users are hitting that checkout button.

The question remains. What do you need to do to close the deal?

Closing the deal means making the process more comfortable, more enticing, and more convenient for the customer. Getting them down that road always starts with excellent UX design. Remember that first impressions matter; 94% of shoppers consider the site design when judging whether a site should be trusted or not.

Consider the Trendy Designs for the Year 2020

  • Micro Interactions: These design elements are small animations, tweaks, movements, and more that seem minor, but contribute to the user’s experience. They could be confirmation popups, scrolling visuals, and more. These different interactions engage the customer more and make their shopping far more memorable.
  • But while it’s important to keep users engaged and aware of what’s going on at all times, it’s equally important not too overdo microinteractions to that point that it interferes with the user experience.

  • Immersive elements: Websites that allow users to interact with the site, such as interactive 3D, being able to change to dark mode, and more get users interested and make them happier. They might seem like little bells and whistles, but allowing customers to feel like they’re in control lets them enjoy more.
  • Minimalist navigation: Simple, smooth, and straightforward navigation among the design elements makes things so much easier to understand. No getting lost looking for one page or another; users (with their short attention spans) will get in, see what they want readily, and want to buy it quickly.

The Pitfalls of Bad UX

Building a useful e-commerce site means that you want to make sure your customers take their carts all the way out to checkout and payment. But if your UX is working against your game plan from the beginning, you’re not going to get there. Look out for these pitfalls:

1. Where am I? And What is This?

The wrong imagery, layout, or visual cues— especially concerning what you’re selling— is a common problem in product pages. Customers getting confused by the disconnect will be even less likely to bite. Stock images hardly ever appeal to anyone.

They want beautiful, crisp photos of the actual item, so they know what they’re buying. Colors are too bright and flashy, making the text unreadable? That can make the customers hit the back button.


It’ll be a little challenging for your site if you need an overhaul after this, but you’ll be surprised to find that even small tweaks can make a big conversion difference. Declutter the page, tone down the colors, and use better pictures. These changes can make a big difference.

Additionally, using breadcrumbs as a secondary navigation scheme helps users get a clearer idea of where they are on the website or the process they’re going through.

Breadcrumbs Navigation

As you can see above, it’s a great tool for navigation schemes that have multiple levels, as users know exactly where they need to go should they need to take a step back or forward.

2. A Cart with the Crazy Wheel

Another candidate for top product pages’ mistakes is the ineffective shopping cart. Just like how no one wants the shopping cart with a crazy wheel when out at the supermarket, no one wants a troublesome online shopping cart.

Shopping cart abandonment (when customers put things in the cart but don’t buy them) is a far too common problem in e-commerce. And when your store’s cart is full of authentications and processes that hinder the customer from getting to the purchase itself, they’ll leave that cart behind.


Make things more straightforward and more convenient for customers. The solutions could range from adding more payment options to stripping down the checkout process to just a single, easy to understand page.

3. It’s All About the Lifestyle

Another big mistake on the product pages is that the company is selling a product in and of itself. While yes, that is the endgame (to make the sale), a product isn’t going to sell if a customer can’t envision using it.

It’s about selling a lifestyle, a purpose for the object, that makes it covetable. An item by itself won’t sell, but knowing your market and making it seem worth getting will make it fly off the shelves.


Instead of just the photos, for example, of shoes that are being sold, show them off being worn by your target audience. Show off the makeup in the best way to apply it, rather than just the view of the palettes.

Allowing your customers to visualize how your products can actually look on them (or benefit them) can go a long way toward pushing that cart all the way to a purchase.

4. Get On Mobile

As mentioned earlier, mobile shopping accounts for nearly half of the spending on e-commerce today. By cutting corners on your mobile design elements, style, and presentation, you may be alienating a vast customer base. If the mobile site doesn’t look right, or if it’s got terrible navigation, your customers won’t bother.


Take a good look at how your site behaves and presents on mobile platforms (both Android and iOS). Make it easy to navigate and understand and give it a similar level of use as your desktop site. Make sure all the necessary elements are maintained, so customers can get the same great experience both on desktop and mobile.

5. Scanning for Nothing

When visitors come to your product pages, they give it a quick once over to see if this is something that they want. Many stores get tempted to cram the headers with keywords to make sure that they crop up in search strings, but visitors don’t enjoy being bombarded by these words that, in all likelihood, don’t fit what they’re looking for. Consider Rakuten and its word salad in every product name. It tends to turn many shoppers off.


Use your white space. With concise titles and descriptions that deliver precisely what the product does and what it’s suitable for, you’re not oversaturating the page. There’s plenty of room for the eye to rove around, appreciate the photos, and do some reading about the item.

Make it a User Experience (UX) to Remember

Consider your online storefront like a brick-and-mortar one. Customers want to see just what they are looking for, want to feel welcome, and they want everything as convenient and hassle-free as possible. By making their user experience on the site easy and memorable, they are far more likely to finish up the purchase.

What other techniques have you found works for your online store? What do your users like to see on your page? Comment below and let us know.

This article is voluntarily contributed by Aaron Chichioco of Design Doxa.

Don't miss out!
Subscribe To Newsletter

Receive top design news, creative ideas, inspirations and more!

Invalid email address

One comment on “5 Most Common UX Design Elements that Ruin Product Pages (with Solution)

Leave a comment

Your email address will not be published. Required fields are marked *

sixteen − eleven =