Investigation of eye-catching colors using eye tracking

Transcription

1 Investigation of eye-catching colors using eye tracking Mokryun Baik, Hyeon-Jeong Suk*, Jeongmin Lee, Kyung-Ah Choi Department of Industrial Design, 291 Daehakro, Youseong-gu, Daejeon, South Korea ABSTRACT An eye tracking experiment was conducted to investigate the relationship between eye gazing movements and the color attributes to support the creation of effective communication and increase aesthetic satisfaction. With consideration to the context of smart phones, the study focused on icon arrays, and thus each stimulus set was composed of 25 color square patches arrayed in the format of a 5 by 5 grid. The experiment was divided into three parts, each examining one specific attribute of color, while controlling its other attributes. Fifteen college students were recruited, among whom all partook in all three parts. In Part I, hue difference was examined. Each stimulus set contained 25 hues under a fixed tone. It was revealed that subjects were more attentive to warm colors than to cool colors, particularly when warm colors were arranged along the horizontal and vertical axes; In Part II, the experiment dealt with tone difference. 25 tone variations for red, green and blue were provided as stimulus sets. However, the result indicated that changes in tone does not have a significant influence on subjects initial attention; Lastly, in Part III, combinations of colors were examined to determine whether color contrast influenced participants attention in a manner different from that of single colors. Among them, icons with complementary contrast gained the greatest attention. Throughout the experiments, the background was applied with either black or white; however a contrast effect between background and foreground was not noticeable. Keywords: Color, Eye tracking, Hue, Tone, Color contrast, Smartphone GUI 1. INTRODUCTION Accounting for 80 percent of the human visual experience, color is a powerful information channel among the human senses 1 that cannot be taken for granted, especially when it comes to design. The use of color variation is one of the most effective and intuitive ways to visually prioritize information. However, visual presentation of color is often subjective to the eye of the designer and can be harmful to perceiving visual information accurately 2. Hence, an objective guideline is necessary that allows designers to choose the correct colors for visual display. This study attempted to investigate the characteristics of colors that catch people s attention more easily. To do so, eyetracking technology was employed. For over 100 years, ever since it was first utilized for reading research 2, eye tracking analysis has been widely used as a scientific tool to improve the usability of interface design. In the digital era, where display screens are overflowed with large amounts of information, eye tracking technique has supported researchers to find out both where on the screen a user looks and how their eyes shift from one location to another, to design a website that strongly correlates with effective usability 3. Analyzing eye movements can provide an objective source for the visibility and placement of elements that can be used to improve the interface design of websites 4. Eye tracking methodologies have been also used in related fields of human factors and cognitive ergonomics to measure situation awareness. For example, evaluating the correspondence between driving tasks and eye movement patterns provided a result to improve visual display in the context of safe driving 5. With the increase in popularity of smartphones and mobile applications, recent works have taken an interest towards improving mobile device interaction by eye tracking analysis 6. More advanced equipment suitable for efficient and high precision eye tracking of mobile devices have been introduced in the market, allowing for professionals to decisively select and recommend appropriate, cutting-edge designs for mobile applications. However, little has been focused on the role of color, despite that variation of color attributes might have a great potential to manipulate one s attention. Given this background, this study carried out eye tracking experiments considering the unique characteristics of mobile device displays, especially for displays showing an array or a matrix of identically sized icons. *h.j.suk@kaist.ac.kr; phone ; fax ; ced.kaist.ac.kr Human Vision and Electronic Imaging XVIII, edited by Bernice E. Rogowitz, Thrasyvoulos N. Pappas, Huib de Ridder, Proc. of SPIE-IS&T Electronic Imaging, SPIE Vol. 8651, 86510W 2013 SPIE-IS&T CCC code: X/13/$18 doi: / Proc. of SPIE Vol W-1

