Computers in Human Behavior 63 (2016) 218e228

Contents lists available at ScienceDirect

Computers in Human Behavior

journal homepage: www.elsevier.com/locate/comphumbeh

Full length article

A study on the relationships between different presentation modes of

graphical icons and users attention
Hsuan Lin a, *, Yu-Chen Hsieh b, Fong-Gong Wu c
a
Department of Product Design, Tainan University of Technology, Tainan, Taiwan
b
Department of Industrial Design, National Yunlin University of Science and Technology, Yunlin, Taiwan
c
Department of Industrial Design, National Cheng Kung University, Tainan, Taiwan

a r t i c l e i n f o a b s t r a c t

Article history: With the vigorous development of applications (App), graphical user interfaces (GUI) have been widely
Received 7 September 2015 found in computers and handheld devices. This study aimed to explore the relationships between
Received in revised form different presentation modes of graphical icons and users attention. An eye tracker was employed to
16 April 2016
measure each participants experimental data; in addition, subjective evaluation of attention was con-
Accepted 5 May 2016
ducted. Thus, the optimum presentation mode attracting the most attention might be determined. 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 back-
Keywords:
Icon composition
ground (M1), plane positive background (M2), line negative background (M3), plane negative
Background background (M4), line no background (M5), and plane no background (M6). Thirty-six participants
Polarity were requested to view thirty stimuli, or the contour drawings of graphical icons, presented simulta-
Icon border neously in six modes mentioned above. The participants xation duration, xation frequency, and
Fixation subjective evaluation of attention were analyzed through two-way ANOVA. The analytical results showed
Eye-tracking that in terms of the three performance indicators above, M4 performed the best among the six pre-
sentation modes. Moreover, regarding icon composition, planes performed better than lines in terms of
the three performance indicators. As for background, negative background performed the best in terms
of the three performance indicators, positive background ranked second, and no background performed
the worst. The ndings can serve as a reference when icons are researched or designed in the future.
2016 Published by Elsevier Ltd.

1. Introduction
With the rise of cellphones and tablets, 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 the
program instructions (N nen & Ojanpa
asa
a, 2003). With graphical
icons presented in a relaxing way, users can locate their desired
functions or objects more easily and quickly (Huang, 2008;
Lindberg & N nen, 2003). That working mode enables users to
asa
manipulate the main menus, control buttons, and charts in a highly
* Corresponding author.
E-mail addresses: te0038@mail.tut.edu.tw (H. Lin), chester@yuntech.edu.tw
(Y.-C. Hsieh), fonggong@mail.ncku.edu.tw (F.-G. Wu).
visual way; therefore, the software is used with much more ease
(Memon, Banerjee, & Nagarajan, 2003). Also, users can intuitively
input instructions to be executed and interact with devices (Wu,
Lin, & You, 2011). Graphical icons are more suitable for a smaller
display space, such as the small screens on handheld devices. Its
because graphical icons can convey more information or show the
minimum instructions in the limited space (Fleetwood & Byrne,
2002). Being more diversied as well as convenient, applications
in cellphones, tablets, and computers are increasing constantly,
with the number of corresponding icons also 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 (Lindberg & Na s
anen,
2003). Well-designed graphical icons can achieve such positive
effects as drawing users attention, shortening search time,
reducing operational errors, and relieving users burden. Therefore,
for interface designers, icon presentation design of a GUI has
remained an important consideration.

http://dx.doi.org/10.1016/j.chb.2016.05.008
0747-5632/ 2016 Published by Elsevier Ltd.
 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228
