Effect of coloration of touch panel interface on wider generation operators

Effect of coloration of touch panel interface on wider generation operators Hidetsugu Suto College of Design and Manufacturing Technology, Graduate School of Engineering, Muroran Institute of Technology 27-1 Mizumoto-cho, Muroran 050-8585, Japan Tel: +81-143-46-5400 Fax: +81-143-46-5499 Email: suto@csse.muroran-it.ac.jp Makiba Sakamoto Department of Design for Contenmporary Life, Gifu City Women s College 7-1 Kita-machi, Hitoichiba, Gifu 501-0192, Japan Tel: +81-058-296-3131 Fax: +81-058-296-3130 Email: sakamoto@gifu-cwc.ac.jp Abstract The authors have already confirmed that coloration contrast used in the interface design of touch panels affects operation speed and accuracy. Moreover, it became clear that not only the color of the input element such as a push button but also the decoration coloration of background affect operation. However, it is expected that the effects change with aging because the ability of the operator decrease with aging. Therefore, the relationship between the effects of coloration used in an interface design and operator s age is discussed. In particular, the colors used in background decoration that are not used for the operation element are focused on. In the experiments, the subjects were asked simple calculation questions and answered them by pushing one of the buttons displayed on the screen. The experiments were conducted by using 15 different screens. The color contrast displayed on each screen is unique. As a result, it was revealed that the relationship between coloration contrast of background and accuracy of operation depends on the operator s age. However, the relationship between the color contrast of screen and operation speed was not affected by aging. Keywords-Interface design, color design, operation, usability. I. INTRODUCTION Electric devices with touch panel interfaces, such as ATM consoles, ticket vending machines at stations, and multimedia stations at convenience stores have become widely prevalent. New media technologies with touch panel interfaces, such as interactive advertising systems called digital signage, also appear in urban areas. With such new technology media, we can look at information on the screen and can retrieve information by touching the screen [1]. These devices should be given user-friendly interfaces because various kinds of people use them in several public spaces. In addition, the spread of personal information devices that have touch panel interfaces such as tablet computers and smart phones continues worldwide. These devices also should have user-friendly interfaces because they are used in our daily life for several uses. However, these devices are not always designed considering various generations of people. In fact, they tend to be tricky to use even for young people and many people have difficulty using such new devices. Therefore, developing a methodology for designing touch panel interfaces is required. Touch panel interfaces have no mechanical buttons, and the operators have to recognize how to operate them from visual information displayed on the screen. Therefore, graphic design of touch panel interfaces plays an important role in the user s operation. The relationship between graphic design and operation has been investigated in the cognitive psychology field [2], [3]. In these studies, semantic analysis of the interface is discussed. However, more intuitive factors should also be investigated [4]. Thus, we focus on the operation that is done with skills base process [4]. Coloration is one of the most essential factors of graphic design [5], [6]. Hence, the authors have been focusing on the relationship between colors used in interface design and user-friendliness. Several experiments have been conducted to investigate the effects of colors used in an interface on user-friendliness [7]. As a result, it became clear that not only the coloration of operation elements such as push buttons but also the decoration coloration of background affect the operation [8]. In particular, the color contrast used in background designs affected the operations [8], [9]. Thus, we focus on the color contrast used in background decoration of interface screens. Generally, ability to perceive the color contrast declines progressively with aging. For example, it is well known that the response time to a light stimuli increases with advancing age. Hence, the operators age should be considered when designing touch panel interfaces. Therefore, we will discuss how to change the relationship between the color contrast used in a screen and user-friendliness with aging. The spending time and accuracy of operations are used as an index reflecting user-friendliness. II. OPERATION AND COLORATION A. Operators age and ability to operate Operators see the information displayed on a screen with their eyes and understand how to operate the devices. Then, they operate the device in accordance with their own understanding. Therefore, the operator s eyesight is one of the most important factors when operating a digital device. The graph in Fig. 1 shows the relationship between ability

