How Different Presentation Modes of Graphical Icons Affect Viewers’ First Fixation and Attention

The booming market of applications (APP) has exerted a great influence on our daily lives. From the standpoint of marketing, icon shapes of applications play the same role as static salespersons, being highly valuable. Moreover, icon presentation is often the primary focus which attracts consumers’ attention, induces consumers’ interaction with applications, and leads to purchase as well as usage. Graphical interfaces are widely used in both computers and handheld devices, including overwhelmingly popular smartphones, information kiosks, automatic teller machines (ATM), tablet computers, and event data recorders (EDR) [1, 2]. Also, graphical interfaces are extensively used in a variety of specialized fields, such as cash registers, medical environments, and industrial machinery [3]. By clicking on-screen graphical user interfaces (GUI) to receive and process large amounts of numeric or graphical information [4], users can intuitively input instructions to be executed and interact with devices [5]. Therefore, icon design on the GUI becomes an important consideration in inter-face design.

Graphical icons may be standardized so that users can easily locate their desired instructions or programs in a number of different icons [6]. With good graphical icons presented in a relaxing way, users can not only handle lots of numbers or symbols effectively but also identify their required functions or targets smoothly on low-resolution screens, such as on smartphones [4]. Nevertheless, 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 [6]. Furthermore, the presentation modes of icons are currently rather diverse. As a result, while searching for an icon on the main menu, a user may not find the needed interface or function quickly, which causes operational problems. Well-designed icons can achieve such positive effects as reducing operational errors, shortening the time to finish a job, and improving customers’ satisfaction [4]. Besides conveying correct messages to users adequately, well-designed icons will affect users’ operation, recognition, and preference in accordance with different graphical designs [6]. Therefore, there were many re-searchers carefully studying the impact of icon operation on users. Through human operation, icons on the touchscreen were assessed in order to enhance operational efficiency [7, 8]. According to some studies, icon distances and sizes affected visual search when users watched the graphical interfaces; also, icons lying in the corner of the touchscreen affected operation directly [4]. In the field of icon interfaces and interface operation, many studies utilized eye-tracking systems to analyze as well as to enhance the interaction between users and interfaces. For example, the methods for studying user interfaces included assessing users’ operational performance, oral analysis, and evaluation of interface browsing [9]. To further explore the arrangement and presentation of icons, Lindberg et al. took icon spacing and icon sizes as independent variables and visual processing time as a dependent variable, used an eye-tracker to record visual processing time, and investigated how fast the eye-tracking system processed icons [4]. The two researchers found that if the visual angle of an icon was less than 0.7°, the speed of visual search would increase significantly. As for spacing between two adjacent icons, the distance equal to an icon was accepted and preferred while no spacing between two icons should be avoided.

Currently, research on icon observation mainly focuses on icon sizes and distances [6, 10–12], contrast [12], and users’ subjective satisfaction levels [5, 7]. However, studies of the presentation modes of icons are rarely found. Good presentation modes attract consumers’ attention, boost search speed, and reduce errors. Therefore, how presentation modes affect users’ attention is the main concern of this study.

At present, concerning the characteristic elements and arrangement of icons, there are no definite guidelines for design. In such a situation, presentation modes cause a lot of problems to users, bringing much inconvenience. This study investigated the icons on the main menus in the Internet and digital systems, analyzed them, and identified the characteristic elements of presentation modes. The eye-tracker was employed to measure first fixations, and then subjective evaluation of attention was performed. In that way, the optimum presentation mode that could attract users’ attention might be identified. Also, users’ operational efficiency might be enhanced, and the guidelines for icon design might be established. The findings in this study can be used by UI designers as a reference in the future.

2.1 Investigation of Icon Presentation Modes

While icons were being collected, those on the main menus served as the major sources, including the main menus of digital TV, online application stores, video game consoles, cellphones, tablet computers, and computers. In November, 2012, with the help of Google search engine, the author entered the following keywords in both Chinese and English: online music stores, digital TV, and online application stores. The top five websites were arranged in order of relevance, and then the main menus with icons were selected. Only one out of the similar websites was chosen, those websites with unstable connection were excluded, and if the same website used both English and Chinese, the official website was adopted. The main menus of video game consoles were based on the mainstream products on the market, with five consoles obtained. As to cellphones, tablet computers, and computers, there were numerous models available, so this study selected the main menus based on their operating systems (OS). One hundred and sixty-eight icons were collected and reorganized in the first stage.

