Contrastive Analysis on Emotional Cognition of Skeuomorphic and Flat Icon

Conference paper
Part of the Lecture Notes in Electrical Engineering book series (LNEE, volume 417)

Abstract

In the field of designs of interface and icons, as the skeuomorphism style fades out in use while the flat design tends to be popular, research on which visual form accords to user’s emotional cognition and future direction of design development has been the hot spot. In this paper, general mobile devices are taken as sample, data statistics and comparative evaluation are conducted via questionnaire survey and discriminant analysis. The identification process of users to use skeuomorphism and flat design and their emotional cognition are analyzed. In this experiment, the identification accuracy of the icon, cognition validity, and degree of emotion arousal as well as the emotion validity are compared. The impact factor that reaches the best user experience is summarized. Finally, based on the guidance of acquired conclusion, an available icon is designed.

Keywords

Flattening Skeuomorphism Emotion Cognition User experience 

1 Introduction

With the prevalence of smart phones in recent years, icons have become an important component of the smart phones’ user interface, and also play a significant role as the virtual media which delivers user awareness and perception, using symbolic expressions [1]. Under the background that it becomes more complicated for people to handle the user interface of smart phones, icons represent both the functions of the application and an element in interactions. Good icon design provides an efficient, smooth experience for users, that’s why the study of humanize and interactivity of icon design has a great significance.

The user experience of icons on mobile device is affected by aesthetic preferences, distinguishing degree, and many other factors. Currently scholars study impacts of icons mainly from their appearance, color choice and the changes of style. For instance, Shi-Jian Luo et al. analyze the effects of icon background shapes and figure/background area ratios on visual search performance and user preference [2]. Mei-Ying Fan obtained the icon colors that users are more willing to accept by studying the basic principles of photochromic and human perception of color [3]. But they take the aesthetic principles of design merely into account, without paying attention to the influence of the user’s emotional experience and psychological needs. From the evolution of the calculator icon shown in Fig. 1, the icon design is evolved from skeuomorphism to flat design based on the impacts of these factors. Skeuomorphism reproduces the physical body through various design effects such as highlight, texture, material, shadow, etc. On the contrary, flattening pursuits to create a more abstract, simplified and symbolic design [4]. This paper takes application icons on mobile devices as a case, focusing on people’s needs, to study the impacts of application icons on user experience and to summarize the key factors that influence user experience from four aspects, including the identification accuracy of the icon, cognition validity, and degree of emotion arousal as well as the emotion validity.
Fig. 1

Evolution of the calculator icon from ios1 to ios8

2 Analysis of Factors Affecting the Icon Designs

In the development process where icon designs change from the real and friendly skeuomorphism to flat design, we analyze user needs and experience objectively, along with studying the effects of user experience on application icons from four dimensions including the identification accuracy of the icon, cognition validity, and degree of emotion arousal as well as the emotion validity is critical.

2.1 Identification Accuracy and Cognitive Validity

Visual search is a type of perceptual task requiring attention that typically involves an active scan of the visual environment for a particular object or feature among other objects or features [5]. Users are always facing an icon when communicating with an application. Identification and the cognitive process of the icon is particularly important, which makes identification and cognition validity an effective standard to measure the efficiency of visual search. Chun et al. proved the user preference can be increased along with search speed and accuracy [2]. Visual search efficiency could strongly influence user experience. Consumers’ sense of pleasure would decrease while search time increases. So while the identification accuracy and cognition validity is not high, user experience satisfaction drops.

Thus, a higher degree of identification accuracy and cognition validity can increase user satisfaction when using mobile applications.

2.2 Emotional Arousal

Process of emotion arousal, is actually a transformation and sublimation the objects felt from natural level to aesthetic one [6]. User ratings of aesthetic preferences for interface designs are important because the aesthetic quality influences consumer attitudes and is a major determinant of a product’s success [7]. Aesthetically pleasing icon designs can be more influential in affecting user preferences than conventional operational usability in interactive systems [8].

Therefore, this experiment will measure the user satisfaction on an icon based on the degree of user aesthetic preferences.

2.3 Emotional Validity

Validity refers to the degree of the particular psychological traits that a test measures. Emotion validity is the degree of emotional impacts on the user experience. Yan Ding et al. pointed out that brain will generate a wide range of neural responses rapidly while stimulated by emotional information, which will influence cognitive processes from awareness, perception, memory and other aspects [9]. Almost everything we do is affected by emotions. And emotions can change the way we think, and play a crucial role in our daily decisions [10].