Eyesight Response time sec. 1.4 1.2 1.0 0.8 0.6 0.4 0.2 (A) (B) 10 20 30 40 50 60 70 Age Men Women Figure 1. Relationship between eyesight and age [10]. 0.8 0.7 0.6 0.5 0.4 0.3 0.2 0.1 0 (A) (B) 10 20 30 40 50 60 70 Age Men Women Figure 2. Relationship between response time to light and age [12]. to see and age. We can see that eyesight ability reaches a peak around nineteen, and then it decreases gradually. Therefore, usually we have the best eyesight ability in the period indicated by (A) in Fig. 1. It is also reported that many people realize their eyesight is weakening in their thirties [10][11]. The ability quickly declines until around fifty (Fig. 1 (B)), and then it decreases gradually. Response speed to stimuli is also important when operating digital devices. An operator who has poor response ability cannot handle the items on the screen smoothly even if he/she could perceive them. The graph in Fig. 2 shows the relationship between reaction time to a light stimulus and age. We can see that people in their twenties (Fig. 2 (A)) give the quickest response to light stimuli [12], and the ability decreases rapidly until he/she is in his/her mid-thirties (Fig. 2 (B)). In accordance with the above discussions, the operators can be divided into two groups: before and after midthirties. In particular, we focus on users in the early twenties and late thirties because they are the main users of digital devices; the former have the best abilities, and the latter keep the abilities stably until they reach their fifties. Of course, people over 60 can be thought of as important potential users of touch panel interface devices. However, we focus on the current major users here and will study senior users in future work. B. Definition of contrast of brightness of colors The color contrast is one of the most important factors of graphic design [5] [6], and it contributes to a change in an observer s emotion and recognition. The authors have already clarified that speed and accuracy are affected by the contrast of brightness of colors used in a screen when operating a touch panel device. The brightness of color is defined as a number from 0 to 9 in the Munsell color system. When thinking about coloration contrast, we should consider the differences of brightness among all colors used in the coloration because the coloration consists of various colors. Thus, the mean value of the differences of brightness between all combinations used in a coloration is used for representing the contrast of the coloration. The mean value is calculated as follows: n n ( b i b j ) i=0 j=0 DBV = (1) nc 2 where n is the number of colors used in coloration of a screen and b n is the brightness of the nth color used in the interface. We call this value DBV (difference between brightness of colors value) on a screen. On the other hand, the mean brightness of all colors may be used for representing coloration brightness. However, we do not use this value because the classification used is incompatible with the classification when using DBV. III. EXPERIMENT The authors had already investigated that the DBV value of an interface screen affects operation speed and operation accuracy [9]. However, relations between the effects and the operator s age was not known yet. Thus the new experiments were conducted to investigate the relations. A. Subjects There were 20 subjects (males and females in their twenties to forties). In accordance with the discussion in section II-A, the subjects are divided into two groups: under thirty years old ( group) and over thirty years old ( group). The group consists of 10 persons from 20 to 23 years old, and the group consists of 10 persons from 35 to 43 years old. They do not have any physical or mental problems that would prevent them doing the tasks in the experiments. B. Interface designs The interface screens used in the experiments were prepared based on the DBV and the brightness of the screen. The bottom of each screen had different coloration. Each coloration consists of three different colors. 5 different DBV values (from 0 to 4) and 3 different brightnesses of screens (light, medium, and dark) were used for the decorations. Here, light means that the brightness of the

