Next Article in Journal
A Comprehensive Review on Construction Applications and Life Cycle Sustainability of Natural Fiber Biocomposites
Next Article in Special Issue
Last-Mile Delivery Methods in E-Commerce: Does Perceived Sustainability Matter for Consumer Acceptance and Usage?
Previous Article in Journal
Habitat Quality Assessment in the Yellow River Delta Based on Remote Sensing and Scenario Analysis for Land Use/Land Cover
Previous Article in Special Issue
The Determinants of Purchase Intention on Agricultural Products via Public-Interest Live Streaming for Farmers during COVID-19 Pandemic
 
 
Font Type:
Arial Georgia Verdana
Font Size:
Aa Aa Aa
Line Spacing:
Column Width:
Background:
Article

Creating a Sustainable E-Commerce Environment: The Impact of Product Configurator Interaction Design on Consumer Personalized Customization Experience

1
School of Art and Design, Zhejiang Sci-Tech University, Hangzhou 310018, China
2
Lab of Material Innovation Design and Intelligent Interaction, Zhejiang Sci-Tech University, 928 Seconded Avenue, Xiasha High Education Zone, Hangzhou 310018, China
*
Author to whom correspondence should be addressed.
Sustainability 2022, 14(23), 15903; https://doi.org/10.3390/su142315903
Submission received: 5 September 2022 / Revised: 8 November 2022 / Accepted: 27 November 2022 / Published: 29 November 2022
(This article belongs to the Special Issue Consumer Behavior and Sustainability in the Electronic Commerce)

Abstract

:
Promoting consumers’ willingness to pay is crucial to creating a sustainable e-commerce environment, and the interaction design of the product configurator plays a key role in this. In the present study, the product configurator, which is indispensable in online customization, is adopted as the research object to analyze the influence of interaction design on the customization experience of consumers. The pricing method (total product pricing, incomplete total product pricing, and individual module pricing) and navigation design pattern (tabs and dropdown menu with arrow buttons) are adopted as independent variables, while system usability, flexible navigation capability, perceived control, perceived enjoyment, complexity and task performance are taken as dependent variables. One hundred and eighty college students participated in this study. The results of the 3 × 2 two-factor experiment reveal that: (1) Different navigation design patterns will lead to significant differences in system usability, flexible navigation capability, and perceived control of the product configurator, and tabs are better than dropdown menu with arrow buttons in these aspects. (2) Different pricing methods will significantly affect the perceived control of users. Under individual module pricing and incomplete total product pricing, perceived control is higher. (3) Different combinations of pricing methods and navigation design patterns will affect users’ evaluation of flexible navigation capability and complexity, and under the individual module pricing and incomplete total product pricing methods, users think that tabs have a higher flexible navigation capability and lower complexity. However, under the total product pricing method, users are convinced that dropdown menu with arrow buttons has a higher flexible navigation capability and lower complexity. The research results are of great significance to both interface interaction design and online customization. Furthermore, the interaction design method of price presentation and navigation design of the product configurator is analyzed to determine the most appropriate interaction design principles, so as to enhance the user experience of online customization and provide constructive ideas from the design perspective for online customization.

1. Introduction

E-commerce is defined as the business activities relying on electronic devices and the Internet, which not only enables consumers to purchase goods more conveniently, but also reduces the cost of market expansion for enterprises and has become an important force in the global business field [1]. With the growth of e-commerce, more attention is paid to its sustainability. The sustainability of e-commerce mainly includes three dimensions, i.e., economy, society, and environment [1], in another word, e-commerce should promote economic development and improve people’s quality of life while reducing environmental damage. The related studies not only involve cross-border e-commerce sustainability [2], and e-commerce cyber-security sustainability [3], but also analyze the impact of IT tools on the sustainability of sales processes [4]. As an e-commerce model, online customization can create additional profits and competitive advantages for manufacturing enterprises [5,6]. To strengthen the sustainability of online customization, it is necessary to satisfy the personalized demand of consumers to extend the product life cycle and slow down overproduction and resource consumption rates [7]. Product configurator plays a key role in it [8,9,10] because it is a window for consumers to deliver their needs, which can even affect consumers’ purchase intention and loyalty [11,12]. A product configurator is so important to the sustainability of e-commerce, it is, therefore, necessary to refine its design strategy to improve the customization experience of consumers, which is exactly the main motivation behind this paper.
A product configurator is an application that allows consumers to design their own products by selecting predefined components or attributes, and also provides instant feedback on the results of product design [13,14]. Many researchers have studied the interaction design principles and capabilities of product configurators. Walcher and Piller analyzed 500 existing product configurators in the market and pointed out four design features that product configurators should have, including visualization features, navigation features, customer support from the company, and design help from other customers [15]. Trentin et al. conceptualized the design feature as five capabilities that a product configurator should have, namely focused navigation, flexible navigation, easy comparison, benefit-cost communication, and user-friendly product-space description capabilities, and developed a number of scales to evaluate them [12]. Zhao et al. established an evaluation model for product configurator interaction design and evaluated the representative product configurators on the market. The results showed that most product configurators lack basic human-computer interaction principles [8,10].
However, there are two main problems in previous research. Firstly, they mainly focus on the product configurator on the desktop, the research on product configurator developed for mobile intelligent devices and its interaction design is still insufficient. With the surge of mobile Internet, consumers have become accustomed to shopping through mobile intelligent devices (such as mobile phones and tablet computers), but there are obvious differences between mobile terminals and personal computers dominated by gesture control in control mode [16], thus leading to differences in cognitive load and decision-making behavior of consumers [17,18]. Secondly, these studies only give some general suggestions, and rarely conduct empirical research on a specific function on the product configurator to find out how the function is displayed better in the interface design. Therefore, we expect to explore the interaction design of specific functions of product configurators on mobile smart devices through empirical research to enhance consumers’ shopping experiences.
Interaction design is an interdisciplinary research field, which not only involves computer programming but is also concerned with users’ cognitive psychology in the interface operation process. Besides, it also relies on the effective arrangement of visual languages such as interface hierarchy, space, alignment, color, layout, etc. by design science to finally create a well-organized and pleasant user interface. In product configurator, interaction design mainly involves users’ cognition of the information system and consumer psychology, which is determined by the dual attributes of consumers as both information system users and shoppers [19]. Therefore, we extracted one important interaction design factor from each of these two aspects for research and tried to understand whether they will affect each other. In conclusion, the present study aims to analyze two important interaction design factors of the product configurator, that is, navigation design pattern and pricing method, and try to understand the design approach which can create the optimal user experience.
In terms of navigation design patterns, the appropriate navigation design can guide and help users to efficiently access various contents and complete tasks in information systems [20]. As far as the product configurator is concerned, the quality of the navigation design determines whether consumers can freely use various customization functions, which will further affect the perceived control of consumers in the customization process [19], and finally cause consumers to make or give up the purchase decision [21]. Although the usability of navigation design and user preference has always been the research focus of interface design [22,23,24], the research on specific navigation design of the product configurator is still insufficient. Even if there are certain qualitative and descriptive suggestions [25,26,27], it still lacks data support from empirical research.
As another study factor, pricing methods will also affect the online customization experience of consumers, because different pricing methods mean different price complexity, which will further affect the perceived product prices and purchasing decisions of consumers [28]. Some scholars even suggest that consumers should not be told how much money is needed in every step of product customization but only should be notified of the total price after the customization is completed, so as to reduce the price complexity perceived by consumers [29]. However, some scholars hold an objection to this, arguing that this will blur consumers’ perception of the costs and benefits of each customization step [12], increasing the uncertainty of choice. Therefore, we hope to continue to explore the most suitable pricing method for consumers, especially in mobile customization scenarios.
In this paper, the impact of different navigation design patterns and pricing methods of product configurators on consumer customization experience was discussed, with a view to improving the customization experience and enhancing consumers’ purchase intention and loyalty, thereby contributing to the economic sustainability of online personalized customization. It does not aim to eliminate or stick to a certain interaction design, but to understand the advantages of different designs and how interaction design can enhance people’s shopping experience. Personalized customization has become an important trend in the development of the footwear industry. Major sports brands represented by Nike have launched their own online product configurators and have achieved good market feedback [30]. This study takes sneakers as the customization object of the product configurator, trying to reveal the influence of navigation design pattern and pricing method on the consumer customization process and the relationship between them, filling the gap of research on the interaction design of product configurator on mobile smart devices, contributing to the theory and practice of online customization. This paper, there are six parts. Part I is the Introduction, in which the background and motivation of this study are introduced. Part II is Research Hypotheses, in which the existing research results and viewpoints on navigation design patterns and pricing methods are reviewed, and the hypotheses of this study are proposed on this basis. Part III is Materials and Methods, in which interaction design methods and experimental procedures of the product configurator are described to test the influence of different interaction design schemes on consumers’ mobile customization experience. Part IV and Part V are Results and Discussion respectively, in which the reasons for relevant data are explained and the opinions of other scholars are reviewed. Part VI is Conclusions, in which the research conclusions, limitations, and related suggestions on interaction design are put forward.