Therefore, this study will design experiments through the impacts of icons indicating different emotions on people’s emotional preferences.

3 Experiment Design

In order to verify the effects of four factors previously proposed on user experience, this study did an experimental method design and a questionnaire design by comparing the role four factors played in icons.

3.1 Method

This study focuses on testing the impact of icons on user experience, including four aspects: the identification accuracy of the icon, cognition validity, the degree of emotion arousal and emotion validity. The questionnaire survey is used to test the general public in china. Meanwhile, the differences of user experience among different groups in age, gender, education and professional level are studied.

3.2 Questionnaire Design

In this study, a college in Zhejiang Province is taken as a gathering place to collect test data. 81.3% subjects are college students or teachers, with the remaining being off school staff. A total number of 160 questionnaires were recovered, excluding 5 invalid questionnaires; this study obtained 155 effective questionnaires finally.

Research sets a 5-point scale to test the identification accuracy of the icon type, a multiple-choice scale to measure cognition validity, a 5-point scale to test the degree of emotion arousal and 5-point scale to test emotion validity. The emotion validity scale is used to test the degree of individual emotion preference on icons with four basic human emotions. Ekman’s research findings led him to classify five emotions as basic: joy, sadness, anger, fear and disgust [11]. Taking into consideration the extreme rarity of icons that make people angry, the test is based on icons indicating the other four emotions.

3.3 Data Analysis and Results

This study does a frequency analysis, a descriptive statistics and variance analysis.

As the factor for identification accuracy, the experiment sets two groups of icons; one is familiar to public while the other is not. Results are shown in Fig. 2.

There are eight pairs of icons in Fig. 2, two icons as a pair including one familiar to the public while the other is not. As can be seen from Fig. 3, whether application icons are familiar to users or not, the identification accuracy of the skeuomorphic icons is higher than flat icons (Fig. 4). Familiar icons have higher accuracy than strange ones in flat design.
Fig. 2

Test icons

Fig. 3

Identification accuracy of the icon

Fig. 4

Example of Icons from skeuomorphism to flat design

As can be seen from Table 1, the overall mean value of user preference is 2.38, from which a preference for skeuomorphism is seen. The results of preferences for skeuomorphism and flat design of different ages were as follows.
Table 1

Descriptive statistics of emotional preference from skeuomorphism to flat design

Aesthetic preferences

N

Min

Max

Mean

Std. deviation

Instagram

155

1

5

1.80

1.224

Calendar

155

1

5

2.32

1.329

Calculator

155

1

5

2.79

1.262

Mail

155

1

5

2.43

1.591

Baidu map

155

1

5

2.57

1.254

Preference mean

155

1.00

4.40

2.382

0.70743

Note 5-point scale, 1 means fully skeuomorphic icon, and 5 totally flattened

Table 2 shows that the elderly and children prefer skeuomorphic icons rather than the youth, who believe skeuomorphism, is better to identify an application (Table 3).
Table 2

Different ages of emotion icon preference description

Aesthetic preferences

N

Mean

Std. deviation

Min

Max

Under the age of 15

6

1.17

0.408

1

2

15–20 years old

12

1.42

0.515

1

2

21–25 years old

105

1.41

0.494

1

2

26–30 years old

26

1.35

0.485

1

2

Above 30 years old

6

1.00

0.000

1

1

Total

155

1.37

0.485

1

2

Table 3

Different ages of emotion icon preference ANOVA analysis

 

Sum of square

df

Mean square

F

Significance

Between groups

1.272

4

0.318

1.362

0.250

The group

35.025

150

0.234

  

Total

36.297

154

   
In order to understand how icons indicating emotions influence people’s likes (Fig. 5), the test sets the option “Just so-so” as the standard and make a one-sample T test on the data. The results were shown in Table 4.
Table 4

One-sample T test

 

N

Mean

Std. deviation

t

df

P

Joy

155

2.1355

0.80241

−13.414

154

0.000

Sadness

155

3.3677

0.76251

6.004

154

0.000

Fear

155

3.8161

0.95008

10.695

154

0.000

Disgust

155

4.4194

0.733

24.108

154

0.000

Note The test value = 3, the degree of user preference is general

Fig. 5

Test icons with four basic emotions

