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

: Promoting consumers’ willingness to pay is crucial to creating a sustainable e-commerce environment, and the interaction design of the product conﬁgurator plays a key role in this. In the present study, the product conﬁgurator, which is indispensable in online customization, is adopted as the research object to analyze the inﬂuence 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, ﬂexible 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 signiﬁcant differences in system usability, ﬂexible navigation capability, and perceived control of the product conﬁgurator, and tabs are better than dropdown menu with arrow buttons in these aspects. (2) Different pricing methods will signiﬁcantly 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 ﬂexible navigation capability and complexity, and under the individual module pricing and incomplete total product pricing methods, users think that tabs have a higher ﬂexible navigation capability and lower complexity. However, under the total product pricing method, users are convinced that dropdown menu with arrow buttons has a higher ﬂexible navigation capability and lower complexity. The research results are of great signiﬁcance to both interface interaction design and online customization. Furthermore, the interaction design method of price presentation and navigation design of the product conﬁgurator 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.


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.

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 configura-tor.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 Sections 2.1 and 2.2.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 Sections 2.1 and 2.2.

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

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.
Sustainability 2022, 14, x FOR PEER REVIEW 5 of 22 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.
(a) (b) 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 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.

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.
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.

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.

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 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.

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.

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.

•
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.
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.

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

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.
Sustainability 2022, 14, x FOR PEER REVIEW 11 of 22 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.

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.

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.

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).

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.

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.

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).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).

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).

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).

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.

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).
Sustainability 2022, 14, x FOR PEER REVIEW 14 of 22 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).

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).

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 twofactor 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).

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).

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).

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).

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).

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.

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.

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].

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.

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.

Figure 2 .
Figure 2. Visual Interaction Features of Two Navigation Designs.(a) Tabs; (b) Dropdown Menu with Arrow Buttons.

Figure 2 .
Figure 2. Visual Interaction Features of Two Navigation Designs.(a) Tabs; (b) Dropdown Menu with Arrow Buttons.

Figure 3 .
Figure 3. Visual Interaction Features of Three Pricing Methods.(a) Individual Module Pricing; (b) Incomplete Total Product Pricing; (c) Total Product Pricing.

Figure 3 .
Figure 3. Visual Interaction Features of Three Pricing Methods.(a) Individual Module Pricing; (b) Incomplete Total Product Pricing; (c) Total Product Pricing.

Figure 4 .
Figure 4. Six Different Interaction Designs Adopted in the Experiment.Figure 4. Six Different Interaction Designs Adopted in the Experiment.

Figure 4 .
Figure 4. Six Different Interaction Designs Adopted in the Experiment.Figure 4. Six Different Interaction Designs Adopted in the Experiment.

Figure 5 .
Figure 5. Details of Interaction in Dropdown Menu with Arrow Buttons, Tabs, and Incomplete Total Product Pricing.

Figure 5 .
Figure 5. Details of Interaction in Dropdown Menu with Arrow Buttons, Tabs, and Incomplete Total Product Pricing.

Figure 7 .
Figure 7. Interaction Effect Regarding Total SUS Score.

Figure 7 .
Figure 7. Interaction Effect Regarding Total SUS Score.

Figure 8 .
Figure 8. Interaction Effect Regarding Flexible Navigation Capability.

Figure 8 .
Figure 8. Interaction Effect Regarding Flexible Navigation Capability.

A
= individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = navigation design Pattern, PM = pricing method.* p < 0.05.

Sustainability 2022 ,
14, x FOR PEER REVIEW 16 of 22 are of higher complexity than the dropdown menu with arrow buttons (M = 5.28, Sd = 1.243).

Figure 9 .
Figure 9.The Interaction Diagram Regarding Complexity.

Figure 9 .
Figure 9.The Interaction Diagram Regarding Complexity.

Table 1 .
Description of the characteristics of different interface designs.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.

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.

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.

Table 4 .
Descriptive Statistics and Two-factor Analysis of the Usability of SUS.

Table 5 .
Descriptive Statistics and Two-factor Analysis of the Flexible Navigation Capability.

Table 6 .
Descriptive Statistics and Two-factor Analysis of the Perceived Enjoyment.

Table 6 .
Descriptive Statistics and Two-factor Analysis of the Perceived Enjoyment.

Table 7 .
Descriptive Statistics and Two-factor Analysis of the Perceived Control.

Table 8 .
Descriptive Statistics and Two-factor Analysis of the Complexity.

Table 9 .
Descriptive Statistics and Two-factor Analysis of the Task Performance (Unit: Second).
A = individual module pricing, B = incomplete total product pricing, C = total product pricing, NDP = navigation design Pattern, PM = pricing method.** p < 0.01.

Table 9 .
Descriptive Statistics and Two-factor Analysis of the Task Performance (Unit: Second).