Abstract
Currently, it is a common scene that users click on-screen graphical user interfaces (GUI), or visual icons, to operate computers, tablet computers and smartphones as well as to execute program instructions. Employing eye-trackers as experimental tools, this study aimed to explore how different presentation modes of graphical icons affect users’ preference levels. The experiment was designed to investigate two variables: icon composition and background. Through permutation and combination, six presentation modes were obtained as follows: line + positive background (M1), plane + positive background (M2), line + negative background (M3), plane + negative background (M4), line + no background (M5), and plane + no background (M6). With the help of eye-trackers, seven participants were demanded to view thirty stimuli, or the contour drawings of graphical icons, presented simultaneously in the six above-mentioned modes. The participants’ fixation duration and fixation frequency were analyzed through two-way ANOVA. The analytical results showed that in terms of the two performance indicators above, M4 performed the best among the six presentation modes. Moreover, negative background performed better than positive background. The findings herein can serve as a reference when icons are researched or designed in the future.
Keywords
1 Introduction
With the rise of cellphones and tablet computers, the market of mobile applications (App) has been increasingly booming, so graphical icons have been commonly found in smart mobile devices. While working with the help of computers, tablets or smartphones, users simply click on-screen graphical user interfaces (GUI), or visual icons, which allow them to operate computers or execute program instructions [1]. With graphical icons presented in a relaxing way, users can locate their desired functions or objects more easily and quickly [2, 3]. That working mode enables users to manipulate the main menus, control buttons, and charts in a highly visual way; therefore, the software is used with much more ease [4]. Also, users can intuitively input instructions to be executed and interact with devices [5]. Graphical icons are more suitable for a smaller display space, such as the small screen on a handheld device. It’s because graphical icons can convey more information or show the minimum instructions in the limited space [6]. Being more diversified as well as convenient, applications in cellphones, tablets, and computers are increasing constantly, with the number of corresponding icons increasing. Under such a situation, designers tend to make icons more and more complex so that icons may provide large amounts of information in a limited space and enhance users’ attention [3]. Well-designed icons can achieve such positive effects as drawing users’ attention, shortening search time, reducing operational errors, and relieving users’ burden. In consequence, icon presentation design of a GUI has remained an important consideration to interface designers.
In the past, research on visual icons mainly focused on their sizes, distances, background, [2, 7, 8] as well as contrast [9]. As for icon-searching, much emphasis was put on how subjective evaluation of usability is affected by brightness, contrast, sharpness [1], position, number, color, and shape [10]. However, there has been little research on how presentation modes of icons can affect users’ preference levels. This study explored icon presentation modes; specifically, through eye trackers, the participants’ fixation duration and fixation frequency were measured while the icons were being viewed; besides, subjective evaluation of preference was conducted and analyzed. The findings herein can be used as a reference by interface designers to design icons.
2 Experiment on Preference Levels
In this study, a 13-inch tablet was employed to explore how users’ preference levels are affected by the two independent variables of icon presentation: icon composition and background. According to previous research, icon composition is subdivided into lines and planes, while background is subdivided into positive background, negative background, and no background [11]. Based on icon composition and background, six presentation modes were obtained through permutation and combination as follows: line + positive background (M1), plane + positive background (M2), line + negative background (M3), plane + negative background (M4), line + no background (M5), and plane + no background (M6). In the experiment, an eye tracker was utilized to measure each participant’s fixation duration and fixation frequency while the viewed icons were presented in the six modes mentioned above; in addition, how preference levels were affected by icon presentation modes would be investigated. The whole experiment was modeled on the experimental procedures propounded by Ho and Lu [12].
2.1 Participants
To perform the experiment, seven college students were recruited as the participants, whose ages ranged from eighteen to twenty-two. Because the participants were different in height, the location and height of each chair had to be realigned to match its occupant. Besides, the height of each participant’s head was fixed so that his or her sight line was parallel with the center of the screen right in front of him or her. The participant’s eyes should be kept at 60 cm away from the screen; meanwhile, each participant had to feel relaxed in a sitting posture throughout the experiment. Immediately after entering the laboratory, each participant sat in front of a computer. After being properly seated, each participant started to read the instructions. When the visual fixation experiment was performed with the help of an eye-tracker, the participant’s vision and attention would affect his or her judgment. Therefore, each participant had to pass a procedure called “correction of the visual fixation point.” Moreover, his or her vision had to conform to the standard vision before or after correction. The seven participants followed the within-subjects design, and the order in which they conducted the experiment was in compliance with the counterbalanced measures design. In other words, the order in which each participant operated the experimental interfaces varied with his or her predetermined sequence. After an individual experiment was finished, its result was automatically recorded in the system. As the whole experiment was completed, each participant was rewarded with NT$300.
2.2 Icon Stimuli
The thirty icons selected by Lin et al. [13] were used as icon stimuli in this study. The colors, backgrounds, and decorative lines of the sample icons were removed so that such factors as color, brightness, contrast, and shadow might have no effect on preference levels or image recognition. After that, the icon stimuli were converted into contour drawings presented in their optimum views, with the line width of icon borders being 2 pixels, or 0.05 cm. The stimuli were arranged in accordance with the experiment conducted by Huang and Chiu [14]. Each stimulus was presented concurrently in six different modes, or a group of six icons. In addition, the distance between the screen center and each icon was equal; likewise, the distance between the centers of two adjacent icon stimuli was equal. Consequently, after being connected, the centers of the six icons formed a regular hexagon, as shown in Fig. 1. Through permutation and combination, the six presentation modes were randomly displayed so that they might appear in six different positions as many times as possible. Each presentation mode of any of the thirty icon stimuli was compared with the other five modes. The accurate shape, location and partition of an icon could not be determined based on visual fixation during the eye-tracking experiment. As a result, the experiment focused on the overall shape of the icon to make a judgment, without showing its detailed features.
2.3 Experimental Tools and Conditions
With a resolution of 1024*768 pixels, the 22-inch screen was employed and connected with an eye tracker to record visual tracks. As for image presentation, the HP desktop computer was used to control graphical software. Furthermore, GazeTracker (GT), a piece of interface software in the HP desktop computer, was responsible for detecting the number of first fixations measured by FaceLabTM v4, which is an eye tracking system. The sampling frequency of FaceLabTM eye tracker is 60 Hz; meanwhile, the FaceLabTM software was used to calculate the mean delay time of 30 ms.
2.4 Experimental Procedures
The experimental procedures in this study are described as follows. (1) The experimental goals, methods, and procedures were explained to all participants. (2) Each participant started to write down his or her basic information, including name, age, gender, and college major. (3) After reading the experimental instructions, each participant was requested to observe the graphical icons which attracted much attention. (4) Both vision examination and correcting visual fixation points were carried out. (5) At the beginning of the experiment, each participant was exposed to a gray screen for six seconds. (6) Then, the participant was exposed to a fixation plus sign (“+”) on the screen for two seconds. (7) The participant was demanded to put his or her index finger on the Enter key and to start viewing a target image on the screen. Next, the contour drawing of an icon in six presentation modes appeared at the same time. After choosing the favorite icon in a particular presentation mode, the participant had to press the Enter key. (8) The participant went on to experiment with the next icon, repeating steps 5 to 8 above until all the thirty icon stimuli were tested. (9) Each participant was required to fill out a subjective questionnaire of preference in accordance with a scale of seven levels, with score 1 meaning extremely negative, score 4 meaning neutral, and score 7 meaning extremely positive, as shown in Fig. 2. For an individual participant, the whole experiment lasted between twenty-five and thirty minutes.
2.5 Analysis of the Collected Data
Eye-trackers were employed to record the experimental data while seven participants were viewing thirty icon stimuli presented simultaneously in six modes. As each icon was viewed repeatedly by the participants, thirty groups of fixation duration and fixation frequency were obtained. Next, the two-way ANOVA with dependent samples was conducted. Finally, the statistical software, Windows SPSS 12.0, was used to analyze the results, with p < .05 set as the level of a significant difference.
3 Result
3.1 Fixation Duration
To explore the effect of icon presentation modes on preference, the eye-tracker was employed to measure fixation duration and fixation frequency; meanwhile, a questionnaire was used to measure subjective preference levels. Afterwards, the effects exerted by icon composition and background were analyzed.
The interaction of icon composition and background produced a statistically significant effect on fixation duration (F (2, 12) = 6.124, p < 0.05). Table 1 shows the result of ANOVA concerning fixation duration. The longest fixation duration, or 9785.3 (SD = 6073.65) ms, belonged to plane + negative background (M4) while line + negative background (M3) ranked second, with fixation duration of 6923.0 (SD = 4921.83) ms. Ranked third was plane + no background (M6), with fixation duration of 5893.6 (SD = 3294.55) ms. Ranked fourth was line + positive background (M1), with fixation duration of 4699.7 (SD = 2188.36) ms. Ranked fifth was plane + positive background (M2), with fixation duration of 4163.1 (SD = 3165.87) ms. The shortest fixation duration, or 3420.1 (SD = 1231.34) ms, went to line + no background (M5). As shown in Table 1, the effect of icon composition alone on fixation duration did not reach a significance level (F (1, 6) = 1.985, p>0.05); on the contrary, the effect of background on fixation duration reached a significance level (F (2, 12) = 5.180, p < 0.05). After being analyzed through LSD multiple range test, it was discovered that the mean fixation duration of positive background, negative background, and no background was 4431 ms, 8354 ms, and 4657 ms respectively, as shown in Table 2. In other words, the participants spent more time viewing the icons with negative background than those with positive background, as shown in Fig. 3.
3.2 Fixation Frequency
Similarly, the interaction of icon composition and background had a statistically significant effect on fixation frequency (F (2,12) = 7.895, p < 0.01), as shown in Table 3. Plane + negative background (M4) ranked first, getting 49.8571 (SD = 28.7195) times while line + negative background (M3) ranked second, getting 35.1429 (SD = 23.6462) times. In the third group ranked plane + no background (M6), line + positive background (M1), and plane + positive background (M2), getting 30.5714 (SD = 15.92542) times, 25.0000 (SD = 10.69268) times, and 20.7143 (SD = 13.37553) times respectively. The lowest fixation frequency, or 17.4286 (SD = 4.99524) times, went to line + no background (M5), as shown in Fig. 4.
The effect of icon composition on fixation frequency did not reach a significance level (F (1, 6) = 2.424, p >0.05). Contrarily, the effect of background on fixation frequency reached a significance level (F (2, 12) = 5.199, p < 0.05), as shown in Table 3. After being analyzed through LSD multiple range test, it was discovered that the mean fixation frequency of positive background, negative background, and no background was 22.857, 42.5, and 24 times respectively, as shown in Table 4. Namely, in terms of fixation frequency, the icons with negative background performed better than those with positive background.
4 Dissection
4.1 Fixation Duration
The interactive effect of icon composition and background on fixation duration reached a significance level. Fixation duration and fixation frequency were similarly influenced by the six icon presentation modes. In terms of both fixation frequency and fixation frequency, plane + negative background (M4) ranked first while line + negative background (M3) ranked second. In the third group ranked plane + no background (M6), line + positive background (M1), and plane + positive background (M2). It was line + no background (M5) that ranked last. M4 and M3 performed considerably better than M2, M1, M6, and M5. That is because negative background combined with icon borders is considered to be a part of the icon. The white target icon with negative background and borders is likelier to be noticed than that with positive background and borders. It was suggested that when the background is almost the same color as the searched target, the search speed will be lowered [15]. In this study, the background of some target icons is white, such as the icons in modes M2 and M1.
As shown in this study, there was no significant difference in search speed either between no background and positive background or between no background and negative background. The above result corresponded with the conclusion reached by Huang and Chiu [14], who investigated how the width of the icon border and the icon size affected search time. As indicated by their study, when the participants searched for certain icons, different widths of the icon borders produced different effects on search time. Specifically, the 1-pixel border took the longest time, the 2-pixel border ranked second, and the 3-pixel border took the shortest time. In this study, the width of the border line with positive background is only 2 pixels, and the border with negative background is framed by planes. When a border line grows to a certain width, it becomes a plane. Larger icons tend to attract attention more easily; meanwhile, their fixation duration and fixation frequency increase as well. As a result, the icons with negative background performed better than those with positive background in terms of preference levels, fixation duration, and fixation frequency.
In terms of fixation duration and fixation frequency, plane + negative background (M4) performed considerably better than line + negative background (M3). Complexity is another factor that affects fixation duration and fixation frequency. A line-based icon dissects the image space for more times than a plane-based icon. In consequence, the finer an image is, the more complex its composition becomes [16]. Visually complex images may lower users’ recognition performance [17, 18]. In an environment with poor legibility, the line-based icon is obviously more complex than the plane-based icon, so lines with negative background (M3) are less noticeable than planes with negative background (M4). Furthermore, the plane-based icon has a larger area, looking more vivid than the line-based icon [19]. By contrast, the fine lines of a line-based icon render itself unclear. Consequently, the participants in this study had more difficulty recognizing line-based icons, with their preference levels lowered.
4.2 Fixation Frequency
As suggested in previous studies, an icon includes its background and image, with the border regarded as a part of the icon. The image with negative or positive background is larger than the image with no background. A larger image helps to upgrade its own recognizability [20] and is easily captured by vision [21]. As indicated by the experimental results herein, the effects of M2, M6, and M1 on fixation duration and fixation frequency show no statistically significant difference regardless of different sizes of the same icon. The conclusion is similar to that reached by Fleetwood and Byrne [6], who explored icon borders. According to the two researchers, having no border, round borders, and square borders showed no significant difference in their effects on users’ search speed. Similarly, this study presumes that line-based and plane-based images catch the participants’ eye easily, for the focus of fixation is the line or plane rather than the border. Although the icon with positive background, such as M1 and M2, is larger than the icon with no background (M6), the participants concentrate too much attention on the image itself to notice the fine lines of the border with positive background. Therefore, M6, M1, and M2 show no significant difference in terms of fixation duration and fixation frequency.
Among the six icon presentation modes, line + no background (M5) gets the shortest fixation duration and the lowest fixation frequency. It is probably because the area of an icon in M5 appears smaller. Besides, though M5 and M6 are icons with no border, the line-based icons in M5 looks more complex than the plane-based icon in M6. Accordingly, the recognizability of M5 is poorer than that of M6, with the participants’ preference for M5 lowered.
5 Conclusions
This study explored how different icon presentation modes affected users’ preference levels. While the icons were being viewed by the participants, eye trackers were employed to record their fixation duration and fixation frequency. The findings herein indicate that icon composition and background have an effect on users’ preference for the viewed icons. Specifically, the icon in M4 (plane + negative background) performs the best, getting the highest preference level. Moreover, icon composition has no effect on users’ preference levels. In terms of fixation duration and fixation frequency, negative background performs better than positive background. The findings herein can be used as a reference by interface designers to design icons.
References
Näsänen, R., Ojanpää, H.: Effect of image contrast and sharpness on visual search for computer icons. Displays 24, 137–144 (2003)
Huang, K.-C.: Effects of computer icons and figure/background area ratios and color combinations on visual search performance on an LCD monitor. Displays 29, 237–242 (2008)
Lindberg, T., Näsänen, R.: The effect of icon spacing and size on the speed of icon processing in the human visual system. Displays 24, 111–120 (2003)
Memon, A., Banerjee, I., Nagarajan, A.: GUI ripping: reverse engineering of graphical user interfaces for testing. In: Proceedings. 10th Working Conference on Reverse Engineering 2003, WCRE 2003, pp. 260. IEEE (2003)
Wu, F.-G., Lin, H., You, M.: The enhanced navigator for the touch screen: a comparative study on navigational techniques of web maps. Displays 32, 284–295 (2011)
Fleetwood, M.D., Byrne, M.D.: Modeling icon search in ACT-R/PM. Cogn. Syst. Res. 3, 25–33 (2002)
Legge, G.E., Pelli, D.G., Rubin, G.S., Schleske, M.M.: Psychophysics of reading—I normal vision. Vis. Res. 25, 239–252 (1985)
Legge, G.E., Rubin, G.S., Luebker, A.: Psychophysics of reading—V. the role of contrast in normal vision. Vis. Res. 27, 1165–1177 (1987)
Näsänen, R., Ojanpää, H., Kojo, I.: Effect of stimulus contrast on performance and eye movements in visual search. Vis. Res. 41, 1817–1824 (2001)
Huang, H., Lai, H.-H.: Factors influencing the usability of icons in the LCD touchscreen. Displays 29, 339–344 (2008)
Lin, H., Lin, W., Tsai, W.-C., Cheng, Yune-Yu., Wu, F.-G.: Effect of the color tablet computer’s polarity and character size on legibility. In: Stephanidis, C., Antona, M. (eds.) UAHCI 2014, Part II. LNCS, vol. 8514, pp. 132–143. Springer, Heidelberg (2014)
Ho, C.-H., Lu, Y.-N.: Can pupil size be measured to assess design products? Int. J. Ind. Ergon. 44, 436–441 (2014)
Lin, H., Lin, W., Tsai, W.-C., Hsieh, Y.-C., Wu, F.-G.: How different presentation modes of graphical icons affect viewers’ first fixation and attention. In: Antona, M., Stephanidis, C. (eds.) UAHCI 2015. LNCS, vol. 9176, pp. 226–237. Springer, Heidelberg (2015)
Huang, K.-C., Chiu, T.-L.: Visual search performance on an lcd monitor: effects of color combination of figure and icon background, shape of icon, and line width of icon border. Percept. Mot. Skills 104, 562–574 (2007)
Wolfe, J.M., Oliva, A., Horowitz, T.S., Butcher, S.J., Bompas, A.: Segmentation of objects from backgrounds in visual search tasks. Vis. Res. 42, 2985–3004 (2002)
Shieh, K.-K., Huang, S.-M.: Effects of pictorial size and circle-slash thickness on glance legibility for prohibitive symbols. Int. J. Ind. Ergon. 33, 73–83 (2004)
Curry, M.B., McDougall, S.J., de Bruijn, O.: The effects of the visual metaphor in determining icon efficacy. In: Proceedings of the Human Factors and Ergonomics Society Annual Meeting, pp. 1590–1594. SAGE Publications (1998)
Dewar, R.: Design and evaluation of public information symbols. Visual information for everyday use: Design and research perspectives, pp. 285–303 (1999)
Wong, W.: Principles of form and design. John Wiley & Sons, New York (1993)
Bullimore, M., Howarth, P., Fulton, J.: Assessment of visual performance. Evaluation of human work: a practical ergonomics methodology, pp. 804–839 (1990)
Mirzoeff, N.: The Visual Culture Reader. Psychology Press, New York (2002)
Acknowledgements
The authors hereby extend sincere thanks to Ministry of Science and Technology (MOST) of the Republic of China (ROC) for their financial support of this research, whose project code is MOST 104-2221-E-165-001. It is thanks to the generous patronage of MOST that this study has been smoothly performed.
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2016 Springer International Publishing Switzerland
About this paper
Cite this paper
Lin, H., Hsieh, YC., Lin, W. (2016). A Preliminary Study on How the Icon Composition and Background of Graphical Icons Affect Users’ Preference Levels. In: Zhou, J., Salvendy, G. (eds) Human Aspects of IT for the Aged Population. Design for Aging. ITAP 2016. Lecture Notes in Computer Science(), vol 9754. Springer, Cham. https://doi.org/10.1007/978-3-319-39943-0_35
Download citation
DOI: https://doi.org/10.1007/978-3-319-39943-0_35
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-319-39942-3
Online ISBN: 978-3-319-39943-0
eBook Packages: Computer ScienceComputer Science (R0)