1 Introduction

In today’s fast-paced environment, technologically savvy consumers are increasingly demanding unprecedented levels of quality for their products as their preferences diversify [1]. Product customization has become an effective way to meet their changing needs, giving them an active and participatory role in the design process. As such, product customization has been widely accepted and used in different industries and markets [2,3,4]. However, it can be costly for manufacturers to offer product customization and challenging to precisely understand the needs of their clients [5]. To increase the efficiency of product customization, the concept of “human–computer collaborative design” integrating computing intelligence and customer involvement mechanism came into being [6]. One of the methods to realize the human–computer collaborative design is to use interactive genetic algorithm (IGA). Due to the interactive nature of IGA, users need to assign fitness value to evolutionary individuals, and then carry out genetic evolution of crossover and variation until satisfactory individuals are obtained. This method, which combines human subjective preference and rational computer calculation, has attracted the attention of relevant scholars in product customized design.

With technological advancements, the customization of products is becoming available through mobile applications. Several enterprises try to use product configurations in their mobile apps [7], such as “Nike By You,” which allows Nike fans to customize the material, color and other attributes of their sneakers online. It shows that mobile application is a potential platform to meet consumers’ personalized design wishes. However, it also needs to be easy to use and operate, which presents some challenges for mobile app designers. Therefore, this paper takes into consideration the intricacy of human–computer interaction in mobile apps, and combines subjective user input with IGA-based computational models to study how to efficiently carry out product customization design on a mobile terminal interface.

One of the most apparent problems with mobile apps, especially when using IGAs, is the small interface. Conventionally, researches on IGA usually use a computer screen whose size is large enough to present multiple individuals, making it easy for users to compare individuals and assign individual fitness. By contrast, the limited visual area of a mobile screen inevitably affects the user’s cognitive efficiency. In addition, inappropriate interactive methods used in IGAs will also affect the user’s fitness assignment, resulting in the inability to accurately identify user preferences [8].

Given all of that, an interactive evolutionary method based on swipe gestures is proposed in this paper and applied in personalized customization of traditional brocade patterns of the Zhuang ethnic group. The method includes the following aspects. First of all, to ensure image quality, each individual is presented to the user in a stack view. Then, the binary evaluation was launched through the swiping gesture on the touch screen. Swiping to the left indicates “like” the individual, and swiping to the right suggests “dislike”. Then, individual fitness function is established based on hesitancy degree reflected by the evaluation time of each individual, and the maximum entropy principle, which is used to infer the most reasonable value under a given probability distributions, to estimate the fitness of the individual. Then, in case of adverse effect caused by continuous disliked individuals in the stack view, a prediction and replacement mechanism for disliked individuals is proposed in this study. Finally, application and validation are carried out in the personalized design of traditional brocade patterns of the Zhuang ethnic group in China.

The remaining sections of this paper are as follows: in Sect. 2, the literature on product customization and evaluation methods of individuals that incorporate IGAs is reviewed. Section 3 provides an introduction on the interactive evolutionary design method for mobile product customization. In Sect. 4, the customization system with traditional brocade patterns based on interactive evolutionary design method is summarized, and its effectiveness is verified by comparative experiments with traditional IGA. In the last section, we discuss the practical contributions of the proposed method and briefly outline its shortcomings and the direction of future work.

2 Literature Review

2.1 Product Customization

Successful product customization depends on its efficiency in designing and producing personalized products [9]. Therefore, some strategies and methods suitable for mass customization are applied to improve the diversity of product design and production efficiency, such as product family design [10], modular design [11], and engineer-to-order design [12]. However, these methods cannot dynamically respond to changes in user needs. Therefore, Petiot and Dagher [13] proposed a product customization method oriented to user preferences to constrain the design process, by dynamically identifying user preferences, and efficiently obtaining solutions that meet the needs of users. In particular, organic combination with mobile digital terminals is becoming a trend of personalized customization [14]. For instance, Cai et al. [15] developed Wowtao, a human–computer interactive design system for virtual pottery design on mobile apps, which is easy to operate and can help users generate attractive and satisfactory 3D pottery designs in a few minutes.

One of the most important tasks of product customization is to understand the preferences of users [16]. The current study mainly suggests two aspects that elucidate these preferences. On the one hand, the preferences are based on consumer data. For instance, Li and Bai [17] used a utility analysis or quantitative modeling to identify consumer preferences, such as fuzzy clustering, Wang et al. [18] used an analytic hierarchy process integrated with a fuzzy Kano model, and Park et al. [19] used compensatory and non-compensatory models. However, these methods are all based on consumer-generated data to identify preferences on user groups, but there is no focus on preference recognition on the personal user. On the other hand, consumers can generate design schemes that conform to their preferences through a product configuration system. The key to the operation of product configuration system is to customize the design attributes of product modules [20]. Kamis et al. [21] also concluded that personalized design schemes could be obtained through user-defined module attributes. However, the quantity and presentation of custom modules inevitably affect consumer cognition and behaviour, thus affecting the efficiency of making decisions [22, 23]. Yi et al. [14] stated that the overall presentation of the design scheme is more conducive to user cognition than the customization of local modules, which can reduce the time spent on irrelevant information. IGA, as a human–computer interactive genetic algorithm, effectively integrates all of the advantages above. It requires users to evaluate their overall satisfaction with evolutionary individuals (design schemes) in real time. Furthermore, based on local coding of the individual, computer carries out evolution of crossover and mutation to generate new schemes. In view of this, this paper examines an IGA-based interactive evolutionary design method for product customization, and considers the presentation of individuals and human–computer interaction issues in mobile devices for a more effective customization.