2. Research Hypotheses

Our research is inspired by flow theory. In this theory, flow is described as a pleasurable state of extreme concentration, which filters out any perceptions and thoughts unrelated to what is being done [31,32]. As for the field of online business and marketing, scholars have analyzed the interaction design method of product configurator based on flow theory and discussed the impact of different design schemes on consumer perceived control and perceived enjoyment, so as to provide consumers with a positive customized experience [33]. Perceived control is the degree to which consumers think they can control the customization process and results, and perceived enjoyment is the pleasure perceived by consumers in the customization process [33].
In addition to continuously adopting perceived control, and perceived enjoyment as indicators to measure the customization experience of consumers, we also pay close attention to system usability and flexible navigation capability of the product configurator. This is because system usability can reflect the effectiveness, safety, and enjoyment of human-computer interaction [34], while flexible navigation capability reflects the consumers’ capability to modify the created product configurations [35]. This capability not only has a significant positive impact on users’ satisfaction and purchase intention but also can increase their hedonic benefit and creative-achievement benefit [12]. Complexity is consumers’ perception of the complexity of the customization process. It has been proved that the price presentation form of the product configurator, the range of customization options, and whether to provide a starting customization solution will all affect the complexity perceived by consumers [33,36].
The present study focuses on analyzing the Influence of interaction design of the navigation design pattern and pricing method on the mobile terminal product configurator on users’ customization experience, and six research hypotheses are put forward as shown in Figure 1, which will be described in detail in Section 2.1 and Section 2.2.

2.1. Navigation Design Pattern

In the product customization process, consumers can create satisfactory products in “solution space”. The so-called “solution space” refers to a variety of custom attributes provided by the product configurator, and different options contained in each custom attribute [8,37]. For instance, when consumers customize a computer on a shopping website, they need to choose different custom attributes such as the size, screen, processor, etc., to balance the computer’s performance and selling price. Appropriate navigation design can guide consumers to make the best choice among different custom attributes and their options [27,35]. On the contrary, it may bring additional burdens and negative emotions to consumers [11,38].
To understand the navigation design patterns of existing product configurators, we used card sorting to classify all 45 mobile terminal footwear product configurators in a product configurator database (www.configurator-database.com) for navigation design patterns. We invited 15 college students to participate in the card sorting, and they were asked to use each product configurator in turn. When they were done, they put together the samples that they thought had a similar navigation design (each sample was printed on a piece of A4 paper). We performed cluster analysis on the obtained data and finally classified them into two clusters named “tabs” and “dropdown menu with arrow buttons”. “Tabs” can display all customizable parts of the product at the same time in the product configurator, and the user can directly click on them to switch to the parts to be customized, while “dropdown menu with arrow buttons” only displays the parts that are currently being customized. If the user wants to switch the customized parts, they need to click the left and right arrow buttons or click the dropdown menu to bring up all customizable parts and then click the part they want to customize. To illustrate the differences between these two navigation design patterns more clearly, we plot their interaction design characteristics in Figure 2.
The usability of tabs has been positively evaluated in previous studies. Burrell and Sodan [22] found that tabs were more popular with users on the computer terminal because it was better than other navigation designs in terms of learnability. Harms et al. [23] pointed out that the advantages of tabs on the computer terminal were extended to the mobile terminal, and this navigation design performed better in memorability, usability, overview, subjective preference, etc. The usability evaluation of dropdown menu with arrow buttons has not been found yet, but Breuninger et al. [24] conducted a study on a similar navigation design (called page flipping with arrow buttons). It is considered that this navigation design performs the worst among all seven navigation design patterns in terms of the input speed, error rate, and user rating, and direct manipulation of a continuous list is the favorite navigation design of users. Therefore, the first hypothesis is made as follows:
Hypothesis 1.
The product configurator using tabs is of better system usability than that using dropdown menu with arrow buttons.
The product configurator with flexible navigation capability can allow users to easily and quickly modify their product configurations created previously or currently, especially when the customization solution exceeds users’ budget [35]. Specifically, the navigation design of flexibility should be provided with the following core features: (1) Consumers can freely choose various custom attributes in a desirable order rather than in a fixed order [26]; (2) Consumers should perceive freedom and ownership in the customization process, thus stimulating their creativity [39]; (3) Consumers can easily return from the new customization solution to the old one [27]. In the present study, it is expected that the flexible navigation capability of tabs is better than that of the dropdown menu with arrow buttons because it is the most efficient for consumers to choose different custom attributes when using tabs. However, we are still curious about whether the dropdown menu with arrow buttons is advantageous in terms of ownership. Thereby, the second hypothesis is proposed as follows:
Hypothesis 2.
The product configurator using tabs is of better flexible navigation capability than that using dropdown menu with arrow buttons.
Perceived control is the degree to which people feel that they can move freely in various ways in a specific situation [40]. For product configurator, the uncertainty of the online customization process will reduce the perceived control of consumers and further affect the customization experience, while allowing consumers to freely choose the custom contents or steps can provide consumers with better-perceived control [39]. In terms of perceived enjoyment, the research on human behavior shows that when the system endows consumers with full openness to the customization process, it will bring them more enjoyment [41,42]. In the present study, it is expected that different navigation design patterns will affect the perceived control and perceived enjoyment of consumers. In addition, the operation mode of tabs is more open, for example, when different product attributes are required, they can be selected directly by clicking when using tabs without relying on the left and right arrows like dropdown menu with arrow buttons. Therefore, the third and fourth hypotheses are put forward:
Hypothesis 3.
The product configurator using tabs can provide consumers with higher perceived control than that using dropdown menu with arrow buttons.
Hypothesis 4.
The product configurator using tabs can provide consumers with higher perceived enjoyment than that using dropdown menu with arrow buttons.

2.2. Pricing Method

An essential step in the online customization process is to show product prices to consumers, and how to strategically present the price in the product configurator has aroused the interest of scholars. Dellaert and Stremersch [29] studied two pricing methods, namely, individual module pricing (marking the price of each custom part and the total price at the same time) and total product pricing (marking the total price only) and pointed out that consumers would feel more pecuniary loss and customization cost under the individual module pricing method. This is because it is pointed out in loss aversion theory that consumers perceive loss more strongly than benefits [43]. Although total product pricing is simpler than individual module pricing in pricing strategy, and consumers prefer simple rather than complex pricing strategy [28], some scholars have questioned that total product pricing is not as perfect as expected. Trentin et al. [12] admitted that even if total product pricing made the price look less complex, it would obscure consumers’ perception of the cost and benefit of each custom part.
In addition to individual module pricing and total product pricing, there is another pricing method that is common in the current business environment, that is, adding “price details” on the basis of total product pricing so that consumers can know more about pricing details. It is called incomplete total product pricing. In the present study, the influence of the said three pricing methods on consumers’ online customization experience are explored, and their features in interaction design are shown in Figure 3. When using individual module pricing, not only the total price of the product is displayed at the top, but the price of the option is also displayed next to the option. Incomplete total product pricing hides the price of each option but displays the price of the finished customized part in “price details”. Total product pricing is the simplest, which only displays the total price of the product at the top. Referring to the existing research conclusions, it is inclined to believe that the total product pricing strategy is relatively simple, but it also leads to opaque product pricing and further result in low perceived control of consumers. Thus, hypothesis 5 is put forward. Individual module pricing is the most detailed and the most complex. For incomplete total product pricing, although the price of each custom part is marked, it can be displayed only after consumers click the “price details”. This reduces the number of trade-offs (i.e., cognitive steps) consumers need to make during the customization [29]. So, it is expected to have low complexity. Therefore, hypothesis 6 is proposed.
Hypothesis 5.
Compared with the product configurator adopting individual module pricing and incomplete total product pricing, the product configurator adopting total product pricing will reduce the perceived control of customers.
Hypothesis 6.
Compared with the product configurator adopting individual module pricing, the product configurator adopting incomplete total product pricing will reduce the complexity of customers.

