KEER2010, PARIS | MARCH 2-4 2010
INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2010
THE INFLUENCE OF ILLUSTRATIVE
STYLE OF ICON DESIGN ON USABILITY
AND AESTHETICS
ABSTRACT
After the previous study on the illustrative style of icon design, we found that the
combination of different design features of icon will bring the different emotional effects to
users. The next topic is how to implement our results to the interface design with other devices
and confirming the influence of positive emotion which is relative to specific design feature
between the user’s evaluation of usability and aesthetics. For the purpose of verification, we
choose a common interface of ATM in Taiwan as a target and consulted ten professional
interface designers with questionnaire by Delphi method. We asked the professional designers
to select half of the emotional words which were well suited to the interface design of ATM by
their subjective judgment every times. At the beginning, twenty-four words are prepared. After
sending email to and fro three times, we reduce the twenty-four words to two words- technical
and stable. Then, according to the results of our previous study, we use six illustrative styles
such as square-frame, plane-shadow, non-perspective, sharp-emboss, transparent material, and
red color to redesign the icon used in the interface of ATM. Users are asked to execute some
simple tasks like withdrawal, transferring account and changing password with the original one
and the redesigned interface of ATM. After the task, users will make evaluation on usability and
aesthetics with Likert scale method. The results from the evaluation will help us to explain
users’ satisfaction and pleasant interaction experience and how they influence the usability.
Keywords: ATM, Icon design, Illustrative style, Usability
1. INTRODUCTION
In keeping with the trend toward digitalized interface in consumer products, the use of icons
has become a design strategy that can increase users’ interest, help them to learn and stimulate
their motivation to learn. As icon design is well diversified, the illustrative styles applied to
screen design that are intended to maximize affective response from users has become a critical
issue in screen design. For example, digital products can show many types of icons no matter
whether two-dimensional, three-dimensional, virtual, audio or video, or dynamic on the display
and these styles not only facilitate icon usage but also strengthen their functions. Therefore,
screen design has become an important aspect of the design field recently. Furthermore, people
make strong and broad demands on the various kinds of icons.
In terms of icon design or interface design, “user-centered design” is the current design
trend. It is more important for designers to create or redesign new products according to
perceptual demand by developing and applying new techniques. Recently, studies of Kansei
Engineering have been promising, focusing on the interactions among people from the point of
view of engineering. They attempt to translate consumers’ feelings regarding products or other
stimuli into concrete design elements. Furthermore, Kansei Engineering research can help
designers really understand users’ needs and preferences. However, comprehensive graphic
design of a product’s display would evoke consumers’ purchasing desire, attract learners’
attention, and increase their interest [8]. Therefore, when it comes to designing displays, we
should focus on both the factors that influence consumers’ feelings and the interactions between
users and systems, such as overall appearance, color allocation, size of characters, icon shapes,
and dynamic or static icons.
Kansei engineering is a technique that not only transforms consumers’ needs and feelings
into product design elements, but also formulates the images of particular products in
customers’ minds [10]. It is also a method of transforming or relating consumers’ feelings
regarding products into design elements. In other words, Kansei Engineering explores the
corresponding layers between human beings’ psychological and physiological feelings, and
design elements. In practical terms, Kansei Engineering has been broadly used by several
businesses in Japan and all over the world for designing car seats [11], office seats [7], car
decoration [6], allocation of upholstery [14], and colors of product exteriority [3]. However,
most researchers in icon design still devote their efforts to icon recognition [1]. They emphasize
how to apply related psychological theories to icon design based on recognition psychology.
Basically, icons should be designed in accordance with the following principles, visibility,
legibility, readability, intention and simplicity to meet the needs of visual recognition, attention,
shape-discrimination, and memory. By means of texts, icons and text-icons on displays, we can
evaluate the accuracy rate and task time of users’ icon recognition. In this way, we can explore
how users interact with various icon designs on the screen [6].
In the overall design of the screen, the icon is the communication and learning tool that
people rely on. The functions of icon communication include the design of the icon itself and its
presentation. As a result, designers must pay more attention to the communicative function of
icons [13]. Moreover, the processes by which users operate the display icons and how they learn
from them play an important role. Consequently, it is another critical issue to understand the
relationship between the user’s interactions and the representation of icons [2]. Rieber [12]
demonstrated that from the point of view of design, if icons that were well-designed visually
failed to generate effective communication, they wouldn’t direct users to notice important
information no matter how visually creative they were. Furthermore, improper visual design
could impose a greater mental burden on users or interrupt their concentration.
Regarding the conditions of icon design and the effects which icons have on users, studies
concerned with how visual elements affect user’s kansei are rare. This shows that there is a
huge potential for exploration or future application of the relevant topics of digitalized display
design allocation and icon design, under the scope of Kansei Engineering.
In this study, icon designs in digital cameras are used as an example of the exploration of the
above-mentioned issues due to the following three reasons: (a) As for icon design, the icon itself
embeds communicative, cognitive, and introductory functions. Besides, it provides conceptual
expressions of mental models as well as assistance to memory. When an icon is put on the
display, it also quickly attracts users’ attention, becomes the focus of their attention, and directly
influences their feelings. (b) Of the same type of shapes of icons, the change of different icon
design conditions often affects user’s perceptions towards icons. For instance, the icons in a
series of versions of Internet Explorer, which uses shadow and emboss effects, and the “table
icons” in Windows of PC and in the OS for Mac, which was modified by perspective and
shadow effects, apply different design elements to satisfy users’ feelings by transfiguring the
icons on displays. (c) Users’ impressions of an icon can be generally covered by positive and
negative affect. Further, the motivation of designers is to maximize users’ positive affect. As a
result, we measured users’ positive affect and discussed their “kansei” in this study. (d) Many
studies have pointed out that usability and aesthetics are associated because aesthetic and
pleasant interface can help to make work to be more efficient [15, 16]. As for users, they tend to
ignore some problems in terms of usability owing to positive aesthetic design, while entire
satisfaction is thus enhanced [15, 9]. Therefore, for elements of design conditions it is critical if
design expressions and style effect can enhance the operation performance and satisfaction of
users and if the subjective sentiments triggered can affect the evaluation of interface usability.
2. EXTRACTING AND EVALUATING EXPERIMENTAL SAMPLES
2.1. Extracting representative samples
To investigate the impact of aesthetics of expression mode for icon design on usability, this
experiment has resorted to the interface design of ATM machine the general mass use most
often, and 20 professionals who have worked with relevant background of interface design for
more than 2 years are gathered using focus group method for discussion. They will then select
the ATM from a banking institute as the target of study. Since the ATM of Chunghwa Post is
reckoned to be of the most widely installed and popular banking institute, it is why this study
has chosen the interface design of ATM of Chunghwa Post as its final sample of experiment.
This study will made use of the function icon interface as “withdrawal” that will, definitely,
appear on ATM interface as its representative study. As for other functions, since the outlook of
“withdrawal” function is more or less the same with other functions, this study has, therefore,
narrow down its scope of research, and will illustrate with withdrawal function to conduct the
investigation of aesthetics and usability. The result of analysis can be provided as the source of
information for image database.
2.2. Extracting representative kansei vocabularies
In terms of description for perceptual image, this study has based on the collected glossaries
(as found in table 1) from previous studies [5]. These glossaries are then discussed, screened,
and eliminated by previous 20 professionals with related background in interface design with
Delphi method and found some glossaries not suitable for as visual and perceptual image of
ATM. At the end, consensus is achieved as these professionals believe that technology and
stable are reckoned to be the two glossaries most suitable for the description of perception on
ATM for banks. As such, this study adopts technology and stable as the representative
glossaries for aesthetics. As for usability, “user satisfaction” put forth by Tractinsky [15, 16] is
exploited as the representative glossary for usability so as to proceed with the investigation of
icon aesthetics and usability.
Table 1: 24 glossaries collected preliminarily
Hard
Soft
Heavy
Light
Unique
General
Plain
Gorgeous
Pleasant
Lively
Cool
Fashionabl
e
Smooth
Technolog
y
Bold
Coarse
Modern
Traditional
Primitive
Cold
Warm
Rhythm
Stable
Elegant
2.3. Define the illustrative style and design elements of the icon
For design conditions of icon, this study is carried out based on the research results from“The
Study on the Synesthesia of Music Player Software Icons with Different Illustrative Styles”(as
found in table 2) by Guan & Tung [4] and “A Study of the Illustrative Style Effect of Icon
Design -Using the Digital Camera Icon as an Example” (as found in table 3) by Guan, Tung &
Hsieh [5]. In addition, it will, once again, conduct discussions with focus group method on the
best design conditions in correspondence to “Technology and Stable” as derived from the
previous professionals with related background in interface design.
Table 2. The results of postive icon image [4]
illustrative style
Kansei word
Hard
Soft
Heavy
Light
Smooth
Coarse
Modern
Traditional
Unique
General
Plain
Gorgeous
Technology
Primitive
Cold
Warm
Perfect of Visual-Texture
Perfect of FormalExpression
Frame style
Perspective style
Emboss style
Texture style
Non
Circular
Circular
Non
Square
Circular
Square
Non
Square
Non
Non
Square
Square
Circular
Non
Circular
Non
Left
Non
Left
Non
Non
Right
Left
Non
Left
Non
Non
Left
Non
Right
Left
Right
Right
Concave
Non
Raised
Non
Non
Concave
Non
Raised
Raised
Non
Non
Raised
Raised
Non
Concave
Raised
Concave
Metal
Transparence
Grain
Transparence
Transparence
Grain
Transparence
Grain
Transparence
Grain
Grain
Transparence
Transparence
Grain
Metal
Grain
Grain
Non
Right
Non
Grain
Table 3. The results of postive icon image [5]
illustrative style
Kansei word
Shadow style
bold
rhythm
stable
Plane
Plane
Plane
Perspective
style
Right
Left
Non
elegant
Gradual
Right
Emboss style
Frame style
Color
Sharp
Sharp
Sharp
Non
Circular
Non
Round
Non
Red
Red
Red
Yellowish
Green
At the end, the six kinds of design measure as “square-frame,” “plane-shadow,” “nonperspective,” “sharp-emboss,” “transparent material,” and “red color” are used to work in
conjunction with the combinatorial design of withdrawal function interface of Chunghwa Post,
and it is considered as the final sample of experiment (table 4).
Table 4. Design sample of the final experimental icon
2.4. Experiment design and investigation
The selection of subject for test is conducted with convenience sampling and 100 subjects
aged between 20 to 35 are invited to carry out actual experiment and filling of questionnaire. In
the first stage of experiment, 17-inch of screen will simulate the interface of ATM machine of
Chunghwa Post currently in use, and test subjects will, based on the flow of “typical withdrawal
task – withdraw NT$1000,” conduct the operation of withdrawal interface with “finger touch
panel.” After the operation, first questionnaire evaluation on “aesthetics”, “satisfaction”,
“technology” and “stable” is done upon subjective perception. The questionnaire is produced
using Likert scale as the tool of perceptual evaluation, and the scale is ranked from left to right
with respective score of 1 to 5. For number value 1, it indicates that the sample is most unfit
with perception of such glossary; for number value 3, it denotes with fair perception; for
number value 5, it shows that the sample is most befitting to the perception of such glossary. In
the second stage, it will base on the design measures selected from the previous 20 professionals
and simulate upon the ATM interface of Chunghwa Post. Again, the test subjects will, based on
the flow of “typical withdrawal task – withdraw NT$1000,” conduct the operation of
withdrawal interface with “finger touch panel”. After the operation, second questionnaire
evaluation on the same questions as first one is done upon subjective perception. When all of
the subjects have filled in the questionnaire, the results and analysis regarding each of the
glossaries from all samples are calculated so as to come up with the impact on aesthetics and
satisfaction. The ATM interface of Chunghwa Post. and redesigned one are showing as follow
(Fig 1, Fig 2).
Fig 1. The ATM interface of
Chunghwa Post.
Fig 2. The redesigned ATM
interface with new icon
3. EXPERIMENT RESULTS
3.1. Paired Samples T-test Results
In table 5, the mean of “aesthetics” in sample2 (the Chunghwa Post ATM) for subjects
(M=3.466, SD=0.937) was higher than those in sample1 (the redesigned ATM) for subjects
(M=2, SD=0.909). And the mean of “satisfaction” in sample2 for subjects (M=3.7, SD=0.952)
was also higher than those in sample1 (M=3.133, SD=1.105). Then process with Paired sample
T test to understand whether the sense of aesthetics and satisfaction in significant difference
between the sample 1 and sample 2。In Table 6, the T test results show that in the aesthetic
aspect, the sample 1 and sample 2 are significantly associated (Correlation=0.485, Sig.=0.007),
in addition, they are also equally significant correlation in satisfaction (Correlation=0.629,
Sig=0.000). And the mean difference of sample1 minus sample2 (-1.466) in “aesthetics” was
significant at (t = -8.572, Sig.=0.000). Likewise, the mean difference (-0.566) in “satisfaction”
was also significant at (t =-3.458 , Sig.=0.002).
Looking into the phase of kansei vocabularies, in table 5, the mean of “technology” in
sample2 for subjects (M=3.133, SD=1.008) was higher than those in sample1 for subjects
(M=2.666, SD=1.093). But the mean of “stable” in sample2 for subjects (M=3.9, SD=0.803)
was just a little higher than those in sample1 (M=3.8, SD=0.996). While in Table 6 , the Paired
sample T test results show that, two samples both in ”technology” (Correlation=0.485,
Sig.=0.007) and ”stable” (Correlation=0.629, Sig=0) are also significantly correlated. But, only
the mean (-0.466) difference of sample1 minus sample2 in “technology” was insignificant at
(t=-2.626, Sig.=0.014).
Table 5. Paired Samples Statistics Results
Pair 1
Pair 2
Pair 3
Pair 4
sample1-aesthetics
sample2-aesthetics
sample1-satisfaction
sample2-satisfaction
sample1-technology
sample2-technology
sample1-stable
sample2-stable
Mean
2
3.466
3.133
3.7
2.666
3.133
3.8
3.9
N
30
30
30
30
30
30
30
30
Std. Deviation
0.909
0.937
1.105
0.952
1.093
1.008
0.996
0.803
Correlation
0.485
Sig.
0.007
0.629
0.000
0.574
0.001
0.793
0.000
Table 6. Paired Samples Test Results
Mean
Pair 1
Pair 2
Pair 3
Pair 4
sample1_aesthetics
sample2_aesthetics
sample1_satisfaction
sample2_satisfaction
sample1_technology
sample2_technology
sample1_stable
sample2_stable
Paired Differences
Std.
95% Confidence
Deviation
Interval
Lower
Upper
t
Sig.
-1.466
0.937
-1.816
-1.116
-8.572
0.000
-0.566
0.897
-0.901
-0.231
-3.458
0.002
-0.466
0.973
-0.830
-0.103
-2.626
0.014
-0.100
0.607
-0.326
0.126
-0.902
0.375
3.2. Factor Analysis Results
Take the results of the sample 1 and sample 2 in the sense of aesthetics , satisfaction, and
technology and stable two emotional vocabulary, use principal Component Extraction, process
Factor Analysis, apply Varimax method, operates Rotation and extract the common Component
with the Eigenvalue larger than 1. In Table 7 , the results showed that two common Components
were extracted, the total explainable variance amount is up to 71.04%. From Table 7 we can see
Component 1 included the sense of aesthetics, satisfaction and Technology in the sample 1 and
sample 2, while the sense of stability in sample 1 and sample 2 are included in the Component 2
at the same time .
Table 7. Factor Analysis Results
Component
1
2
sample1-aesthetics
0.287
0.767
sample2-aesthetics
0.318
0.710
sample1-satisfaction
0.235
0.780
sample2-satisfaction
0.110
0.793
sample1-technology
0.143
0.768
sample2-technology
0.310
0.782
sample1-stable
0.220
0.916
sample2-stable
0.272
0.907
Rotation Sums of Squared Loadings
Total
3.654
2.030
% of Variance
45.674
25.369
Cumulative %
45.674
71.044
4. CONCLUSIONS & DISCUSSIONS
This study combines a number of preliminary research results, propose a set of icon design
method identified by the use of the preliminary findings of the focus group. From the Paired
sample T-test results we can see, whether in a sense of satisfaction, aesthetics and technology,
the redesigned sample are better than the ATM sample of the post office, and showed significant
differences. It cab be seen, from the icon design method proposed by this study, does have a
effect to improve the interface subjective evaluation. Compared with the research result of
Tractinsky [15, 16] , this study conduct further with a Factor Analysis, to clarify the relationship
between aesthetics and usability. Results of Factor Analysis showed that the samples both in
post office and redesigned one, aesthetic and satisfaction are all located on one of the factors,
can be extracted in a common features, so you can prove that aesthetics and satisfaction does
have a certain degree of relevance.
It is noteworthy that stable sense of the two samples were collocated in Component 2, this
may be attributed to that the evaluation results to the stable sense of two samples are very close,
we can speculate that perhaps the users feel to stable sense will not be changed through the icon
design change , it is also possible that from the presentation (layout) of overall user interface,
because in the interface layout, the design of two samples are identical, resulting in no
difference for both of post office and redesigned samples in regarding with the stable sense
evaluation. This can be a part of the follow-up work to continue related design elements
research in addition to the icon, to further clarify the relevant issue of the elements of interface
design and user experience. Finally, in the interface design of other information product,
designers can also recruit a focus group, to determine the approach of the icon design interface,
based on the design process used in this study.
REFERENCES
1. Baber, C., & wankling, J. (1992): An Experimental Comparison of Text and Symbols for
in-Car Reconfigurable Displays. Applied Ergonomics 23(4): 255-262.
2. Chanlin, L. (1997): The effects of verbal elaboration and visual elaboration on student
learning. International Journal of Instructional Media 24(4):333-339.
3. Fukushima, K., Kawata, H., Fujiwara, Y., & Genno, H. (1995): Human Sensory Perception
Oriented Image-Processing in a Color Copy System. International Journal of Industrial
Ergonomics 15(1):63-74.
4. Guan, S. S., and Tung, T. C. (2005): The Study on the Synesthesia of Music Player
Software Icons with Different Illustrative Styles. Journal of Science and Technology 14(2):
99-109.
5. Guan, S. S., Tung, T. C., & Hsieh, C. H. (2008): A Study of Partial Feature Attributes
Affecting Holistic Kansei for Icon Design. Journal of Science and Technology 17(2): 149158.
6. Jindo, T., & Hirasago, K. (1997): Application studies to car interior of Kansei engineering.
International Journal of Industrial Ergonomics 19(2):105-114.
7. Jindo, T., & Hirasago, K., & Nagamachi, M. (1995): Development of a Design Support
System for Office Chairs Using 3-D Graphics. International Journal of Industrial
Ergonomics 15(1):49-62.
8. Levin, W. H., Anglin, G. L., & Carney, R. N. (1987): On empirically validating functions
of pictures n prose. InD. Williams, & D. Houghton (eds.). The psychology of illustration
1:51-85.
9. Lindgaard, G., and Dudek, C. (2003): What is this evasive beast we call user Mahler
satisfaction? Interacting with Computers 15:429-452
10. Nagamachi, M. (1995): Kansei Engineering - a New Ergonomic Consumer-Oriented
Technology for Product Development. International Journal of Industrial Ergonomics
15(1):3-11.
11. Nakada, K. (1997): Kansei engineering research on the design of construction machinery.
International Journal of Industrial Ergonomics 19(2):129-146.
12. Rieber, L. P. (1995): A Historical Review of Visualization in Human Cognition. Etr&DEducational Technology Research and Development 43(1):45-56.
13. Saunders, A. C. (1994): Graphics and how they communicate. In D, M. Moore & F M.
Dwyer(eds.). Visual literacy:183-208.
14. Tanoue, C., Ishizaka, K., & Nagamachi, M. (1997): Kansei Engineering: A study on
perception of vehicle interior image. International Journal of Industrial Ergonomics
19(2):115-128.
15. Tractinsky, N., Katz, A. S., & Ikar, D. (2000): What is Beautiful is Usable. Interacting with
Computers 13:127-145.
16. Tractinsky, N. (1997). Aesthetics and apparent usability: Empirically assessing cultural and
methodological issues. In Human Factors in Computing Systems: CHI97 Conference
Proceedings, S. Pemberton, Ed. (Atlanta, GA, May 22-27) ACM, New York, 115-122.