Abstract
The design of product listing pages is a key component of Website design because it has significant influence on the sales volume on a Website. This study focuses on product placement in designing product listing pages. Product placement concerns how venders of online stores place their products over the product listing pages for maximization of profit. This problem is very similar to the offline shelf management problem. Since product information sources on a Web page are typically communicated through the text and image, visual stimuli such as color, shape, size, and spatial arrangement often have an effect on the visual attention of online shoppers and, in turn, influence their eventual purchase decisions. In view of the above, this study synthesizes the visual attention literature and theory of shelf-space allocation to develop a mathematical programming model with genetic algorithms for finding optimal solutions to the focused issue. The validity of the model is illustrated with example problems.
1. Introduction
With the increasing prevalence of the Internet and advancement of information technologies, online stores which offer more convenience and wider diversity of products have gradually become an alternative shopping destination for consumers. In response to this change in consumer habits, many vendors have invested in an online store to seize potential opportunities in the online shopping market. According to 2011 E-Stats, US retailers reported e-commerce sales of $194 billion in 2011, an increase of 16.4 percent from a revised $167 billion in 2010. Total sales increased by 7.7 percent to $4.1 trillion in 2011 from a revised $3.8 trillion in 2010 [1]. Given its enormous potential, improving users’ online shopping experiences has become a major theme in industrial research [2, 3]. Research discovered that whether a user finds a Website visually appealing often has a powerful impact on forming user’s perception of Website usability and the perception of Web pages as usable can keep users from moving away from the Website [4, 5]. Thus, Websites design is of great importance to online stores [6].
The design of product listing pages is a key component of Website design because it has significant influence on the traffic and sales volume on a Website [7]. A typical product listing page contains the name of products, brand names, prices, and often images of the products. For each product category, products are often displayed in a list or an array presentation format. The users compare different alternative products and make choices on which product to have a closer look at or to put in the basket on this page [8].
The existing literature with respect to the design of product listing pages is mainly devoted to improving user decision efficiency. For example, Janiszewski [9] examined the influence of display characteristics on users’ virtual exploratory search behavior. Hong et al. [7] investigated the effects of presentation modes (image-text versus text only) and presentation formats (list versus array) on user’s online shopping performance and attitudes. Hong et al. [10] studied the effect of presentation formats on user’s search under different task types. Diehl [11] and Diehl and Zauberman [12] investigated the effect of products in a list on user choice.
Xu et al. [13] have recently addressed another issue in designing product listing pages that deal with how to distribute products in one category over multiple Web pages for better sales. They considered multiple Web pages for a product category. The first page is of particular importance because it receives more attention than the following pages. Then, they distributed products over the first page and other pages according to the “price cues” and the “popularity cues.” The “price cues” refers to the strategy of placing some items on the first page so that the average price of the first page is higher than the average price of the following pages and the “popularity cues” refers to the strategy of placing the best seller or hot-item icons for some products on the first page. These two strategies aim to influence consumers’ value perception of product on the first page and drive consumers’ purchase decision. However, the problem of how to allocate display location of products wasn’t further addressed by Xu et al.
In this study, we study the problem of how to place products in one category over multiple Web pages for maximizing profit. It differs from the issue addressed by Xu et al. [13] in two ways. First, in today’s Websites, it is observed that the size of product image is not always the same. In fact, many Websites place large-size image for products on the first page in order to attract more users’ attention. Therefore, in connection with the real-world context, this study shows the image size of products on the first page is large, while the image size of products displayed in the following pages is small. Second, although product information sources on a Web page are typically communicated through both text and image, it is a general consensus that visual stimulus, such as color, shape, size, and spatial arrangement of product images can better drive visual attention and in turn consumers’ purchase decision [14, 15]. For commercial Websites, some features of object such as color and shape are determined by the nature of product sold on the Website. However, the image size and spatial arrangement on the product listing pages are largely determined by Website designers [7]. Therefore, this study aims to determine not only which of the products are to be distributed in the first page and the following pages but also their display positions in the array. Such research question is called product placement problem.
The product placement problem in designing an online product catalog can be regarded as the counterpart of the offline shelf management problem or be taken as an online shelf management problem. Therefore, this study will extend the theory of shelf-space allocation [16] to the web-based online context and develop an optimization model for this focused research question.
To further elaborate the background and rationale behind this research, this paper begins with a brief review for visual attention and shelf-space allocation theory. This is then followed by the development of model and solution procedure for product placement problem. Numerical examples and discussion ensue, with conclusions made in the final section.
2. Background
2.1. Visual Attention
Visual attention generally refers to the selectivity of processing or concentration effort on a stimulus [17]. Visual attention manifests as visible movements of the eyes and head of a person ensuring that the “spotlight” of attention “lights up” the region in focus. The “spotlight” of visual attention follows a scanpath over the stimulus during which the eyes do not move steadily along a line of messages but make short rapid movements from location to location (saccades) intermingled with short stops (fixations) [18].
The visual attention of users can be affected by the product type. Products that elicit social approval, sensory gratification, self-expression, or intellectual stimulation encourage great involvement from users because likelihood of such products becomes part of a person’s extended self [19]. As users become more involved in a certain type of product, they devote more attention and actively or voluntarily seek information regarding such products and even carefully consider purchases [20]. The distribution of voluntary visual attention generally depends on users’ knowledge of the visual field or the search target, which is considered as a top-down processing. Moreover, in the visual field, involuntary attention tends to be driven by visual stimuli, such as color, shape, size, and spatial arrangement [14], which is considered as a bottom-up processing [21].
Although controlling users’ knowledge of a visual field or search target is difficult, the visual stimuli in commercial Websites can be varied easily influencing the bottom-up processing. Djamasbi et al. [3] summarized the visual stimuli affecting the deployment of visual attention as follows:(1)motion (animated elements attract user attention before any other element does),(2)size (larger objects attract more attention than smaller objects do),(3)image (images attract more attention than text does),(4)color (elements with brighter colors attract more attention than those with darker colors do),(5)text style (typographical variations serve as effective nonverbal cue for attracting attention),(6)position (elements at the top of a Web page attract more attention than those located at the bottom).
For example, high-resolution animated images can effectively attract viewer attention, whereas large images can leave a strong impression on viewers [22]. Regarding spatial arrangement, users tend to frequently focus on the left-hand side or upper part of a page rather than on the right-hand side or lower part [23] and often scan from the top left to the bottom right of a Web page by following a Z-shaped path [24, 25].
2.2. Shelf-Space Allocation Theory
Shelf-space is one of the most critical resources in a retail store. In a sense, it can be seen as a silent salesman that attracts customers’ attention. Borin et al. [26] took shelf management as the strategy that determines which of the products are to be displayed and the amount of space required. When shopping, the shelf represents the point of interaction between the store and customers, and therefore a shelf management strategy that enables easy finding, comparison, and access of the products by the customers is essential. The research by Silver [27] indicated that shelf-space allocation affects directly the amount of sales. Wholesalers in Japan have developed a theory known as the “magnetic theory,” stating that the most appropriate types of products should be placed at their corresponding locations to attract customers’ attention and for guiding customers to complete their shopping in the shopping outlet. As a result, appropriate shelf-space allocation and product display not only can attract customers’ attention but also can create further buying incentives in customers, thus stimulating sales.
Currently, there is much ongoing research on shelf-space allocation, and the primary purpose of these studies is to find out how to optimize the utilization of shelf-space for profit maximization of the retailer. Curhan [16] raised the concept of “space elasticity” and defined it as the value calculated by dividing changes in unit sales quantity over changes in shelf-space. To test the elasticity movement between the quantity of sales and shelf-space, 500 types of retail store products were selected in his study, and the average space elasticity was found to be 0.212, indicating that shelf-space has a positive impact on sales quantity.
According to Curhan’s concept of space elasticity, Hansen and Heinsbroek [28] developed an optimization model of shelf-space allocation. They first modeled a demand function for products and then maximized store profit by selecting products from assortment and allocating optimally the chosen products. Knowing that a few constraints, such as the number of chosen products, must be an integer and the total amount of shelf-space to be allocated cannot exceed the total shelf-space would increase the difficulty of solving this allocation problem; they employed a Lagrange multiplier and a specialized heuristic method to solve this problem. Corstjens and Doyle [29] extended Hansen and Heinsbroek’s model and proposed that a product’s sales are also affected by the complementary and substitution effect of other products. They incorporated cross elasticity into the demand function and suggested that the operating costs include procurement cost, carrying cost, and stock-out cost. Their model had the same objective (i.e., to maximize the total store profit) but included an upper bound of available supply as a constraint. Their model belonged to a nonlinear integer programming problem, and they adopted a signomial geometric programming solution method.
Drèze et al. [30] investigated the effects of shelf-space allocation and shelf location on sales. Their results indicated that placing a product on shelves at eye level could significantly improve the product’s sales, while changes in the shelf-space allocated to a product had less impact as long as a minimum threshold was maintained. From the model of Drèze et al., Yang and Chen [31] developed an optimization model of shelf-space and location allocation. They used the demand function introduced by Corstjens and Doyle [29] as the basis and included both shelf facing effect and shelf location effect in the function. The demand function was complicated by nature. To simplify the computation procedure, they used a simplified form of the function and excluded the effect of cross elasticity. According to the knapsack problem, Yang [32] later developed a heuristic algorithm to solve the model.
Murray et al. [33] proposed a joint optimization model of shelf-space allocation, display orientation, and product price. They argued that cross elasticity introduced by Corstjens and Doyle [29] is hard to measure and thus replaced it with price cross elasticity, which is easier to collect from point of sale (POS) systems. As their model is a mixed integer linear programming problem, they used a branch-and-bound method to solve it.
It can be summarized from the above studies that previous shelf-space allocation models optimized allocation of shelf-space mainly according to shelf facings and with consideration of other display effects, such as location, complementarity, and substitution.
3. Proposed Model
3.1. Model Development
Consider a typical online catalog (or saying product listing pages) consisting of products categorized by product type. For each product category, products are displayed in an array format over multiple pages. Information of product contains image, product name, and price. The image size of products on the first page is larger so as to attract more users’ notice. The colors and shapes of product images used in a product category are similar. The product image allows users to further explore detailed product information to satisfy users’ need to examine the characteristics of products. Suppose that there are a total of product items of the same category to be displayed on such online catalog. The first page contains positions to locate product images, while the following pages contain ones. For the sake of convenience, we assume in this study.
As mentioned above, the research question to be dealt with by the model is how to place the products of the same category more effectively over multiple Web pages. This product placement problem on e-commerce Websites is examined according to the concept of space elasticity. Here, space elasticity is defined as the ratio of relative change in unit sales to relative change in image size. Besides space elasticity, the concept of cross elasticity [29] is also included in the model because an increase in the price of a product will encourage consumers to buy alternative products of the same category (i.e., substitution effect). However, this study uses price elasticity instead of cross elasticity because price elasticity is easier to measure and collect than cross elasticity [33].
According to the above, the demand function can be established as follows: In (1), the demand function for item consists of three major elements. The first element, , denotes the basic demand for item . The second element, , denotes the effect of visual stimulation on the basic demand. This element can be further broken down into and . The former denotes the effect of visual stimulation when the item is displayed on the first page, while the latter denotes the effect of visual stimulation when the item is displayed on the following pages. The extent of visual stimulation effect on basic demand is associated with space elasticity. The value of space elasticity can be fixed or be allowed to be changeable, depending on the product item itself or the location the product item being placed. If the value of space elasticity is allowed to be changeable, it might be expected that the closer the product item to the top left of the page, the larger the space elasticity.
The third element, , denotes the substitution effect between competitive items on the basic demand. The price elasticity in this element can be divided into and (). Here denotes own-price elasticity for product , ranging between −1 and −1.5. This parameter is employed to reflect the effects of “law of demand.” For instance, if the relative price of product is increased, the reduced value of in (1) will result in a lower . denotes the cross price elasticity between items and . The numerical value of this parameter will fall between 0 and [33]. This parameter recognizes the fact that products within a given category will be substitutes rather than complements of each other. For instance, if the relative price of product is raised, the increase in will definitely result in a higher .
After formulating the demand function for item , the model can then be developed with the objective of total profit maximization. First, demand for item , is multiplied by unit gross profit of item and the profits of all items are then summed to obtain the objective function as shown in (2). The constraints to the model are listed in (3)–(5), as follows:
Equations (3)–(5) are the given constraints. According to the assumptions, each item will be allocated exactly one location on a product list pages. To comply with this assumption, (3) serves to ensure that each product image can be allocated a position either on the first page or the following pages and (4)-(5) further ensure that each position on either the first page or the following pages can accommodate only one product image.
The model is a nonlinear integer programming problem. With increase in number of items, the problem scale will quickly expand. Since it is cumbersome to seek the optimal solution, genetic algorithms, instead of the conventional optimization method, are employed to deal with the model.
3.2. Solution Procedure
Genetic algorithms (hereafter referred to as GA) [34, 35] are global search and optimization techniques motivated by the process of natural selection in a biological system. GA is different from other search procedures in the following ways [34]. (1) GA considers many points in the search space simultaneously, rather than a single point; (2) GA works directly with strings of characters representing the decision variables, not the decision variables themselves; and (3) GA uses probabilistic rules, instead of deterministic rules, to guide their search. With GA considering many points in the search space simultaneously, there is a reduced chance of converging to local optima. In a conventional search, according to a decision rule, a single point is considered and that is unreliable in multimodal space.
In recent years, a number of studies have discussed the applicability of GA to the shelf-space-allocation problem. For instance, Rodriguez and Jarur [36] mentioned that GA is more suited than other heuristic algorithms for solving the shelf-space-allocation problem. Hansen et al. [37] used various heuristic algorithms to solve the shelf-space-allocation problem and found that GA is superior to other heuristic algorithms in terms of both efficiency and accuracy. Given successful application of GA to shelf-space-allocation problems which are similar to the online product placement problems, GA is employed in this study to solve the optimal product placement problems.
The primary distinctive features of GA are an encoding, a fitness function, a selection mechanism, a crossover mechanism, a mutation mechanism, and a culling mechanism. GA can be formulated through the following steps.(1)Generate randomly an initial solution set (population) of individuals and evaluate each solution (individual) by the fitness function. Usually, an individual is represented as a numerical string.(2)If the termination condition is not met. Repeat {Select parents from the population for crossover. Generate offspring. Mutate some of the numbers. Merge mutants and offspring into the population. Cull some members of the population.}(3)Stop and return the best fitted solution.
When applying GA to the proposed model, a decimal encoding of individuals has been adopted. That is, each individual is a decimal string of , which represents a possible solution for the proposed model. The fitness value of each individual is evaluated by the total profit, in the fashion of the “larger-the-better.” Then, according to the aforementioned elitist strategy “the survival of the fittest,” the evolution of a population of individuals has been pursued. The termination condition is achieved when the number of generations is large enough or a satisfied fitness value is obtained.
4. Numerical Examples
In this section, two numerical examples with consideration of different shopping domains are presented to illustrate the usefulness of the proposed model and solution procedure. In the first example, a high-involvement case is demonstrated, while the second example is for the low-involvement one. Table 1 shows the model parameters used in high- and low-involvement situations. Consumers usually tend to be highly involved in products that are expensive, but immediately useful (e.g., Smartphone or notebook) and pay more attention to search for detailed product information. On the contrary, consumer involvement will be lower for products that are inexpensive or only remotely connected to customers’ lives (e.g., tissues or international news magazine). In this case, consumers do not pay too much attention for seeking out such information but instead tend to respond to unimportant ad feature [19].
Example 1. Consider product listing pages that display ten product items of the same category in array format, as shown in Figure 1. The online catalog has two Web pages for this category. The first page contains positions for locating product images, while the second pages contain positions.
The order of product placement at present is arranged from the top left to the bottom right of the page in light of items’ ID (see Figure 2). In order to recognize the usefulness of the proposed model, a set of five random instances was generated from
Table 2 shows the item parameters of the first random instance. Under the original placement order, the average price of the first page is $43.45, which is lower than the average price of the second page, $55.96. In addition, the product items placed on the first page are relative hotter ones in the category. The total profit under the original placement order (TPO) is $6380.40.
The new placement order is carried out by substituting the values of item parameters into the proposed model, (2)–(5), and solving it by a GA optimization package (EVOLVER 4.0.2). The following settings of control parameters for the package manipulation are used: population size (PS) = 75, crossover probability (CP) = 0.1, mutation rate (MR) = 0.05, and number of generations (GN) = 20,000.
Figure 2 shows the new order of product placement. Under the new placement order, the product items placed on the first page are still relative hotter ones in the category. But the average price of the first page is $55.21, which is higher than the average price of the second page, $53.01. The total profit under the new placement order (TPN) is $6790.39, which achieves the percentage of improvement in total profit (%) of
The experiment results of the five random instances for the high-involvement product items can be found in Table 3. The average and standard deviation of the percentage of improvement in total profit (%) are 5.75% and 1.56%, respectively.
Example 2. This example continues the aforementioned question that considers two Web pages for a category, but the ten product items to sell are low-involvement ones. Again, a set of five random instances was generated for a comparative study from
Table 4 shows the item parameters of the first random instance. Under the original placement order, it can be easily obtained that the average price of the first page is $6.04, which is higher than the average price of the second page, $4.96. Besides, the product items placed on the first page are not the hotter ones in the category. The total profit under the original placement order (TPO) is $2042.05.
Substituting the values of item parameters into the proposed model and solving it by a GA yield a new order of product placement, as shown in Figure 3. Under the new placement order, the average price of the first page is $4.06, which becomes lower than the average price of the second page, $5.46. Moreover, the product items placed on the first page are relative hotter ones instead. The total profit under the new placement order (TPN) is $2247.01, which achieves the percentage of improvement in total profit (%) of
The experiment results of the five random instances for the low-involvement product items can be found in Table 5. The average and standard deviation of the improvement percentage in total profit (%) are 7.72% and 2.79%, respectively.
5. Findings and Discussions
How should vendors place products in one category over multiple Web pages for maximization of profit? The intuitive answer is often “higher profit items first.” However, there are pros and cons to this simple answer. If vendors take an item of lower price and higher profit, it is undoubtedly true that such product should be placed first. However, the lower price item does not necessarily have higher profit. In fact, in many cases, the higher profit items are of higher price. Therefore, if venders place higher profit items first, it would lead to all high-price items being placed on the first page, and the high-price impression on the first page might cause consumers to go to the following pages to search for lower price items or switch to other vendors. In view of this, Xu et al. [13] suggested placing products on the first and other pages according to “price cues” (i.e., placing some items on the first page so that the average price of the first page is higher than the average price of the following pages) and “popularity cues” (i.e., placing the best seller or hot item icons for some products on the first page) in order to increase consumers’ value perception on the first page. In this study, two numerical examples with consideration of different shopping domains have been presented in the preceding section. In the first example, it can be found from the results of the five random instances that the average price of the first page after the optimization of product placement is not always higher than the average price of the following pages. In addition, the products placed on the first page for each random instance are not always the relatively hotter items in the category. Therefore, the product placement suggested by the proposed model does not agree very well with the reasoning of “price cues” and “popularity cues” proposed by Xu et al. [13]. The reason would be that the products are of high involvement, and consumers may pay more attention to seek information regardless of product placement order the vendors arranged.
In the second example, the results of the five random instances show that the products on the first page are almost the best seller items in the category. So, the result is consistent with the logic of “popularity cues.” However, since the average prices of the first page are consistently lower than the average prices of the following pages, the product placement suggested by the model disagrees with the spirit of “price cues.” The reason would be that, in the low-involvement situation, consumers’ attention tends to be driven by visual stimuli rather than value perception, especially when the price of product is inexpensive.
6. Conclusions
This study examined the product placement problem in designing an online product listing pages. On the basis of visual attention literature and theory of shelf-space allocation, an optimization model with GA has been developed to determine how to allocate products of the same category over multiple Web pages for maximization of profits. To examine the usefulness of the proposed model and solution procedure, two example problems were generated by varying the type of products. The analysis results revealed that, regardless of high- or low-involvement situation, the placement of product images on an online product listing page can be enhanced by the proposed model in terms of total profit, especially for consumers with a low degree of product involvement who need more visual stimuli to draw their attention. Therefore, the proposed model could serve as a better decision support tool for e-retailers in improving their competitiveness and sales profit in the highly competitive market. Moreover, it is assumed in this model that the products are displayed in an array format over multiple pages, and the image size of the product on the first page is larger than that in the following pages. But, it is easy to extend the model for the products displayed in a list format or with different image sizes on different pages. It would be worthwhile conducting further research on the integration of inventory management or integration of product assortment decisions.
Nomenclature
| The basic demand for item | |
| The unit purchase cost of item | |
| The unit selling price of item | |
| The space elasticity for item when displayed at the position in the first page, | |
| The space elasticity for item when displayed at the position in the following pages, | |
| The price cross elasticity between items and . If , then ; otherwise, | |
| The size (in pixels) for each image on the first page, | |
| The size (in pixels) for each image on the following pages, | |
| A binary decision variable; if item is placed at the position in the first page; otherwise, | |
| A binary decision variable; if item is placed at the position in the following pages; if otherwise | |
| The vector composed of | |
| The vector composed of . |
Conflict of Interests
The authors declared that they have no conflict of interests to this work.