2 2. GOAL The research was intended to empirically investigate which colors best attract the eyes of a viewer. In particular, it attempted to determine whether the characteristics of color attributes affect the attention of users differently. Throughout the study, the focus was on displays that show identically sized icons resembling the default GUI of mobile devices such as smart phones. 3. METHODS Considering the context of recent communication media, such as smart phones, the design of the stimuli used in the experiments adopted an icon array structure. Each stimulus consisted of 25 identically sized color patches in a 5 by 5 matrix. A combination of 25 color patches was mounted in both black and white in order to avoid the contrast effect between color patches against the background. The color stimuli were sampled based on the HSB color system provided from the Photoshop 5.0 software, in which a color is identified by three fundamental color properties: hue(h), saturation(s) and brightness(b). In compositing the 25 color chips, three different approaches were employed and thus, the eye tracking experiment was divided into three parts respectively. 3.1 Stimuli of the three parts Part I Part I was intended to determine which color hue catches the attentions of the eyes first. Accordingly, 25 different hues of the same tone were shown together. Based on the HSB color system, the hue varied in degrees from 0 to 360, allowing 24 hues to be sampled by increasing the hue angle by 15. Colors with a saturation value of 100% were defined as those with a vivid tone. From the respective vivid tone samples, three more stimulus sets were produced with variations in tone - light, dark, and moderate - by controlling the saturation as well as brightness, i.e. the four tones were chosen among 25 tone variations generated by dividing the saturation and brightness levels (each ranging from 0% to 100%) by 5 as shown in Figure 1. In addition, because gray is a color that has no hue, an appropriate gray was selected and added to make up 25 hue samples per each tone. The four sets of color stimuli employed in Part I are shown in Figure 2. Color Met [Rowena.] colon I cater "'T I wer Mans I qe. 100 % (ln., G e x n. 0 M: W Y. U. 0 v..00 X e EMI MINN MUM D Figure 1. The color picker window in the Photoshop 5.0 was divided into 25 areas, four of which correspond to vivid (V), light (L), dark (D) and moderate (M) tones. Figure 2. Four sets of 25 color stimuli in Part I: (from top to bottom) vivid tone, light tone, dark tone, and moderate tone Proc. of SPIE Vol W-2

3 A total of 25 hues in each tone were randomly arranged in three different ways to avoid position bias. Each stimulus set was equally tested on both a black background and a white background. Thus, a total of 24 (four tones * three positions * two background variations) stimulus sets were used for Part I. Stimulus sets in the vivid tone were shown first, followed by light, dark and moderate tone stimulus sets, respectively. Part II Part II sought to determine the tone that initially attracted the visual attention of the subjects. In this part, 25 different tones within the same hue were tested altogether. Figure 1 illustrates how the visual stimuli for red hue (h= 0 ) were sampled. In this way, a total of 25 tones in red, green (h= 180 ), and blue (h= 270 ) hues were chosen by dividing the range of the tone equally. Samples with the same hue were randomly arranged in three different ways for avoiding any position bias. Each stimulus set was equally tested on both a black background and a white background. Thus, a total of 18 (three hues * three positions * two background variations) stimulus sets were used in this part of the experiment. First, 6 stimulus sets with a red hue were presented, followed by 12 stimulus sets with blue and gray hues in that order. Part III Lastly, in Part III, a combination of two colors, an icon color and a background color, were used to investigate whether color contrast has an influence on participants attention in a manner different from that of single colors. To compare the saliency effects of single colors and two-color combinations, 3 stimulus sets in the vivid tone of Part I were used as background colors. Pictograms of camera, phone, and Wi-Fi in vivid red, vivid blue, and vivid green were assembled into each single-color background (Figure 3). Pictograms in red were tested first followed by twelve stimuli with the identical pictograms but of green and blue hues in that order respectively. MUM II MENEM II MRS= Figure 3. Examples of stimulus sets (Part III) 3.2 Participants Fifteen college students made up of eight males and seven females were recruited with an average age of years and a standard deviation of 3.64 years. All participated in all three parts. 3.3 Procedure The Eye gaze Analysis System, a table-mounted eye-tracking system developed by LC Technologies Inc. was facilitated to record eye tracking data (Figure 4). At the beginning of the experiment, the eye movements of each individual participant had to be calibrated by the eye-tracking system while the participants were seated at an average of 60 cm from the 17-inch monitor. The configuration of the screen was set at a resolution of 1024 by 768 pixels and each color patch was presented as 125 by 125 pixels. The lighting of the experimental room was lit in 100 lx. Proc. of SPIE Vol W-3

