Keywords

1 Introduction

With the development of Internet technology, the sale of the online merchandises has gradually become one of the main ways for consumers to go shopping. The growth rate and scale of the Chinese market are superior to other countries. According to the report of China E-Commerce Research Center, online sales reached 6.6 trillion yuan in the period from October 2016 to September 2017. Compared to the previous cycle, it has increased by 38%, which is also the highest in the same period, and it is expected to grow to 750 million yuan in 2018. Online sale has also gone through the basic stage of development. Many fundamental issues, such as payment security and logistics have been gradually solved. In the future, more attention will be paid to the experience, emotion and other high-level needs to meet and segment the development of the field.

Unlike traditional offline sales, consumers are more difficult to interact with the actual physical space directly in the online sales scenario. Therefore, for online sales, the display mode of the product has a greater impact on the user’s shopping experience. However, most of the merchants just pile up elements, and do not deeply study the brand image and consumer preferences. Some small-volume merchants have no ability to hire specialized designers. Therefore, the experience still needs to be improved in such circumstances.

There are few studies related to online merchandise display in academia, but scholars have more research on page usability and perception research. Liu disassembles the visual elements in the page [1]. Yuan did an experimental analysis of the shopping page based on the systematic layout planning model (SLP) and dynamic line analysis, and improved the design of the webpage according to the ECRS model [2]. Kun used the eye tracking method to evaluate the layout of the instrument panel of the aircraft [3].

2 Theoretical Framework

2.1 Online Merchandise Display

SLP Model.

This experiment introduces the SLP model which Yuan used in her research [2]. The SLP model is a representative research method proposed by Richard Joseph of the United States in the 1960s. It is a methodical, step-by-step, and applicable method for layout of design projects. This model mainly includes four parts: determining location, overall differentiation, detailed arrangement, and implementation [4].

Online Merchandise Display.

According to the 2017 online retail B2C market share of the e-commerce center, it can be seen that Jingdong and Tmall have occupied more than 80% of the market. Therefore, our research mainly takes the pages of Jingdong and Tmall as examples.

The merchandise display page mainly has three types (see Fig. 1): platform frame page, store display page, and detail page. The platform frame page has less flexible in design because of large consumer base. The detail page has higher design freedom and lower standardization due to different product categories and features. For the store display page, there are certain specifications and flexible adjustments. Therefore, the store display page is the object of this study.

Fig. 1.
figure 1

Platform frame page (left) store display page (middle) detail page (right)

Full size image

The following picture (see Fig. 2) shows a screenshot of some pages. You can see that the store display page is more standardized, and the display layout of different product selections is different. In line with the previous inferences about the store display page, the page gives a certain degree of freedom on the basis of certain norms.

Fig. 2.
figure 2

The store pages

Full size image

In the past, scholars have disassembled and analyzed the shopping website pages, but the definition is rather vague. In the research, Zhang mentioned the influence of online store page organization including graphic structure and presentation form, color matching and other related factors [5]. Some scholars have pointed out the influence of color on consumer sentiment and shopping behavior [6]. There are also scholars who study the impact of the hierarchical structure of the website on consumer shopping behavior [7].

Combined with the research of the above scholars, most scholars have mentioned the color, plate, structure and other factors in the page design, which is also corresponding to the two layers of the structural layer and the presentation layer element in the five elements of the user experience. Therefore, this study deconstructs the store display page into three sections (see Fig. 3): display layout, product information, and style atmosphere. The bottom layer is the display layout. Then the product information includes image, price, sales and other elements. Finally, the style atmosphere mainly consists of color and decorative elements.

Fig. 3.
figure 3

Sections of the store display page

Full size image

Ting Zhang’s research shows that different styles of online stores have different influences on consumers’ shopping intentions, and page design and the product information are the key factors affecting shopping intentions [5]. However, in her research, the definition of page design is relatively vague, which can roughly correspond to the display layout and the style atmosphere. Computer scientists Katharina Reinecke and other scholars have found that the color and visual of the website pages have a greater impact on the perception and preference of the website [8], thus proving the relevance of the style atmosphere to the consumer’s shopping behavior. Based on previous researches, it has been proved that the style atmosphere layer and the product information layer have certain relevance to the consumer’s shopping behavior, so this article will focus on the relation between the display layout layer and consumer shopping behavior.

The Display Layout.