DBV = 1 DBV = 2 DBV = 3 DBV = 4 Light group screen 1 screen 4 screen 7 screen 10 screen 13 Medium group screen 2 screen 5 screen 8 screen 11 screen 14 Dark group screen 3 screen 6 screen 9 screen 12 screen 15 Figure 3. 15 kinds of screens used in experiments. brightest color on the screen is 9.5, dark means that the brightness of the darkest color on the screen is 1, and medium means that the mean of the brightness of colors on the screen is 5.25. Thus, the 15 screens shown in Figure 3 were prepared. A liquid crystal display panel, FlexScan L560T-C (17 inches, 1280 1024 px) made by EIZO NANAO Corporation, was used for providing the interface for the subjects. C. Tasks The interface design used in the experiments is illustrated in Figure 4. The subject sits down facing a screen. In the tasks, the subject tried single-digit mental arithmetic tests. On the screen, one correct answer and two wrong answers are displayed under each problem. Each subject has to select the correct answer from the three alternatives and touch one of three push buttons. If a subject does not touch any buttons in 1.5 seconds, the system moved on to the next problem. The subject was given thirty different problems for each screen. D. Outline Figure 5 shows the timeline of the experiments. First, the subject got the instructions and tried a task for practice by using a screen without decoration. Then, the subject tried tasks by using each screen shown in Fig. 3. A twominute break was given between trials for each screen. During the breaks, the subject wore an eye mask to rest his/her eyes to decrease eyestrain and the effect of coloration of the previous screen. These steps were repeated 15 times for each subject with different screens. The order of the screens used was random for each subject to reduce order effects. The number of correct Figure 4. Coloration Screen elements. answers was counted and the spending time of operations was measured. IV. RESULTS AND DISCUSSION Differences between the results of the group and the group are compared. The graphs in Figure 6 show the results of the experiments. The graphs in the first line show the interactions between operators generation and operation time. The vertical axes are labelled the subjects generation and the horizontal axes are labelled the average of operation time. The operation time was digitized as shown in the following table:

vs DBV = 1 vs DBV = 2 vs DBV = 3 vs DBV = 4 Average number of correct answers Average of operation time 3.0 3.5 4.0 4.5 DBV = 1 F = 0.091 DBV = 1 F = 0.957 3.0 3.5 4.0 4.5 DBV = 2 F = 0.093 DBV = 2 F = 2.854 3.0 3.5 4.0 4.5 DBV = 3 F = 0.012 DBV = 3 F = 0.622 4.0 4.5 3.0 3.5 DBV = 4 F = 0.053 DBV = 4 F = 0.364 Figure 6. Interaction between generation, operation time, and number of correct answers. 0 min. 5 min. 1 min. 2 min. 53 min. Start of experiment. 1.Subject got instructions of experiment. 2.Practiced task on screen designed for training. 3.Break (He/she wore eye mask to rest eyes.) 4.Tried tasks with each screen. 1 min. 5.Break (He/she wore eye mask to rest eyes.) End of experiment. Figure 5. 4 and 5 are Repeated until all screens have been finished. Procedures of experiment. 2 min. average time x average time x 800 t < 850 0 1100 t < 1150 6 850 t < 900 1 1150 t < 1200 7 900 t < 950 2 1200 t < 1250 8 950 t < 1000 3 1250 t < 1300 9 1000 t < 1050 4 1300 t < 1350 10 1050 t < 1100 5 In these graphs, the subjects have smaller values than the subjects regardless of DBV values. Thus, we cannot find any interaction between the subjects generation and the DBV values. Meanwhile, the graphs in the second line show the interaction between the subjects generation and the number of correct answers. The vertical axes are labelled the subjects generation. The horizontal axes are labelled the average number of correct answers. From these graphs, we can see that the value of subjects is bigger than the value of subjects in most cases. When looking at the difference between the value of the subjects and the value of the subjects, we find that it is bigger when using the screens than when using the other screens in each graph. In particular, when using DBV = 1 screens and DBV = 2 screens, the relation is reversed. In addition, from the results of two-way ANOVA tests, it became clear that interaction between subjects generations and DBV value is significant (F = 2.854, p < 0.1000) when using screens and DBV = 2 screens. One possible reason for this significant subjects generation and DBV value interaction (when, 2) is that the operation area of a screen is restricted by decoration and the cognitive load of the subject is reduced when using the interfaces with DBV = 2. A similar tendency can be seen when using the interfaces with DBV = 1. On the other hand, the contrast is too strong when using interfaces with DBV = 3 and DBV = 4, and operators were no longer focused on the task by becoming conscious of the decorations. However, the young operators have enough capability to operate and could do the tasks stably with interfaces of any coloration. V. CONCLUSION In this paper, the relations between the effects of coloration of touch panel interface designs on operators and their generations were discussed. Background decoration coloration was the subject of discussion. Simple tasks that can be done with skills base process were used to investigate the effect on simple operations. First, DBV, which represents the contrast of brightness of color used in an interface, was defined. Then, the experiments were conducted to investigate how to change