3. Materials and Methods

3.1. Subjects

To verify the research hypotheses, the sneaker was taken as the custom object for the interaction design of the product configurator. According to a report, in China, young people under the age of 23 are the main consumer group of sneakers [44]. Therefore, our recruitment target is young people under the age of 23 who are frequent users of online shopping sites and have some experience in online customization. In the present study, 180 college students from a local university were recruited as the subjects through purposive sampling, including 93 males and 87 females aged 18–23, all of whom participated in this experiment for free. All subjects have online shopping experience and can use a product configurator to complete the sneaker customization task.

3.2. Instruments and Prototypes

The sneaker configurator designed by us adopts HTML5, CSS3, and JavaScript for programming, and realizes 3D product and footwear material display on the mobile terminal through Verge3D and Blender. This configurator is developed for iPhone 12, with a screen size of 6.1 inches, a resolution of 2532 × 1170, and a pixel density of 460 ppi.
In the present study, two navigation design patterns (tabs and dropdown menu with arrow buttons) and three pricing methods (individual module pricing, total product pricing, and incomplete total product pricing) were designed, providing six interaction design combinations. We described the design characteristics of different interfaces in Table 1 and showed different interface designs in Figure 4.
At the top of the product configurator interface are the price module and the “Done” button. In the middle of the interface is the product display module, which will display a 360-degree rotatable and zoomed Sneaker 3D model in real-time. At the bottom of the interface is the navigation module, through which the subjects can view different customizable parts. No matter which interaction design is adopted, the default pricing of the sneaker that all subjects see when they use the configurator for the first time will be the same, that is, the pricing of the white basic model (RMB 439). On this basis, the subjects can customize the materials, colors, and patterns of the sneaker’s base, tongue, quarter, laces, sidewall, and outsole. For example, if you want to choose the leather base, RMB 60 should be added to the pricing of the basic model.
To describe the design details more clearly, the interaction process of dropdown menu with arrow buttons, tabs, and incomplete total product pricing is presented in Figure 5. When using the dropdown menu with arrow buttons, the subjects will call out the dropdown menu after clicking the control, as shown in the figure, and it is allowed to switch customizable parts by clicking in the dropdown menu. Of course, if you want to switch customizable parts faster, you can also click the left and right arrow buttons. Tabs display all customizable parts on the main interface at the same time for the selection of subjects. Incomplete total product pricing is equipped with the “Price Details” button, and the price of any customized part will be displayed by clicking the button.
In the design process of the product configurator, the products of several sneaker suppliers were collected, and the price of each custom part of the sneaker was determined under the guidance of supply chain experts, so as to ensure that the pricing was in line with the actual market price. Moreover, five interaction designers with rich industry experience were also invited to conduct a heuristic evaluation of the human-computer interaction of the product configurator, so as to improve the details of interaction design according to experts’ opinions.

3.3. Experimental Procedures

The experiments were conducted in a quiet classroom at a local university. The 180 college students were divided into six groups, each of which employed one of the six interaction designs. We present the experimental procedures using a flowchart, as shown in Figure 6. The experiment was divided into three stages. The first stage was the description of the experiment. The research assistant introduced various functions and operation methods of the product configurator to subjects to ensure that they were familiar with the basic operations of the interface and answered questions to the subjects. The second stage was the online customization of sneakers. All subjects should complete the sneaker customization task within 15 min. An iPhone 12 equipped with the product configurator was distributed to each group. The subjects needed to use these mobile phones by turn to complete the customization task according to their own preferences, and the customization time of each subject was recorded. After the customization was finished, the subjects could click “Done” to submit their schemes, and then the interface would display “Thank you for customization”, indicating the end of the customization task. The third stage was user experience evaluation. After completing the sneaker customization, the subjects were required to fill in relevant user experience scales to evaluate whether there were statistically significant differences in different interaction designs in terms of the customization experience. Furthermore, a brief interview was also made with each subject, so as to further understand their actual feelings when using the product configurator.

4. Results

In this research, a 2 (navigation design pattern) × 3 (pricing method) two-factor experimental design was adopted, taking system usability, flexible navigation capability, perceived enjoyment, perceived control, complexity, and task performance as the dependent variables. Provided that relevant statistical assumptions are satisfied, we utilized the Two-Way ANOVA for analyzing relevant experimental data with IBM SPSS (version 24). For significantly different factors, a post hoc test was conducted.

4.1. System Usability

The System Usability Scale (SUS) consists of 10 questions, including the positive statements of odd terms and negative statements of even terms. The scale is scored on a 7-point Likert scale. The higher the score, the higher the usability evaluation of the system by subjects. In addition to acquiring the total SUS score, the SUS can also be divided into two subscales [45], that is, the “Learnability” Subscale comprised of the 4th and 10th questions, and the “Usability” Subscale comprised of the remaining eight questions. Relevant data from the two subscales will also be analyzed in the study.

4.1.1. Total SUS Score

As can be seen from Table 2, there are significant differences among different navigation design patterns in the total SUS score (F = 8.267, p = 0.004 < 0.05), and tabs (M = 41.04, Sd = 7.628) acquires a higher score than dropdown menu with arrow buttons (M = 38.26, Sd = 7.433). Nevertheless, there is no significant difference among different pricing methods in total SUS score (F = 0.460, p = 0.632 > 0.05).
There is a significant interaction between the navigation design pattern and pricing method (F = 3.308, p = 0.038 < 0.05), which indicates that different combinations of navigation design pattern and pricing method may affect the evaluation of total SUS score by subjects. The interaction can be explained according to Figure 7. Under the individual module pricing method, tabs (M = 42.14, Sd = 7.189) acquires a higher score than the dropdown menu with arrow buttons (M = 35.91, Sd = 6.525). Under the incomplete total product pricing method, the score of tabs (M = 40.60, Sd = 7.855) is also higher than that of the dropdown menu with arrow buttons (M = 38.99, Sd = 6.449). Additionally, under the total product pricing method, tabs (M = 40.38, Sd = 7.892) still scores higher than the dropdown menu with arrow buttons (M = 39.89, Sd = 8.689).

4.1.2. Learnability

The system learnability is evaluated by adding the scores of the 4th and 10th questions in the SUS. It can be seen from Table 3 that there is no significant difference in the learnability (F = 0.05, p = 0.823 > 0.05) among both different navigation design patterns and different pricing methods (F = 0.302, p = 0.740 > 0.05). Besides, there is no significant interaction between the navigation design pattern and pricing method in the learnability (F = 0.926, p = 0.397 > 0.05).

4.1.3. Usability

The system usability is evaluated by adding the scores of the remaining eight questions in the SUS. According to Table 4, there are significant differences among different navigation design patterns in system usability (F = 9.814, p = 0.002 < 0.05), and tabs (M = 33.64, Sd = 7.044) gains a higher score than the dropdown menu with arrow buttons (M = 30.80, Sd = 7.107). Besides, different pricing methods have no significant impact on system usability (F = 0.517, p = 0.597 > 0.05). There is a significant interaction between the navigation design pattern and pricing method in system usability (F = 3.507, p = 0.032 < 0.05), which proves that the interaction of usability leads to the interaction of the total SUS score.