In the past, research on graphical icons focused on their sizes,
distances, background (Huang, 2008; Legge, Pelli, Rubin, &
Schleske, 1985; Legge, Rubin, & Luebker, 1987) as well as contrast
(N nen, Ojanpa
asa a
, & Kojo, 2001). As for icon-searching, much
emphasis was put on how subjective evaluation of usability is
affected by brightness, contrast, sharpness (Na s
anen & Ojanpa a
, attention-attracting as follows. 1) Peoples attention is attracted
2003), position, number, color, and shape (Huang & Lai, 2008).
1.1. Visual attention
Attention refers to a continuous eye movement. An eye tracker
can be employed to record the visual space, xation duration, x-
ation frequency (number of xations), and xation points, in
addition to helping a viewer make a choice or preference judgment
(Ware, 2010). When the viewed images increase from one to two,
the viewers sight line will be pointed to the preferred direction. As
a product is displayed at a physical store, its appearance design is
intended to attract consumers attention. For that purpose, the
foremost step is to attract consumers visual attention (Schiffman &
Kanuk, 2000), which in turn leads to purchase and consumption.
Likewise, as a product is displayed at an online store, the webpage
layout may catch a users attention and lead the user to search for
relevant information. Such being the case, to convey the message
properly is the primary focus (Landa, 2010). Nowadays, the online
network is packed with innumerable sorts of information and
countless goods. When a particular product displayed on a website
captures peoples attention, it means that the product is appealing
(Baxter, 1995). Usually, webpage design depends on a larger picture
or title to draw attention, thus inducing consumers to browse. The
layout design can guide the readers visual line and induce their
reading focus to enhance their understanding of the content
(Landa, 2010). In recent years, with the market of mobile applica-
tions (App) thriving, a new business model with business oppor-
tunities has come into existence. Icon design is highly benecial to
the marketing of applications. It is because icon presentation often
holds a consumers attention and in turn triggers the interaction
between the consumer and an application. Peoples attention tends
to be drawn to the image elements (Pettersson, 1993). Images play
an important role in the reading activity, for they can grab the
readers attention and broaden the related text (Holmqvist &
Wartenberg, 2005). Visual attention is aimed at a specic area of
a visual display (Rayner, 1998). Information presented in images
can captivate more visual xation. Different kinds of images will
cause viewers to have different kinds of visual xation, intelligence,
and visual learning (Pettersson, 1993). Aiming at e-commerce
websites, Lee and Benbasat (2003) conducted research on attention
and product memory. Their ndings showed that high-denition
images got more attention than low-denition ones; meanwhile,
dynamic interfaces got more attention than static ones. Moreover, a
high-denition image combined with a dynamic interface could
capture more of a users attention than just a single feature. Simi-
larly, a webpage using big images enhanced the users memory
better than one using small images.
1.2. Eye tracking
When a scene or an object is being viewed, a persons eye
movement can be divided into two categories, i.e., xation and
saccade, based on different viewing states. Fixation means the
length of time when the sight point of an eyeball is relatively static,
but not absolutely static, in a particular time span. By contrast,
saccade means that the sight point quickly moves from one point in
space to another (Buscher, Cutrell, & Morris, 2009; Rayner, 1998;
Sereno & Rayner, 2003). Theoretically, the eyes are xed during
xation while in reality there exist tremor, drift, and micro saccades
219
(Ciuffreda & Tannen, 1995). Acquisition of information occurs only
during xation (Lindberg & N nen, 2003). Eyes are attracted to
asa
the most informative areas of a scene because they are physically
distinctive and informative (Rayner, 1998). Pettersson concluded
that there are ve main points concerning the visual track and
solely by image elements. 2) The form of eye movement or xation
depends on what people expect to see or in what way they are told
to see. 3) The information presented in the image can draw more
eye xation. 4) Different kinds of images result in different forms of
xation duration, intelligence, and visual learning. 5) There is a
positive correlationship between xation duration, intelligence,
and visual learning (Pettersson, 1993).
An eye tracker can be employed to measure the track and xa-
tion points of an eye movement so that the cognitive process of
viewing may be explored (Hills & Lewis, 2011). The acquisition of
visual information is produced by xation. Before the eyeball
moves on to the next word, a lot of procedures need to be
completed within a single occurrence of xation (Sereno & Rayner,
2003). To be exact, three visual procedures take place: sampling of
the visual eld, analysis of foveal part of the visual eld, and
planning of the next eye movement (Viviani, 1989). The process of
xation can reveal what the humans visual sense feels about a
certain image, but the process of saccade cannot because of some
physiological limitations of the eyeball, such as the visual masking
effect (Rayner, 1998; Roefs et al., 2008). In order to know how the
eyeball is controlled when a scene or an object is viewed, the
following two aspects can be investigated: the xation point and
xation duration (Deubel & Schneider, 1996). The humans visual
system was simulated by Le Meur, Le Callet, and Barba (2007) based
on spatial distance and temporal length separately. Concerning the
display of images, the former adopted uniform icons to show the
spatial distribution of the visual sense in the process of viewing,
and the latter adopted central display to show the xed focuses. In
sum, as a stimulus is viewed by the eyeball, the xation point,
xation duration, and xation frequency are the critical indexes
used to measure attention (Buscher et al., 2009; Deubel &
Schneider, 1996; Pieters, Rosbergen, & Wedel, 1999; Underwood,
1998).
1.3. Related work
An eye tracker can be used to record xation duration and x-
ation frequency in the process of word-reading so that the track of
the eyeball movement may be realized. By employing the eye
tracker combined with the LCD or CRT display, Na sa
nen, Karlsson, &
Ojanp (2001) investigated how different font sizes and contrasts
aa
affect display quality and search speed. It was discovered that on
both the two displays, search time decreases as the font size in-
creases. In other words, as the letter size increases, xation dura-
tion and xation frequency needed by a single search lessens.
Moreover, under the condition of high contrast, there is no signif-
icant difference between the two displays in search time. However,
in the case of low contrast, the search time spent on the CRT display
is considerably longer than that spent on the LED display. Besides,
in the case of low contrast and small font size, visual word-
searching is done in a more sensitive way, which is benecial to
the evaluation of display quality. Furthermore, Goonetilleke, Lau,
and Shihe (2002) suggested that despite the complexity of Chi-
nese characters, there is no signicant difference in visual search
time. Based on eye movement, Li, Liu, and Rayner (2011) observed
the location on which readers would x their eyes when reading a
Chinese sentence that contained a two-word or four-word phrase.
It was found that readers eyes landed at the center of a Chinese
word when only a single xation was made on the word, and that
220 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228
they landed at the beginning of a word when more than one xa-
tion was made on the word. Ojanpa a , N nen, and Kojo (2002)
asa
studied the word identication span, which refers to the area of
the visual eld in which words can be identied during a single
xation. Their study aimed to estimate the vertical word identi-
cation span in a visual word-searching task, in which Chinese
words were arranged in a vertical list. In addition, they studied the
effect of list layout (orientation, length, and line spacing) on search
speed and eye movement. The results showed that in vertical lists,
4e5 words could be identied during a single xation. Thus, the
vertical word identication span was 4e5 words, whereas the
horizontal word identication span was about 1e2 words. There
were fewer xations and the saccade amplitudes were smaller for
vertical than for horizontal lists of the same length. Furthermore,
average xation duration for vertical lists was longer than for
horizontal lists.
To understand the effects of different icons on visual search,
search speed has to be measured. In addition, the eye tracker is
employed in a lot of studies to record eye movements so that the
effects of contrast, size, distance, and color may be realized.
Na s
anen, Ojanpa
a, et al. (2001) researched how the contrast of the
stimuli affected the 2-D search speed and how the eyeball move-
ment could explain the change of visual span. It was discovered that
average xation duration decreased and saccade amplitudes
increased slightly with increasing contrast. However, when
contrast increased greatly, both xation frequency and xation
duration reduced. Na s
anen & Ojanpa a (2003) explored how blur
and contrast affected visual search speed of the GUI icon. In the
experiment, the participants were required to locate the target
icons in a rectangullar array of distracter icons. Meanwhile, the eye
tracker was used to record the xation duration, xation frequency,
and saccade amplitude. When the real screen was used, it was very
difcult to render the sharpness of the screen as low as that of the
icon stimulus when search time increased. In addition, when a
handheld screen was used outdoors, its sharpness made it hard to
detect the information about the icon or letter, with search speed
lowered. Lindberg & Na sa
nen (2003) investigated how the
arrangement, interval, and size of the GUI icons affected visual
processing time. The eye tracker was used to record both xation
duration and xation frequency. It was discovered that as the
viewing angle of the GUI icon was smaller than 0.7, visual search
speed increased considerably. As for the interval of icons, the dis-
tance between two adjacent icons should be equal to an icon size.
Based on eye tracking, there have been many studies exploring
how webpage browsing affected visual behavior and attention. Pan
et al. (2004) analyzed the behaviors of the viewers eyeball when
different webpages were read. It was discovered that the online
ocular behavior turned out to be the interaction of various factors.
Specically, the scan track, xation duration, saccade rate, and
xation frequency were affected by the participants gender, types
of webpage, and sequence of browsing. With the eye tracker
employed, Beymer, Orton, and Russell (2007) studied how the
pictures and words of a webpage affected reading and attention. In
their study, there were three kinds of combination of pictures and
words, i.e., pictures related to the text, pictures unrelated to the text
(advertisements), and the text with no pictures. It was discovered
that extended xation duration resulted in a shorter saccade
mainly because the viewer slowed down reading speed to recog-
nize the pictures and words. Additionally, the appearance of ad-
vertisements distracted the viewers attention, which led to
regression and re-reading of the material (Beymer et al., 2007).
Up to now, there have been plenty of studies analyzing products,
webpages, word reading, and GUIs. However, it is unknown
whether those ndings can apply to graphical icons. This study,
which focused on the icon presentation modes attracting the
participants attention as well as observed the participants eye
movements, was mainly composed of the following parts. 1)
Collection and investigation of icons: The icons appearing in the
main menus of different platforms were collected. 2) Analysis of
icon presentation modes: After the collected icons were analyzed,
the characteristics of icon presentation were identied. 3) Selecting
icon stimuli: Thirty of the collected icons were selected as experi-
mental stimuli. 4) Sketching the stimuli: The black-and-white
contour drawings of all icons were sketched. 5) Experiment with
icon-related attention: While the icons were being viewed, eye
trackers were employed to record the participants xation dura-
tion and xation frequency; besides, subjective evaluation of
attention was conducted to understand the effect of icon presen-
tation modes on attention. The ndings herein can be used as a
reference by researchers, interface designers, interactive designers,
and product designers.
2. Investigation and analysis of icon presentation modes
2.1. Investigation of icons
To investigate existent icons, with the help of Google search
engine, the authors entered the following keywords in both Chi-
nese and English in November 2012: online music stores, digital TV,
and online application stores. Most of the collected icons came from
the main menus of digital TV, online application stores, video game
consoles, cellphones, tablets, and computers. Based on the search
results, the top ve websites were arranged in order of relevance,
and then the main menus with icons started to be selected. Only
one out of the similar websites was chosen, those websites with
unstable connection were excluded, and if the website used both
English and Chinese, its ofcial website was adopted (Lin & Hsieh,
2015). In the preliminary stage, one hundred and sixty-eight icons
were collected and reorganized.
2.2. Analysis of icon presentation modes
2.2.1. Icon composition
An icon is a graphical interface with meaning that can convey
information rapidly and be remembered effortlessly. The outer
form of an image is one of the important features in design.
Different ways of composition bring about different visual effects
(Wong, 1993). Icon composition can be divided into two categories:
lines and planes. Line-based icons depend on lines to generate the
outline gures while plane-based icons are solid gures composed
of planes (Sanders & McCormick, 1987; Shieh & Huang, 2004). Line-
based icons refer to images surrounded by border lines, and the
part inside or outside the border line is left blank. By contrast,
plane-based icons are images made up of planes, and the part in-
side the image is painted in one color. In a study about the symbolic
signs of machines, plane-based icons performed better than line-
based icons (Easterby, 1970).
2.2.2. Polarity
There are two types of polarity shown on the screen: positive
and negative polarity. The former refers to black images on a white
background while the latter means white images on a black back-
ground (Chan & Lee, 2005). One relevant study showed that posi-
tive polarity did not produce a signicantly higher reading speed
than negative polarity (Cushman, 1986). Another study concerning
the effect of Chinese characters on reading speed discovered that
polarity, font, and font size did exert an effect. For instance, the 14-
pt Ming-style font, double line height, and positive polarity showed
a considerably higher reading rate and legibility than the 10-pt Li-
style font, single line height, and negative polarity (Oborne &
 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228
Holton, 1988). Regarding the polarity of icons, one study found that
positive polarity resulted in a higher search speed than negative
polarity (Gould, Alfaro, Finn, Haupt, & Minuto, 1987). In terms of
legibility, colorless targets (black targets on a white background or
white targets on a black background) got as much preference as
colored ones. In addition, white images on a black background and
black images on a white background ranked among the most
preferred combinations (Wang & Chen, 2003).
2.2.3. Icon border
In order to allow users to see icons readily and clearly, not only
are all icons designed elaborately, but icon borders are also added
(Fleetwood & Byrne, 2002). To design a mature icon, improving its
border is one of the most important factors (Houde & Salomon,
1993). The border of a graphical icon could attract the attention
of the participants and guide their sight lines towards the icon itself
(Huang & Chiu, 2007). If a graphical user interface (GUI) is designed
to enhance its value, the relationship between an icon and its
border needs to be well understood so that its search efciency may
be improved (Fleetwood & Byrne, 2002). An icon border is usually
nothing more than a simple rectangle or circle surrounding the
icon. The icon border presented in this way has much difculty
conveying much information to its users. This is mainly because a
visual supplement on the monitor, in addition to providing
frequently-used target elements, is likely to interfere with the icon
as a distractor, which can slow down visual search (Mohr, 1984).
There were many previous studies centering on icon borders. Ac-
cording to one of the studies, having no border, round borders, and
square borders showed no signicant difference in their effects on
users search speed (Fleetwood & Byrne, 2002). Another study
demonstrated that a diamond was harder to detect on a cathode-
ray tube display than a circle or square (Hollands, Parker,
McFadden, & Boothby, 2002). Huang and Chiu (2007) investi-
gated four types of icon borders: circles, squares, equilateral tri-
angles, and diamonds, discovering that triangles took a longer
correct response time than circles.
2.3. Analytic results of icon presentation
To analyze the characteristic elements of icon presentation, six
professional designers were requested to form a focus group. Two
of the professionals were surface designers with over three years of
work experience, another two were interface designers with over
two years of work experience, and the others were industrial de-
signers with over four years of work experience. After the collected
icons were analyzed, it was discovered that icon presentation
modes include three components: icon composition, polarity, and
icon borders. To be exact, icon composition is subdivided into lines
and planes, polarity is subdivided into positive polarity (black im-
ages on a white background) and negative polarity (white images
on a black background), and icon borders are subdivided into
having borders and having no border (Lin & Hsieh, 2015; Lin, Lin,
Tsai, Hsieh, & Wu, 2015). In this study, the two characteristic ele-
ments, polarity and icon borders, were integrated into one element
called background, which is subdivided into positive background,
negative background, and no background. Based on icon compo-
sition 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),
as shown in Table 1. Also, the table shows the characteristics of
various presentation modes. The ndings in this section would be
used to explore how presentation modes affect users attention in
the next stage. Specically, an eye tracker would be utilized to
221
measure each participants xation duration and xation frequency
while the viewed icons were presented in six modes mentioned
above; in addition, subjective evaluation of attention would be
conducted.
3. Methodology
The experiment in this study was performed in two stages. In
the rst stage, the experimental stimuli were selected from the
collected icons, which ran on two operating systems, Windows and
OS. In the second stage, eye trackers were employed to measure the
participants icon-related attention while the icon stimuli were
presented in six different modes. The experimental results included
the participants xation duration, xation frequency, and subjec-
tive evaluation of attention. Thus, it could be known how the
composition and background of graphical icons affect attention.
3.1. Selecting icon stimuli
Sixty-eight sample icons, running on two operating systems
(Windows and OS), were selected as the candidates for experi-
mental stimuli. Next, the 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. To reduce the impacts of those
stimuli on the participants cognition, all original icons were
sketched again as black-and-white contour drawings. After that,
with the help of the software E-Prime, thirty college students with
some experience of product design were requested to grade all the
icons in terms of recognizability on a seven-level scale. Finally, the
top thirty icons in order of scores (M 5.61, SD 1.32) were picked
out as the stimuli in the formal experiment.
3.2. Participants
Among smartphone users, college students are the group
growing the fastest of all (Dixit, Ojanpera, van Nee, & Prasad, 2011).
For the purpose of measuring icon-related attention, thirty-six
college students were recruited as the participants from Tainan
University of Technology, with males and females in equal
numbers, whose ages ranged from eighteen to twenty-three
(M 20.28, SD 1.26). After entering the laboratory, each partic-
ipant was to sit right in front of the computer. Because the partic-
ipants were widely different in height, the location and height of
each participants chair was realigned to match its occupant and
provide a comfortable sitting posture. Besides, the height of each
participants head was xed so that his or her sight line was parallel
with the center of the screen. After being properly seated, each
participant started to read the instructions. When the visual xa-
tion experiment was made with the help of an eye tracker, the
participants vision and attention would affect his or her judgment.
Therefore, each participant had to pass the procedure called
correction of the visual xation point. Moreover, his or her vision
had to conform to the standard vision before or after correction.
Thus, each participant could see the images clearly and generate a
focus of xation all the while. Another important thing was that
each participant had to take adequate care so as not to suffer from
visual fatigue after a long experiment. This precaution was taken to
prevent any error in the experimental data (Lin & Hsieh, 2015; Lin
et al., 2015). The thirty-six participants followed the within-
subjects design, and the order in which they performed the
experiment was in compliance with the counterbalanced measures
design. In other words, the order in which each participant oper-
ated the experimental interfaces varied with his or her sequence in
the experiment. After an experiment was nished, its result was
automatically recorded in the system. At the end of the whole
222 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228