the operation speed and accuracy when the DBV of the interface decoration was changed with and subjects. As a result, the following has been revealed: operators who are around twenty years old are not affected by interface background coloration. Also, the operation speed of operators who are around forty years old is not affected. However, the accuracy of operation of operators is affected by the DBV of the background decoration. In particular, the accuracy of operators is greatly improved when using the interface with DBV = 2. Hence, the DBV value can be used as one of the dominant criteria when designing touch panel interface screens that are used in public space. Therefore, if it is expected that an interface will be used by wider generations and accurate operation is required, the interface decoration should be designed with DBV = 2. Interface coloration of information devices plays a very important role for corporate strategies because it reflects the corporation color and creates users mental image of the corporation. The usability also affects the users mental image of the corporation. The proposed methodology is expected to support designing interfaces for corporate strategic products. [8] Makiba Sakamoto, Hidetsugu Suto, M. Sawai, Relation between impressions of a touch panels coloration and operation, Artifcial Life and Robotics, vol. 15 no. 3 pp. 335 340, 2010 [9] Mayuko Nambu, Makiba Sakamoto, Hidetsugu Suto, Influences of coloration of touch panel interface on the several generation operators, Proc. SICE Annual Conference 2011, pp. 202 205, 2011 [10] Workshop of the universal design, Universal design, JAPAN INDUSTRIAL PUBLISHING CO.LTD., 2001 (In Japanese) [11] S. Nakagawa, Textbook for universal design, Nikkei BP Publication centre, 2002 (In Japanese) [12] T. Kondou translate, Human Engineering guide to equipment design, CORONA PUBLISHING CO.LTD., 1972 (In Japanese) 2006, pp. 179 180, 2006. ACKNOWLEDGMENT This work was supported by Grant-in-Aids for Scientific Research by the JSPS (No. 21360191, No. 23653260, and No. 23611025). REFERENCES [1] Lars-Ingemar Lundstrom, S. Merrill Weiss, Digital Signage Broadcasting: Broadcasting, Content Management, and Distribution Techniques (Focal Press Media Technology Professional Series), Focal Press CO.LTD., 2008. [2] Donald A. Norman, Emotional Design: Why We Love (or Hate) Everyday Things, Basic Books CO.LTD., 2004. [3] Kusumi Tkashi, The Role of Metaphors in User Interface Design:Going from the Desktop to Virtual Space and Returning to Language, SPECIAL ISSUE OF Japanese Society for the Science of Design, Vol. 10 No. 1 pp. 64 73 2002. (In Japanese) [4] J. Rasmussen, Skills, rules, knowledge; signals, signs, and symbols, and other distinctions in human performance models. IEEE Transactions on Systems, Man and Cybernetics, Vol. 13, No. 3, pp. 257 266, 1983. [5] Gavin Ambrose, Paul Harris Colour: N. the Sensation Produced by Rays of Light of Different Wavelengths, a Particular Variety of This (Basics Design), AVA Publishing SA CO.LTD., 2005. [6] Rob Carter Working With Computer Type: Color & Type, Rotovision CO.LTD., 1997. [7] Hidetsugu Suto, Makiba Sakamoto and Makiko Okita, Affect of color of interface on accuracy and speed of operations, Proc.2009 International Conferenceon Biometrics and Kansei Engineering, pp. 201 204, 2009