4.2. Flexible Navigation Capability

In order to evaluate the ability of subjects to modify the already created product configurations in the product configurator, the flexible navigation capability scale developed by Trentin et al. [35] was employed. There are two questions in total, that is, (1) With this system, it takes very little effort to modify the choices you have previously made during the configuration process; (2) Once you have completed the configuration process, this system enables you to quickly change any choice made during that process. The scale is a 7-point Likert scale, and the total score is the sum of the scores of the two questions. The higher the score, the stronger the flexible navigation capability of the product configurator.
As can be seen from Table 5, there are significant differences among different navigation design patterns in flexible navigation capability (F = 14.944, p = 0.000 < 0.05), and tabs (M = 10.35, Sd = 0.662) scores higher than the dropdown menu with arrow buttons (M = 9.85, Sd = 0.864). Nevertheless, there is no significant difference among different pricing methods in flexible navigation capability (F = 2.680, p = 0.071 > 0.05).
There is a significant interaction effect between the navigation design pattern and pricing method regarding flexible navigation capability (p = 7.487, p = 0.001 < 0.05), which shows that different combinations of navigation design pattern and pricing method may affect the subjects’ feelings about flexible navigation capability of the product configurator. The interaction can be explained according to Figure 8. It can be seen that under the individual module pricing (M = 10.35, Sd = 0.662) and incomplete total product pricing (M = 10.70, Sd = 0.992) methods, tabs have a higher flexible navigation capability than the dropdown menu with arrow buttons. However, under the total product pricing method, the dropdown menu with arrow buttons (M = 9.95, Sd = 0.904) has a higher flexible navigation capability than tabs (M = 9.83, Sd = 0.958).

4.3. Perceived Enjoyment

The Perceived Enjoyment Scale is used to evaluate the degree of enjoyment perceived by subjects in the sneaker customization process. It is a 7-point Likert scale consisting of three questions, i.e., (1) I found my customization interesting; (2) I found my customization enjoyable; (3) I found my customization exciting [19]. The descriptive statistics and two-factor analysis of the perceived enjoyment are shown in Table 6. Both different navigation design patterns (F = 0.162, p = 0.687 > 0.05) and different pricing methods (F = 0.134, p = 0.874 > 0.05) will not cause significant differences in the perceived enjoyment of subjects, and there is no significant interaction between the navigation design pattern and pricing method (F = 1.750, p = 0.176 > 0.05).

4.4. Perceived Control

Perceived Control Scale is used to evaluate the degree of control over the customization process and results perceived by subjects, which is a 7-point Likert scale consisting of two positive questions and two negative questions. The positive questions are “During my customization, I felt calm” and “During my customization, I felt in control”, while the negative questions are “During my customization, I felt confused” and “During my customization, I felt frustrated” [19].
Table 7 presents the descriptive statistics and two-factor analysis of the perceived control. As can be seen from Table 7, there are significant differences among different navigation design patterns in the perceived control (F = 3.948, p = 0.048 < 0.05), and tabs (M = 20.68, Sd = 1.811) can provide higher perceived control than the dropdown menu with arrow buttons (M = 20.23, Sd = 1.934). Additionally, there are also significant differences among different pricing methods in the perceived control (F = 18.391, p = 0.000 < 0.05). According to the post hoc, the individual module pricing (M = 20.75, Sd = 1.997) and incomplete total product pricing (M = 21.10, Sd = 1.588) methods can provide higher perceived control than the total product pricing method (M = 19.50, Sd = 1.669). In addition, there is no significant interaction between the navigation design pattern and pricing method in the perceived control (F = 0.309, p = 0.735 > 0.05).

4.5. Complexity

The complexity Scale is used to measure the complexity of tasks perceived by subjects in the customization process. It is a 7-point Likert scale consisting of the following three questions: (1) Using the product configurator is complicated; (2) Using the product configurator is confusing; (3) Using the product configurator takes a lot of effort [33]. It can be seen from Table 8 that both different navigation design patterns (F = 1.966, p = 0.162 > 0.05) and different pricing methods (F = 2.280, p = 0.105 > 0.05) will not lead to significant differences in the complexity perceived by subjects, but there is a significant interaction between the two factors (F = 3.383, p = 0.036 < 0.05).
The interaction effect regarding complexity is shown in Figure 9. Under the individual module pricing (M = 6.20, Sd = 1.400) and incomplete total product pricing (M = 6.05, Sd = 1.061) methods, the dropdown menu with arrow buttons is of higher complexity than tabs. On the contrary, under the total product pricing method, tabs (M = 6.15, Sd = 1.460) are of higher complexity than the dropdown menu with arrow buttons (M = 5.28, Sd = 1.243).

4.6. Task Performance

To find out whether different navigation design patterns and pricing methods would affect the customization task performance of subjects, the time spent by subjects from the beginning of customization to the submission of product solutions was recorded. According to Table 9, it can be seen that there are significant differences among different navigation design patterns in task performance (F = 7.229, p = 0.008 < 0.05), and the subjects spend more time on tabs (M = 181.50, Sd = 49.328) than on dropdown menu with arrow buttons (M = 164.85, Sd = 46.011). However, there is no significant difference among different pricing methods in task performance (F = 0.161, p = 0.852 > 0.05), and there is no significant interaction between the navigation design pattern and pricing method (F = 0.502, p = 0.606 > 0.05).

5. Discussion

In the present study, the influence of navigation design patterns (tabs and dropdown menu with arrow buttons) and pricing method (individual module pricing, incomplete total product pricing, and total product pricing) under different combinations on the user experience of product configurator was discussed.

5.1. Navigation Design Pattern

Different navigation design patterns lead to significant differences in system usability, and the system usability of tabs is significantly higher than that of the dropdown menu with arrow buttons. This indicates that hypothesis 1 is supported, and this result is caused by the subscale “Usability” of SUS, and the other subscale “Learnability” shows no significant difference. Different navigation design patterns failed to show significant differences in “Learnability”, this may be due to the fact that tabs and dropdown menu with arrow buttons are the simplest and most commonly used navigation design patterns in mobile interfaces [23,24]. The subjects who often use mobile interfaces are so accustomed to their usage that the difference between their learning costs is negligible. Tabs scored higher than dropdown menu with arrow buttons in terms of “Usability”. We believe that the reason for this result is that tabs directly provide an overview of all customizable parts, and the subjects can intuitively see other customizable parts through the overview, which helps them out of being lost easily [20]. While in the case of the dropdown menu with arrow buttons, the subjects have to click the control to call out the dropdown menu to see the overview, which is not intuitive enough for them. Our study also reconfirmed the findings of Harms et al. They conducted usability tests on multiple navigation design patterns and found that tabs had the highest usability [23].
In terms of flexible navigation capability, there are also significant differences between tabs and a dropdown menu with arrow buttons, and tabs are significantly superior to the dropdown menu with arrow buttons in this aspect. Therefore, hypothesis 2 is supported. The possible reason is that tabs display all customizable parts on the interface at the same time, allowing subjects to select customizable parts in the order they want, which makes them feel freedom and ownership [39], while a dropdown menu with arrow buttons can only switch customizable parts in a fixed order by clicking the left and right arrow buttons. Moreover, during the modification of the product configuration solution, it takes only one click to switch to the sneaker part to be modified when using tabs, while it requires clicking the left and right buttons or dropdown menu many times when using the dropdown menu with arrow buttons, and too many clicks will reduce the efficiency of navigation among configuration steps.
As to the perceived control, tabs can provide the subjects with higher perceived control, and hypothesis 3 is supported. Tabs can display all customizable parts of the sneaker on the main interface, while the dropdown menu with arrow buttons can display only the currently selected customizable parts on the main interface. When clicking the left and right buttons to switch the customizable parts, the subjects cannot predict which part they will switch to, and the unpredictability will reduce the perceived control of users [39,46]. Although all customizable parts can be seen by clicking the dropdown menu, it is learned that subjects usually do not take the initiative to use the dropdown menu, because compared to the hierarchical structure of the dropdown menu, users are more inclined to use the linear structure of tabs [47]. Therefore, the system provides a dropdown menu, but the subjects may not use it frequently.
There is no significant difference among different navigation design patterns in perceived enjoyment. Therefore, hypothesis 4 is rejected. Studies have shown that if the product configurator can provide more customization options, it can enhance the perceived enjoyment of users more because users can choose their desired personalized configurations more flexibly [33]. Although different navigation design patterns are different in the convenience of operation, the number of customizable sneaker parts is the same, which may be the direct reason why there is no obvious difference in the perceived enjoyment of subjects.
There are significant differences among different navigation design patterns in task performance, and the subjects’ using tabs take the longest time to complete their customization tasks. By observing the subjects’ operations, it is found that tabs are highly convenient, with the lowest time cost for repeatedly checking and modifying different customizable parts of the sneaker. However, it increases the number of operations of the subjects and prolongs the customization time. On the contrary, for using the dropdown menu with arrow buttons in the configurator, because it is not as convenient as tabs, the subjects are more inclined to finish all customization tasks step by step through the left and right arrows, instead of going back to check the customized sneaker parts, thus achieving faster task performance.