Table 1
Six modes of icon presentation.

Icon composition (C) Background (B)

Line Plane Black images on white background White images on black background No background

M1 x x

M2 x x

M3 x x

M4 x x

M5 x x x

M6 x x x

Note: x means having the feature.

experiment, each participant was rewarded with NT$300.

3.3. Experimental design of icon stimuli

In the second stage, the black-and-white contour drawings of all

icons were sketched. In other words, the colors, backgrounds, and
decorative lines of those collected icons were removed so that such
factors as color, brightness, contrast, and outline shadow might not
affect attention levels or image recognition. The line width of a
contour drawing was 2 pixels, or 0.05 cm; besides, all the drawings
were presented in their optimum views. The experiment is
described as follows.

1) The thirty icon stimuli were arranged in a random way; also,

each presentation mode of any icon was compared with the
other ve modes.
2) Each of the thirty representative stimuli was presented
concurrently in six different modes, or a group of six icons. After
the results were compared, the icon stimuli which performed
better in terms of xation duration, xation frequency, and
subjective evaluation of attention were identied (Sheth &
Pham, 2008).
3) The viewing distance between the participants eyes and the
screen was 66 cm (25.9 inches); in addition, the viewing angle
was 14.26  14.26 (15  15 cm). As for a single icon, its viewing
angle was 3.34  3.34 (3.5  3.5 cm); moreover, the distance
between the image center and each icon was equal (Huang &
Chiu, 2007). Consequently, after being connected, the centers
of the six icons formed a regular hexagon, as shown in Fig. 1.
4) After a participant entered his or her personal information, he or
she started to conduct the experiment in the predetermined
order. With an experiment completed, its results were recorded
in the system automatically. The order in which any participant
made the experiment was determined through permutation
and combination; namely, the order in which the 36 partici-
pants viewed the icon stimuli was different from one person to
another. In this way, the experiment might be more objective
and accurate.
Fig. 1. Six presentation modes of an icon stimulus.
5) The experiment herein focused on the participants eye move-
ments as the overall outline of an icon was viewed, without
presenting its detailed features.
3.4. Experimental tools and conditions
The HP desktop computer was used to control graphical soft-
ware, and the icons were presented on the 22-inch screen with a
resolution of 1024*768 pixels. The distance from the screen to the
participants eyes was about 66 cm (25.9 inches) while the viewing
angle was 14.26 . Furthermore, GazeTracker (GT), a piece of inter-
face software, was responsible for recording the visual tracks
measured by FaceLab v4, which is an eye tracker. After an infrared
light source was pointed at the participants eyes, FaceLab was
used to extract the data of the participants eye movements at the
sampling rate of 60 Hz.
 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228 223