According to the framework analysis of a large number of store display pages, three typical display layout forms are abstracted. According to the degree of density, from the sparse to the dense, the three forms are named as the bar format, the field format, and the square format (see Fig. 4). The experiment will explore the correlation between different display layout and consumer shopping behavior.

Fig. 4.
figure 4

The three typical display layout forms

Full size image

2.2 Online Merchandise Display

Consumer Shopping Behavior Theory.

China Internet Monitoring Research Authority & Data Platform DCCI Internet Data Center proposed the behavioral model SICAS describing consumers in the era of mobile Internet. The model points out that consumers’ behavior can be divided into consumers’ behaviors can be divided into Sense, Interest & Interactive, Connect & Communicate, Action and Share. At each stage, the display of the merchandises is necessary for the consumer’s behavior.

Quantifying Shopping Behavior Based on Eye Tracking.

80% of the information that people get is obtained through vision, and for consumers, the direct way to interact with the page is also vision, so eye movement tracking is a very effective method to evaluate the advantages and disadvantages of the page. Eye movement tracking is the tracking of people’s eye movements. Many scholars have applied eye movement tracking to the usability research of web pages. However, there is not enough research on mobile terminal. This study mainly focuses on the subdivision of the merchandise display on mobile phone, which is commonly used by e-commerce consumers.

Eye movements are mainly composed of gaze and eye movement [9]. When you look at something, it is called gaze. The process of moving an eye from one point of fixation to another is called an eye jump. This process is very fast and the brain does not process the information for this process [10].

Some scholars have applied eye tracking indicators to the page research of shopping scenes, so based on previous research, this experimental index was formed (see Table 1). Eye movement indicators are divided into qualitative indicators and quantitative indicators. Common qualitative indicators are gaze plot map and eye movement heat map. In the research of page layout, researchers often use this result to explore the differences which the subjects pay attention to under different page conditions [11]. Common quantitative indicators of eye movement are fixation duration and fixation count. The fixation duration indicator reflects how long the subject stays in this area. Gazing for a long time indicates that the subject is interested in the content or confused with the content. For this experiment, there is no difficulty in understanding the product because we chose daily products. So, the long Fixation duration shows the degree of interest in the content. In the experiment, the count of subjects clicked on the pages was recorded at the same time. The count reflected the strong desire of subjects to purchase the product in this form.

Table 1. Eye tracking indicators.
Full size table

Consumer Subjective Perception.

Eye tracking can objectively describe the consumer’s shopping behavior to a certain extent, but the judgment of the consumer’s subjective shopping experience is not enough. Therefore, this study uses the in-depth interview and the questionnaire scale to evaluate the subjective perception of consumers.

In He’s research, he measured the customer satisfaction with seven aspects based on ACSI theory [12]: perceived quality, perceived value, perceived convenience, online service, perceived risk, logistics and after-sales service. This study selected some indicators to establish subjective perception indicators: pleasure, security, convenience, quality and comfortability.

In order to ensure the integrity of the indicator system, the in-depth interview method is used to supplement the research on the perceived behavior of consumers.

3 Method

3.1 Research Methods and Hypothesis

The purpose of this experiment is to explore the impact of different product display methods on consumer shopping behavior. The experiment collects user data from both subjective and objective aspects. Through the eye movement experiment, the user’s attention and operational behavior are observed. The questionnaire and in-depth interviews are used to understand the subjective perception of the page after the test.

Subjects Selection.

In online sales, young people aged 18–25 are the main consumers of consumption. At the same time, the experiment was limited by the eye-moving field. The study population was scheduled for the 18–25 age.

Shopping Task.

Combined with Zhang Ting [5] and Yong JW’s [13] research methods, this experiment divides shopping behavior tasks into purposeful tasks and purposeless tasks. The purposeful task is to let the participants make purchase clicks of the specified category of goods, while the purposeless task is to allow the participants to browse at random, and to make purchase clicks for the products of interest.

The Display Layout.

In this experiment, the store display page is divided into three groups: a, b, and c. Group a is the display page mainly for the bar format, Group b is the display page mainly for the field format, and Group c is the display page mainly for the square format. Through the survey of consumers’ frequently purchased categories, the pages displayed in this experiment select daily-use items. The three groups of pages display the same products, and hide the sensitive factors such as price and sales volume.

Experimental Hypothesis.