5.2. Pricing Method

There are significant differences among different pricing methods in the perceived control. Under the individual module pricing and incomplete total product pricing methods, the subjects are provided with higher perceived control than under the total product pricing method. Therefore, hypothesis 5 is supported. Our conclusion is similar to the views of Trentin et al. [35], who believe that if the benefit-cost of options is not clearly communicated, consumers’ uncertainty about the final customization solution will be increased. Lee and Allaway pointed out that the perceived control of customers when using computer self-service included two aspects, i.e., predictability and controllability [48]. Predictability means that users can understand and predict what is going to happen, and controllability means that users can effectively modify their previous choices. Under the total product pricing method, users cannot learn about the price of each custom part of the sneaker, so it is difficult for them to predict the impact of different customizable parts on the total price. If the total price exceeds their personal budgets, users cannot accurately modify the customization solution to reduce the total price because the customization price of each part is a “black box”.
There is no significant difference among different pricing methods in the complexity. Therefore, hypothesis 6 is rejected. The research conclusions in this paper are different from those drawn by Dellaert and Dabholkar [29]. They found that customers would pay more trade-offs in PC customization by individual module pricing methods, which would further increase the complexity of the customization process. In the present study, it is considered that the different research conclusions may result from the different custom objects. Personalized customization can be divided into functional customization and aesthetic customization [49]. The custom object of Dellaert and Dabholkar is the computer, which obviously belongs to cognitive-driven functional customization. However, the custom object in the present study is a sneaker, and the subjects need to choose their favorite patterns and colors. Therefore, it is more inclined to be emotion-driven aesthetic customization, and the intervention of emotional factors may weaken the complexity perceived by subjects in the customization process [41]. In addition, for computer customization, it will cost extra hundreds of dollars or even more to choose higher configurations of RAM, CPU, and hard disk. However, the cost of sneaker customization is obviously much lower, and the subjects are insensitive to the pecuniary loss of sneaker customization, which will reduce the trade-offs to be made by subjects [50].

5.3. Interaction between the Variables

As can be seen from Figure 7, there is a significant interaction between navigation design patterns and pricing methods in terms of system usability. Tabs scored higher than the dropdown menu with arrow buttons among all three pricing methods, indicating that users were able to complete navigation tasks more efficiently and with higher satisfaction when using tabs. We believe there are two reasons for this result. Firstly, users generally tend to use navigation with a simpler hierarchy because it has a lower operational threshold and fewer errors when using it [47]. Tabs is a navigation mode with a simple hierarchy, which displays all configuration steps in one hierarchy, while the dropdown menu with arrow buttons can only display all configuration steps in the second hierarchy. Secondly, the faster operation efficiency of tabs also leads to high evaluation by users. Google mentions in the design specifications of the Android operating system that the main advantage of tabs lies in that it enables users to quickly navigate among related contents at the same level of hierarchy [51]. For the dropdown menu with arrow buttons, some subjects said that they could not freely select the steps when clicking the left and right arrow buttons, and multiple clicks were required for selection in the dropdown menu. Thus, it was complicated to operate and less efficient. Our conclusion reconfirms the view of Breuninger et al., that is, arrow buttons are worse than other navigation patterns in terms of input speed, error rate, and user rating [24].
It is found in Figure 8 that as far as the flexible navigation capability is concerned, there is a significant interaction between the pricing method and navigation design pattern. Under the individual module pricing and incomplete total product pricing methods, tabs have a higher flexible navigation capability than the dropdown menu with arrow buttons. However, under the total product pricing method, the dropdown menu with arrow buttons has a higher flexible navigation capability than tabs. It means that the combination of the dropdown menu with arrow buttons and total product pricing can make it easier for subjects to modify the customization solution. The reason for this result is that total product pricing hides the price of a single option so that the subject has to carefully check each customization step to find out which option caused the price to exceed the budget when the plan has to be modified due to the exceeded budget. With this pricing method, the dropdown menu with arrow buttons satisfies the user’s expectation of easily modifying the customization steps. The biggest advantage is that the subjects can check all the customization steps in turn by simply clicking the arrow buttons. While the abundance of information presented by the subjects made it difficult to accurately track each customization step. In this regard, the IOS design guidelines also expressed concern that tabs may convey too much information, arguing that this will lead to going beyond the user’s cognitive ability [52]. The research results show that with different pricing methods, subjects have different goals and behaviors in modifying the customization solutions, and the navigation design must match the subjects’ goals and behaviors to have better navigation performance.
As can be seen from Figure 9, in terms of complexity, there is a significant interaction between the pricing method and navigation design pattern. Under the individual module pricing and incomplete total product pricing methods, the complexity of the dropdown menu with arrow buttons is higher than that of tabs, but under the total product pricing method, the complexity of tabs is higher than that of the dropdown menu with arrow buttons. This is an interesting discovery, and we are curious about the reason for this phenomenon. We found that the total product pricing method hides the price of each customization step, therefore, subjects do not need to consider the price combination of the current customization option and other options at the same time, and only need to focus on the current customization step. In this case, the visual form of the dropdown menu with arrow buttons showing only one customization step is more in line with the subject’s mental model. Albers and Mazur also believe that good information design should provide clear and practical information to users to improve the user’s concentration to complete the current operation [53].
On the contrary, although tabs are more convenient, under the total product pricing method, the subjects are encouraged to repeatedly switch among various customizable parts, which increases the number of cognitive steps of the subjects [29]. This further improves the complexity of the customization process. This suggests that the advantage of tabs in terms of convenience may turn into a disadvantage in some cases, and even if tabs can help users understand the entire customization process more quickly by providing an overview of all customization steps [23], it may cause users to choose back and forth frequently.

6. Conclusions

