%20(15).png)
When speaking of product pages one of the first things that comes to mind is an old marketing mix concept [1] where the 4 Ps of marketing are laid out: product, price, place and promotion. These factors are clearly manifested in the structure of the product page since it must specify a product that meets a need, tangible or intangible, it must also specify a price, discounts, offers and various payment methods, but at the same time it must promote the product through ratings and comments from other customers or use any other persuasion strategy; finally it focuses on eCommerce as a space for the product to be brought to a potential customer.
Even though these factors are essential, they give us a very global conception of what we try to define as a product page, so we need something more specific to have a better understanding of its nature. To that end, it may be necessary to understand that there is not a product page as such, but product pages, in plural, or to be more specific: “pages related to the product” [2]. These pages consist of two types clearly differentiated:
a) Product listing page: it is that page that displays a “list of items that a user can buy from a website”[3], generally, each item consists of:
- A thumbnail image of the product
- Price
- Product title
- A short description
- A call to action (CTA)
b) The detailed product page: it’s the page users open after clicking on an item from the product listing page; unlike the previous one, this page consists of:
- An enlarged image of the item
- Title
- Price
- A long description
- A call to action (CTA)
Although you can also add others elements [4] such as:
- Attributes (color, size, quantity, model, condition)
- Share
- Shipping and return information
- Product video
- Product ratings
- Related products
All these elements shape up what has been commonly called product pages, which is a primary tool for the optimal performance of an eCommerce, therefore, understanding its structure and its design becomes imperative so to get the user interface (UI) design right.
Methodological aspects
A topic of great interest in the development of UI is the way the product related pages are structured and designed, it seems that there are elements that condition these
factors, and it is our intention to develop a quantitative study that focuses on determining by frequency analysis, what are these essential elements that make up the detailed product page of an eCommerce. Consequently, the variables this study focuses on are structure and design.
For this purpose we have created a corpus of detailed pages of selected products from the 33 most popular online stores in the United States – Our sample. The selection criteria to establish what these stores are, as in previous studies, is based on Finder statistics (https://www.finder.com/online-shopping#Nike), which in turn allowed us to derive the following categories of stores and their proportions:
Exploring the detailed product page
Structural aspects of a product page
One of the first findings of this study is that the frequency is concentrated in some specific product page elements, this fact indicates that these elements are structurally essential in this type of pages, and we list them below:
a) Product Image
b) Gallery mini tabs
c) Product title
d) Product Description
e) Shipping and return information
f) Price
g) Call to action
h) Attributes (color, size, quantity, condition)
i) Recommended Products
In contrast, there are also other elements whose frequency ranges are between medium and low, which is an indication that they may be optional within the product page structure, these elements are:
a) Ratings and reviews
b) Share
c) Wishlist
d) Recently Viewed Products
e) Products to combine
f) Warranty
If we take these variations into consideration, it can be stated that an average product page should contain those elements that have a high frequency. However, these elements can be complemented with other optional ones, which depend on different aspects like the type of product, and even the eCommerce’s desired aesthetic experience.
Product page design aspects
In the previous section we stated that homogeneity can be observed in the structure of the different stores that make up our sample, which is logical, since it is difficult to conceive a product page without the image of what it sells or without a CTA that allows users to execute the purchase. However, from a design point of view the situation changes, since the frequency analysis shows us other interesting trends to describe.
Product page stages
One of the main aspects to review is the fact that product pages start with a block that we could call main, which condenses categories that are strictly related to the sale of a product, such as: image, tabs, title, ratings, attributes (size, color, price, condition, CTA. etc.) According to our data, in 85% of our sample this block is divided into 2 columns; 12% divides it into maximum of 3 columns, as described in table 2.
The high frequency that is concentrated in the 2-column block is an indicator that stores consider it as a preferred option for the product page design. On the other hand, the 3-column block is presented as a second option. In image 6 you can see each of these styles.
Now, the main block is followed by a set of blocks that we can call secondary, in which promotion of alternative products and social media promotion are displayed, that is why we find categories such as: related products, detailed product description, Q&A’s, ratings and similar products, among others.
In the same vein, these blocks are also usually segmented internally into several columns, but, unlike the main block, the frequency is concentrated in the 1-column block, which is described in detail in table 3.
This fact indicates that 85% of the stores in the sample tend to the almost exclusive use of 1 column when designing the secondary blocks of the product page, although 3% is open to the possibility of exploring 2 columns and 2% cuts out the secondary blocks completely.
The contrast between the design of what we have called main block and secondary blocks indicates that product pages are organized in two stages, the first one, dedicated to direct sales aspects, and the second, aimed primarily at product marketing and additional information.
Complementary content presentation
Another aspect that we should mention is the way in which most of the complementary content of a page is presented, understanding that we identify “complementary content” as product description, shipping and returns, information about sizes and measures, among others. This content is presented to users in two different ways: through drop-down menus and in an extensive way, as shown in image 10.
A significant fact is that the presentation of complementary content through drop-down menus has a high frequency in contrast to the extensive content, whose frequency is significantly smaller, as can be seen in Table 4.
As the data indicates, 67% of the stores in our sample tend to use drop-down menus, however, 33% tends to go in extenso, all of which suggests that these ways of presenting complementary content coexist when designing a product page, of course, with predominance of the first. In addition to this fact, it’s also possible to observe that drop-down menus have two variants, one vertical and the other horizontal, as shown in image 11.
It should be noted that between these two variants there is an important frequency difference that highlights the vertical variant, which represents 46% of our sample, while the horizontal variant represents 21% of it. The sum of both percentages condenses a 67%, representing the total number of stores that tend to use drop-down menus, as can be seen in table 5.
Category space distribution in the main block
Now, taking into consideration the way in which the different elements that make up each product page section, we can notice that the frequency dynamic allows to detect that there is a tendency to include categories such as: item, tabs, title, attributes and price in certain places of the main block, rarely going from something different than this scheme. Hence, for example, 97% of the sample usually places the item in the upper corner of the main block's left corner, while a small 3% place it in the center. Similarly, 46% place the tabs that accompany the item below it, while 39% place them to the left side of said item.
On the other hand, categories such as title, price and attributes are usually located to the right, and, according to the frequency, in a hierarchical way. For example, 75% of the sample place the product title at the top of the right column in the main block; the price is located in 61% of the sample just after the title, while 30% do so after ratings. Then it’s followed by the category attributes, since 72% of the sample place it after that, finally, the CTA category, which 97% of the sample place it at the end.
Image 12 shows what can be considered as a general trend of location of the categories that make up the main block, however it should be noted that the frequency also reveals another variant, in which case these categories can change places and make place for other design schemes, which, although less frequent, are equally valid.
Essential categories in the secondary block
As for the secondary block in the second stage of the product page, it’s important to remember that the categories it consists of are: recommended products, detailed product description, Q&A’s, ratings and similar products, among others. Globally in the whole sample, according to the frequency concentration, it was observed that the categories recommended product and ratings are essential, since their frequency is 94% and 58% respectively, the rest of the categories have an optional character, since their frequency ranges are between 30% and 15%.
Nevertheless, at a specific level, the relevance of the categories may depend on the type of store, thus, for example, fashion stores (Fashion), in addition to the categories before mentioned, privilege the category combinations, department stores (Department) the recent views category, while unlimited product stores (Unlimited) highlight the description category.
The use of videos on product pages
The final aspect we must mention is the video element in the structure of product pages. Regarding our sample, the frequency data does not reflect that this is an essential element in the design of a product page, since its use is reduced to 15% in a global sense. Only beauty stores (Beauty) reflect a trend towards the use of videos, in which case 50% of them in our sample use it, in the rest of the stores its use is not significant, since it does not represent more than 3% in those stores that use it.
Conclusions
The goal behind this research has been to determine by frequency analysis what are the general aspects that characterize product pages. Through this methodology we have been able to determine several aspects that we can enumerate as follows:
- On an integral level, product pages have essential elements that structure them (Item, Tabs, Title, Description, Price, Call to action, Attributes, etc.), however, these elements can be complemented with others of optional nature (Qualifications, Share, Wishlist, Recently Viewed Products, etc.), which depend on various aspects.
- The product page is organized in two stages, the first one, dedicated to direct sales aspects, and the second, aimed primarily at promoting products.
- The first stage of a product page contains what we call the main block, in which interior there are condensed categories strictly related to product selling, such as: item, tabs, title, ratings, attributes such as size, color, price, condition, CTA. Generally this block is divided into 2 columns, while there are less frequent variants of 3 columns that are used.
- The second stage consists of a set of secondary blocks in which products are promoted, for this reason they cover categories such as related products, detailed product description, Q&As, ratings, similar products, among others.
- Regarding the secondary blocks design, in the second stage, there is a trend towards the use of 1 column, although it's open to the possibility of including up to 2 columns or even the alternative of suppressing the secondary blocks entirely.
- The complementary content of the product page is usually presented to users through drop-down menus or in an extensive way. According to our data, drop-down menus tend to be used more than the rest of elements, however these two alternatives coexist, of course, with predominance of the first.
- It was also observed that drop-down menus have two variants, one vertical and another horizontal. Between these two variants the vertical variant is more frequent compared to the horizontal one.
- Regarding the space distribution of categories or elements of product pages, we have noticed that there is a tendency to place categories such as: item, tabs, title, attributes and price in certain places of the main block. The item is located in the upper corner of the main block’s left column. Similarly, the tabs that accompany the item are usually located below or to the left side. On the other hand, categories such as title, price and attributes are usually placed to the right in a hierarchical order. According to this criterion, the product title is placed at the top of the right column in the main block, below it there's the price, then it’s followed by attributes category and finally the CTA category.
- It was noted that the categories recommended products and ratings are essential for the secondary blocks, in the second stage of a product page, the rest of the categories have an optional character, since their frequency ranges between 30% and 15%. However, the relevance of the categories may depend on the type of store.
- Finally, it could be affirmed that videos are not essential elements in the product page design, since its use is reduced to 15% globally, with the exception of beauty stores (Beauty), where the trend of using videos amounts up to 50%.
References
[1] Khosrow-Pour, D.B.A., Mehdi. (2019). Advanced Methodologies and Technologies in Digital
Marketing and Entrepreneurship. US: IGI Gibal.
[2] Balasubramanian, K. (2017). Isomorphic Go. Birmingham: Packt.
[3] Balasubramanian, K Ibid.
[4] Deiss, R., Henneberry R. (2017). Digital Marketing. New Jersey: Dummies.