4 Throughout the three parts, each stimulus was displayed on the monitor for seven seconds, with a two second break between each stimulus to prevent an afterimage effect. During the break, only a black or white screen was shown depending on the background color of the next image. There was no pause between the individual parts of the experiment, and the total time required for the entire experiment was approximately nine minutes. While viewing each stimulus, the subjects were asked to select their preferred color among the 25 color samples to determine if there was a correlation between color attraction and color preference. This approach insured that the concentration of the participants was persistent throughout the experiments. For analysis, the first three seconds were investigated to detect the eyecatching colors. Figure. Experiment environment 4.1 Analysis of eye tracking movement 4. RESULTS AND ANALYSIS Supported by the software, EMT Tracker 7, all eye-movements were recorded in dots and paths. In this study, the fixated positions within the first 3 seconds were taken into consideration while the remaining 4 seconds per each stimulus was excluded from analysis. The initial fixation was also removed from analysis as it was assumed that the initial fixation would generally be at the center of the screen or at a random point with no correlation to color saliency 8. Moreover, the positions that were just located on the path between the fixated positions were ignored, and all positions were recognized as fixations only when the duration of the fixated position exceeded.25 second. In this way, the most prominently noticeable color at the very instance of exposure, and thereby the innate color response of humans, could be pinpointed. Consequently, colors regarded as fixated positions were counted for every stimulus set of each participant, and the results were analyzed based on the frequency of counts. Figure 5. Eye movement path recorded by the EMT Tracker, recording resolution: 60 frames/sec. with 12 dots/sec. Proc. of SPIE Vol W-4

5 4.2 Results and analysis by part Part I Part I of the experiment observed whether certain hue categories grabbed participants attention more than that of other hue categories. Since the analysis was made based on the frequency of fixated counts, Chi-square test was performed to statistically examine the frequency difference. When considering the 24 hues independently, the Chi-square test was inadequate because half of the hues possessed less than 5 counts. Therefore, the hues were clustered into three groups, such as warm, cool, and neutral hues. Hues ranging from red (0 degree) to yellow (90 ) belonged to the warm group (6 hues), while blue-green (225 ) to purple-blue (315 ) belonged to the cool group (6 hues). The rest of the hues belonged to a neutral hue group. The neutral hue group covered a much large hue area with 13 hues including gray. However, the fixation counts of the warm group were higher than the other two groups, and the Chi-square test yielded a significant difference at the alpha level of.05. Therefore, it was revealed that the warm group grabs attention more effectively than the other two groups. Additionally, a position effect could be observed from the results. The color patches placed on the horizontal or vertical axes caught the eyes attention more easily. On the contrary, the participants fixated very little on color patches that were located on the right side of the screen. Part II Part II was intended to examine whether certain tones attracted the eyes more than others. For example, it was anticipated that colors in vivid tone would be viewed first by the participants. However, no tendencies of such sort were found with regards to the tone difference. When considering the finding in Part I, it can be assumed that hue plays a more dominant role than tone in attracting one s attention. Nevertheless, it was observed that the colors arranged along both axes held attention best, regardless of hue, confirming the findings about position in Part I. Part III Different from the previous parts, the purpose of Part III was to test whether color contrast has an effect on saliency. As shown in Figure 3, pictograms in vivid red, vivid blue, or vivid green were layered onto the stimulus sets of Part I, and accordingly, the 25 icon shaped color patches in each stimulus set were assembled into three groups: low color contrast, medium color contrast, and high color contrast. Admitting that each contrast group entailed different number of color patches, i.e. either 8 or 9 color patches, the fixated counts per each contrast group were compared. The frequency of fixation counts was greatest for the high contrast group and lowest for the low contrast group (Chi-square test, p<.05). For example, an icon in vivid red alone attracts more attention than an icon in vivid green, but the result will differ if the green icon were to have a red pictogram placed inside it. In addition, the contrast effect between foreground and background color did not show a noticeable influence on attention. There also seemed to be no correlation between colors that attracted the participants attention and their preferred colors. 5. GENERAL DISCUSSION & CONCLUSION Color can provide a great deal of assistance when it comes to visually prioritizing information in an effective and intuitive manner. As such, an objective guideline for color usage is required for designers that would allow designers to universally communicate with users and thereby improve the visual structure of interfaces under mobile communication contexts. Ironically, despite the emphasis of the role of color in visual expression, there has been little empirical evidence that deals with color attributes in catching one s attention. Foregoing this experiment, it was initially assumed that color related issues such as color attributes (hue and tone), color contrast, or position of a color would influence one s viewing pattern. In particular, color patches were distinguished in terms of a hue group, tone group, color contrast group and position group that are perceptibly alluring. In this experiment, a 5 by 5 icon array was applied to display color stimuli, resembling the GUI style of mobile device such as smart phones. Proc. of SPIE Vol W-5