This experiment explores the relevance of online merchandise display and consumer shopping behavior. Based on relevant theoretical research, the following assumptions are proposed:

  • H1. In the purposeless task, consumers have different fixation duration for different display layout. The more arranged the page, the longer the fixation duration.

  • H2. In the purposeful task, consumers have different completion time for different display layout. The tighter the pages, the shorter the completion time.

  • H3. Under different display layout, consumers pay different attention to different areas of the page, and there are certain rules in the gaze.

  • H4. Under different display layout, consumers click different times.

  • H5. Under different display layout, consumers have different subjective cognition.

3.2 The Experimental Process

The Participants Recruited.

There were 26 subjects aged 18–25 years old in this experiment. The ratio of male to female is 1:1. At the time of recruitment, users who have a certain online shopping experience and maintain a certain frequency are selected.

Content of the Experiment.

This experiment uses a hybrid design of 3 (display layout: A, B, C) × 2 (shopping behavior: purposeful, purposeless). Each subject looked at three sets of randomly ordered pages and did purposeful (select a cup/bag/tableware) and purposeless browsing tasks for each group of pages. Subjects were required to fill out the questionnaire after browsing each group of pages. Then subjects were interviewed after all the three groups of pages have been browsed.

Experimental Instrument.

This experiment was conducted using a portable eye tracker named Tobii pro glass2 and a mobile phone (Huawei P9). Tobii pro glass2 can accurately capture the measured eye movement behavior. After the test, the data was imported into the supporting analysis software Tobii pro lab for corresponding analysis.

4 Result

4.1 Eye Tracking Data Analysis

Fixation Duration.

The subjects were statistically analyzed during the A.B.C three-group page browsing process. Since there are three groups in this experiment, one-way ANOVA is used when only one factor of gaze duration is considered. The degree of difference was judged by comparing the size of F with Fcrit. If F > Fcrit, there is a significant difference between the data between groups.

For purposeless tasks, descriptive statistical analysis and variance test analysis were performed (see Table 2). As can be seen from the analysis of Table 4, F = 6.33 > Fcrit = 3.11, indicating that the three sets of data have significant differences in the length of fixation. It can be seen from the data in the Table 3 that the average gaze duration between different groups is different. The length of gaze from group a to group c is decreasing. The more arranged the page, the longer the fixation duration. This result verifies the hypothesis H1. In the purposeless task, consumers have different fixation duration for different display layout. The more arranged the page, the longer the fixation duration.

Table 2. Fixation Duration (purposeless tasks)
Full size table
Table 3. Descriptive statistics of Fixation duration (purposeless tasks)
Full size table
Table 4. Variance analysis of Fixation duration (purposeless tasks)
Full size table
Table 5. Descriptive statistics of Fixation duration (purposeful tasks)
Full size table

For purposeful browsing, the subjects ended the experiment after selecting a product. It can be seen from the Table 6 that F = 3.84 > Fcrit = 3.11, indicating that the three groups of data also showed significant differences for purposeful browsing. It can be seen from the data in the Table 5 that the average gaze time is different between different groups, and the gaze duration from group a to group c decreases. This result verifies the hypothesis H2. In the purposeful task, consumers have different completion time for different display layout. The tighter the pages, the shorter the completion time.

Table 6. Variance analysis of Fixation duration (purposeful tasks)
Full size table
Table 7. Descriptive statistics of Consumer click
Full size table

Consumer Clicks.

When browsing without purpose, the user can click on the item of interest without limiting the number of clicks. It can be seen from the Table 8 that F = 4.96 > Fcrit = 3.11, so there is a significant difference in the number of shopping clicks between the comparison groups. The three groups of pages present the same products, so the difference in the number of clicks proves the impact of different display methods on the number of clicks. As can be seen from the Table 7, from A to C, the number of clicked items is decremented. This result verifies the hypothesis H4. Under different display layout, consumers click different times. At the same time, it was found in the statistical data that the trend of the clicks of a small number of participants was different from the statistical results. From A to C, the trend of increasing the number of items was clicked, and in-depth interviews were conducted for these users to understand the reasons.

Table 8. Variance analysis of Consumer click
Full size table

Split the page into separate screens, and compared the fixation duration and count in the three groups of pages (see Fig. 5). Due to the different durations and counts of the gaze of the different subjects, the date is converted into the proportion of the statistics. It can be seen from the line graph that in the b and c groups, with the increase of the screen number, the fixation duration and count have a relatively obvious downward trend, but group a is more uniform. The distribution of the three groups of pages all showed an alternating polyline trend. If the previous screen was longer, the attention time of the next screen decreased significantly.