In the present study, the influence of different pricing methods and navigation design patterns applied in the product configurator on system usability, flexible navigation capability, perceived enjoyment, perceived control, complexity, and task performance is explored. It aims to find the best interaction design solutions that can enhance consumers’ customized experience, thereby strengthening their purchase intention and loyalty, and ultimately promoting the economic sustainability of online personalized customization. In terms of navigation design patterns, our experimental conclusions match the research results of some scholars on tabs and arrow buttons [22,23,24]. It should be pointed out that the evaluation indicators of tabs outperform those of dropdown menu with arrow buttons in most cases, but its advantages no longer exist under total product pricing, which may be because the special pricing methods of total product pricing change the user’s navigational goals by hiding the price of individual modules. In terms of pricing methods, the conclusion of this paper is different from the findings of Dellaert and Dabholkar [29], indicating that not all product customization processes are the same and individual module pricing is more complex than total product pricing, which may be related to the type of customized product, and we should not ignore the impact of emotion on users’ perception of complexity [41].
The main conclusions are drawn as follows: (1) Tabs are more advantageous than a dropdown menu with arrow buttons in system usability, flexible navigation capability, and perceived control of the product configurator. (2) Pricing method will significantly affect the perceived control of users in the customization process. Under the total product pricing method, users will be provided with the lowest perceived control, but there is no obvious difference between individual module pricing and incomplete total product pricing methods in the perceived control of users. (3) The combination of navigation design patterns and pricing methods will affect users’ feelings about the flexible navigation capability. Under the individual module pricing and incomplete total product pricing method, tabs have a higher flexible navigation capability than the dropdown menu with arrow buttons. However, under the total product pricing method, the dropdown menu with arrow buttons has a higher flexible navigation capability than tabs. (4) The combination of navigation design patterns and pricing methods will also affect the complexity perceived by users. Under the individual module pricing and incomplete total product pricing methods, users think that the dropdown menu with arrow buttons is more complex, but under the total product pricing method, tabs are of higher complexity.
Based on the research findings, it is recommended that enterprises should pay close attention to the following points during the design of mobile terminal product configurator: (1) Make use of tabs instead of the dropdown menu with arrow buttons, which can improve the system usability, flexible navigation capability and perceived control of the product configurator; (2) Avoid adopting the pricing method that only displays the overall product price, so as to prevent reducing the perceived control of users in the customization process; (3) Adopt the combination of individual module pricing or incomplete total product pricing and tabs, because, under the two pricing methods, tabs will have a higher flexible navigation capability and lower complexity.
There are also certain limitations of the present study. First of all, the number of subjects may limit our ability to make more extensive confirmation and expand the research findings. Secondly, the research conclusions in this paper are based on the product configurator of the sneaker, and whether the relevant design recommendation can be extended to other product types needs to be further verified. Finally, in order to control unnecessary influencing factors, a quiet experimental site is selected in this study, so the applicability of research conclusions in complex scenes (such as noise, learning while walking, etc.) still needs to be further verified. It is hoped that the present study can stimulate constructive debate on the interaction design of personalized customization.

Author Contributions

Conceptualization, M.Y. and Z.H.; methodology, M.Y.; software, Z.H.; validation, Y.Y.; formal analysis, M.Y. and Z.H.; investigation, M.Y. and Y.Y.; resources, M.Y.; data curation, M.Y. and Z.H.; writing—original draft preparation, M.Y. and Z.H.; writing—review and editing, M.Y. and Y.Y.; visualization, Z.H.; supervision, M.Y. and Y.Y.; project administration, M.Y.; funding acquisition, M.Y. All authors have read and agreed to the published version of the manuscript.

Funding

This research was funded by Zhejiang Provincial Philosophy and Social Sciences Planning Project, grant number 22NDQN229YB; Zhejiang Provincial Education Science Planning Project, grant number 2022SCG338; China Postdoctoral Science Foundation, grant number 2021M702899.

Institutional Review Board Statement

Ethical review and approval were waived for this study, due the evaluation tests performed with subjects were simply focused on usability and quality of experience, no intrusive tests were performed that represent any danger to human health.

Informed Consent Statement

Informed consent was obtained from all subjects involved in the study.

Data Availability Statement

The data presented in this study are available within the paper.

Conflicts of Interest

The authors declare no conflict of interest.

