Ecommerce Web Design: UX practice in product page design

Ecommerce Web Design: UX practice in product page design

A well-designed product page is important for e-commerce websites because most buying decisions are made on that page. This article will show you common product page design methods, with lots of examples.


In ecommerce, the measure of success is not the number of visitors or the number of clicks to a website. It is the number of orders created. From that perspective, the product page is important because it is often where most of the “buy or not” decisions take place. So designing or improving a website or e-commerce application, UX designers have to think carefully and examine it to the smallest detail. That is what we cover today: let’s discuss what a product page is and how to design it effectively.

What is the product page

The product page is an important element in an e-commerce website, it helps provide customers with all the information they need about a specific item, allowing customers to see the different properties of the product. product (eg color, size, etc.) and allows the customer to quickly proceed with the purchasing process if they decide to purchase the item.

Unlike a real point of sale, an ecommerce website cannot help a customer catalyze directly with a soldering side. The product page becomes the primary source for providing product information to attract and convince customers to choose products. That’s why its design, navigation, and usability play an important role in increasing sales.

A badly designed product page can waste all of your marketing effort getting buyers to the website and to this particular product. So besides attractive product presentation, focus on functionality, clarity, readability, and intuitive navigation.


Product page typical elements

Basically, a product page consists of:

  • The section that displays the product’s image
  • Provide all necessary information about the product
  • Allows the user to check different product characteristics such as color, size, etc., if any
  • Allows visitors to view reviews, comments and ratings from previous buyers
  • Allows adding products to cart or favorites list
  • Display other relevant properties.

In addition, the product page may include options like comparing different items, which are especially popular on websites selling different devices and paraphernalia.

Based on that, here is a checklist of basic product page layout elements:

  • Name / title of the item
  • Image
  • Price
  • Available items
  • Add to cart / add to bag / buy button
  • Favorite / save button to favorites list
  • Information, product description
  • Ratings, reviews, number of past buyers, number of people viewing your current item, etc.
  • Choice of colors and properties
  • Select the number of items to buy
  • Instructions for choosing the size, … (for clothes and shoes)
  • Expanded details (material, specifications, dimensions, weight, special features, etc.)

The list above does not mean that all points are a must-have for any product page. The choice will depend on analyzing many factors, understanding your target audience and carefully prioritizing which points to include and which can be removed from the list for the merchandise category of the page. you do.

Take for example Tiki’s sales page

Design practice for product pages

Demonstration by image

E-commerce platforms are the best place to prove a saying that a picture is worth thousands of words. Unable to have direct contact with the item, customers will trust the product’s image to make the first impression of the goods. Furthermore, images are noticeable and easier to understand than words, they will be the first factor to grab a visitor’s attention. They present an emotionally compelling piece of content.

That is why many ecommerce platforms do the following:

  • Use a set of images to present a product from different perspectives
  • Apply a zoom function to allow visitors to get a closer look at certain parts of an image, see texture and fine details
  • Combine a photo of an item with a photo taken on a model or in the appropriate environment to better understand its shape and dimensions

The approaches to photo content can vary and depend on both a generic brand strategy and specific collection campaign or style. However, the main factors to note are:

  • Unique: special photo sessions are held to create photos that correspond to the style identified in the brand book or specific campaign principle.
  • High Quality: without a doubt, quality directly affects the impression of the item in particular and the brand in general
  • Optimized for the web: quality, the image should not be too large as it can significantly affect the load time, thus having a big impact on SEO; Also, slow loading pages are sure to give a high bounce rate – unless the site offers something completely unique and super exclusive, people will walk away instead of waiting.

In addition to images, other, more complex or interactive mediums may also be used. Among them, there are the following vehicles:

  • Product videos, detailed review videos and instructions
  • 360-degree view of the item
  • The augmented reality technology helps people observe an item in their own environment or try it out in virtual space

Obviously, these types of vehicles are often more complex, take more time and cost to produce than photos. Therefore, decisions on their value are often based on the type and price of the item offered. For example, to sell a $ 5 T-shirt a photo might be enough, but to buy a fridge, smartphone, computer, or even a more expensive car, the customer needs to persuade more on how to make a decision. And in this case, the cost of images and communication is more complicated but more impressive, convincing, and more informative may be a worthy investment.

Full description but simple


When customers decide to spend their money, they will read what they need to know about the product they are going to buy. However, that’s not a reason to write too much as they don’t spend a lot of time reading the description. Descriptive text must be concise, practical, simple and in the client’s language. It has to answer basic questions: what is the product, what it looks like, what it does and how it works. And it is better to write that from the very first lines, the lines with the highest chance of being read, instead of filling them with standard marketing sentences, the shoppers are fed up and tired.

The call-to-action button should be clear

The call to action (CTA) button must be noticed immediately. In the ecommerce interface, the CTA Element is the core element of the effective interaction with the product, they play an important role in usability and navigability and from there will be. order. When all engagement and conversion paths are clearly constructed but the CTA element isn’t clear, misplaced, or poorly designed, there’s the risk of users getting confused and needing extra effort to achieve it. get their goal – this is annoying. As a result, the risk of a poor conversion rate and a bad user experience increases.

Intuitive navigation


Every button, link, and tag design can change conversion rates significantly. It is important to always remember: in the fierce competition we see in e-commerce today, buyers are unwilling to wait or waste their time on unnecessary activities or efforts. to understand what they need. What they asked for from e-commerce is a faster, easier, and more convenient experience than going to the physical store. If the site doesn’t offer them, they’ll look for it somewhere else.


Consistency means that the product communicates with the users in the same or similar way, any point or channel of communication. In terms of user experience, that means that similar elements look and function similarly, in this way reducing cognitive load and making interactions smoother and more intuitive.

In the e-commerce interface, it involves the following two forms:

Internal consistency is about the different parts of your look or brand that look and act like an explicit system. For example, when you make all the CTA buttons on different pages or screens of a product to have the same color and design, visitors can quickly learn and quickly distinguish them in real life. any steps in their usage journey.

Outward consistency is about the parts of your interface that look and act as typical templates for most products of this type. That is, for example, when you use a shopping cart even on a website that sells non-tangible products, or underlines text links to give users suggestions that they are clickable.

Mobile adaptation


Needless to say, how many things people do daily with their smartphones today and shopping is becoming one of the top choices. Besides, mobile adaptation is one of the core issues of search engine optimization. If you want your ecommerce website to be appreciated by google and allow your visitors to have a seamless shopping experience from any device, make the product page mobile-friendly and take a look. re-layout to make the interface convenient and easy to navigate for mobile devices. Some e-commerce platforms even invest in making their apps for iOS and Android, but for many small businesses it seems unnecessary or even unreasonable. Anyway, the product page, like the rest of the site, should be responsive and mobile-friendly, regardless of whether the native app exists or not.


Certainly, deciding on a design practice for a particular ecommerce project is a matter of thought, and solutions on what to use and what to ditch will rely on many factors. subjective factors, from product type and market. segment by company budget, employer’s skills, personal tastes and target audience’s specific needs. The mass market e-commerce approach is different from the narrow niche market approach. The approach to many generations of customers will be different.

Source: THDigi – Website design service
4/28/21, 15:32


Related Posts

Leave a Reply

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