Fig. 5.
figure 5

Fixation duration (left) and Fixation count (right)

Full size image

Gaze Plot and Hot Map.

The gaze data of the three sets of pages is analyzed (see Fig. 6). The left image shows the gaze plot of the representative subject No. 4. The heat map on the right is a superposition of all the measured heat maps. For group a, the page is mainly composed of a column frame, and it is not easy to miss the page information. For group b, the page is mainly composed of a double-column frame. It is measured to display a zigzag browsing trajectory when browsing. After browsing an item, the probability of continuing to browse vertically is greater than that of horizontal browsing, so that it is easy to miss other products in the same row. For the group c, the page is mainly composed of a three-column frame. When viewed, it also shows a jagged browsing track, but the middle row of goods gets more attention than the left and right rows. This result proves H3. Under different display layout, consumers pay different attention to different areas of the page, and there are certain rules in the gaze.

Fig. 6.
figure 6

Gaze Plot (a b c) and Hot map (a b c)

Full size image

4.2 Subjective Perception Data Analysis

The subjective description keywords of the three groups of pages are extracted and cluster analysis is performed (see Fig. 7). The study found that the subject’s description of subjective feelings can be clustered into five aspects: cognition, quality, comparison, convenience and security.

Fig. 7.
figure 7

Subjective perception

Full size image

The loosely arranged (such as group a) display method will give the subject a higher sense of quality and security, but the convenience and contrast are lower. The arrangement of the more closely arranged (such as Group c) will give the subject a lower quality and security, but the convenience and contrast are higher. This result verifies the hypothesis H5. Under different display layout, consumers have different subjective cognition.

Questionnaire.

After each group of users has finished browsing a group of pages, the subjective perception questionnaire is filled out. In the end, 26 subjects recovered 78 valid questionnaires. The reliability and validity of the questionnaire were analyzed. The reliability analysis was performed using the commonly used Cronbach α coefficient, and the value was 0.877 > 0.8. The validity was KMO analysis, and the value was 0.85 > 0.8. The reliability of this questionnaire was obtained. It has good validity and can be further analyzed.

The data in the table shows that the results of the interviews are mutually validated: the sense of quality and security are decreasing from group a to group c, while the convenience is increasing from group a to group c (see Table 9).

Table 9. Questionnaire
Full size table

5 Discussion

Online sales are different from offline, consumers can’t really contact with goods, so how to display goods has a greater impact on consumers’ behavior and experience. This study mainly explores the correlation between online merchandise display and consumer shopping behavior, and takes the shop page in the exhibition as an example for case study. The study uses eye tracking and subjective perception to explore the behavioral and perceived differences of consumers in different display modes. In the course of the experiment, the display frames were divided into three groups A, B, and C according to the arrangement and density, so that the subjects were browsed in a purposeful and purposeless background.

5.1 Different Display Modes for Different Shopping Motives

The experiment found that the more arranged the page, the longer the fixation duration in the purposeless task. First of all, under the premise of the same number of products, the longer the group page is, the longer the length of the group will be, and the time for browsing will increase. At the same time, because the page is too long, the possibility of the participant giving up reading will increase. However, during the experiment, it was found that for the display mode of the arrangement, most of the subjects not only finished the browsing of the page content, but also performed a detailed review of the slip back. Perhaps this suggests that the way to arrange the sparseness is more attractive to the participants and the degree of interest is higher. In a more closely arranged way, the details of the goods cannot be displayed, and the consumer has a shorter stay time with each item. Some participants mentioned in the interview that because they received information on multiple items at the same time, they could not choose which item to browse, so they gave up and quickly crossed.

On the contrary, when the subjects were given a specific task to select a certain product, the closer the arrangement was, the shorter the time required to complete the task. In the interview, the subjects mentioned that the tight arrangement can be used to compare multiple products at the same time, so the selection efficiency is high, while the page with sparse arrangement is relatively low, thus lengthening the task time.

Therefore, in different shopping motive scenarios, if the merchant provides different display methods, it may enhance the commercial effect. For example, in a highly targeted scenario, the merchant may choose a more closely arranged manner to improve efficiency. For the scene without purpose browsing, more sparse way can be selected to enhance the consumer’s interest.