References

  1. Rita, P.; Ramos, R.F. Global Research Trends in Consumer Behavior and Sustainability in E-Commerce: A Bibliometric Analysis of the Knowledge Structure. Sustainability 2022, 14, 9455. [Google Scholar] [CrossRef]
  2. Xiao, L.; Guo, F.; Yu, F.; Liu, S. The Effects of Online Shopping Context Cues on Consumers’ Purchase Intention for Cross-Border E-Commerce Sustainability. Sustainability 2019, 11, 2777. [Google Scholar] [CrossRef] [Green Version]
  3. D’Adamo, I.; González-Sánchez, R.; Medina-Salgado, M.S.; Settembre-Blundo, D. E-Commerce Calls for Cyber-Security and Sustainability: How European Citizens Look for a Trusted Online Environment. Sustainability 2021, 13, 6752. [Google Scholar] [CrossRef]
  4. Paștiu, C.A.; Oncioiu, I.; Gârdan, D.A.; Maican, S.Ș.; Gârdan, I.P.; Muntean, A.C. The Perspective of E-Business Sustainability and Website Accessibility of Online Stores. Sustainability 2020, 12, 9780. [Google Scholar] [CrossRef]
  5. Yi, M.; Wang, Y.; Tian, X.; Xia, H. User experience of the mobile terminal customization system: The influence of interface design and educational background on personalized customization. Sensors 2021, 21, 2428. [Google Scholar] [CrossRef] [PubMed]
  6. Davis, S.M. Future perfect. In Human Resource Management in International Firms; Evans, P., Doz, Y., Laurent, A., Eds.; Palgrave Macmillan: London, UK, 1990; Chapter 2; pp. 18–28. [Google Scholar]
  7. Gembarski, P.C.; Schoormann, T.; Schreiber, D.; Knackstedt, R.; Lachmayer, R. Effects of mass customization on sustainability: A literature-based analysis. In Proceedings of the 9th World Mass Customization & Personalization Conference, Aachen, Germany, 20–21 November 2017. [Google Scholar]
  8. Zhao, H.; McLoughlin, L.; Adzhiev, V.; Pasko, A. 3D Mass customization toolkits design, part I: Survey and an evaluation model. Comput.-Aided Des. Appl. 2019, 16, 204–222. [Google Scholar] [CrossRef]
  9. Sabioni, R.; Wartelle, L.; Daaboul, J.; Le Duigou, J. Attribute-based integrated product process configurator for mass customization. Procedia CIRP 2021, 103, 140–145. [Google Scholar] [CrossRef]
  10. Zhao, H.; McLoughlin, L.; Adzhiev, V.; Pasko, A. 3D Mass Customization Toolkits Design, Part II: Heuristic Evaluation of Online Toolkits. Comput.-Aided Des. Appl. 2019, 16, 223–242. [Google Scholar] [CrossRef]
  11. Franke, N.; Piller, F. Key research issues in user interaction with configuration toolkits in a mass customization system. Int. J. Technol. Manag. 2003, 26, 578–599. [Google Scholar] [CrossRef]
  12. Trentin, A.; Perin, E.; Forza, C. Increasing the consumer-perceived benefits of a mass-customization experience through sales-configurator capabilities. Comput. Ind. 2014, 65, 693–705. [Google Scholar] [CrossRef]
  13. Wang, Y.; Zhao, W.; Wan, W.X. Needs-based product configurator design for mass customization using hierarchical attention network. IEEE Trans. Autom. Sci. Eng. 2020, 18, 195–204. [Google Scholar] [CrossRef]
  14. Wang, Y.; Li, X. Mining product reviews for needs-based product configurator design: A transfer learning-based approach. IEEE Trans. Ind. Inform. 2020, 17, 6192–6199. [Google Scholar] [CrossRef]
  15. Walcher, D.; Piller, F.T. The customization 500: An International Benchmark Study on Mass Customization and Personalization In Consumer E-Commerce; Lulu Inc.: Raleigh, NC, USA, 2021; p. 8. [Google Scholar]
  16. Hvam, L.; Mortensen, N.H.; Riis, J. Product Customization; Springer Science & Business Media: Berlin, Germany, 2008; pp. 33–40. [Google Scholar]
  17. Matzler, K.; Stieger, D.; Füller, J. Consumer confusion in internet-based mass customization: Testing a network of antecedents and consequences. J. Consum. Policy 2011, 34, 231–247. [Google Scholar] [CrossRef]
  18. Gandhi, A.; Magar, C.; Roberts, R. How technology can drive the next wave of mass customization. Bus. Technol. Off. 2014, 32, 2–9. [Google Scholar]
  19. Koufaris, M. Applying the technology acceptance model and flow theory to online consumer behavior. Inf. Syst. Res. 2002, 13, 205–223. [Google Scholar] [CrossRef] [Green Version]
  20. Li, Q.; Luximon, Y. Older adults’ use of mobile device: Usability challenges while navigating various interfaces. Behav. Inf. Technol. 2020, 39, 837–861. [Google Scholar] [CrossRef]
  21. Maguire, M.; Osman, Z. Designing for older and inexperienced mobile phone users. In Proceedings of the HCI International, Crete, Greece, 22–27 June 2003; CRC Press: Boca Raton, NJ, USA; pp. 22–27. [Google Scholar]
  22. Burrell, A.; Sodan, A.C. Web interface navigation design: Which style of navigation-link menus do users prefer? In Proceedings of 22nd International Conference on Data Engineering Workshops (ICDEW’06), Atlanta, GA, USA, 3–7 April 2006; IEEE: Piscataway, NJ, USA; p. 42. [Google Scholar]
  23. Harms, J.; Kratky, M.; Wimmer, C.; Kappel, K.; Grechenig, T. Navigation in long forms on smartphones: Scrolling worse than tabs, menus, and collapsible fieldsets. In Proceedings of IFIP Conference on Human-Computer Interaction, Bamberg, Germany, 14–18 September 2015; Springer: Cham, Switzerland, 2015; pp. 333–340. [Google Scholar]
  24. Breuninger, J.; Popova-Dlugosch, S.; Bengler, K. The safest way to scroll a list: A usability study comparing different ways of scrolling through lists on touch screen devices. In Proceedings of the IFAC Word Congress, Cape Town, South Africa, 24–29 August 2014; Elsevier: Amsterdam, The Netherlands, 2014; pp. 44–51. [Google Scholar]
  25. Harzer, T.S. Value Creation through Mass Customization: An Empirical Analysis of the Requisite Strategic Capabilities. Ph.D. Dissertation, RWTH Aachen University, Aachen, Germany, 2013. [Google Scholar]
  26. Salvador, F.; Forza, C. Principles for efficient and effective sales configuration design. Int. J. Mass Cust. 2007, 2, 114–127. [Google Scholar] [CrossRef]
  27. Randall, T.; Terwiesch, C.; Ulrich, K.T. Principles for user design of customized products. Calif. Manag. Rev. 2005, 47, 68–85. [Google Scholar] [CrossRef] [Green Version]
  28. Homburg, C.; Totzek, D.; Krämer, M. How price complexity takes its toll: The neglected role of a simplicity bias and fairness in price evaluations. J. Bus. Res. 2014, 67, 1114–1122. [Google Scholar] [CrossRef]
  29. Dellaert, B.G.; Stremersch, S. Marketing mass-customized products: Striking a balance between utility and complexity. J. Mark. Res. 2005, 42, 219–227. [Google Scholar] [CrossRef] [Green Version]
  30. Baena, V. The next revolution in mass customization: An insight into the sneaker market. Int. J. Mark. 2016, 4, 87–106. [Google Scholar]
  31. Hyun, H.; Thavisay, T.; Lee, S.H. Enhancing the role of flow experience in social media usage and its impact on shopping. J. Retail. Consum. Serv. 2022, 65, 102492. [Google Scholar] [CrossRef]
  32. Wu, L.; Chiu, M.L.; Chen, K.W. Defining the determinants of online impulse buying through a shopping process of integrating perceived risk, expectation-confirmation model, and flow theory issues. Int. J. Inf. Manag. 2020, 52, 102099. [Google Scholar] [CrossRef]
  33. Dellaert, B.G.; Dabholkar, P.A. Increasing the attractiveness of mass customization: The role of complementary on-line services and range of options. Int. J. Electron. Commer. 2009, 13, 43–70. [Google Scholar] [CrossRef]
  34. Pedroli, E.; Greci, L.; Colombo, D.; Serino, S.; Cipresso, P.; Arlati, S.; Mondellini, M.; Boilini, L.; Giussani, V.; Goulene, K.; et al. Characteristics, usability, and users experience of a system combining cognitive and physical therapy in a virtual environment: Positive bike. Sensors 2018, 18, 2343. [Google Scholar] [CrossRef] [Green Version]
  35. Trentin, A.; Perin, E.; Forza, C. Sales configurator capabilities to avoid the product variety paradox: Construct development and validation. Comput. Ind. 2013, 64, 436–447. [Google Scholar] [CrossRef]
  36. Hildebrand, C.; Häubl, G.; Herrmann, A. Product customization via starting solutions. J. Mark. Res. 2014, 51, 707–725. [Google Scholar] [CrossRef]
  37. Berger, C.; Piller, F. Customers as co-designers. Manuf. Eng. 2003, 82, 42–45. [Google Scholar] [CrossRef]
  38. Salvador, F.; De Holan, P.M.; Piller, F. Cracking the code of mass customization. MIT Sloan Manag. Rev. 2009, 50, 71–78. [Google Scholar]
  39. Gerber, E.M.; Martin, C.K. Supporting creativity within web-based self-services. Int. J. Des. 2012, 6, 85–100. [Google Scholar]
  40. Mehrabian, A.; Russell, J.A. An Approach to Environmental Psychology; The MIT Press: Cambridge, MA, USA, 1974. [Google Scholar]
  41. Turner, F.; Merle, A.; Gotteland, D. Enhancing consumer value of the co-design experience in mass customization. J. Bus. Res. 2020, 117, 473–483. [Google Scholar] [CrossRef]
  42. Deci, E.L.; Ryan, R.M. Intrinsic Motivation and Self-Determination in Human Behavior; Springer Science & Business Media: Berlin, Germany, 2013; pp. 28–29. [Google Scholar]
  43. Tversky, A.; Kahneman, D. Loss aversion in riskless choice: A reference-dependent model. Q. J. Econ. 1991, 106, 1039–1061. [Google Scholar] [CrossRef]
  44. Global and Chinese Sneakers Secondary Market Status Analysis and Market Prospect Analysis Report. Available online: https://www.iimedia.cn/c400//66127.html (accessed on 23 May 2021).
  45. Lewis, J.R.; Sauro, J. The factor structure of the system usability scale. In Proceedings of the International Conference on Human Centered Design, San Diego, CA, USA, 19–24 July 2009; Springer: Berlin, Germany, 2009; pp. 94–103. [Google Scholar]
  46. Averill, J.R. Personal control over aversive stimuli and its relationship to stress. Psychol. Bull. 1973, 80, 286. [Google Scholar] [CrossRef]
  47. Pejovic, V.; Skarlatidou, A. Understanding interaction design challenges in mobile extreme citizen science. Int. J. Hum.–Comput. Interact. 2020, 36, 251–270. [Google Scholar] [CrossRef]
  48. Lee, J.; Allaway, A. Effects of personal control on adoption of self-service technology innovations. J. Serv. Mark. 2002, 16, 553–572. [Google Scholar] [CrossRef]
  49. Schnurr, B.; Scholl-Grissemann, U. Beauty or function? How different mass customization toolkits affect customers’ process enjoyment. J. Consum. Behav. 2015, 14, 335–343. [Google Scholar] [CrossRef]
  50. Park, C.W.; Jun, S.Y.; MacInnis, D.J. Choosing what I want versus rejecting what I do not want: An application of decision framing to product option choice decisions. J. Mark. Res. 2000, 37, 187–202. [Google Scholar] [CrossRef] [Green Version]
  51. Material Design. Available online: https://material.io/design/ (accessed on 11 June 2022).
  52. Human Interface Guidelines. Available online: https://developer.apple.com/design/human-interface-guidelines/components/navigation-and-search/tab-bars (accessed on 11 June 2022).
  53. Albers, M.J.; Mazur, M.B. Content and Complexity: Information Design in Technical Communication; Routledge: New York, NY, USA, 2014; pp. 6–7. [Google Scholar]
