Style Template and Guidelines for AIC2007 Proceedings

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

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]

Table 3. The results of postive icon image [5]

At the end, the six kinds of design measure as “square-frame,” “plane-shadow,” “non-perspective,” “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).