Product Listing Pages (PLPs) on an eCommerce site: a component frequency approach

The aforementioned Product Listing Page (PLP) is a gallery, according to Balasubramanian, "exhibiting a list of articles a user can buy on the website. Each product has a thumbnail, price, product name, a brief description, and a button to add to the shopping cart. Usually, when users click over the product's thumbnail, they are taken to the Product Detail Page (PDP)"[3]. Thus, according to Balasubramanian, the essential structure of a Product Listing Page can be represented as follows:

As can be observed above, this kind of page is different from the Product Detail Page -a page to display features for a single product-. The Product Listing Page , on the other hand, showcases –in a synthesized manner– a whole gallery with a group of products to users.

Methodology

The target of this article are Product Listing Pages, however, the scope is restricted to these pages' usage on wide inventory eCommerce websites. While taking Balasubramanian's description as a starting point to determine what the elements that describe this type of page are, it is worthy to mention that this study considers other factors that might have participation – Observing the structure above could be insufficient for a comprehensive explanation. 

Furthermore, the design variable is taken into account as well since it relates to the experience users have when interacting with the page. In that sense, elements such as color, shape, spatial distribution, have been considered to describe the product page. 

Finally, a quantitative approach is considered for this analysis, consisting of the study of the appearance frequency that structure and design elements have in a sample of 33 iconic stores eCommerce stores in the US. Just as mentioned and arranged into previous research activities by Quo, the sample selection criteria are supported in Finder.com's data: https://www.finder.com/online-shopping#Nike. The sample data are summarized in the next table.

‍Preliminary results

Structural Aspects

According to the data collected, the Product Listing Page is constituted of five essential elements. As follows: Title, Categories, Filters, Gallery, and Sorting functionality.

There is another element in the structure that can not be considered as an essential component of this type of page, given its low frequency of appearance: the “View” element.

It is worthy to mention that in 15% of the cases, the "Category" element is preceded by the headline "Browse by" or "Categories". In other cases, this element is displayed without any headline showcased before. This can be observed in the next image

As equally important, the "Category" element sometimes becomes embedded into the "Filter" one. This is often perceived in Department Store sites. This is occurring in 18% of the sample, only,  and is worthy to be mentioned since this finding suggests two possibilities: either the element is very flexible and can appear in different places, or its functionality inside the page is yet to be understood better.

‍

Structure of the "Filter" Element

This element tends to be diverse across different pages, and its structure largely depends on the type of store. Despite it, for most of the pages, filtering options are available: Color, Size, Price, and Brand. Following what was mentioned earlier, these options vary depending on the type of page. For instance, the Color option is not relevant to the pages of a Beauty eCommerce store, but it is for other stores. In the same vein, the option Size is relevant to Fashion, Department, Shoes, and Home stores, but not to Unlimited and Beauty. The Price option is important to all kinds of stores, while the Brand choice only relates to the categories Fashion, Shoes, and Unlimited. Despite these differences between types of stores, the filtering options, that we can call essential, are present on the listing pages of almost all kinds of stores.

In addition to these filtering options, there are others whose frequency percentage is not very high. However, this does not mean that they are irrelevant, but rather that they are specific for each type of store. For example, the Rating option only presents a significant frequency concentration in the pages of unlimited product stores and to a lesser extent in those of department stores, in the rest, this option is rare. The following table shows the different filtering options; both, the ones we can consider essential due to their high-frequency concentration, and those that we can consider as complementary and that are very specific for each type of store:

Structure of the “item”

The item is another element of the product listing page that displays a very regular structure, based on frequency concentration, we have been able to determine that seven components make up the structure of each item. These components are Price, Title, CTA (Call to Action), Rating, Variants, Shipping, Quick Shop.

Except for the Price and Title components, not everyone has the same proportions on all pages. CTA, for example, only shows up as essential on fashion, department, shoe, beauty, and home store pages; "Rating" only on unlimited, beauty, and home goods stores; "Variant" is only essential in home and fashion stores. On the other hand, “Shipping” only in the stores of unlimited products and, finally, “Quick Shop” only seems essential in fashion, beauty, and home stores, all of which can be seen in the following table that shows us the frequency percentage of each component and how it varies according to the type of store.

Aspects related to design

This section of the article provides a detailed description of the most relevant design aspects of the product listing pages. This description focuses on structural elements like gallery, filter, and item; because when it comes to design, some patterns are manifested in terms of color, distribution, and symmetry.

GALLERY

One of the main aspects that we can mention regarding the design of the product listing pages has to do with the gallery and how it is presented to users. In general, a gallery usually can be structured in two different ways: in grids and lists. Approximately 85% of the sample pages consist of grids and only 12% of lists. It's important to note that the latter corresponds to the unlimited product stores, where the use of list variants predominates.

But it should also be noted that unlimited product stores give users an option that allows them to select between these two types of views, thus being able to choose the one that's most familiar to them, as can be seen in the following image.

In addition to this fact, we have also been able to observe that galleries are organized in a maximum of 6 grids and a minimum of 3, however, in 46% of cases it can be seen that galleries are assembled in 4 grids, while 33% do so in 3; 12% is based on 5 grids and a minimum of 9% use 6 (that is the case of unlimited product stores).

