Contrastive Analysis on Emotional Cognition of Skeuomorphic and Flat Icon
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.
KeywordsFlattening Skeuomorphism Emotion Cognition User experience
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 . 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.
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 . 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 . 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 . 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 . Aesthetically pleasing icon designs can be more influential in affecting user preferences than conventional operational usability in interactive systems .
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 . 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 .
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.
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 . 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.
Descriptive statistics of emotional preference from skeuomorphism to flat design
Different ages of emotion icon preference description
Under the age of 15
15–20 years old
21–25 years old
26–30 years old
Above 30 years old
Different ages of emotion icon preference ANOVA analysis
Sum of square
One-sample T test
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).
3.4 Example of Verification
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.
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.
This work is funded by National Key Technology Research and Development Program of the Ministry of Science and Technology of China (2012BAH91F03).
- 1.Yu, T (2011). Humanized interaction design on icons of smartphone user interface. Packaging Engineering. 24, 73–83.Google Scholar
- 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.Fan, M.Y (2014). Analysis of using color in mobile application UI design. China Science & Technology Panorama Magazine. 8, 44–45.Google Scholar
- 4.Gao, P, Yang, Z (2014). On the flattening and skeuomorphism of UI design. The fine arts education research. 10, 60.Google Scholar
- 5.Aeron Charline (2013). Visual Search. Onym Press, 1–2.Google Scholar
- 6.Zhang, J (2008). Emotional arousal and aesthetic expression. Theoretical studies in literature and art. 2, 99–105.Google Scholar
- 7.P.H. Bloch (1995). Seeking the ideal form: product design and consumer response. Journal of Marketing. 3, 16–29.Google Scholar
- 8.D.A. Norman (2014). Introduction to this special section on beauty, goodness, and usability. Human-Computer Interaction. 4, 311–318.Google Scholar
- 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.Donald Norman (2010). Emotional Design. China CTTIC Press. 5.Google Scholar
- 11.Paul Ekman (1999). Basic Emotions. 45–57.Google Scholar