6 By analyzing the frequency of fixation positions within the first 3 seconds, the colors that have potential for a recurring effect of repeatedly and frequently drawing back the attention of the eyes were discovered. As described in the results, the major findings are summarized into four aspects: First, warm colors grab the eyes attention; Second, tone difference within the same hue has no effect on attention; Third, for hue contrast, complimentary pairs are particularly more dominant; Fourth, color patches located on axes have benefit. In addition, it was revealed that the foreground-background color contrast does not play a decisive role. Provided as such, these empirical findings are expected to be applied to design practice straightforwardly. For instance, complementary color combination clearly has a stronger impact in catching the eyes attention, although what colors to use and how to use them must be well planned. Otherwise, color combinations can easily become jarring and distracting. Although further research should be implemented to increase the validity of these experimental results, it would not hurt for designers to take these findings into consideration when designing visual displays of information for mobile communication contexts. Lastly, should be noted that the number of participants of this study was limited to only 15 people. Moreover, only the fixation potions within the first 3 seconds were taken into consideration, thereby possible excluding some other aspects that might be related to eye movements. Facilitated by more advanced equipment and software, more dynamic and accurate measurements for areas of interest (AOI), such as first fixation, fixation duration would be examined in further studies. Moreover, smart devices are not only experienced in the displays of small mobile phones and tablets, but are quickly making way into large display screens, such as the television. Therefore, additional researches regarding large display screens are needed, with emphasis particularly on those conducted in real-life settings. 6. ACKNOWLEDGMENT This research was supported by the following programs: 1) Convergent Design University Program in 2012 funded by the Ministry of Knowledge Economy (MKE) (H ); 2) IT R&D program of MKE/KEIT (KI ); 3) Basic Science Research Program through the National Research Foundation of Korea (NRF) funded by the Ministry of Education, Science and Technology ( ). REFERENCES [1] Adams, F. M., and Osgood, C. E., A cross-cultural study of the affective meanings of color, Journal of Cross- Cultural Psychology 4(2), (1973). [2] Tufte, E. R., [Envisioning information], Graphics Press, Cheshire, (1990). [3] Rayner, K., and Pollatsek, A., [The psychology of reading], Prentice-Hall, Englewood Cliffs, (1989). [4] Goldberg, J. H., Stimson, M. J., Lewenstein, M., Scott, N., and Wichansky, A. M., "Eye tracking in web search tasks: design implications," in Proc. of 2002 symposium on Eye tracking research & applications, (2002). [5] Pan, B., Hembrooke, H. A., Gay, G. K., Granka, L. A., Feusner, M. K., and Newman, J. K., "The determinants of web page viewing behavior: an eye-tracking study," in Proc. of the 2004 symposium on Eye tracking research & applications, (2004). [6] Drewes, H., De Luca, A., and Schmidt, A., "Eye-gaze interaction for mobile phones," in Proc. of the 4th international conference on mobile technology, applications, and systems and the 1st international symposium on Computer human interaction in mobile technology, (2007). [7] Kim, B., Dong, Y., Kim, S., and Lee, K. P., "Development of integrated analysis system and tool of perception, recognition, and behavior for web usability test: with emphasis on eye-tracking, mouse-tracking, and retrospective think aloud," in Proc. of UI-HCII, (2007). [8] Zhao, Q., and Koch, C., Learning a saliency map using fixated locations in natural scenes, Journal of vision 11(3), 1-15 (2011). Proc. of SPIE Vol W-6