This data suggests that this type of page, in general, tends to use 4 and 3 grids, which is an interesting fact, but it is also necessary to observe what happens regarding the type of store. According to our data, 60% of fashion store pages tend towards using 4 grids in their gallery, likewise, 50% of shoe store pages and 100% of beauty pages. Unlike these, 80% of department store pages and 100% of home store pages usually use 3 grids; on the other hand, 60% of unlimited product store pages tend to use 6 grids. In general, the use of 5 grids has a low-frequency of usage, so it can be concluded that it is an uncommon option in the design of this type of page, but it is a possibility.

Another aspect that could be observed in the gallery design is the regularity of the space between the grids, which is usually narrow in 93% of cases. Something else that's common is the use of white spaces instead of separator lines between grids since 79% of the cases use white spaces as separator elements. Only on unlimited product store pages, the use of separator lines has a high frequency of 100 %, on the rest of the store pages, it is not an element whose frequency indicates that it is an essential factor. On the other hand, we shouldn't forget the gallery's background, which is white in 97% of cases and alternatively gray on rare occasions.

FILTER‍

From a design point of view, filters have certain peculiarities. The most evident is the way it's presented to users since it fluctuates between two options: drop-down and in extenso. According to our data, 64% of the cases utilize drop-down menus, while 27% opt for the in extenso menu option.

Generally speaking, the in extenso menu is always vertically aligned. However, the drop-down menu presents some variables regarding its alignment, since it can be presented vertically but also horizontally. The vertical variable is present in 43% of the cases, while the horizontal variable in 21%. In any case, both represent the majority of cases compared to the in extenso menu variant.

All these facts are interesting but they do not describe what happens at a particular level for each type of store, which is important to understand what are the design aspects these types of pages have since apparently each type of store opts for one of the menu variants. In this sense, our data indicate that fashion store pages tend to use the vertical and horizontal drop-down menu variants in a 50/50 proportion, while department store pages use the vertical variant of a drop-down menu in 100% of the cases; the shoe store pages use the vertical variant of a drop-down menu in a frequency of 50% and the vertical in extenso menu 33% of the cases. On the other hand, the choices for unlimited and beauty products stores are vertical in extenso variants, in 60% and 75% respectively, while 67% of home stores tend towards the horizontal drop-down menu variant.

ITEM

The item element also has a few peculiarities that we must mention. First, items in 91% of the cases have a medium size and in 55% of the cases, its background is light gray while it can also be white in a 45% frequency. However, fashion and department store pages tend to use light gray background 90 to 100 percent of the cases, while those of unlimited products, beauty, and home stores tend to use a completely white background in the same proportion. Finally, the shoe stores have an equal proportion of 50% white 50% gray.

‍Conclusions

After doing a thorough analysis of each element that makes up a product listing page, we present our conclusions about this study:

1. In terms of structure, product listing pages are made up of five essential elements: title, category, filters, sorting functionality for items, and galleries. The "Views" element may appear as optional.
2. The "Category" element, in some cases, is preceded by the entry "Browse by" or "Categories". 
3. Filters in most pages usually contain Color, Size, Price, and Brand options as essential parts of its structure.
4. There are other filter options that have frequency concentration levels that are not very high but have relevance at a specific level of each type of store, with this can be interpreted that the type of store determines the type of complementary filter that can be used.
5. Each item in the gallery is structured using the following components: Price, Title, CTA, Rating, Variants, Shipping, Quick Shop. However, not all are utilized in the same proportion for all store types.
6. In terms of design, galleries are usually structured in two different ways: in grids and lists. The latter form predominates in unlimited product stores.
7. The vast majority of stores organize their gallery into 4 and 3 grids, there may be pages with 5 and up to 6 grids, but they are specific to unlimited product stores.
8. Fashion, shoe, and beauty stores tend to use 4 grids in their gallery. Department and home store pages often use 3 grids; Unlimited product store pages tend towards using 6 grids. The use of 5 grids has a low-frequency percentage, so it can be concluded that it is a rare option for the design of this type of page.
9. The space between grids is usually narrow, these spaces are generally white, and only on unlimited product store pages, the use of separator lines is regular. Similarly, gallery backgrounds are predominantly white and also gray on very rare occasions.
10. Filter designs fluctuate between two options: drop-down and in extenso. In most cases, drop-down menus are used, while in some cases in extenso menus are utilized.
11. In extenso menus are always vertically aligned, but the drop-down menu presents some variants for its alignment, it can be presented vertically or horizontally. The vertical variable is the most common, while the horizontal is presented at a lower frequency.
12. Fashion store pages tend to use vertical and horizontal drop-down menu variants indistinctively. Department store pages generally use the vertical variant of the drop-down menu, as well as the shoe store pages. Unlimited, beauty and retail stores generally use the vertical in extenso variant, while home store pages tend towards the horizontal drop-down variant.
13. Finally, items have a medium size and their background is usually light gray, and may even be white. Now, fashion and department store pages tend to use a light gray background; while unlimited, beauty, and home goods store pages tend to use a completely white background, shoe stores have an equal proportion of 50% white and 50% gray.

References

[1]Balasubramanian, K. (2017). Isomorphic Go. Birmingham: Packt.

[2]Quo Agency, Inc. (2020, January 21). A study on the eCommerce detailed product pages and their .... Retrieved March 29, 2020, from https://www.quo.agency/insights/a-study-on-the-ecommerce-detailed-product-pages-and-their-essential-aspects

[3]Baymard Institute a. Ibid.