5.2 Different Display Methods Are Suitable for Different Product Placement Rules

For the bar format, there is almost no leakage of goods, but in the field of the field and the palace format, there are different levels of missing goods. After browsing an item, the possibility of vertical reading is greater than horizontal. According to previous research conclusions on the web page [14] [15], the subject’s gaze time for the left part is longer than the right part. However, no obvious left-right tendency was observed in this experiment. For the three rows of exhibitions, the participants stayed in the middle row longer than the left and right sides. The reason may be related to the difference between the mobile terminal and the web terminal. For the square format, in each horizontal browsing, browsing to the middle will result in a high probability of vertical viewing, so that the overall middle stay is longer than the left and right. Therefore, merchants can make targeted choices when placing goods. For example, for the square format, the main push products can be placed in the middle row to get more attention.

In the previous research on the webpage [16], most of the consumers’ gaze time stayed in the first two screens. However, the study found that although the gaze time is decreasing continuously with the increase of the number of screens, there is no case where the first two screens are dominant. This may have something to do with the characteristics of the mobile phone. The sliding cost of the mobile page is lower than the webpage. After years of training in mobile phone operating habits, the subjects have been accustomed to sliding operations. Instead, the data shows that consumers often stay longer on the second screen, and the first screen is less attractive to consumers, perhaps because consumers are more interested in the following display content, which leads to an increase in the exposure of the next few screens.

Among them, b, c two arrangement, the first four screens get higher exposure and more stable, so the first four screens are more valuable. For the more arranging methods, such as group a, it may be because the content is attractive to consumers, and the latter screens still get a low gaze duration. Therefore, the merchant can increase the attention to the 2–4 screen content when placing the product, instead of focusing only on the first screen content. If you want to get a certain exposure when you have more screens, consider more sparse way.

5.3 Different Display Methods Are Suitable for Different Industries and Consumers

The three groups of pages present the same products, so the difference in the number of clicks proves the impact of different display methods on the number of clicks. Some subjects mentioned that they found goods that were not found in group b and c in group a. But the reality is that the products in the three groups of pages are exactly the same. Participants ignored some of the items in the other two pages because of the different presentation formats.

During the experiment, it was also found that the selection trend of a very small number of subjects was different from that of most of the subjects. Researchers believe that it may be related to consumers’ shopping habits. Different types of users are sensitive to perception factors. In the interviews, it was found that tests that are more sensitive to efficiency and comparative sensibility have a higher desire to purchase pages that are more closely aligned. Therefore, in the design of the future display, personalized display can be carried out according to the consumption habits of different users, thereby inspiring consumers to purchase more and increase business value.

The loosely arranged display method will give the subject a higher sense of quality and security. The arrangement of the more closely arranged will give the subject a lower quality and security. Therefore, when shops in different industries choose the display method, they can have a certain preference. For example, for the maternal and child industry with higher security requirements, more choices may be made. For fast-moving industries with higher convenience and higher requirements, more compact arrangements can be chosen.

5.4 Limitation

This experiment has certain limitations at the same time. The whole experiment is carried out in the experimental environment, which is different from the actual consumption scene of consumers. The sample is concentrated on young people aged 18–25, and different age groups may have an impact on the results of the experiment. In the selection of experimental samples, the selection of daily necessities products has certain representativeness, but different categories may still have certain differences.

6 Conclusion

This study mainly explores the correlation between online merchandise display and consumer shopping behavior. Through this research, it is found that different display methods will affect consumers’ fixation duration, gaze plot and subjective perception during shopping:

  1. 1.

    In the purposeless task, the more arranged the page, the longer the fixation duration. In the purposeful task, the tighter the pages, the shorter the completion time.

  2. 2.

    Different ways of displaying goods can affect the number of clicks by consumers. For most people, the more the product arrangement, the more consumers click.

  3. 3.

    Under different display layout, consumers pay different attention to different areas of the page, and there are certain rules in the gaze. For a three-column palace format, the middle row gets more gaze time than the left and right sides.

  4. 4.

    As the number of display screens increases, consumer gaze time shows a downward trend. The exposure of the 2–4 screens of Groups b and c is higher and stable, but for the bar frame, the downward trend is slower, and the number of screens behind can also be obtained for a longer gaze duration.

This research provides some basis and suggestions for merchants to choose the way of displaying goods, and provides some thoughts and ideas for the design and research of mobile terminal display.