Keywords

1 Introduction

As we known, skeuomorphism design and flat design are both the two important design strategies in the produce-user interface design under the information society. Skeuomorphism is the design strategy of the product-user interface design that describes design elements functionally and originally transplanting from the real object. Mullay described that lots of computer interfaces have a skeuomorphism graphical user interface that emulates objects in the physical world [1]. Norman describes perceived affordances, where the user can tell what an object provides or does based on its appearance, which give rise to the skeuomorphism design [2].

However, flat design represents the minimalism design strategy that moves away from the realism of real object. Morson, S. argued that flat design removes all the elements that help target users to associate with what actually exists in the real world. The metaphors that we use to translate the virtual world to the physical world are being removed from the flat design. The visual cues we as designers created to reference real-world properties like light and shadows have been removed [3]. Gruman described that iPhone had wide usage of skeuomorphism metaphor in the IOS six. With the changes of IOS six to IOS seven, Apple had shifted from skeuomorphism design to the flat design. Flat design offers more clean lines and a lighter, bolder, and more colorful palette of colors to attract the users. The stripping away of the beauty visual design elements and real effects that makes lots of disorientation for target users. The question is how we could still provide those visual cues to users who live in a three-dimensional world but who are interacting within a two-dimensional interface design [4].

Design is the organization of visual information. Information organization in which the user more effectively cognitive received by the visual information of the interface. The object oriented ontological to suggest a re-definition of the concept of affordances in the interaction design. Thus we argue that the different appearance design as the discipline to deal with so much complex design problems. There have been lots of changes in enhancements of design elements in the produce-user interface design.

User experience is one of the significant reasons for the transition skeuomorphism design to flat design. However, there is lack of influencing factors study of the two different interface styles for emotional response experience of the users. In previous studies, Setlur studied two psychophysical studies using semantics as stimuli demonstrate that semantics decrease the time necessary to locate a file in a visual search task [5]. Dan discussed metaphor in the interaction design [6]. Hou research the use of regression to identify the potential relationship between icon style and user emotions [7]. Stevens discussed the role of skeuomorphism in the context of affording interaction in map symbol design [8]. Schneidermeier evaluate the usability of Windows 8 in comparison with Windows 7 with respect to effectiveness, efficiency and satisfaction [9]. Xenakis suggest a theoretical explanation that relates the underlying functionality of aesthetics, in particular of interaction aesthetics and of affordances in the design process [10]. Pucillo establishes a link between user experience research and affordance theory and postulates the concept of experience affordances [11]. However, little research has been focused on different user emotional impact between skeuomorphism and flat design in the car navigation interface design. Therefore, we started this design research. The theoretical framework of the study was shown in the Fig. 1.

Fig. 1.
figure 1figure 1

The theoretical framework of this study

Full size image

2 Research Method

2.1 Hypothesis

The hypothesis of this study is as follows:

H1::

The consistency and differences user emotion experience between the skeuomorphism design and flat design.

H2::

Main factors affecting the user emotion experience between the skeuomorphism design and flat design.

H3::

Interaction between the Artificial Texture rating (ATR) and User Experience rating (UER) analysis.

In order to confirm this hypothesis, we designed a multiple-variable experiment study. The independent variables in this study were the three interface between skeuomorphism design and flat design in car navigation interface, which were the visual representation method (VRM). The dependent variable is the user experience rating (UER) and artificial texture rating (ATR).

2.2 Participants

A total of 45 undergraduates and graduate students of Huazhong University of Science and Technology were randomly selected to participate in this experiment, 23 male and 22 female, aged 20–27 (Mean = 23.67, SD = 2.18) which female of subjects accounted for 48.8 %, male subjects were 51.2 %.

2.3 Material

In this experiment, We designed three car navigation interfaces as the experimental material, the car navigation interfaces contains six modules: such as “Music player”, “Navigation maps”, “Road book”, “Steering wheel”, “Baidu search”, and “Sina Weibo”, it can simulate actual scene of using the car navigation interface. The experimental material had three levels, including skeuomorphism design, flat design and moderate interface design between them. Using the simulator technology, the interface is shown in a size of 7 inches navigation interface screen, as shown in Fig. 2 and Table 1.

Fig. 2.
figure 2figure 2

The three level of the experimental material

Full size image
Table 1. The comparison of the three level of the experimental material
Full size table

2.4 Procedure

The experiment is a within-group design, all participants were tested the three levels of the experimental material. Firstly, participants were asked to read the introduction of the experiment requirements, then signatures in the “Experimental Consent”. Before the experiment begin, combined with situational guidance methods, so that the user had 15 s listening to the soft music for relaxing. Test environments was a quiet laboratory without noise and interference. Participants were asked to careful observation on the experimental material for 30 s. Then, participants were asked to complete a questionnaire immediately after each test. After the experiment, a total of 135 questionnaires were collected.

We used the semantic differential method for measuring user emotion feelings. Nagamachi suggested that kansei engineering parametrically links the customer’s emotional responses to the properties and characteristics of the product-user interface design [12]. Kansei engineering suggested that every artifact can be described in a certain vector space defined by semantic words. Therefore, we measured 15 pairs of kansei adjectives (such as “Traditional – Modern”, “Complex –Simple”, and “Rational- Emotional,” etc.). The questionnaire for the experiment included the 15 questions. The questionnaire were Printed on A4 paper, Single-sided printing. The evaluation of Kansei words was based on a 7-point Likert scale, where “7” indicated strong agreement, “1” indicated strong disagreement, and “4” was neutral, as shown in Table 2.