2.2 Analysis of Icon Presentation Modes

To analyze the characteristic elements of icon presentation, the author invited six professionals to form a focus group. Two of the professionals were surface designers with three years of work experience, another two were interface designers with two years of work experience, and the others were industrial designers with four years of work experience. In compliance with the principles of icon design [13], the characteristics of icon presentation were analyzed. As indicated by the finding, current presentation modes consist of three main features: icon composition, polarity, and icon border. To be exact, icon composition is subdivided into line composition and plane composition, polarity is subdivided into positive polarity (white backgrounds and black characters) and negative polarity (black backgrounds and white characters), and icon border is subdivided into having borders and having no border. Through permutation and combination, six presentation modes were obtained as follows: line + positive polarity + border (M1), plane + positive polarity + border (M2), line + negative polarity + border (M3), plane + negative polarity + border (M4), line + positive polarity + no border (M5), and plane + positive polarity + no border (M6), as shown in Fig. 1. There were two nonexistent modes: line + negative polarity + no border and plane + negative polarity + no border. Table 1 shows the characteristics of various presentation modes. The finding herein would be used to explore how presentation modes affected users’ attention in the next stage.

Six presentation modes of graphical icons

Full size image

Illustrated in the above chapter, the characteristics of icon presentation were used as the criteria for selecting stimuli. Concerning the experiment, eye-trackers were employed to measure the participants’ first fixations while they were watching the icons. Additionally, their operational performances were compared, and subjective evaluation was conducted to explore how icon presentation modes affected users’ attention.

3.1 Selecting Stimuli

In this study, a number of sample icons were selected for the experiment. As the stimuli were collected, nearly all chosen icons were based on two operating systems (Windows and OS). To reduce the impacts of those stimuli on the participants’ recognition, commonly-used icons on 3C products were selected. Nevertheless, those icons too complex, blurred, or abstract to be judged immediately were rejected. If two or more icons were similar, only one of them got chosen. In the end, sixty-eight icons were collected. Based on the original icons, their contour drawings were produced. Next, thirty college students with some experience of product design were requested to rate all the icons on a scale of 1-7 with the help of the software E-Prime. Finally, the top thirty icons were picked out as the stimuli in the formal experiment.

3.2 Participants

For the purpose of the experiment, thirty-six college students were recruited as the participants, with males and females in equal numbers, whose ages ranged from eighteen to twenty-two. Because the participants were widely different in height, the location and height of each chair had to be adjusted 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 66 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 the computer. After being properly seated, each participant started to read the instructions. When the visual fixation experiment was made with the help of an eye-tracker, the participant’s vi-sion and attention would affect his or her judgment. Therefore, each participant had to pass the procedure called “correction of the visual fixation point.” Moreover, his or her vision had to conform to the standard vision before or after correction. Another important thing was that each participant had to take care so as not to suffer from visual fatigue after a long experiment. This precaution was taken to prevent any errors in the experimental data. The thirty-six participants followed the design of within-subjects factors, and the sequence in which they performed the experiment was in compliance with the counterbalanced measures design. In other words, the order in which each participant operated the experimental interface varied with his or her sequence in the experiment. After an experiment was finished, its result was automatically recorded in the system. At the end of the whole experiment, each participant was rewarded with NT$300.

3.3 Stimuli