3.5. Experimental procedures for attention Table 2

ANOVA result of xation duration.

With the eye tracker employed, this study aimed to explore how Source df SS MS F
different modes of icon presentation affected a users attention. Within subjects 35 2351.429 67.184
Modeled on the experimental procedures of Ho & Lu (2014), those Icon composition (C) 1 173.274 173.274 6.068*
in this study are described as follows. 1) The experimental goals, C  Subject within group 35 999.444 28.556
methods, and procedures were explained to all participants. 2) Each Background (B) 2 1476.832 738.416 25.017***
B  Subject within group 70 2066.172 29.517
participant started to write down his or her basic information,
CB 2 13.984 6.992 0.551
including name, age, gender, and college major. 3) After reading the Subject within group 70 887.849 12.684
experimental instructions, each participant was requested to * ** ***
Signicant at &0.05; &0.01; &0.001 level.
observe the graphical icons which attracted much attention. 4)
Both vision examination and correction of visual xation points
were performed. 5) At the beginning of the experiment, each multiple range test, it was discovered that xation duration of lines
participant was exposed to a gray screen for six seconds. To avoid and planes was 5939 ms and 7730 ms respectively, as shown in
the effects of persistence of vision, the gray screen was meant to Table 3. In other words, the participants spent more time viewing
help the participant forget the location of the last group of stimuli. the plane-based icons than the line-based icons.
6) The participant was exposed to a xation plus sign () on the Also, the effect of background on xation duration reached a
screen for two seconds. 7) As the participant got ready to view a signicance level (F(2, 70) 25.017, p < 0.001), as shown in Table 2.
target image, the contour drawing of an icon in six presentation After being analyzed through LSD multiple range test, it was
modes appeared simultaneously for six seconds. 8) The participants discovered that xation duration of positive background, negative
went on to experiment with the next icon, repeating steps 5 to 8 background, and no background was 5782 ms, 10,431 ms, and
above until all the thirty icon stimuli were tested. 9) Each partici- 4291 ms respectively, as shown in Table 3. Namely, in terms of
pant was required to ll out a subjective questionnaire of attention xation duration, the icons with negative background performed
in accordance with a seven-level scale, with 1 point meaning the best, those with positive background ranked second, and those
extremely negative, 4 points meaning neutral, and 7 points with no background performed the worst.
meaning extremely positive (Bernard, Chaparro, Mills, & Halcomb,
2003; Huang & Lai, 2008; Lindberg & Na sanen, 2003; Wu, Lee, &
Lin, 2007). For an individual participant, the whole experiment 4.2. Fixation frequency
might be nished within thirty minutes.
As shown by the result of ANOVA concerning xation frequency
3.6. Analysis of the collected data in Table 4, the effect of icon composition on xation frequency
reached a signicance level (F(1, 35) 6.935, p < 0.05). After being
Eye trackers were employed to record the experimental data analyzed through LSD multiple range test, it was discovered that
while thirty-six participants were viewing thirty icon stimuli pre- xation frequency of lines and planes was 28.593 and 36.870 times
sented simultaneously in six modes. As each icon was viewed respectively, as shown in Table 5. In other words, the participants
repeatedly by the participants, thirty groups of xation duration, viewed the plane-based icons more frequently than the line-based
xation frequency, and subjective evaluation of attention were icons.
obtained. In other words, the data about different tested stimuli Also, the effect of background on xation frequency reached a
came from the same group of participants, meaning that the signicance level (F(2, 70) 31.991, p < 0.001), as shown in Table 4.
experiment is a repeated measure design. Moreover, since icon After being analyzed through LSD multiple range test, it was
composition and background were independent variables, they discovered that xation frequency of positive background, negative
became the dependent samples of the repeated measure design. background, and no background was 27.833, 50.472, and 19.889
Therefore, the two-way ANOVA with dependent samples was times respectively, as shown in Table 5. Namely, in terms of xation
conducted to determine whether the two independent variables frequency, the icons with negative background performed the best,
had an interactive effect on each other; in addition, the LSD post those with positive background ranked second, and those with no
hoc test was performed. Finally, the statistical software, Windows background performed the worst.
SPSS 12.0, was used to analyze the results, with p < 0.05 set as the Similarly, the interaction of icon composition and background
level of a signicant difference. had a statistically signicant effect on xation frequency
(F(2,70) 3.193, p < 0.05), as shown in Table 4. Plane negative
4. Result background (M4) ranked rst, line negative background (M3)
ranked second, line positive background (M1), plane positive
4.1. Fixation duration background (M2), and plane no background (M6) ranked in the
third group, and line no background (M5) ranked last, as shown
This study was designed to explore the effect of icon presenta-
tion on attention. As an experimental tool, the eye tracker was
Table 3
employed to measure xation duration and xation frequency; Mean xation duration under each level of the independent variables and LSDs
meanwhile, a questionnaire was used to carry out subjective eval- multiple range tests on signicant factors.
uation of attention. Afterwards, the effects of icon composition and
Source n Fixation duration (ms) Std. error LSD
background were analyzed.
Icon composition (C)
The interaction of icon composition and background did not
Line 36 5939 471 Plane > Line
produce a statistically signicant effect on xation duration (F(2, Plane 36 7730 815
70) 0.551, p > 0.05). Table 2 shows the result of ANOVA concerning Background (B)
xation duration. Nevertheless, the effect of icon composition alone Positive 36 5782 485 Negative > Positive > Non
on xation duration reached a signicance level (F(1, 35) 6.068, Negative 36 10431 998
Non 36 4291 723
p < 0.05), as shown in Table 2. After being analyzed through LSD
224 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228