Table 2. The kansei words and their corresponding semantic attributes of the experiment
Full size table

3 Results and Discussion

Using IBM-SPSS-Statistics 19 analysis and the results were as follows:

(1) The ANOVA analysis. The results showed that the lowest user experience rating and artificial texture rating is material A, the maximum user experience rating and artificial texture rating is material B, and material C is located in the middle level. Using the ANOVA analysis method, it has significant difference user experience rating between material A, B, C (P < 0.05), as shown in Fig. 3 and Table 3.

Fig. 3.
figure 3figure 3

The user experience rating and artificial texture rating of the three materials

Full size image
Table 3. ANOVA analysis
Full size table

(2) Principal Component Analysis. We have 16 items of kansei words in the experiment study. The cronbach’s alpha = 0.915, displays the scale of the project has high internal consistency. Mean ranges for each project is 3.65 ~ 4.62, the mean total scale of 75.8 (SD = 19.95). Kaiser-Meyer-Olkin Measure of the results of Sampling Adequacy (KMO) test = 0.883, Bartlett’s Test of Sphericity result is \( \chi^{2} \) = 1585.8 (p < 0.001), indicates that the information have higher degree of overlap between the variable sample data, which suitable for factor analysis.

In this study, we used principal component analysis (PCA) method. This method assumes that each variable is purely linear combination of the factors, the main statistics include the number of common factors, characteristic value of each factor, the contribution rate of each factor (i.e. the percentage of the variance of each factor provided total variance), the cumulative contribution rate, factor load, factor scores, etc. Then we used varimax rotation method for factor loading analysis, the variable with the highest load factor on each count to a minimum. Data analysis showed that each of the main factors for this experiment to explain the higher rate of the entire assessment model, in which the first three main factors explain the rate of the overall model more than 71.134 %, in line with the statistical requirements of this test. The three main factors were extracted which could explain 32.709 %, 22.836 %, and 15.589 % of the total variance respectively after varimax rotation. It suggests that the users’ emotion experience caused by visual representation method (VRM) can be totally explained 71.134 % by these three main factors.

The loadings of Q2, Q3, Q5, Q6, Q7, Q13, Q15 and Q16 on factor 1 were outstanding, which were 0.789, 0.768, 0.752, 0.746, 0.745, 0.742, 0.696 and 0.581 respectively. These facets mainly reflect the participants’ stylization cognition factor in car navigation interface. So, it can be named stylization cognition factor (SCF). The loadings of Q9, Q10, Q11, and Q12 on factor 2 which were 0.879, 0.854, 0.783 and 0.711 respectively. These questions are closely correlated with users’ emotional response, and accordingly factor 2 can be named emotional cognitive factor (ECF). The contributions of Q4, Q14, and Q5 to factor 3 were smaller, and their factor loadings were 0.827 and 0.706. These facets are closely related to the participants’ decorative factor. So it can be called decorative cognitive factor (DCC). Thus, we find that the users’ emotion experience is mainly made up of three mutually independent components which are stylization cognition factor (SCF), emotional cognitive factor (ECF) and the decorative cognitive factor (DCC), as shown in Table 4 and Fig. 4.

Table 4. Total variance explained
Full size table
Fig. 4.
figure 4figure 4

The scree plot of the each main performance factors

Full size image

Extraction Method: Principal Component Analysis.

(3) The Correlation Analysis. The artificial texture rating (ATR) has a significant effects on user experience rating (UER). Using the scatterplot matrix analysis, we can see the stylization cognition factor (SCF), emotional cognitive factor (ECF) and the decorative cognitive factor (DCC) showed a significant correlation relationship. Using the correlation analysis, artificial texture rating(ATR) and the user experience rating (UER) showed a significant correlation (r = 0.799**), which indicates that the artificial texture rating(ATR) have a significance affect on the user experience rating (UER), as shown in Table 5 and Fig. 5.

Table 5. Correlation analysis
Full size table
Fig. 5.
figure 5figure 5

The scatterplot matrix analysis of the main factors

Full size image

4 Conclusions

The main finding of this study are as follows:

  1. 1.

    The lowest user experience rating and artificial texture rating is material A, the maximum user experience rating and artificial texture rating is material B, and material C is located in the middle level. It has significant difference user experience rating between material A, B and C (P<0.05).

  2. 2.

    The three main factors were extracted which could explain 32.709 %, 22.836 %, and 15.589 % of the total variance respectively after varimax rotation. It suggests that the users’ emotion experience caused by visual representation method (VRM) can be totally explained 71.134 % by these three main factors. We find that the users’ emotion experience is mainly made up of three mutually independent components which are stylization cognition factor (SCF), emotional cognitive factor (ECF) and the decorative cognitive factor (DCC). The stylization cognition factor (SCF), emotional cognitive factor (ECF) and the decorative cognitive factor (DCC) showed a significant correlation.

  3. 3.

    The artificial texture rating (ATR) has a significant effects (r = 0.799**) on user experience rating (UER).

The research results can help designers to deeply understand the different user emotional impact between skeuomorphism design and flat design, which can better guide the designers to design the produce-user interface.