As can be seen from Table 4, the four basic emotions have certain emotional impacts on the user preference: sadness has the least impact on user’s emotional preference (t = 6.004); disgust has the strongest impact (t = 24.108). And users prefer icons indicating a happy mood (t = −13.414).

Different users’ cognition validity of skeuomorphism and flat design are measured, with results shown in Fig. 6, it shows that the cognition validity of flat is lower than skeuomorphic one. It’s easier for users to cognize type and meaning of icons by skeuomorphism.
Fig. 6

Recognition of the validity of different icons

3.4 Example of Verification

Experimental data analysis of the results shows that skeuomorphic icons have higher identification accuracy and faster efficiency than flat icons. The cognition validity of flat icons is lower than skeuomorphic ones. Users like both forms of icons, but skeuomorphic icon seem to be in advantage. Human emotions have great impacts on user preferences. Meanwhile, according to the data obtained in this experiment, we design an icon on tourism (Fig. 7).
Fig. 7

Icon example

This study verified the icon also using questionnaires aspects of identification accuracy, cognition validity, the degree of emotion arousal and the emotion validity. 89.5% of users identify the type of icon correctly; the average user cognition validity of this icon has reached 56.6%. Two-thirds of users believe that this icon is intimacy, real and layering, belonging to skeuomorphic icon. Compared to a similar flat icon, 77.2% of users prefer this icon more. 91.2% of users think that this icon brought him a pleasant feeling. Only 7% of users illustrated they dislike it. Thus, the four factors affecting the user experience this study discusses make it to let the icon satisfy the majority.

4 Conclusions

This study explores the icon’s identification accuracy, cognition validity, the degree of emotion arousal and emotion validity of icon design mainly based on human needs, it takes universal mobile devices for instance, with statistics and comparative evaluation conducted via questionnaires and variance analysis, whose results of the analysis are applied to the mobile App for schools and teachers. Data analysis showed that a good icon design must have a high degree of identification accuracy and cognition validity at first, for these two elements help to produce a better search performance. Secondly, icons with some skeuomorphism elements are preferred. Compared to typical flattening, those icons load off the trouble users may have in understanding how to use the products, while they also combine some advantages of fattening. Finally, based on the fact that emotions have strong impacts on user preferences, icons indicating a happy mood usually bring with higher satisfaction.

These results will help designers in the development of smartphone’s icon designs, and improve the user experience while lifting brand image as well.

Notes

Acknowledgements

This work is funded by National Key Technology Research and Development Program of the Ministry of Science and Technology of China (2012BAH91F03).

References

  1. 1.
    Yu, T (2011). Humanized interaction design on icons of smartphone user interface. Packaging Engineering. 24, 73–83.Google Scholar
  2. 2.
    Luo, S.J, Zhou, Y.X (2015). Effects of smartphone icon background shapes and figure/background area ratios on visual search performance and user preferences. Frontiers of Computer Science. 5, 751–764.Google Scholar
  3. 3.
    Fan, M.Y (2014). Analysis of using color in mobile application UI design. China Science & Technology Panorama Magazine. 8, 44–45.Google Scholar
  4. 4.
    Gao, P, Yang, Z (2014). On the flattening and skeuomorphism of UI design. The fine arts education research. 10, 60.Google Scholar
  5. 5.
    Aeron Charline (2013). Visual Search. Onym Press, 1–2.Google Scholar
  6. 6.
    Zhang, J (2008). Emotional arousal and aesthetic expression. Theoretical studies in literature and art. 2, 99–105.Google Scholar
  7. 7.
    P.H. Bloch (1995). Seeking the ideal form: product design and consumer response. Journal of Marketing. 3, 16–29.Google Scholar
  8. 8.
    D.A. Norman (2014). Introduction to this special section on beauty, goodness, and usability. Human-Computer Interaction. 4, 311–318.Google Scholar
  9. 9.
    Ding, Y, Wang, Y.P (2005). Emotional Information stimulation on visual cognitive processes. Chinese Journal of Clinical Rehabilitation. 28, 152–155.Google Scholar
  10. 10.
    Donald Norman (2010). Emotional Design. China CTTIC Press. 5.Google Scholar
  11. 11.
    Paul Ekman (1999). Basic Emotions. 45–57.Google Scholar

Copyright information

© Springer Nature Singapore Pte Ltd. 2017

Authors and Affiliations

  1. 1.School of Media and DesignHangzhou Dianzi UniversityZhejiangChina

Personalised recommendations