2.2 Interactive Genetic Algorithms

In the process of human–computer collaborative design with IGA, computer explore candidate schemes through genetic operation, and gradually meet evolutionary goals with the convergence of the algorithm.[24]. During the evaluation process with IGAs, users evaluate their overall satisfaction with evolutionary individuals, which depends on their preferences, cognitive habits and emotions [25]. This is why IGAs have been widely applied in exploring the personalized designing process of products [6, 26,27,28]. However, inappropriate evaluation methods will consume more cognitive resources and cause user fatigue, which would not be able to capture user preferences [29]. In this regard, the literature reviews two methods to solve these problems: an evaluation based on (1) assigned fitness, and an evaluation based on (2) non-assigned fitness. The paper compares and analyzes their differences in evaluation operations, cognitive load, and algorithm performance, as shown in Table 1.

Table 1 Comparison of evaluation methods of individuals with IGAs
Full size table

The methods of assigned fitness pay little attention to the evaluation operation, even additional steps complicate the evaluation operation. In contrast, the evaluation operation of non-assigned fitness generally more user-friendly, which can reduce user’s cognitive load, so it is more suitable for personalized customization scenarios.

Regardless of the evaluation method, the user needs to use the interface as the evaluation medium. A user-friendly presentation of information on the interface can enhance the algorithm performance [36]. For instance, in Zhou et al.’s study [27], the individuals are clustered and marked with different colors, beneficial for quick comparison and evaluation, as shown in Fig. 1a. Cheng et al. [8] divide the screen into even parts according to the distribution of areas of interest (AOI), as shown in Fig. 1b, removing the central one to avoid interference from visual focus. Yan et al. [37] present the individuals with three-dimensional graphics to accommodate a whole population simultaneously (Fig. 1c). Besides, Nishino et al. [38] proposed an IGA-based method that can be used on mobile screens while ensuring basic visual quality (Fig. 2). They designed three layouts and concluded that comparability and viewability are two key factors that affect the evolutionary efficiency on mobile screens. Nevertheless, due to the limited information displayed on smaller screen, users have to scroll [39] up and down frequently to compare the differences between individuals, which easily leads to distraction [40] and also affects the evolutionary efficiency.

Fig. 1
figure 1

Presentation of individuals on the computer screen with IGAs [8, 27, 37]

Full size image
Fig. 2
figure 2

Three layouts using method to design 3D graphics based on IGA [38]

Full size image

In summary, this paper takes into consideration that users can only observe and evaluate one individual at a time. As such, we propose an appropriate method to evaluate individuals to resolve the evaluation problems caused by the absence of comparable individuals. We also understand the perils of cognitive load which can easily cause fatigue of users, and therefore, we use binary evaluation with non-assigned fitness.

3 Interactive Evolutionary Design Method for Mobile App

In this study, an IGA-based interactive evolutionary design method for mobile app is proposed to help consumers customize products on mobile devices, aiming at reducing user’s fatigue, accelerating the convergence of algorithm and enhancing user experience. First of all, in terms of human–computer interaction, we try to solve the screen space problem by presenting individuals in a stack views, and allow users to evaluate individuals by simple sliding gestures, which is not only simplifies operation process but also in line with mobile user’s usage habits, as detailed in Sect. 3.1. Secondly, to ensure the accuracy of individual fitness value and strengthen the convergence of algorithm, we adopt an estimation method combined with hesitation pattern to obtain more accurate fitness value, as detailed in Sect. 3.2. Thirdly, due to the random arrangement of individuals in the stack view, users inevitably evaluate a string of individuals as “disliked” individuals. This successive appearance of disliked individuals will upset users and reduce the efficiency of evolution. Therefore, for better user experience and more efficient evolutionary design, an ongoing prediction and replacement of “disliked” individuals is proposed here. Section 3.3 introduces some specific mechanisms and details. Figure 3 shows the overall framework of the evolutionary design method for mobile customization. The input of the method includes a series of parameters such as population size, crossover rate, mutation rate and attributes’ weight, and the output is the design scheme.

Fig. 3
figure 3

Framework of proposed method

Full size image

3.1 Binary Evaluation of Individuals in the Stack View