The colors, backgrounds, and decorative lines of the collected sample icons were removed so that such factors as color, brightness, contrast, and outer shadow might not affect attention levels and image recognition. After that, the sample icons were converted into contour drawings, with the line width of either icons or borders being 2 pixels. All the stimuli were made into contour drawings mainly presented in lateral views, for lateral views achieved the best performance. In this experiment, thirty representative stimuli were selected, with each stimulus presented in 6 different modes, or a group of six icons. In the group, the distance between the screen center and each icon was equal [14]; likewise, the distance between the centers of two adjacent icon stimuli was equal. Consequently, after being connected, the six icons formed a regular hexagon, as shown in Fig. 2. With the experimental results compared, it was determined which of the six presentation modes got the most first fixations. Through random permutation and combination, each of the six presentation modes appeared in six different positions for as many times. Each presentation mode of any icon was compared with the other five modes. The type of an icon shape could not be clearly defined based on the screen surface or on the visual fixation experiment, and neither could the detailed location or division of the icon. For the aforesaid reason, this experiment focused on the overall shape of an icon to make a judgment, without presenting its detailed features.

Six presentation modes of an icon stimulus

Full size image

3.4 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 vision tracks. As for image presentation, the HP desktop computer was used to control graphical software. Further, GazeTracker (GT), a piece of interface software in the HP desktop computer, was responsible for detecting the number of first fixations measured by FaceLab v4, which is an eye tracking system produced by Dell Corp. The sampling frequency of FaceLab is 60 Hz; mean-while, the position of the head or eyes was monitored through FaceLab software to record the positions of the eyeballs as well as the number of first fixations.

3.5 Experimental Procedures for Attention

• The experimental goals, methods, and procedures were explained to all participants.

• Each participant started to write down his or her basic information, including name, age, gender, and college major.

• After reading the experimental instructions, each participant was requested to observe the graphical icons which attracted much attention.

• Vision examination and visual fixation point correction were per-formed.

• The participants started to be exposed to a gray screen for 6 s.

• The participants were exposed to a fixation plus sign (“+”) for 2 s.

• As the participants went on to watch a target image, the contour drawings of an icon in six presentation modes appeared simultaneously for 6 s.

• The participants went on to experiment with the next icon to test first fixation, repeating steps 5 to 8 above until all the thirty icon stimuli were tested.

• The participants were required to fill out a subjective questionnaire of attention in accordance with a scale of seven levels, with level 1 meaning extremely negative, level 4 meaning neutral, and level 7 meaning extremely positive. The whole experiment lasted for about twenty-five to thirty minutes.

3.6 Analysis of the Collected Data

Thirty-six participants were requested to watch thirty icon stimuli presented simultaneously in six modes. In addition, eye-trackers were employed to measure first fixations. As each icon was observed repeatedly by the participants, thirty groups of first fixations as well as subjective evaluation of attention were obtained. Next, the different numbers of first fixations were analyzed through the chi-square test, while subjective evaluation of attention was analyzed through one-way ANOVA. Also, the statistical software, Windows SPSS 12.0, was used to analyze the results, with p < .05 taken as the standard of statistical significance.

4.1 Analysis of First Fixation

The number of first fixations reached a significance level (X2 = 167.4, p<.001). Thirty-six participants were involved in the experiment, watching thirty icon stimuli presented simultaneously in six modes, which resulted in 1080 first fixations. The relationship between six presentation modes and first fixations is listed as follows: M1 = 141, M2 = 171, M3 = 257, M4 = 290, M5 = 90, and M6 = 131, as shown in Fig. 3. In other words, M4 got the largest number of first fixations while M3 ranked second; meanwhile, only M4 and M3 reached the expected value. By contrast, M2, M1, M6, and M5 all failed to reach the expected value, with M5 getting the smallest number of first fixations.

Six presentation modes and their respective first fixations

Full size image

4.2 Subjective Evaluation of Attention

Presentation modes of icons exerted a significant effect on subjective evaluation of attention (F(5, 175) = 19.842, p < 0.001), as shown in Table 2. Analyzed through the LSD multiple range test, six presentation modes and their respective mean scores are listed in order of rankings as follows: M4 = 5.444, M2 = 4.111, M6 = 3.611, M3 = 3.306, M1 = 2.972, and M5 = 1.944, as shown in Table 3. In other words, the participants subjectively considered that plane + negative polarity + border (M4) attracted the most attention, while line + positive polarity + no border (M5) attracted the least attention, as shown in Fig. 4.

Subjective evaluation of attention concerning six presentation modes

Full size image

5.1 First Fixation