Table 4 Table 6
ANOVA result of xation frequency. ANOVA result of subjective evaluation of attention.

Source df SS MS F Source df SS MS F

Within subjects 35 66047.093 1887.060 Within subjects 35 2.759 0.079

Icon composition (C) 1 3700.167 3700.167 6.935* Icon composition (C) 1 146.685 146.685 62.370***
C  Subject within group 35 18674.500 533.557 C  Subject within group 35 82.315 2.352
Background (B) 2 36263.370 18131.685 31.991*** Background (B) 2 91.898 45.949 12.303***
B  Subject within group 70 39673.963 566.771 B  Subject within group 70 261.435 3.735
CB 2 1357.444 678.722 3.193* CB 2 9.009 4.505 3.391*
Subject within group 70 14881.889 212.598 Subject within group 70 92.991 1.328
* ** *** * ** ***
Signicant at &0.05; &0.01; &0.001 level. Signicant at &0.05; &0.01; &0.001 level.

Table 5 participants subjectively thought that planes attracted attention

Mean xation frequency under each level of the independent variables and LSDs more easily than lines.
multiple range tests on signicant factors.
Also, the effect of background on subjective evaluation of
Source n Fixation frequency Std. error LSD attention reached a signicance level (F(2, 70) 12.303, p < 0.001),
Icon composition (C) as shown in Table 6. After being analyzed through LSD multiple
Line 36 28.593 2.516 Plane > Line range test, it was discovered that the mean score for subjective
Plane 36 36.870 4.010 evaluation of attention got by positive background, negative back-
Background (B)
ground, and no background was 3.542, 4.375, and 2.778 respec-
Positive 36 27.833 2.691 Negative > Positive > Non
Negative 36 50.472 5.128 tively, as shown in Table 7. Namely, in terms of attention-attracting,
Non 36 19.889 2.900 negative background performed the best, positive background
ranked second, and no background performed the worst.
Similarly, the interaction of icon composition and background
had a statistically signicant effect on subjective evaluation of
attention (F(2,70) 3.391, p < 0.05), as shown in Table 6. In terms of
mean scores for subjective evaluation of attention, plane negative
background (M4) ranked rst, plane positive background (M2)
ranked second, plane no background (M6), line negative
background (M3), and line positive background (M1) ranked in
the third group, and line no background (M5) ranked last, as
shown in Fig. 3. In terms of subjective preference, M4
(plane negative background) ranked rst. That is, users think that
icons in M4 attract attention more easily. M2 (plane positive
background) ranked second. M4 and M2 ranked in the top two, for
they are comprised of plane combined with negative or positive
background. The participants think that planed-based icons are
likelier to attract attention. In the third group ranked M1, M3, and
M6. The above result shows that line-based icons get lower sub-
jective scores than plane-based ones. Last came M5, which is
composed of line and no background.
Fig. 2. The interactive effect of icon composition  background on xation frequency.

in Fig. 2. In terms of xation frequency, M4 and M3, which contain
negative background with plane or line, ranked in the top two. In
other words, icons with negative background are likelier to capture
users attention. In the third group ranked M1, M2, and M6, which
consist of either positive background or no background; namely,
they are less likely to draw users attention. The above result shows
that in terms of xation frequency, icons with negative background
perform better than those with positive background or no back-
ground. Last came M5, which is composed of line and no
background.
4.3. Subjective evaluation of attention
Table 6 shows the result of ANOVA concerning subjective eval-
uation of attention on a seven-level scale. The effect of icon
composition on subjective evaluation of attention reached a sig-
nicance level (F(1, 35) 62.370, p < 0.001). After being analyzed
through LSD multiple range test, it was discovered that the mean
score for subjective evaluation of attention got by lines and planes
was 2.741 and 4.389 respectively, as shown in Table 7. Namely, the
5. Dissection
5.1. Fixation duration
5.1.1. Relationship between xation duration and icon composition
As discovered by this study, icon composition and background
have a statistically signicant effect on xation duration. As for icon
composition, planes take a longer xation time than lines. The line-
based icon consists of lines while the plane-based icon consists of
planes. The image dened by planes is larger and clearer than the
image dened by lines; namely, the plane-based image is more eye-
catching than the line-based image (Easterby, 1970). From a
standpoint of design, planes convey more love and vitality than
lines (Wong, 1993); consequently, plane-based icons catch the
participants attention more easily than line-based icons. In addi-
tion, general icons need to be presented on smartphones, tablets, or
screens. However, the width of a line is so small as to decrease the
integrity of the image (Huang & Chiu, 2007); in consequence, the
participants can not perceive the graphical signicance of a line-
based icon clearly, which results in problems with recognition. By
contrast, the image in a plane-based icon is dened by planes, so
the participants can clearly know the meaning represented by the
 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228