Figure 1. Research Hypotheses.
Figure 1. Research Hypotheses.
Sustainability 14 15903 g001
Figure 2. Visual Interaction Features of Two Navigation Designs. (a) Tabs; (b) Dropdown Menu with Arrow Buttons.
Figure 2. Visual Interaction Features of Two Navigation Designs. (a) Tabs; (b) Dropdown Menu with Arrow Buttons.
Sustainability 14 15903 g002
Figure 3. Visual Interaction Features of Three Pricing Methods. (a) Individual Module Pricing; (b) Incomplete Total Product Pricing; (c) Total Product Pricing.
Figure 3. Visual Interaction Features of Three Pricing Methods. (a) Individual Module Pricing; (b) Incomplete Total Product Pricing; (c) Total Product Pricing.
Sustainability 14 15903 g003
Figure 4. Six Different Interaction Designs Adopted in the Experiment.
Figure 4. Six Different Interaction Designs Adopted in the Experiment.
Sustainability 14 15903 g004
Figure 5. Details of Interaction in Dropdown Menu with Arrow Buttons, Tabs, and Incomplete Total Product Pricing.
Figure 5. Details of Interaction in Dropdown Menu with Arrow Buttons, Tabs, and Incomplete Total Product Pricing.
Sustainability 14 15903 g005
Figure 6. Experimental flowchart.
Figure 6. Experimental flowchart.
Sustainability 14 15903 g006
Figure 7. Interaction Effect Regarding Total SUS Score.
Figure 7. Interaction Effect Regarding Total SUS Score.
Sustainability 14 15903 g007
Figure 8. Interaction Effect Regarding Flexible Navigation Capability.
Figure 8. Interaction Effect Regarding Flexible Navigation Capability.
Sustainability 14 15903 g008
Figure 9. The Interaction Diagram Regarding Complexity.
Figure 9. The Interaction Diagram Regarding Complexity.
Sustainability 14 15903 g009
Table 1. Description of the characteristics of different interface designs.
Table 1. Description of the characteristics of different interface designs.
FactorLevelsDescription
navigation design patterntabs
  • Display all customizable parts of the product at the same time.
  • Users can directly click all customizable parts to switch to the parts to be customized.
dropdown menu with arrow buttons
  • Only display the part that is currently being customized.
  • If the user wants to switch the customizable parts, he/she needs to click the left and right arrow buttons or click the dropdown menu to call out all the customizable parts, and then click the part that he/she wants to customize.
pricing methodindividual module pricing
  • Display the total price of the product at the top.
  • Display the price of the option in the customization option at the bottom.
incomplete total product pricing
  • Display the total price of the product at the top.
  • There is a button for price detail at the top, click this button to display the price details of each selected option.
total product pricing
  • Display the total price of the product at the top and hide the price of each custom option.
Table 2. Descriptive Statistics and Two-way ANOVA for the Total System Usability Scale (SUS) Score.
Table 2. Descriptive Statistics and Two-way ANOVA for the Total System Usability Scale (SUS) Score.
Total SUS ScoreDropdown Menu with Arrow ButtonsTabsMNDPPMNDP × PM
MSDMSDMSDppp
A35.916.52542.147.18939.037.5060.004 **0.6320.038 *
B38.996.44940.607.85539.797.187
C39.898.68940.387.89240.138.251
M38.267.43341.047.628
A = individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = Navigation Design Pattern, PM = Pricing Method. * p < 0.05, ** p < 0.01.
Table 3. Descriptive Statistics and Two-factor Analysis of the Learnability of SUS.
Table 3. Descriptive Statistics and Two-factor Analysis of the Learnability of SUS.
SUS
Learnability
Dropdown Menu with Arrow ButtonsTabsMNDPPMNDP × PM
MSDMSDMSDppp
A7.362.1457.551.4887.461.8370.8230.7400.397
B7.582.2786.992.1857.292.239
C7.432.3457.662.4147.552.368
M7.462.2407.402.071
A = individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = navigation design Pattern, PM = pricing method.
Table 4. Descriptive Statistics and Two-factor Analysis of the Usability of SUS.
Table 4. Descriptive Statistics and Two-factor Analysis of the Usability of SUS.
SUS
Usability
Dropdown Menu with Arrow ButtonsTabsMNDPPMNDP × PM
MSDMSDMSDppp
A28.555.42634.597.00331.576.9260.002 **0.5970.032 *
B31.406.91033.616.86532.516.933
C32.458.28032.717.30932.587.761
M30.807.10733.647.044
A = individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = navigation design Pattern, PM = pricing method. * p < 0.05, ** p < 0.01.
Table 5. Descriptive Statistics and Two-factor Analysis of the Flexible Navigation Capability.
Table 5. Descriptive Statistics and Two-factor Analysis of the Flexible Navigation Capability.
Flexible Navigation CapabilityDropdown Menu with Arrow ButtonsTabsMNDPPMNDP × PM
MSDMSDMSDppp
A9.850.86410.350.66210.100.8050.000 ***0.0710.001 **
B9.730.98710.700.99210.211.099
C9.950.9049.830.9589.890.928
M9.840.91710.290.947
A = individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = navigation design Pattern, PM = pricing method. ** p < 0.01, *** p < 0.001.
Table 6. Descriptive Statistics and Two-factor Analysis of the Perceived Enjoyment.
Table 6. Descriptive Statistics and Two-factor Analysis of the Perceived Enjoyment.
Perceived EnjoymentDropdown Menu with Arrow ButtonsTabsMNDPPMNDP × PM
MSDMSDMSDppp
A15.331.45714.901.46415.111.4670.6870.8740.176
B15.131.38114.931.38515.031.378
C14.801.38115.201.57215.001.484
M15.081.41215.011.470
A = individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = navigation design Pattern, PM = pricing method.
Table 7. Descriptive Statistics and Two-factor Analysis of the Perceived Control.
Table 7. Descriptive Statistics and Two-factor Analysis of the Perceived Control.
Perceived ControlDropdown Menu with Arrow ButtonsTabsMNDPPMNDP × PM
MSDMSDMSDppPost hocp
A20.582.17120.931.81720.751.9970.048 *0.000 ***(A, B) > C0.735
B20.951.69421.251.48121.101.588
C19.151.40619.851.84719.501.669
M20.231.93420.681.811
A = individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = navigation design Pattern, PM = pricing method. * p < 0.05, *** p < 0.001.
Table 8. Descriptive Statistics and Two-factor Analysis of the Complexity.
Table 8. Descriptive Statistics and Two-factor Analysis of the Complexity.
ComplexityDropdown Menu with Arrow ButtonsTabsMNDPPMNDP × PM
MSDMSDMSDppp
A6.201.4006.101.6306.151.5100.1620.1050.036 *
B6.051.0616.001.3016.031.180
C5.281.0626.151.4605.711.343
M5.841.2436.081.459
A = individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = navigation design Pattern, PM = pricing method. * p < 0.05.
Table 9. Descriptive Statistics and Two-factor Analysis of the Task Performance (Unit: Second).
Table 9. Descriptive Statistics and Two-factor Analysis of the Task Performance (Unit: Second).
Task
Performance
Dropdown Menu with Arrow ButtonsTabsMNDPPMNDP × PM
MSDMSDMSDppp
A164.7852.288178.0846.076171.4249.4220.008 **0.8520.606
B166.8837.219178.1750.679172.5344.544
C162.9048.291188.2551.604175.5851.270
M164.8546.011181.5049.328
A = individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = navigation design Pattern, PM = pricing method. ** p < 0.01.
Publisher’s Note: MDPI stays neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Share and Cite

MDPI and ACS Style

Yi, M.; Huang, Z.; Yu, Y. Creating a Sustainable E-Commerce Environment: The Impact of Product Configurator Interaction Design on Consumer Personalized Customization Experience. Sustainability 2022, 14, 15903. https://doi.org/10.3390/su142315903

AMA Style

Yi M, Huang Z, Yu Y. Creating a Sustainable E-Commerce Environment: The Impact of Product Configurator Interaction Design on Consumer Personalized Customization Experience. Sustainability. 2022; 14(23):15903. https://doi.org/10.3390/su142315903

Chicago/Turabian Style

Yi, Minzhe, Zihao Huang, and Yuxiang Yu. 2022. "Creating a Sustainable E-Commerce Environment: The Impact of Product Configurator Interaction Design on Consumer Personalized Customization Experience" Sustainability 14, no. 23: 15903. https://doi.org/10.3390/su142315903

Note that from the first issue of 2016, this journal uses article numbers instead of page numbers. See further details here.

Article Metrics

Back to TopTop