Among the icon presentation modes evaluated in this study, M4 got the largest number of first fixations, M3 ranked second, M2 ranked third, M1 ranked fourth, M6 ranked fifth, and M5 got the least number. The reason why M4 performed the best of all is that its border is regarded as an integral part of an icon [15]. The icon with a border has a larger area than that with no border. When it comes to attracting visual attention, the larger icon has more advantages than the smaller one, being likelier to be noticed by the participants [16].

M3 got the second largest number of first fixations. Although negative polarity combined with borders makes the icon seem larger and apt to catch attention, still line composition is more complex than plane composition, which fact contributes to lower recognizability [17–19]. Further-more, the icon composed of lines tends to become blurred owing to fine lines. By contrast, the icon composed of planes is divided by planes, so it usually has a larger area [20], looking more vivid than the line-composed icon. As a result, M4 is likelier to be noticed than M3. In addition, M2, M1, and M6 got fewer first fixations than M4 or M3. The main reason is that negative polarity combined with line composition or plane composition has a black background and a white image, thus catching visual attention more easily. By contrast, as the icons in M1 and M2 have a white background and a black image, they are less likely to attract first fixation [21].

As indicated by the experimental results, M2, M6, and M1 showed no significant difference in terms of first fixation. This finding is similar to that reached by Fleetwood & Byrne, who explored icon borders [6]. According to the two researchers, having no border, round borders, and square borders showed no significant difference in their effects on users’ search. This study discovered that the participants paid more attention to the icon composed of planes. Although the icon with borders and positive polarity was larger than the icon with no border, the participants paid too much attention to the icon itself to notice the fine lines in borders. In consequence, the icon with borders and positive polarity did not attract more attention than the icon with no border though the former was larger.

M5 is similar to M6 in that they both have no border. However, M6 is composed of planes while M5 is composed of lines. The plane-composed image has a larger area and looks more vivid than the line-composed image [20]. In contrast, the line-composed image tends to look blurred owing to quite fine lines. Thus, the line-composed icon with no border, or M5, is the likeliest to be ignored among the six icons.

5.2 Subjective Evaluation of Attention

As discovered by this study, graphical icons produce a significant influence on subjective evaluation of attention. The participants considered that M4 was the most attractive, followed by M2, M6, M3, and M1 in order of rankings; contrarily, M5 was viewed as the least attractive. Regarding M4, the results coming from subjective evaluation of attention agree with those coming from first fixation. With the largest number of first fixations, M4 was considered by the participants to attract the most attention. As for M3, its performance in first fixation does not correspond with its performance in subjective evaluation of attention. Concerning subjective evaluation of attention, M2 performs better than M3; contrarily, in terms of first fixation, M2 performs worse than M3. As indicated by the findings herein, it is mainly because the participants subjectively considered that plane composition is always better than line composition. Based on the author’s speculation, the participants subjectively considered that the icon with line composition and negative polarity has many fine details, rendering the image more complex [17]. The more complex an image is, the worse recognition will result [19]. In addition, as a line is finer than a plane, the former used in an icon is less likely to be noticed than the latter. In the situation where the participants cannot identify images smoothly, the participants regarded M3 icons as more unnoticeable than M2.

On the other hand, although M1 and M3 both have borders, they show no significant difference from M6, which has no border, in subjective evaluation of attention. The above result is somewhat different from that found by Bullimore et al., who suggested that a lager image produced better recognition [15]. M1 and M3, which have borders, are larger than M6, which has no border. Even though M1 with borders and positive polarity has increased the icon size, the fine lines prevent it from looking as obvious as a plane-composed icon. As for M3, although it has negative polarity and borders, the icon is line-composed, thus not looking as obvious as a plane-composed icon.

This study explores the effects of icon presentation modes on users’ attention. Through eye trackers, the participants’ first fixations were measured while the icons were being observed; besides, subjective evaluation of attention was conducted. This study has discovered that plane + negative polarity + border (M4) attracted the most attention, while line + positive polarity + no border (M5) attracted the least attention. It is suggested that follow-up studies may probe into the characteristic elements of icons; thus, the impacts of those characteristic elements on viewers’ attention may be determined. The findings herein can be used as a reference by interface designers to design icons.