Table 7
Mean scores for subjective evaluation of attention under each level of the independent variables and LSDs multiple range tests on signicant factors.
Source n Score for subjective evaluation
Icon composition (C)
Line 36 2.741
Plane 36 4.389
Background (B)
Positive 36 3.542
Negative 36 4.375
Non 36 2.778
Fig. 3. The interactive effect of icon composition  background on subjective evalu-
ation of attention.
image. In other words, the plane-based icon is more easily noticed
and takes a longer xation time.
Complexity is another factor that affects xation duration. A
line-based icon dissects the image space for more times than a
plane-based icon. As a result, the ner an image is, the more
complex its composition is (Shieh & Huang, 2004). Visually com-
plex images may lower users recognition performance (Curry,
McDougall, & de Bruijn, 1998; Dewar, 1999). In an environment
with poor legibility, the line-based icon is obviously more complex
than the plane-based icon, so lines are less noticeable than planes.
That is to say, planes occupy a longer xation time than lines.
5.1.2. Relationship between background and xation duration
The background of an icon has a statistically signicant effect on
xation duration. As indicated by this study, negative background
takes the longest xation time, followed by positive background,
while no background takes the shortest xation time. The larger an
image is, the more easily it will capture the participants attention,
and the longer its xation time will be. Shieh & Lin studied how the
size as well as the width of the circle and the slash on prohibition
signs affected saccade legibility. Their ndings pointed out that the
sign with saccade legibility of 100% and 75% had a larger area than
the sign with saccade legibility of 50%. The larger an image was, the
higher its legibility became. However, as the image grew to a
certain size, its legibility could not improve any more (Shieh & Lin,
2000). The conclusions of the above study agree with those of this
study. This study discovers that the image of the icon itself together
with negative or positive background, including the outer border, is
treated as a whole image. Thus, the icon with negative or positive
background is larger than the icon with no background. The larger
an icon is, the more easily it will attract attention.
Also, as shown in this study, icons with negative background
225
Std. error LSD
0.110 Plane > Line
0.102
0.171 Negative > Positive > Non
0.192
0.197
have a longer xation time than those with positive background.
Likewise, Huang & Chiu investigated how the width of the icon
border and the icon size affected search time. According to their
study, when the participants searched for the icons, different
widths of the icon borders showed different effects on search time.
To be precise, the 1-pixel border took the longest xation time, the
2-pixel border ranked second, and the 3-pixel border took the
shortest xation time (Huang & Chiu, 2007). 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 will become a plane.
Larger icons tend to attract attention more easily. Therefore, the
icons with negative background occupy a longer xation time than
those with positive background.
5.2. Fixation frequency
5.2.1. Relationship between icon composition and xation
frequency
Both icon composition and background have a statistically sig-
nicant effect on xation frequency. Regarding icon composition,
planes have a higher xation frequency than lines. Easterby and
Sanders & McComick noted that line-based images usually have
more details than plane-based images and that the former perform
worse than the latter in terms of recognizability. The more details
an image has, the more complex it will become. Thus, the details on
complex images are supposed to cause interference, rendering the
symbols difcult to identify (Easterby, 1970; Sanders & McCormick,
1987). Young & Wogalter and Kline & Fuchs pointed out that im-
ages with fewer details can be identied more easily. In addition,
while the line-based and plane-based images are viewed concur-
rently, the former are less likely to be noticed, for the lines are too
thin to be eye-catching (Kline & Fuchs, 1993; Young & Wogalter,
2000).
5.2.2. Relationship between background and xation frequency
The effects of different backgrounds on xation frequency reach
a signicance level. As indicated in this study, negative background
has the highest xation frequency, followed by positive back-
ground, and no background has the lowest xation frequency. An
icon includes its background and image, with the area inside the
border considered 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 (Bullimore,
Howarth, & Fulton, 1990) and is easily captured by vision
(Mirzoeff, 2002).
Also, the effects of negative and positive background on xation
frequency reach a signicance level. For an icon with positive
background, the color of both its border and the screen background
is white. Contrarily, the black color of negative background displays
a sharp contrast with the white screen, being likelier to be noticed
(Wolfe, Oliva, Horowitz, Butcher, & Bompas, 2002). The black
border area of negative background is more noticeable than the
226 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228
white border area of positive background. Thus, negative back-
ground or positive background is likelier to be noticed by the par-
ticipants, having a higher xation frequency than no background.
5.2.3. Interactive effect of icon composition and background on
xation frequency
The interaction of icon composition and background has a sta-
tistically signicant effect on xation frequency. In this study, two
kinds of icon composition and three kinds of background are
evaluated. In terms of xation frequency, plane negative back-
ground (M4) ranks rst, line negative background (M3) ranks
second, line positive background (M1), plane positive back-
ground (M2), and plane no background (M6) rank in the third
group, and line no background (M5) ranks last. The ndings in
this study correspond with those of Lin et al. (2015), who explored
the rst xation concerning graphical icons. According to the latter
study, M4 gets the largest number of rst xations, followed by M3,
and both are above the expected value. By contrast, M2, M1, M6,
and M5 are below the expected value, with M5 performing the
worst of all. This study has discovered that M4 gets the largest
number of xations mainly because the icon border is considered
as a part of the icon (Bullimore et al., 1990). The icon with back-
ground has a lager image area than the icon with no background.
Then, a large image is likelier to be noticed than a small image,
having the advantage of capturing visual attention (Mirzoeff, 2002).
In addition, the black color of negative background is totally
different from the white color of the icon; thus, the entire icon can
be highlighted (Wolfe et al., 2002), and eye-catching icons are apt
to be noticed.
M3 gets the second highest xation frequency. Although nega-
tive background makes the icon seem larger and likelier to catch
attention, still lines are more complex than planes, which fact
contributes to poorer recognizability (Curry et al., 1998; Dewar,
1999; Easterby, 1970). Moreover, by denition, a line has length
and location, being just one-dimensional and having no width and
height. As for a plane, it is the path along which a line travels;
besides, it is a two-dimensional space composed of two elements:
length and width (Wong, 1993). Therefore, the icon consisting of
lines tends to become blurred owing to ne lines. By contrast, the
plane-based icon is divided by planes, so it usually has a larger area,
looking more vivid than the line-based icon. That is why M4 is more
easily noticed than M3.
M2, M1, and M6 get a lower xation frequency than M4 or M3.
The main reason is that in the case of M4 or M3, negative polarity
combined with planes or lines 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 black image on a white background,
they are less likely to capture visual attention (Wolfe et al., 2002).
As indicated by the experimental results herein, M2, M6, and M1
show no statistically signicant difference in terms of xation fre-
quency. The conclusion is similar to that reached by Fleetwood &
Byrne, who explored icon borders. According to the two re-
searchers, the effects of no border, round borders, and square
borders on search speed showed no signicant difference
(Fleetwood & Byrne, 2002). Similarly, this study discovers that the
participants pay more attention to the line-based and plane-based
images. Although the icon with positive background (M1) is larger
than the icon with no background (M6), the border lines of M1 are
too ne to be noticed by the participants.
5.3. Subjective evaluation of attention
The results of subjective evaluation of attention indicate that
icon composition and background are the major factors affecting
attention. The above results correspond with those of xation
duration and xation frequency. Regarding icon composition, the
participants think that all plane-based icons are better than line-
based ones. As for background, negative background performs the
best, followed by positive background, and no background per-
forms the worst.
Concerning subjective evaluation of attention, plane-based
icons get higher scores than line-based icons. Line-based icons
have more lines and line segments than plane-based icons. As a line
is ner than a plane, the former used in an icon is likelier to be
ignored than the latter.
Additionally, with the scores for subjective evaluation of
attention compared, negative background gets the highest score,
positive background ranks second, and no background gets the
lowest score. There are two reasons for that, as described below.
First, the viewed icons with a background have a larger area than
those without a background, easily catching the participants
attention. Second, an icon with negative background has a larger
area completely colored than one with positive background. A
white icon on a black background is more noticeable. Therefore,
negative background draws attention more easily than positive
background.
The interaction of icon composition and background has a sta-
tistically signicant effect on subjective evaluation of attention. The
ndings in this study are similar to those of Lin & Hsieh (2015), who
explored how different presentation modes affect users subjective
preference levels. Specically, the icon presented in M4
(plane negative polarity border) performs the best in terms of
user preference while the icon presented in M5 (line positive
polarity no border) performs the worst. As discovered by this
study, M4 attracts the most attention; M2 ranks second; M1, M3,
and M6 rank among the third group; M5 attracts the least attention.
As for M4, its performance in subjective evaluation of attention
corresponds with that in xation frequency. Namely, the icon with
plane negative background (M4) is the most easily noticed. As for
M3, its performance in subjective evaluation of attention does not
correspond with that in xation frequency. In terms of subjective
evaluation of attention, M3 performs worse than M2; contrarily, in
terms of xation frequency, M3, ranking second, performs better
than M2. It is mainly because the participants subjectively consider
that planes are invariably better than lines. According to one study,
a detailed image tends to render the icon more complex (Curry
et al., 1998). The more complex an image is, the poorer its recog-
nizability will be (Easterby, 1970). Besides, as a line is ner than a
plane, the former used in an icon is less likely to be noticed than the
latter. In an environment where the participants cannot identify
images smoothly, they subjectively regard M3 icons
(line negative background) as more unnoticeable than M2 icons
(plane positive background).
On the other hand, M1 and M3, both of which have a back-
ground, and M6, which has no background, show no statistically
signicant difference in subjective evaluation of attention. The
above result is somewhat different from that of xation frequency.
The icons in M1 and M3 have a background and are larger than the
icon in M6. Despite that, the icon in M1 is line-based, so the ne
lines prevent it from looking as obvious as a plane-based icon (M6).
6. Conclusions
This study has explored how icon presentation modes in the
main menus of webpages and digital systems affect users atten-
tion. While the icons were being viewed, eye trackers were
employed to record the participants xation duration and xation
frequency; meanwhile a questionnaire was used to carry out
 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228