This section proposes a human–computer interaction model designed to cope with the screen space problem and realize simplified evaluation.

Considering the limited visible area of mobile devices, to ensure the image quality, we use stacked views to present individuals. Compared with the scrolling view, this layout ensures that the process of “viewing, thinking, decision-making and evaluation” is not affected by other individuals, thus reducing the cognitive load. According to the user’s habit, the natural gesture of sliding can quickly drag the interface elements, and different directions represent different decisions. In this regard, the paper proposes a binary evaluation mechanism using a stack view, which entrusts the significance of sliding direction, namely, swiping to the left indicates “like” the individual, and swiping to the right indicates “dislike”. When the evaluation of the current individual is completed, the following individual will appear simultaneously, as shown in Fig. 4.

Fig. 4
figure 4

Binary evaluation in the stack view

Full size image

3.2 Fitness Estimation Combined with Hesitation Patterns

The relationship between the time spent on evaluation of individuals and the fitness of individuals can be established by the following aspect.

3.2.1 Determining Hesitation Based on Time Spent on Evaluation

Generally, when dealing with perceptual decision-making problems, a shorter time taken to evaluate an individual indicates a clearer preference for the individual and less hesitancy [41]. Therefore, the hesitancy of the evaluation can be expressed by recording how long users evaluate individuals.

Let \({x}_{i}(t)\) denote an individual in the population of the \(t\)-th generation,\(i=\mathrm{1,2},\dots ,N\), where N is the size of the population. Let \(f({x}_{i}\left(t\right))\) denote the fit of \({x}_{i}(t)\),and \(f({x}_{i}\left(t\right))\) is defined within the range of \(\left[{f}_{min},{f}_{max}\right]\). In the evaluation of the yes/no binary dataset, the evaluation results of individuals are divided into two categories: “liked” and “disliked”. Let \({S}_{s}(t)\) denote the set of individuals evaluated as “liked”, and \({S}_{u}(t)\) denote the set of individuals that are “disliked” in the \(t\)-th generation. Obviously, \({S}_{s}\left(t\right)\cup {S}_{u}\left(t\right)=x\left(t\right)\). Let \(T\left({x}_{i}\left(t\right)\right)\) denote the evaluation time of an individual \({x}_{i}(t)\), and \({H}_{i}\) denote the degree of hesitancy while conducting the evaluation. Therefore, the relationship between \(T({x}_{i}(t))\) and \({H}_{i}\) can be expressed as follows:

$${H}_{i}=\left\{\begin{array}{c}\frac{T({x}_{i}(t))}{\underset{{x}_{k }\in {S}_{s}(t)}{\mathit{max}}\left(T({x}_{k}(t))\right)},{x}_{i}(t)\in {S}_{s}\left(t\right)\\ \frac{T({x}_{i}(t))}{\underset{{x}_{k }\in {S}_{u}(t)}{\mathit{max}}\left(T({x}_{k}(t))\right)},{x}_{i}(t)\in {S}_{u}\left(t\right)\end{array}\right.$$
(1)

Equation (1) uses the time taken to evaluate the individual to represent the hesitancy degree. Less time taken to evaluate the individual means less hesitancy.

3.2.2 Estimating Fitness of the Individual with Hesitancy Based on the Maximum Entropy Principle

The probability that the fitness of the individual \(x\) falls within \(\left[{f}_{min},{f}_{max}\right]\) is only related to the length of the interval. Therefore, it can be considered that the fit of the individual in the population is randomly distributed within \(\left[{f}_{min},{f}_{max}\right]\). In view of the fact that the maximum entropy principle [42] estimates the fitness of an individual and allows the best to be chosen under given probability distributions and based on existing information, it is suitable for solving uncertainty in decision-making problems where the state space of the process is a continuous random variable. Therefore, the solution of the fit can be transformed into a maximum entropy (level of hesitancy) distribution on the closure \(\left[{f}_{min},{f}_{max}\right]\).

According to the method for solving maximum entropy problems, the maximum distribution of the entropy is obtained for a given distribution. When it is a convex set, the only solution is:

$$\mathrm{max}H\left(x\right)=-{\int }_{x\in \theta }\mu \left(x\right)\mathrm{ln}\mu \left(x\right)dx$$
(2)

where \(\mu \left(x\right)\) is the probability density function of \(x\), and the domain of \(x\) is \(\theta\).

Theorem 1: If the random variable \(x\) is a function on a finite interval [\(a,b\)], and its probability function is \(\mu \left(x\right)\), then \(\mu \left(x\right){=}\frac{1}{b-a}\) causes \(H\left(x\right)\) to reach the maximum.

From this theorem, the fit of the individual \(f({x}_{i}\left(t\right))\) is the most reasonable with a uniform distribution in \(\left[{f}_{min},{f}_{max}\right]\), that is, the probability function is \(\mu (f({x}_{i}\left(t\right)))=\frac{1}{{f}_{max}-{f}_{min}}\). Let [\({\underline{f}}_{s},{\overline{f} }_{s}\)] denote the fit of the individual interval in \({S}_{s}(t)\), [\({\underline{f}}_{u},{\overline{f} }_{u}\)] denotes the fit of the individual interval in \({S}_{u}(t)\), and [\({\underline{f}}_{s},{\overline{f} }_{s}\)], and [\({\underline{f}}_{u},{\overline{f} }_{u}\)] \(\in \left[1\right.,\left.+\infty \right)\). According to Theorem 1, the fit of the individual is uniformly distributed in [\({\underline{f}}_{s},{\overline{f} }_{s}\)], [\({\underline{f}}_{u},{\overline{f} }_{u}\)], \({\overline{f} }_{s}{=}{f}_{\text{max}}\), \({\underline{f}}_{u}{=}{f}_{\text{min}}\), \({\underline{f}}_{s} \approx {\overline{f} }_{u}\), and.

$$\underset{\_}{{f}_{s}}=\left({f}_{max}-{f}_{min}\right)\times \frac{\underset{{x}_{k}(t)\in {S}_{s}(t)}{\mathit{num}}({x}_{k}(t))}{N}.$$
(3)

Equation (3) shows that the boundaries of the fit between the liked and the set of disliked individuals are determined by the ratio of the number of individuals in the set of liked individuals to the population. In a certain generation, the number of individuals in the set of liked individuals is more than the number of individuals in the set of disliked individuals, which indicates that the current population has a greater evolutionary depth, so the lower limit of the fit of individuals in the set of liked individuals is higher.

According to Guo and Chen [29], we can calculate \(f({x}_{i}\left(t\right))\) by considering Eqs. (1) and (2):

$$\left\{\begin{array}{c}{\int }_{f({x}_{i}(t))}^{{\overline{f} }_{s}}\frac{1}{{\overline{f} }_{s}-{\underline{f}}_{s}}\left(-\mathrm{ln}\frac{1}{{\overline{f} }_{s}-{\underline{f}}_{s}}\right)dT\left({x}_{i}\left(\mathrm{t}\right)\right)={H}_{i},f({x}_{i}(t))\in {S}_{s}\left(t\right)\\ {\int }_{{\underline{f}}_{u}}^{f({x}_{i}(t))}\frac{1}{{\overline{f} }_{u}-{\underline{f}}_{u}}\left(-\mathrm{ln}\frac{1}{{\overline{f} }_{u}-{\underline{f}}_{u}}\right)dT\left({x}_{i}\left(\mathrm{t}\right)\right)={H}_{i},f({x}_{i}(t))\in {S}_{u}\left(t\right)\end{array}\right.$$
(4)

Solving Eq. (3) gives

$$f\left({x}_{i}\left(t\right)\right)=\left\{\begin{array}{c}{\overline{f} }_{s}-\frac{{H}_{i}\left({\overline{f} }_{s}-{\underline{f}}_{s}\right)}{\varepsilon -\mathrm{ln}\frac{1}{{\overline{f} }_{s}-{\underline{f}}_{s}}}, f({x}_{i}(t))\in {S}_{s}\left(t\right) \\ {\overline{f} }_{u}+\frac{{H}_{i}\left({\overline{f} }_{u}-{\underline{f}}_{u}\right)}{\varepsilon -\mathrm{ln}\frac{1}{{\overline{f} }_{u}-{\underline{f}}_{u}}}, f\left({x}_{i}\left(t\right)\right)\in {S}_{u}\left(t\right)\end{array},\right.$$
(5)

where \(\varepsilon\) is a very small normal preset number to prevent the denominator from being 0. The physical meaning of Eq. (5) is that the probability distribution density of the fit of the individual \({x}_{i}(t)\) in the set of liked individuals is \(\frac{1}{{\overline{f} }_{s}{-\underline{f}}_{s}}\) (in the set of disliked individuals, it is \(\frac{1}{{\overline{f} }_{u}{-\underline{f}}_{u}}\)), the fit of the individual when the information entropy (\({H}_{i}\)) reaches the maximum with time \(T({x}_{i}(t))\) is obtained. \(f({x}_{i}\left(t\right))\) is composed of two parts; the fractional part that includes the impact of hesitancy on the fitness value is always more than 0. Equation (5) is used to create the mapped relationship for time used to evaluate the individual to establish fit as shown in Fig. 5. For individuals in the set of liked individuals, less time for evaluation means less hesitancy and therefore better fitness of the individual. For individuals in the set of disliked individuals, a shorter time for evaluation means less hesitancy and lower fitness of the individual.

Fig. 5
figure 5

Mapped relationship from time required to evaluate to establishing fitness

Full size image

3.3 Ongoing Prediction and Replacement of Disliked Individuals

3.3.1 Methodology

With the progress of individual evaluation, two databases of liked and disliked individuals representing user preference are updating. Based on the databases, whether the following individual deviates from user preference is predicted by calculating the distance between individuals. When it is determined that the following individual deviates from user preferences to a certain extent, a new individual that approximates user preferences will be generated. The prediction and replacement of disliked individuals would give a better experience to users and increase the evolution efficiency.

3.3.2 Trigger Conditions and Steps

The ongoing prediction and replacement of disliked individuals include two trigger conditions and three steps (Fig. 6).

Fig. 6
figure 6

Trigger conditions and steps for the ongoing prediction and replacement of disliked individuals

Full size image

Let \({X}_{l}(t)\), \({X}_{m}(t)\) denote two adjacent individuals in the stack view in the \(t\)-th generation. Two databases are built; one of liked individuals database \({D}_{s}=\left\{{X}_{{s}_{1}},{X}_{{s}_{2}},\cdots ,{X}_{{s}_{2N}}\right\}\) and the other of disliked individuals database \({D}_{u}=\left\{{X}_{{u}_{1}},{X}_{{u}_{2}},\cdots ,{X}_{{u}_{2N}}\right\}\).

Condition 1(\({X}_{l}\left(t\right)\) is determined to be a disliked individual) indicates whether it triggers the prediction of the following individual. When it is met, the predicting of \({X}_{m}(t)\) is triggered. The first step of the calculation is then done, which is to calculate separately: (1) The distance between \({X}_{m}(t)\) and \({X}_{l}\left(t\right)\), which is denoted as \({Dist}_{{X}_{l}\left(t\right),{X}_{m}(t)}\), shorten as \(K\); (2) The minimum distance between \({X}_{m}(t)\) and individuals of \({L}_{s}\), which is denoted as \(\underset{{X}_{s}\in {L}_{s}}{\mathit{min}}{Dist}_{{X}_{m}\left(t\right),{X}_{s}}\), shorten as \(I\); (3) The minimum distance between \({X}_{m}(t)\) and individuals of \({L}_{u}\), which is denoted as \(\underset{{X}_{u}\in {L}_{u}}{\mathit{min}}{Dist}_{{X}_{m}\left(t\right),{X}_{u}}\), shorten as \(J\).

Condition 2 (\(I>min(J,K\))) indicates the difference between \({\mathrm{X}}_{\mathrm{m}}(\mathrm{t})\) and \({\mathrm{X}}_{\mathrm{l}}(\mathrm{t})\), \({\mathrm{X}}_{\mathrm{m}}(\mathrm{t})\) and \({\mathrm{L}}_{\mathrm{u}}\) are small, and \({\mathrm{X}}_{\mathrm{m}}\left(\mathrm{t}\right)\) is very likely to be judged as a disliked individual, so \({\mathrm{X}}_{\mathrm{m}}\left(\mathrm{t}\right)\) needs to be replaced. When it is met, the second step is to generate a new individual. To avoid prematurity by keeping the diversity of population, the least difference with \({\mathrm{X}}_{\mathrm{m}}(\mathrm{t})\) in the liked database, \({\mathrm{X}}_{{\mathrm{S}}_{\mathrm{s}}}=\underset{{\mathrm{X}}_{\mathrm{s}}\in {\mathrm{L}}_{\mathrm{s}}}{\mathrm{argmin}}{\mathrm{Dist}}_{{\mathrm{X}}_{\mathrm{m}}\left(\mathrm{t}\right),{\mathrm{X}}_{\mathrm{s}}}\), is selected to cross with \({\mathrm{X}}_{\mathrm{m}}\left(\mathrm{t}\right)\). After crossing, the new individual \({\mathrm{X}}_{\mathrm{N}}\) was generated. Then, in the step 3, \({\mathrm{X}}_{\mathrm{N}}\) replaces \({\mathrm{X}}_{\mathrm{m}}\left(\mathrm{t}\right)\).

3.3.3 Calculating Individual Distance

Since the focus of this research is on traditional Zhuang Chinese brocade patterns, its phenotype is divided into two parts: color and pattern, so it is necessary to clarify the method to calculate the distance between color and pattern.

First, the calculation of color differences between individuals is done as follows. The color of each individual phenotype is defined as

$$C=\left\{\left({r}_{1},{g}_{1},{b}_{1}\right),\left({r}_{2},{g}_{2},{b}_{2}\right),\dots ,\left({r}_{n},{g}_{n},{b}_{n}\right)\right\}$$
(6)

where \(n\) denotes the number of areas with color, and \({r}_{n}\),\({b}_{n},{g}_{n}\) denote the RGB value of the color of the \(n\)-th area (color is measured on a scale of 0–255) respectively. Then the distance between the color of two individuals \({x}_{i}(t)\) and \({x}_{j}(t)\) can be expressed as

$${C}_{ij}={\sum }_{k=1}^{n}\sqrt{{({r}_{ik}-{r}_{jk})}^{2}+{({g}_{ik}-{g}_{jk})}^{2}{+({b}_{ik}-{b}_{jk})}^{2}}$$
(7)

Then, the calculation of the pattern differences between individuals is done as follows: let the individual phenotype contain \(l\) style, let sets \({P}_{i}\) and \({P}_{j}\) respectively denote the pattern type of the two individuals \({x}_{i}(t)\) and \({x}_{j}(t)\). The distance of the pattern between two individuals is obtained with:

$${P}_{ij}=\frac{{\sum }_{n=1}^{l}distEachPattern({P}_{in},{P}_{jn})}{l},$$
(8)
$$distEachPattern\left({P}_{i1},{P}_{j1}\right)=\left\{\begin{array}{c}1, {P}_{i1}={P}_{j1}\\ 0, {P}_{i1}\ne {P}_{j1}\end{array}\right.,$$
(9)

Finally, the distance between individuals \({D}_{ij}\) can be expressed as

$${D}_{ij}=\sqrt{{w}_{color}\bullet {\left(\frac{{C}_{ij}}{\underset{p,q\in \mathrm{1,2},\dots ,N}{\mathit{max}}{C}_{pq}}\right)}^{2}+{w}_{pattern}\bullet {\left(\frac{{P}_{ij}}{\underset{p,q\in \mathrm{1,2},\dots ,N}{\mathit{max}}{P}_{pq}}\right)}^{2}}$$
(10)

where \({w}_{color}\) denotes the proportion of color attribute, \({w}_{pattern}\) denotes the proportion of pattern attribute, \({w}_{color}+{w}_{pattern}=1\). Further, the incomplete knowledge about weight information may lead to the imprecision in the final outcomes in the decision making[43].Therefore, the values of \({w}_{pattern}\) and \({w}_{color}\) should be set according to the survey of user groups.

4 Case Study

In recent years, some researchers have paid attention to design culture and creative product with intelligent computing method, which is conducive to the inheritance and development of traditional culture. The culture and creative product are used as carriers to study its morphological composition and color rules. Using IGA, users can create personalized pattern designs with traditional cultural genes [44]. In this study, the proposed method is applied to the traditional brocade pattern of Zhuang ethnic group, which enjoys the reputation of “one of the four famous brocades in China”.

4.1 Individual Coding

The Zhuang ethnic brocade is an iconic element of the Zhuang people who reside in the Guangxi Zhuang Autonomous Region, a region in southern China that borders Vietnam. It is well known for its variety in color and outstanding woven patterns, see Fig. 7a. The Zhuang brocade emphasizes geometric patterns and the regularity of colors, as shown in Fig. 7b.

Fig. 7
figure 7

Zhuang brocade tradition [45]

Full size image

In this research, the characteristics of Zhuang brocade are coded using a series of parameters including:

Graphic size: to fit the screen size of the mobile displays of most smartphones, the evolutionary individual is a square with a resolution of 300*300 dots per square inch (dpi)

  1. 1.

    Brocade structure: the Zhuang brocade often uses a diamond-shaped interwoven structure as the basic structure for the pattern (Fig. 8). The continuous square layout is a typical geometric pattern found in the Zhuang brocade. Each individual is alternately arranged using two basic patterns, each of which occupies half of the visible area of the pattern.

  2. 2.

    Basic patterns: according to literature and in real-life examples, 16 common classical patterns were extracted and encoded, including abstract geometric patterns and abstract patterns found in nature (Table 2).

  3. 3.

    Color composition and constraints: the knitting process of the Zhuang brocade is to pass through the warp and break the weft. The warp threads provide the background color, and the weft threads forms the geometric pattern with color blocks. As such, color coding is divided into two parts: the background color and the pattern color schemes. In addition, based on actual samples, we discovered some standard color matching rules, and the following color matching constraints were formulated.

Fig. 8
figure 8

Structure of Zhuang brocade

Full size image
Table 2 Basic Zhuang ethnic patterns and their codes
Full size table

First, eight background colors and eight pattern color schemes were extracted from the real samples.

Second, the patterns and background colors of Zhuang brocade are mostly matched with the same tone, namely, warm or cold. Therefore, color matching is divided into warm or cool colors.

Third, the overall tone of the individual is defined by the background color.

The coding of the individual background color and color matching of the pattern is shown in Table 3.

Table 3 Background colors and pattern colors and their codes
Full size table

5) Genotype and phenotype: In summary, the gene unit of each Zhuang brocade is divided into three parts: background color, and patterns 1 and pattern 2. Each pattern is composed of different styles and color matching genes. The genotype is encoded using a 17-digit binary number. The first 3 digits represent the 8 colors of the background color, and the last 14 digits represent the style and color of the two patterns (Fig. 9). As the tetragonal pattern is continuous, there are no restrictions on the position of the two patterns but they cannot be the same. According to color limitations in previous studies, it can be concluded that the total number of candidate solutions in the search space is \({2}^{3}\times {\complement }_{16}^{2}\times {2}^{2}\times {2}^{2}=\mathrm{15,360}\).

Fig. 9
figure 9

Genotype and phenotype of virtual Zhuang brocade

Full size image

4.2 User Interface

In this research, we used Xcode software based on the Swift programming language to develop the interactive system. The experimental device used is iPhone 11 Pro, which has a 5.8-inch screen with a resolution of 2436*1125 pixels at 458 dpi.

The user interface of the interactive evolutionary design system for mobile apps (M-IEDS) is shown in Fig. 10. The top of the interface shows the current evolutionary generation and the running time of the entire evolutionary design process. In the middle of the interface is the display area of the current individual phenotype, with individuals in the generation are stacked on top of each other. Right below the display area is a button that triggers the next generation. This button is tapped when all individuals have been evaluated in the current generation; see Fig. 10a. Figure 10b shows the state when the evaluation proceeds with a binary dataset. When the user swipes left or right, there will be corresponding “thumb up” (right/like) or “thumb down” (left/dislike) icon prompt below the pattern. To prevent users from misoperating, we limited the area available for the swiping. During swiping, if the user releases his/her finger within the available area, the pattern will return to its original position.

Fig. 10
figure 10

User interface of M-IEDS

Full size image

To measure the effectiveness of this method, we also created a traditional interactive evolutionary design system (T-IEDS) with a scroll view and slider widget to input fitness, as shown in Fig. 11.The user scrolls to view the individuals in the population, and uses the slider with the steps below each individual to assign values. At the bottom is also a button that generates the next generation. To minimize the irrelevant differences between the two systems, the dimensions of the images, interface elements, and interactive controls of the two systems are the same.

Fig. 11
figure 11

User interface of T-IEDS

Full size image

4.3 Parameter Settings

To effectively compare the performance of M-IEDS and T-IEDS, we used the same evolutionary parameters: the maximum evolution algebra is set as 20, population size \(N=8\), minimum fitness \({f}_{min}\) is 1, maximum fitness \({f}_{max}\) is 5, crossover rate is 0.7, and variation rate is 0.1. Using both the results of previous studies and gene coding rules, we determined that \({w}_{color}\) is 0.6 and \({w}_{pattern}\)=0.4.

4.4 Experiment

The experiment was completed at a laboratory of a university in China. The subjects comprised twenty graduate students (ten males and ten females) between the ages of 22 and 25. Each subject was carefully chosen and instructed to complete the same task using M-IEDS and T-IEDS. They were required to learn and become familiar with the operating system before carrying out the task. To prevent proactive interference, the two experiments were separated by 1 week. The experimental task required each subject to select 4 satisfactory individuals as the final design solutions. After completing a two-stage test, the subjects completed a questionnaire on the usability of the two systems, with the following items:

  1. 1.

    Q 1: I think this system is easy to use.

  2. 2.

    Q 2: I think this system captures my preferences well.

  3. 3.

    Q 3: I don't think this system requires much effort to complete the prescribed tasks.

  4. 4.

    Q 4: What is your overall rating of the two systems?

Q 1 to Q 3 use a 5-point Likert scale in which 1 denotes strongly disagree and 5 denotes strongly agree, and Q 4 also uses a 5-point Likert scale in which 1 denotes extremely low and 5 denotes extremely high. After rating, the subjects were also given the opportunity to provide suggestions or opinions on the systems.

4.5 Analysis of Results

4.5.1 Quantitative Analysis Results

This research refers to the experimental indicators of previous studies on IGAs, and combines the modified methods to reducing user’s fatigue (alleviating cognitive load and simplifying operation), accelerating the convergence of algorithm. Finally, the total evolution time, the time taken to evaluate an individual and the evolution algebra are adopted to evaluate the system performance [6, 28, 46]. Among these indicators, the total evolution time is related to the cognitive load in the whole evolutionary design process; the average time taken to evaluate an individual is used to reflect the ease of user operation; the evolution algebra, is used to verify the convergence speed of the algorithm. The total evolution time, the average time taken to evaluate the individual, and the average number of generations of the two systems are recorded and presented in Figs.12, 13, and 14.

Fig. 12
figure 12

Total evolution time: M-IEDS vs T-IEDS.

Full size image
Fig. 13
figure 13

Time taken to evaluate an individual: M-IEDS vs. T-IEDS

Full size image
Fig. 14
figure 14

Evolution algebra: M-IEDS vs. T-IEDS

Full size image

As shown in Fig. 12, except for subject 6, the total evolution time of using M-IEDS is significantly shortened. As shown in Fig. 13, all subjects evaluate an individual in a shorter time using M-IEDS. As shown in Table 4, compared with using T-IEDS (323.3 s), the total time for the twenty subjects using M-IEDS (150.7 s) to complete the personalized design task is reduced by an average of 53.4%. Compared with T-IEDS (4.9 s), the time taken to evaluate an individual for the twenty subjects using M-IEDS (2.6 s) is reduced by an average of 46.9%. These results confirm the assumption in Sect. 3.1, and the binary evaluation in the stack view (1) does not require user to compare individual, which lowers the cognitive load on evaluation (2) accord with mobile users’ habit, which rapids evaluation process. Above all, the proposed method effectively reduces user’s fatigue of evaluation.

Table 4 Experimental results: M-IEDS vs T-IEDS
Full size table

As shown in Fig. 14, each subject completed the task in fewer than 15 algebras. It indicates that users can find four satisfactory schemes within the maximum evolution algebra. Over half of subjects (11) can complete personalized design task within a less evolution algebra using M-IEDS. Furthermore, as shown in Table 4, compared with using T-IEDS (8.7), the evolution algebra for the twenty subjects using M-IEDS (7.9) is reduced by an average of 0.8. This result indicates that the proposed method performs good algorithm convergence. Firstly, the fitness estimation combined with hesitation patterns can efficiently pass on the design scheme that meets the user’s preference to the next generation; Secondly, as assumed in Sect. 3.3, the ongoing prediction and replacement mechanism of disliked individuals improves the probability of appearance for “like” individuals, which accelerates the convergence of the algorithm to a certain extent.

The various experimental indicators and calculated standard deviations of the two systems are presented in Table 4, where the data obtained with the M-IEDS show better consistency than that with the T-IEDS.

4.5.2 Questionnaire Results

Questionnaire examines the usability of interactive evolutionary design system from the perspective of user experience. The four items correspond to (1) ease of use, (2) accuracy of capturing preference, (3) effort to complete the task, (4) overall evaluation of quality.

As shown in Fig. 15, in general, most subjects hold their view that M-IEDS is superior to T-IEDS in above four aspects.

Fig. 15
figure 15

Questionnaire results: M-IEDS vs. T-IEDS

Full size image

90% of subjects (18/20) agree that the M-IEDS is easy to use, while only 35% (7/20) feel the same way about the T-IEDS (as shown in Fig. 15a). These results are consistent with those for the time taken to evaluate an individual, in which simpler operation with M-IEDS.

70% of subjects (14/20) strongly agree or agree that the M-IEDS can capture their preferences, and 55% (11/20) feel the same way about the T-IEDS in Fig. 15b. These results are in agreement with those for the evolution algebra with two systems, in which M-IEDS has fewer generations which shows that this system accelerates the convergence of the algorithm.

Figure 15c shows 65% of subjects (13/20) strongly agree or agree that using M-IEDS to complete the specified tasks does not require much effort, while only 40% (8/20) feel the same way about the T-IEDS. As such, the M-IEDS is less likely to cause user cognitive load than the T-IEDS, which is in agreement with the results on less time to complete the task.

Finally, for the overall evaluation of quality, it is evident from Fig. 15d that 80% of subjects (16/20) gave the M-IEDS a high rating while only 20% (4/20) feel the same way about the T-IEDS. It indicates that subjects are more willing to use the M-IEDS carrying out personalized design on mobile terminal.

The above results show that the M-IEDS can help users personalize products on mobile devices more quickly and efficiently. From the perspective of human–computer interaction, the left/right swiping movement is more natural than physically moving the slider widget in T-IEDS. From the perspective of user cognitive fatigue, users only need to make simple binary judgments instead of considering many other individuals simultaneously, which dramatically reduces the cognitive burden. In addition, the ongoing fitness prediction and replacement of disliked individuals avoid the emergence of schemes deviating from user preference to enhance algorithm convergence efficiency. In summary, the M-IEDS performs well.

5 Conclusion

This paper proposes an interactive evolutionary design method for mobile devices. The innovation of this proposed method is mainly reflected in three aspects: presenting the individuals in a stack view, estimation of fitness with a binary dataset, and ongoing prediction and replacement of disliked individuals. The method is applied to customize traditional brocade patterns of Zhuang ethic group in China, and its effectiveness is validated through a comparison with a conventional IGA method.

From the experiment results, the proposed method has advantages in simplifying the evaluation operation, reducing the cognitive burden, and ensuring algorithm convergence. However, in the process of doing so, some problems are found. For example, at the later stages of the evolution process, the high similarity of individuals in the population will confuse users, which leads to unprecise evaluation. In addition, as subjects suggested, the proposed method does not visually show the selected design schemes. Therefore, future research could dynamically lessen the population size according to the convergence results of the algorithm and optimize the interactive feedback to the user, such as creating a “favorite” box where displays the selected design schemes.

The contributions of this study are mainly in two areas. First of all, this paper proposes a method for implementing interactive evolutionary designs on small screens, which inspires the research of products customization on mobile phones. Secondly, from the perspective of user interaction, the method increases the ease of evaluation operations, reduces user fatigue and improves the convergence efficiency of algorithm.