subjective evaluation of attention. In this way, the effects of icon
presentation modes on attention have been investigated. The
ndings suggest that icon composition and background have an
effect on users attention to the viewed icons. Specically, the icon
in M4 performs the best, attracting the greatest amount of atten-
tion. Moreover, planes perform better than lines in terms of xation
duration, xation frequency, and subjective evaluation of attention;
likewise, negative background performs better than positive
background, and positive background performs better than no
background. The above ndings can be used as a reference by
interface designers to design icons.
Acknowledgements
The authors hereby extend sincere thanks to National Science
Council (NSC) of the Republic of China (ROC) for their nancial
support of this research, whose project code is 102-2218-E-165-
002. It is thanks to the generous patronage of NSC that this study
has been smoothly performed.
References
Baxter, M. (1995). Product design. CRC Press.
Bernard, M. L., Chaparro, B. S., Mills, M. M., & Halcomb, C. G. (2003). Comparing the
effects of text size and format on the readibility of computer-displayed Times
new roman and Arial text. International Journal of Human-computer Studies,
59(6), 823e835.
Beymer, D., Orton, P. Z., & Russell, D. M. (2007). An eye tracking study of how
pictures inuence online reading. In Human-computer interactioneINTERACT
2007 (pp. 456e460). Springer.
Bullimore, M., Howarth, P., & Fulton, J. (1990). Assessment of visual performance.
Evaluation of Human Work: A Practical Ergonomics Methodology, 804e839.
Buscher, G., Cutrell, E., & Morris, M. R. (2009). What do you see when youre surf-
ing?: using eye tracking to predict salient regions of web pages. In Proceedings
of the SIGCHI conference on human factors in computing systems (pp. 21e30).
ACM.
Chan, A., & Lee, P. (2005). Effect of display factors on Chinese reading times,
comprehension scores and preferences. Behaviour & Information Technology,
24(2), 81e91.
Ciuffreda, K. J., & Tannen, B. (1995). Eye movement basics for the clinician (Vol. 18).
Mosby St. Louis.
Curry, M. B., McDougall, S. J., & de Bruijn, O. (1998). The effects of the visual met-
aphor in determining icon efcacy. In Proceedings of the human factors and er-
gonomics society annual meeting (Vol. 42, pp. 1590e1594). SAGE Publications.
Cushman, W. H. (1986). Reading from microche, a VDT, and the printed page:
subjective fatigue and performance. Human Factors: The Journal of the Human
Factors and Ergonomics Society, 28(1), 63e73.
Deubel, H., & Schneider, W. X. (1996). Saccade target selection and object recog-
nition: evidence for a common attentional mechanism. Vision Research, 36(12),
1827e1837.
Dewar, R. (1999). Design and evaluation of public information symbols. Visual In-
formation for Everyday Use: Design and Research Perspectives, 285e303.
Dixit, S., Ojanpera, T., van Nee, R., & Prasad, R. (2011). Introduction to globalization
of mobile and wireless communications: today and in 2020. In Globalization of
mobile and wireless communications (pp. 1e8). Springer.
Easterby, R. S. (1970). The perception of symbols for machine displays. Ergonomics,
13(1), 149e158.
Fleetwood, M. D., & Byrne, M. D. (2002). Modeling icon search in ACT-R/PM.
Cognitive Systems Research, 3(1), 25e33.
Goonetilleke, R. S., Lau, W. C., & Shih, H. M. (2002). Visual search strategies and eye
movements when searching Chinese character screens. International Journal of
Human-computer Studies, 57(6), 447e468.
Gould, J. D., Alfaro, L., Finn, R., Haupt, B., & Minuto, A. (1987). Reading from CRT
displays can be as fast as reading from paper. Human Factors: The Journal of the
Human Factors and Ergonomics Society, 29(5), 497e517.
Hills, P. J., & Lewis, M. B. (2011). Reducing the own-race bias in face recognition by
attentional shift using xation crosses preceding the lower half of a face. Visual
Cognition, 19(3), 313e339.
Hollands, J., Parker, H., McFadden, S., & Boothby, R. (2002). LCD versus CRT displays:
a comparison of visual search performance for colored symbols. Human Factors:
The Journal of the Human Factors and Ergonomics Society, 44(2), 210e221.
Holmqvist, K., & Wartenberg, C. (2005). The role of local design factors for news-
paper reading behaviourean eye tracking perspective. Lund University Cognitive
Studies, 127, 1e21.
Ho, C.-H., & Lu, Y.-N. (2014). Can pupil size be measured to assess design products?
International Journal of Industrial Ergonomics, 44(3), 436e441.
Houde, S., & Salomon, G. (1993). Working towards rich and exible le represen-
tations. In INTERACT93 and CHI93 conference companion on human factors in
227
computing systems (pp. 9e10). ACM.
Huang, K.-C. (2008). Effects of computer icons and gure/background area ratios
and color combinations on visual search performance on an LCD monitor.
Displays, 29(3), 237e242.
Huang, K.-C., & Chiu, T.-L. (2007). Visual search performance on an LCD monitor:
effects of color combination of gure and icon background, shape of icon, and
line width of icon border 1. Perceptual and Motor Skills, 104(2), 562e574.
Huang, H., & Lai, H.-H. (2008). Factors inuencing the usability of icons in the LCD
touchscreen. Displays, 29(4), 339e344.
Kline, D. W., & Fuchs, P. (1993). The visibility of symbolic highway signs can be
increased among drivers of all ages. Human Factors: The Journal of the Human
Factors and Ergonomics Society, 35(1), 25e34.
Landa, R. (2010). Graphic design solutions. Cengage Learning.
Le Meur, O., Le Callet, P., & Barba, D. (2007). Predicting visual xations on video
based on low-level visual features. Vision Research, 47(19), 2483e2498.
Lee, W., & Benbasat, I. (2003). Designing an electronic commerce interface: atten-
tion and product memory as elicited by web design. Electronic Commerce
Research and Applications, 2(3), 240e253.
Legge, G. E., Pelli, D. G., Rubin, G. S., & Schleske, M. M. (1985). Psychophysics of
readingdI. Normal vision. Vision Research, 25(2), 239e252.
Legge, G. E., Rubin, G. S., & Luebker, A. (1987). Psychophysics of readingdV. The role
of contrast in normal vision. Vision Research, 27(7), 1165e1177.
Li, X., Liu, P., & Rayner, K. (2011). Eye movement guidance in Chinese reading: is
there a preferred viewing location? Vision Research, 51(10), 1146e1156.
Lindberg, T., & Na sa
nen, R. (2003). The effect of icon spacing and size on the speed
of icon processing in the human visual system. Displays, 24(3), 111e120.
Lin, H., & Hsieh, Y.-C. (2015). A preliminary study on presentation of graphical icons
affect with viewers preference. Journal of Kansei, 3(1).
Lin, H., Lin, W., Tsai, W.-C., Hsieh, Y.-C., & Wu, F.-G. (2015). How different presen-
tation modes of graphical icons affect viewers rst xation and attention. In
Universal access in human-computer interaction. Access to interaction (pp.
226e237). Springer.
Memon, A., Banerjee, I., & Nagarajan, A. (2003). GUI ripping: reverse engineering of
graphical user interfaces for testing. In Null (p. 260). IEEE.
Mirzoeff, N. (2002). The visual culture reader. Psychology Press.
Mohr, W. (1984). Visuelle Wahrnehmung und Zeichenfunktion: Untersuchungen zur
Grundlage des Kategorieneffekts bei der Wahrnehmung von Buchstaben und Zif-
fern: Roderer.
Nas
anen, R., Karlsson, J., & Ojanpa
a, H. (2001a). Display quality and the speed of
visual letter search. Displays, 22(4), 107e113.
Nas
anen, R., & Ojanpa a
, H. (2003). Effect of image contrast and sharpness on visual
search for computer icons. Displays, 24(3), 137e144.
Nas
anen, R., Ojanpa
a, H., & Kojo, I. (2001). Effect of stimulus contrast on perfor-
mance and eye movements in visual search. Vision Research, 41(14), 1817e1824.
Oborne, D. J., & Holton, D. (1988). Reading from screen versus paper: there is no
difference. International Journal of Man-machine Studies, 28(1), 1e9.
Ojanpa sa
a, H., Na nen, R., & Kojo, I. (2002). Eye movements in the visual search of
word lists. Vision Research, 42(12), 1499e1512.
Pan, B., Hembrooke, H. A., Gay, G. K., Granka, L. A., Feusner, M. K., & Newman, J. K.
(2004). The determinants of web page viewing behavior: an eye-tracking study.
In Proceedings of the 2004 symposium on eye tracking research & applications (pp.
147e154). ACM.
Pettersson, R. (1993). Visual information. Educational Technology.
Pieters, R., Rosbergen, E., & Wedel, M. (1999). Visual attention to repeated print
advertising: a test of scanpath theory. Journal of Marketing Research, 424e438.
Rayner, K. (1998). Eye movements in reading and information processing: 20 years
of research. Psychological Bulletin, 124(3), 372.
Roefs, A., Jansen, A., Moresi, S., Willems, P., van Grootel, S., & van der Borgh, A.
(2008). Looking good. BMI, attractiveness bias and visual attention. Appetite,
51(3), 552e555.
Sanders, M. S., & McCormick, E. J. (1987). Human factors in engineering and design.
McGRAW-HILL Book Company.
Schiffman, L. G., & Kanuk, L. L. (2000). Consumer behavior, 7th. Prentice Hall, Inc.
Sereno, S. C., & Rayner, K. (2003). Measuring word recognition in reading: eye
movements and event-related potentials. Trends in Cognitive Sciences, 7(11),
489e493.
Sheth, B. R., & Pham, T. (2008). How emotional arousal and valence inuence access
to awareness. Vision Research, 48(23), 2415e2424.
Shieh, K.-K., & Huang, S.-M. (2004). Effects of pictorial size and circle-slash thick-
ness on glance legibility for prohibitive symbols. International Journal of In-
dustrial Ergonomics, 33(2), 73e83.
Shieh, K.-K., & Lin, C.-C. (2000). Effects of screen type, ambient illumination, and
color combination on VDT visual performance and subjective preference. In-
ternational Journal of Industrial Ergonomics, 26(5), 527e536.
Underwood, G. (1998). Eye guidance in reading and scene perception. Elsevier.
Viviani, P. (1989). Eye movements in visual search: cognitive, perceptual and motor
control aspects. Reviews of Oculomotor Research, 4, 353e393.
Wang, A.-H., & Chen, C.-H. (2003). Effects of screen type, Chinese typography, text/
background color combination, speed, and jump length for VDT leading display
on users reading performance. International Journal of Industrial Ergonomics,
31(4), 249e261.
Ware, C. (2010). Visual thinking: For design. Morgan Kaufmann.
Wolfe, J. M., Oliva, A., Horowitz, T. S., Butcher, S. J., & Bompas, A. (2002). Segmen-
tation of objects from backgrounds in visual search tasks. Vision Research,
42(28), 2985e3004.
228 H. Lin et al. / Computers in Human Behavior 63 (2016) 218e228

Wong, W. (1993). Principles of form and design. John Wiley & Sons.
Wu, H.-C., Lee, C.-L., & Lin, C.-T. (2007). Ergonomic evaluation of three popular
Chinese e-book displays for prolonged reading. International Journal of Indus-
trial Ergonomics, 37(9), 761e770.
Wu, F.-G., Lin, H., & You, M. (2011). The enhanced navigator for the touch screen: a
comparative study on navigational techniques of web maps. Displays, 32(5),
284e295.
Young, S. L., & Wogalter, M. S. (2000). Predictors of pictorial symbol comprehension.
In Proceedings of the human factors and ergonomics society annual meeting (Vol.
44, pp. 294e297). SAGE Publications.