Post on 03-Jul-2020
ISSN 2456-8066
International Journal of Advanced Engineering and Management
2(12): 287-301, 2017
DOI: https://doi.org/10.24999/IJOAEM/02120061
Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application
Lau King Lieng and Aslina Baharum
Abstract Nowadays, the use of mobile phone has brought great
conveniences and contributions to society in daily life. Online shopping takes a large portion in their online activities, due to this, the availability and the adequacy assessment in this situation are becoming increasingly requires. With the help of eye-tracking technology, it can be easy to study how users interact with the visual elements within the mobile applications. Currently, mobile app developers are facing the issue of limited guideline for proper mobile app user interface design. Moreover, the bad interaction between a user and interface design could lead to failure of the mobile app. At the same time, different users’ expectation among users in online shopping could be affected by gender, thus, further study is needed. The objective of this paper is to use eye-tracking technology for user interface design of shopping mobile web application. This paper will present the eye-tracking result of existing design guideline, meanwhile, the result obtained from the eye-tracking analysis will be used to develop a visualization pattern of user interface guideline. The visualization pattern of user interface guideline that develops at the end of this research may satisfy both genders. Keywords
Eye-tracking; interface design guideline; Mental model; Online shopping; Shopping mobile web app.
I. INTRODUCTION
With continuing penetration of the Internet into daily
life and the rapid development of smartphones, it has
changed the definition of mobile phones and become an
essential part of the peoples’ communication and daily
life. Due to this, mobile applications have become more
popular nowadays, especially for online shopping, the
availability, and adequacy assessment in this situation is
becoming increasingly requires. In order to study how
users interact with the visual elements within the mobile
application, the eye-tracking technique is increasingly
been applied to the usability study. Eye-tracking is often
used to measure how users interact with the visual
elements, with the aims of improving its design and
availability. It shows where the user’s attention is focused
and which paths are followed, provides an unobtrusive means to examine cognitively and attention to deal with.
In general, different gender have a different
perspectives in most activities including online shopping
and user interface (UI) design. The cause of differences in
perspectives from gender is due to the users’ mental
model. Thus, study and understand user’s mental model is
important. Moreover, a mobile web app is a web
application formatted for smartphones and tablets, and
accessed through the mobile device’s web browser. It is
cross-platform compatibility, allow to reach the broadest
audience with the least effort.
This paper is organized as follows. In Section 2 and
section 3, respectively, presented the problem background
and related works. In section 4, research methodology is
explained. Meanwhile, in section 5, the data collection
method will be presented; and in section 6, the results and
findings are explained. Finally, this paperwork is
summarized in the last section.
II. PROBLEM BACKGROUND
Nowadays, mobile apps developer still facing with the
problems of limited guidelines for proper user interface
design. As stated by [1], most of the mobile applications
developers have been facing proper graphical user
interface (GUI) design guideline issue, as some of the
existing guidelines for GUI design are only describing
fundamental patterns or use cases. Moreover, there is a
noticeable lack of studies and research in the area of
mobile application design compared to web application UI
design [1]. Moreover, they also stated that the bad
interaction between a user of the mobile application and a
poor GUI could lead to some misunderstandings, errors,
and frustration from an inability to achieve a goal and
could lead to failure of the mobile application [1]. Thus,
the user interface design is a crucial part in the
development process, it cannot be despised.
On the other hand, [2] suggested that the online websites
should focus more on female section instead of male
section, as their research results show that female have a
higher ratio to shop online. In contrast, a few research [3,
4] identified male customers do more online shopping and
spend more money than women, and they do or are more
Technical and Scientific Publication, India
287
ISSN 2456-8066 International Journal of Advanced Engineering and Management
likely to shop online in the future. In addition, [5] stated,
even though most of the shopping are done by women,
online purchasing often to be dominance by male
consumers. III. RELATED WORKS
A. Female vs Male in Shopping Behaviors Male and female have different mind-set in all their
actions as well as in shopping. According to [6], during
shopping, different gender have different functions. The
hypothesis from [6] stated that the diversity in shopping
behaviour for between male and female are related to the
differences in interest and personality instead of male
biological gender.
Furthermore, [7] stated that male is more known well
with online shopping and make online purchases. This is
due to the reason that males are more acquainted with the
use of technology, their interest is more than female.
Compared to females, males are much more acceptable
the use of technology and likes to use the internet as a
medium platform for shopping. [8]. In addition, females
attach importance to the conventional shopping
experience and the social welfare that provides to them.
For males, they prefer to simple and convenience of the
process [9]. From the results, it can be concluded that
male and female have different preferences on online
shopping.
Female incline to be hedonistic motivations because
they have the better brand cognizance, price cognizance,
and shopping pleasure than males [10]. Vice versa, males
are goal oriented, they aim to save time during the online
purchase. Several researches show that website design is
an important factor affecting the consumer’s purchase
decision process [11, 12]. From [13], they mentioned that
high quality (HD) image could raise the female's interest
in purchasing and visual enjoyment, yet, it could only
raise the male’s visual enjoyment but not purchase
intention. Furthermore, [8] suggested that gender
preferences for websites were needed, where the males
fancy to more descriptive and quantitative information
and stress the space they can express their views. B. Online Shopping
In the past few years, online shopping has been
dramatically increased. Conventional shopping method is
not enough to fulfil the individual requirement.
Individuals tend to the easy, fast, and convenient ways to
reach brands and stores, therefore, the ability to purchase
online from anywhere at any time is indispensable.
According to [14], e-commerce has fast growth in recent
years. Ease of finding products, available information
about the product and variety of choices on the internet
are the reasons to make the online shoppers shopping
online [14]. E-commerce keeps on grow as a scale of the
entire economy [15]. Therefore, enterprises should
optimize their online marketing, bridging the gap between
online shopping and buying online. The research indicates
that e-commerce taking a big percentage of overall retail
sales, and growing quicker compared to the retail sales'
[16]. Refer to some of the data, more than two billion
people around the world use the internet equivalent to 30% of the world’s population. In addition, personal
spending 5% total time on the internet and perform online
shopping [17].
Moreover, according to [5], even though most of the
shopping’s are done by women, online purchasing often to
be dominance by male consumers. Younger female’s
online consumer more like social e-shopping than
traditional e-shopping [5]. Also, younger female’s online
consumer found the social e-shopping interesting and
useful [5]. A study by [4] showed that the percentage of
male to shop online more at least once a week or more is
22%, but for the female is 14%. C. Mental Model in User Interface
In the recent years, the mobile applications (apps) has
been paying close attention due to the increasing number
of mobile app downloads [18]. Thus, UI design is
becoming important in mobile app development.
Whereas, a good designed UI can provide the expected
amount of information to the end users; thereby, user
participation in the designing process of UI is very
crucial. The UI design that is created based on user
expectation will be successfully utilized.
Mental model theory helps in designing a user friendly
and strong visualization interface design [19]. Several
studies and researches have been done by various
researchers on mental models [1, 19]. According to [1],
mental model is a fundamental term in human-computer
interaction. The interaction between a user of the mobile
application and a poor GUI could lead to some
misunderstandings, errors, and frustration from an
inability to achieve a goal [1]. However, designers are
able to prevent this situation with a good UI design with
respects to the user's mental model.
Previous research had also been done on the use of
mental model in interface design practices for a mobile
apps by [19]. They have stated that the user’s mental
model is more important compare to designer’s mental
model because the UI designer gives idea on user
preference instead of the designer. The users’ mental
model is used in interface design practices of mobile apps
[19]. The creation of successful GUI requires a real-user
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
288
ISSN 2456-8066 International Journal of Advanced Engineering and Management
application interaction through mental model theory.
Therefore, UI design of a mobile app is very important for
the end user. D. Eye-Tracking Technology
Eye-tracking is a technique used to measure eye
movements of an individual. As a consequence,
researchers able to find out which areas being viewed or
searched by an individual at whichever time and the
viewing sequence. One of the precious aspects of eye-
tracking is, it provide the details of users viewing and
searching behaviour. Besides, eye-tracking technique may
help researchers understand human computer interaction
processing visual information and elements that can affect
the interface usability [20]. Moreover, according to [21],
recording eye motion can provide an objective assessment
of the interface to the data source, which, in turn, can
provide information to improve the interface design.
Record users eye movements on a mission, which would
provide such as first fixates on a page, viewing sequence,
whether they notice the object they are looking for,
fixation duration, the area of interest, and others
information that will help increase the interface usability.
Nowadays, many researchers [20-23] adopt the eye-
tracking technology in their study to assess the web page
usability and learn how users interact with the web pages,
while designer uses the eye-tracking to improve the
interface design. Conventional web usability evaluation
method is not enough. The rise of eye-tracking technology
helps the web designers to get more information on the
usability issues, which cannot obtain from standard
usability evaluations. There are a variety of analysis that
can be extracted from the eye-tracking data, including
fixation point, number of fixations, saccades, saccade
path, area of interest, and the gaze duration. Individual
fixations and saccades information that gathered from eye
tracker in the task will be visualized in an eye-tracking
software as Scanpath map and Heatmap. E. Eye-Tracking Data Analysis Approaches
In eye-tracking study, the consolidation of data results
and visual illustration in the exhibiting of e-commerce
research discoveries can be very effective. The collected
eye-tracking data can be analysed by statistical methods
and/or with visualization techniques. Visualizations can
reveal characteristics of area of interest (AOI), fixations,
Scanpath, Heatmap, saccades, and gaze structures. Eye-
tracking based evaluations offer extra information on how
visual attention is distributed and changes occur while the
stimulus is presented. Because of wide range of various
applications of eye-tracking and research problems,
different approaches have been developed to analyse eye-
tracking data. So as to understand the information
obtained from eye-tracking, latest advances in eye-
tracking software tools are available to produce
animations and images in order to graphically summarize
the user visual behaviour, offering qualitative and
quantitative results. These images are mainly refers to
Heatmaps and Scanpaths.
Heatmaps are typically used to represent the fixation
areas after the completion of a given task; however, it
does not representative the time-course of the visual
interaction. It aggregates the gaze positions received from
multiple users where the number or duration of fixations
influences the depth of colours or transparency in the
Heatmap. Heatmaps displayed overlay translucent colour
on the background image, and most of these visualization
using red to highlight the most focused observe regional,
yellow representative moderate ones, and green colour
representative the least observed parts of the pictures, and
unobserved part remained clear (see Fig. 1). [22, 23] have
stated in their research that Heatmap analysis can help to
reveal the influence of particular web elements on viewing
behaviour.
Fig. 1. An Example of Aggregate Heatmap
At the time users are reading web pages, their eyes
remain relatively static and make fixation, at the same
time, their eyes will make fast moving between fixations,
it is called as saccades. The obtained series of fixation
points and saccades describe as Scanpath. The fixation
points (described by the circle with a number) are
connected by saccades (described by lines) in a sequence
order, which is in the form of saccade-fixation-saccade
(see Fig. 2). Scanpath analysis method has the ability to
show the complicacy of web pages design among different
themes but on the same web page. Moreover, the viewing
sequences and the most fixated visual elements also
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
289
ISSN 2456-8066 International Journal of Advanced Engineering and Management
provided by examining user's Scanpath. Meanwhile, the visual elements is different between each study. In [30],
studies of [24, 25] stated that the collected Scanpath may they mentioned that each fixation should be focused at
vary depends on the tasks and individual characteristics, least 150 ms to be considered valid. Yet, this could be
for example, gender [26], thus, different Scanpaths will modified based on task type, individual factors such as
generate based on gender. In [27], they mentioned that the experience and gender [26], the complexity of the web
Scanpath findings can be used for distinct purposes, for pages and others. This research will adapt [29] idea to
example to re-engineering the website in order the website remove fixation that is below 100 ms.
able to work smoothly in a restricted environment such as IV. METHODOLOGY
on small size screen devices. Figure 3 shows a proposed methodology for UI design
of shopping mobile web app based on eye-tracking
technology. Gender diversity on users’ mental model for
UI design of shopping mobile web apps research study
undergoes several phases. Phase I is the development
process, aim to develop a shopping mobile web app by
adapt the existing guideline (users’ mental model pattern).
After the development process completed, then go to the
Phase II. Phase II is the analysis process, the developed
shopping mobile web app will evaluate by using eye-
tracking technology and analyse the user's eye movement
data through the qualitative method. The qualitative
method is referred to Cued RTA interview which derived
Fig. 2. An Example of Scanpath from Scanpath analysis method, and also the Heatmap
analysis. Once the analysis process is completed, then
move to the Phase III. Phase III is the develop
Another analysis method that will also apply in this visualization process, where a new visualization pattern
will be created based on the eye-tracking analysis result in
study is cued Retrospective Think Aloud (RTA). Eye-
Phase II. Phase IV is the validation process. The newly
tracking data can be very useful in many availability
designed interface will be evaluated by using the researches; however, eye-tracking data do not provide the
quantitative method, which is the User Experience user's information directly such as gender, experiences,
Questionnaires (UEQ). UEQ will be distributed through
and etc. [28]. Without the user's context, eye-tracking data
the internet. The participants are randomly selected cannot be correctly interpreted. For instance, the longer
throughout Malaysia.
the fixation on certain visual elements, it can be explained
A. Participants and Data Collection Method
that either the users are interested to the particular visual
As stated in [31], 15 users are needed to find 85% and elements or the users are confused with the particular
above of usability issues. Moreover, [32] pointed out that
visual elements. Due to this reason, eye-tracking data need
if a qualitative study is carried out by observing the user’s
to be combined with RTA in order to interpret eye-
eye movement, six users are enough. Besides, [33] tracking data in more accurate. This research will be using
analysed many papers published over the past 20 years
a Scanpath map as a cue in an RTA Interview. By
and suggested that at least 10 ± 2 users are required to find
showing the Scanpath map to the participants, it would
80% of usability issues. Also, [34] suggested taking into
help to recall their memory and talk more about the
account the 20 users as the largest number of users and 12
problems encountered in each page.
users as the smallest number of users of the usability The collected eye-tracking data will be pre-processed.
study. Therefore, 20 users are enough to obtain a Collected eye-tracking data may contain a huge number of
measurable eye-tracking data. In order to eliminate the fixations, but not all the fixations are significant. The non-
effect of experience on the results, the participants cannot
significant fixations are referred to the fixations that are
have the experience using an eye-tracker. Participants below a specific duration on the visual elements. For
with visual condition problems (bifocals and contact instance, one of the researches eliminates the fixations
lenses) will be filtered out, due to the limitation of the eye
that were below the specific duration (100 ms) on the
tracker. In addition, participants are not allowed to change
visual elements [29]. However, the specific duration of
their seating position during the task performing. This is
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
290
ISSN 2456-8066 International Journal of Advanced Engineering and Management
because it will cause the eye calibration problems, and the
eye tracker will not be able to record eye movement.
However, the participants could still move freely within
the limited area that the eye tracker can record accurately.
At the end of the test, each participant will be given a gift
to thank their participation.
Fig. 3. Research Methodology Flow
B. Pilot Study
To make sure the evaluation will run according to the
plan, 2 pilot studies will be conducted before start to
conduct the actual study. Two participants will be selected
for pilot study to see if the tasks are clear, eye-tracking
tools are well working, the durations are sufficient to
complete the tasks and the cues function properly. The
two participants will be selected based on the same
characteristics as the participants used in the actual
testing. This could help to reduce unanticipated issues or
misunderstandings before the actual test begins. C. Tasks
The tasks used will be categorized into two types, which
are; (1) task-based (controlled experiment) and (2) free-
viewing tasks (uncontrolled experiment). For the task-
based test, the participants will be given tasks (example:
to find specific information or items on the shopping
mobile web app) and need to complete the tasks given
within the time given. Whereas for the free-viewing task,
it requires the participants to use the shopping mobile web
app in their own way, and without the help of others. In
addition, the free-viewing task is intended to study the
way participants view the shopping mobile web app when
they first visit the shopping mobile web app, and their
initial effort to understand of what they are viewing. The
tasks will be read out to the participants, thus, participants
do not need to memorize the tasks. 20 minutes is the
maximum time for each participant to complete all their
tasks. Within the 20 minutes, each task will be given an
average time. V. DATA COLLECTION
A repeated-measures design was chosen in this study.
All the participants will be given the same instructions,
and go through the same experiment and procedure. In
order to avoid the experiment result biases, the
participants will not be informed about the actual purpose
of the study. The eye tracking study was conducted in
UiTM (Melaka) and UNITEN (Selangor).
A. Apparatus
The experiment was performed by using the Tobii Pro
X2-60 eye tracker, Mobile Device Stand (MDS) and Tobii
Studio software. MDS will be used to hold the mobile
device and allow the participant to use the shopping
mobile web app, at the same time, their eye movements
will be tracked by Tobii Pro X2-60 eye trackers. The eye
tracker works by reflecting two infrared light sources to a
user’s eye. MDS mounted with a high-definition (HD)
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
291
ISSN 2456-8066 International Journal of Advanced Engineering and Management
scene camera and records the whole experiment process,
which also includes the eye movements’ data. The mobile
device used in this experiment was Mi4i. Tobii Studio
3.4.8 software will be used to set up the experiment and
extract the participant’s eye movement data. B. Procedure
The experimental procedural is mainly divided into the
experimental description, eye calibration and formal
experiment. Participant was invited into the laboratory and
been given an experimental description. After the
experimental description, a consent form and
demographic questionnaire were distributed to the
participant. They need to sign the consent form before the
formal experiment begin. The eye-tracking equipment was
calibrated for the participant. After the calibration process,
the tasks were read out to the participant and the
participant was asked to perform the tasks. After the
participants complete all their tasks, participants were
asked to describe why they can’t finish the task (if not
finished), what had attracted their attention, what make
them confused and others questions. This process is called
as cued Retrospective Think Aloud, where the participants
need to answer the question by looking at their Scanpath.
At the end of the test, each participant will be given a gift
to thank for their participation. The whole procedure will
be described by the Fig. 4.
Fig. 4. Experimental flow chart
C. Extraction of Eye Movements Data
During data extraction process, 1 males and 1 female
eye-tracking data been found is invalid. It's because the
participant moves their seating position during the task
performing, thus, most of the eye movement did not be
tracked. Fig. 5 shows the individual’s eye movement (Scanpath) while task performing (controlled task).
Participant’s eye will stay relatively statics before
performing the task, and their eye will make fast moving
when the task been given. As shown in Fig. 5, participant
fixates 4 points to complete the task. The dotted-round
circle with number meaning the start and the end of the
fixation point, and the normal circle with a number is the ‘processes'. Individual’s eye movement does not represent
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
292
ISSN 2456-8066 International Journal of Advanced Engineering and Management
all the participants, thus, a more thorough analysis needed to study all the participant’s eye movement.
Fig. 6 shows the heatmap. It aggregates all the
participant’s focused areas and represents by the depth of
colour. In the uncontrolled task, participant requires using
the app on their own for 30 seconds, without the help of
others. Heatmap can only be extracted after the data
collection process is finished since the individual’s focus
areas does not give any useful information.
button" in task 10. After discussing with the participant, they give some ideas. Thus, based on the participant
Fig. 5. Individual’s Eye Movement (Scanpath)
VI. Result and Findings A. Experiment Modification
From the pilot study, analysis had been made and some
changes are needed in order the experiment can run
smoothly. Participant 1 is a male, where participant 2 is a
female. Table 1 shows the task completeness for the
participant’s on the shopping mobile web app for both
male and female pattern interface design.
From Table 1, there have no complete eye movement
been recorded. Thus, post-interview been carried out to
find out the reasons behind. During the pilot study, the
participants are not able to complete the task 2, task 9, and
task 10. In the post interview (Cued RTA), participants
reveal that they did not understand the meaning of
"internal link button" in task 2 and "voice recognition
Fig. 6. Aggregated Focus Area - Heatmap
[* P Participant; ✓: Task Complete; ✗: Task Failed; !: Eye Movement Not Tracked ]
advice, some changes to the tasks had been made and
shows in Table 2. However, only participant 2 cannot
finish the Task 9. In the post-interview, she told that not
sure with the barcode scanner’s icon represent. Since it is
a personal knowledge issue, thus, this task will not make
change.
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
293
ISSN 2456-8066 International Journal of Advanced Engineering and Management
Moreover, the time given to complete each single task
(controlled task) has been changed from the 30 seconds to
10 seconds. During the pilot study, participant able to
complete a task within 10 seconds. Meanwhile, the
participants also inform the questioner in less than 10
seconds that they cannot complete the task. However, the
time given to complete the uncontrolled task is still to
maintain at 30 seconds.
Meanwhile, during the pilot study, the failure rate was
unexpectedly higher than expect (participant’s eye
movement cannot be tracked while task performing). This
is due to the participant's change their seating position
while task performing. In the post-interview, the
participant's indicated that the experimental instructions
are not clear enough. Therefore, a clearer experimental
instruction is needed. 3 extra users have been recruited in
order to avoid the data invalid and insufficient. Thus, 25
people in total have been recruited during data collection.
Within the 25 people, there are 13 females and 12 males.
These findings will be applied to the actual test. Table 2
shows the tasks before and after changes and Table 3
shows all the changes had been made to the experiment. B. Pre-process Eye-Tracking Data
All in all, 25 students participated in this study. One of
the participants was not able to fulfil the calibration with a
satisfying result since he blinked too often. Other than
that, one of the participants, the eye tracker cannot track
his eyes properly. This might because the participant wear
the glasses, thus, the eye tracker cannot track properly.
Moreover, three of them, including the two pilot study
participants, part of their eye movement's did not be
tracked during task performing. Thus, their eye tracking
data will also be not taken. As a conclusion, this study
will take 20 participants into account in the evaluation.
From the 20 participants, 10 participants are male and
another 10 participants are female.
Table 2. Tasks Changes
Task Task before Changes Task after
Changes
Uncontrolled Task – aim to identify the visual
elements placement and the icon represent.
*Remain 1 Please click on the company logo.
unchanged
2 Please click on the internal link. Please open
the sidebar
3 Please type the word “Order” in *Remain
the search bar.
unchanged
4
Please click on the login button
*Remain
unchanged
5
Please click on the wish list icon *Remain
unchanged
6
Please tell me how many items in
*Remain
your cart?
unchanged
7 Please find and click on the home *Remain
page link button on this screen.
unchanged
8
Please read out the latest news.
*Remain
unchanged
9 Please click on the barcode *Remain
scanner button?
unchanged
Please find
10
Please click on the voice
and click on
recognition button
the voice
search button
Controlled Task – aim to find out how
participant look at the application, what has been
focused most, and what have been ignored.
Now, you are allowed to use this
app freely (Home Screen only) for *Remain
1
30 seconds. You are not allowed to
unchanged
ask any question while using the
app.
Meanwhile, 9 out of 20 participants in the experiment
are wearing glasses in daily life. Several researches stated
that due to the limitation of eye tracker, glasses or contact
lenses may affect the eye capturing result [35-38],
however, it is difficult to recruit participants who are not
wearing glasses. A vast majority of the population wear
glasses or contact lenses. Where [39] reported that a
majority of 61 percent of the population wears glasses,
contact lenses or other reading or visual aids. The
percentage has steadily risen in recent years. Thus, it is
impossible to filter out the participant who are wearing
glasses, which is more than half of the population in this
world. Several participants had glasses or contact lenses,
but this was not an impediment to track their eye
movements. Thus, the result obtained in the experiment
prove the finding of [40], which stated that glasses or
contact lenses that are worn because someone is either
farsighted or near-sighted are usually not a problem. The
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
294
ISSN 2456-8066 International Journal of Advanced Engineering and Management
near-infrared light emitted by the eye tracker can pass
through the lenses and the eye tracking camera is able to
register corneal reflections just fine [40].
Table 3. Experimental Changes
Changes Reason
Experimental
Instructions are not
instructions clear enough.
Participants do not
Tasks understand with the
tasks given.
Time given to complete
10 seconds are enough
each single task for the participant to
(controlled task) complete the task
To recruit extra users
To avoid data invalid
and insufficient.
C. Results of Participant’s Eye Movement on
Controlled Experiment There are 10 tasks in total for the controlled experiment.
Participant’s eye movement data had been analysed in the
form of Scanpath. Table 4 and Table 5 show respectively
the task completeness on female and male pattern
interface on the controlled experiment. Table 4. Task Completeness on Female Pattern Interface Task
P
1
2
3
4
5
6
7
8
9
10
1 ✓ ✗ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
2
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
3 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
4
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
5 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
6
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
7 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
8
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
9 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
10
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
11 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
12
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
13 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
14
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
15 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
16
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
17 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
18
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
19 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
20
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
* P: Participant; ✓: Task Complete; ✗: Task Failed;
Table 5. Task Completeness on Male Pattern Interface
Task P
1 2 3 4 5 6 7 8 9 10
1 ✓ ✗ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
2 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
3 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
4 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
5 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
6 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
7 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
8 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
9 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
10 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
11 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
12 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
13 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
14 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
15 ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
16 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
17 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
18 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
19 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
20 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
* P: Participant; ✓: Task Complete; ✗: Task Failed;
From Table 4 and Table 5, it shows that there is 1 male
and 2 female participants cannot finish task 2 on the male
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
295
ISSN 2456-8066 International Journal of Advanced Engineering and Management
pattern interface, and one female participant cannot finish
task 2 on female pattern interface. Meanwhile, there is a
female participant failed the task 4 in the female pattern
interface. Moreover, there are 4 participants (two male
and two female) failed the task 5 in the male pattern
interface. Lastly, there is a male participant failed the task
10 in male pattern interface. Cued RTA interview had
been carried to find out the reason why they can’t finish
the task. Participant’s comment has been listed in Table 7. Table 6 shows the eye tracking result on the controlled
experiment and Table 7 shows the overall performance of
all the participants in the controlled experiment.
Table 6. Controlled Experiment’s Eye Tracking Result Total Average
T
Interface
NoF
Task Complete
NoF
Task Complete
Pattern Time (MS) Time (MS)
1 Male 54 24878 2.7 1243.9
Female
56
18805
2.8
940.25
2 Male 50 23462 2.94 1380.118
Female
56
20879
2.94
1098.895
3 Male 56 24416 2.8 1220.8
Female
56
20599
2.8
1029.95
4 Male 55 25208 2.75 1260.4
Female 69 31571 3.63 1661.632
5 Male 66 34860 4.12 2178.75
Female
57
22277
2.85
1113.85
6 Male 54 26481 2.7 1324.05
Female
62
21711
3.1
1085.55
7 Male 67 25305 3.35 1265.25
Female
73
20710
3.65
1035.5
8 Male 261 97572 13.1 4878.6
Female 271 82316 13.6 4115.8
9 Male 63 22939 3.15 1146.95
Female
62
18987
3.1
949.35
10 Male 60 23776 3.16 1251.368
Female
58
19819
2.9
990.95
* T: Task; NoF; Number of Fixation
Table 7. Overall Performance and Comments on
Controlled Experiment
T Which pattern Participant’s Comment
interface have a
better result?
Male Female
1
✓
-
- In female pattern interface, there is
an icon similar to the internal link
button (login drop down menu), make
them confused which one is the
2 ✓ internal link button.
- As common, the internal link button
should be on the left side instead of
right side of the screen (male pattern
interface).
-
3 ✓
- Login button should put on the
apparent interface.
- Combined with the issue in task 2,
4 ✓ the login button in female pattern
interface need to move out from the
drop down menu, and the drop down
menu icon need to be removed.
- Four participants failed the task in
male pattern interface.
5 ✓ - Wish list icon in the male pattern
interface should put on the apparent
interface.
6 ✓
- Poor placement of the external link
7
✓
in male pattern interface, as it make
the male pattern interface look very
compact.
8
✓ - The content design in the male
pattern interface are compact.
- Icon representative for barcode
9
✓
scanner button should change to the
icon like “barcode” instead of
“camera”.
- Confused with the voice recognition
10 ✓ button (only one male participant)
* T: Task
D. Results of Participant’s Eye Movement on
Uncontrolled Experiment There are only 1 tasks in total for the uncontrolled
experiment. Participants will be instructed to use the
shopping mobile web app by their own for 30 seconds,
and will not be informed the purpose of this experiment,
at the same time, they are not allowed to ask any question
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
296
ISSN 2456-8066 International Journal of Advanced Engineering and Management
during the task performing. Participant’s eye movement
data had been analysed in the form of Heatmap. Fig. 7 and
Fig. 8 show respectively the aggregated Scanpath and
Heatmap on the female pattern interface.
In this case, Fig. 8 cannot give valuable information, since it aggregates the participant’s eye movement, the Scanpath become clutter and unreadable. Thus, in this
case, Heatmap becomes more useful and suitable. Fig. 8
shows that the most focused area is the content. Both
genders spent more time in the content area. This might
because the content area provide more information and
animate pictures slide show, thus, participants willing to
spend more time on the content. Meanwhile, no part had
been missed out by the participants, the only difference is
the time spent in each area.
Male and female pattern interface had been segmented
into several areas. Fig. 9 shows an example of segmented
interface.
Fig. 7. Aggregated Scanpath on Female Pattern Interface
Fig. 8. Heatmap – Female Pattern Interface
Fig. 9. Example of Segmented Interface
Each of the interfaces had been segmented into 10 areas.
These areas are segmented based on the task on the
controlled experiment, aims to find out either the elements
will be taken note by the participants or not and the time
spent in each area. Table 8 and Table 9 show respectively
the segmented areas name in female pattern interface and
male pattern interface, and the total time spent and the
total number of fixation on each area.
Table 8. Total Number of Fixation and Time Spent on Segmented Area – Female Pattern Interface Total Visited
Total Time
Segmented Area Name
Times by 20
Spent (Seconds)
Participants
Logo
16
76.04
Internal Link 9 33.14
Search Bar
19
38.85
Login 5 49.87
Wish List
5
63.77
Cart 5 30.53
External Link
19
70.31
Content 20 141.47
Barcode Scanner Button 12 88.78
Voice Search Button 11 89.31
Table 9. Total Number of Fixation and Time Spent on Segmented Area – Male Pattern Interface Total Visited
Total Time
Segmented Area Name
Times by 20
Spent (Seconds)
Participants
Logo
14
70.57
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
297
ISSN 2456-8066 International Journal of Advanced Engineering and Management
Internal Link 11 43.63 it is important to attempt to supplement eye tracking data
with additional information gained from the participants
Search Bar
15
58.21
about their experiences.
Login 16 84.72 Several questions have been asked during the cued RTA
interview, and one of the questions is to rate both gender
Wish List
3
36.87
based interface design. Table 10 shows the score points
Cart
9
57.19
which calculate based on participant’s gender and Table
External Link
20
68.59
11 shows the total score points for both interface design.
Table 10. Interface’s Score Points Based on Gender
Content 20 167.62
Participant
Interface
Score Points
Barcode Scanner Button
11
87.52
Voice Search Button 6 76.6
Male Male Pattern 28
Female Pattern
38
As can see from Table 8 and Table 9, the most focused
Male Pattern 30
area is content area. Meanwhile, no area been missed out
Female
Female Pattern
42
by participants. Participants’ eye tracking data also be
used during the cued RTA interview. During the cued
RTA interview, participants stated that they are interested Table 11. Interface’s Total Score Points
with the icon representative used in both interface design,
Interface
Score Points
it directly shows the function of the icon, and also, the
icon looks very attractive. However, the barcode scanner
Male Pattern
58
icon representative needs to change, its icon failed to
bring the meaning for a barcode scanner. Both male and Female Pattern 80
female pattern interface used plenty of icons to represent
the function, including barcode scanner button, voice
search button, shopping cart, and wish list. Thus, correctly From Table 5.10 and Table 5.11, it shows that both
use the icon to represent the function is very important, as
genders prefer to use the female pattern interface. Most of
good designed graphics and icons could help to eliminate
the participants give a higher rating for the female pattern
the need of extra instructions on the functions and features
interface design rather the male pattern interface. Only 2
[41].
participants (male) prefer to use the male pattern interface.
As stated previously, the design of male pattern
They give the reason during the cued RTA. They stated
interface is too compact. Thus, compared to female
that male pattern interface is a new looked design, make
pattern interface, participants spent more time in
the
them interest to use the shopping mobile web app.
content area, this is because the content is difficult to read.
Meanwhile, others participant stated that the male pattern
Meanwhile, compared to male pattern interface, only 5
interface design is too small/compact, some of the content
participants visited the login button at female pattern
cannot be seen clearly, need to look very closely to the
interface, and this is due to the participants cannot find the
phone to make the content look clear. Thus, at this stage, a
login button in female pattern interface. Moreover,
all
conclusion can be made. Both genders don't have the
participants rarely visit the wish lists icon in both male
different perspective on the user interface design, as and female pattern interface, and they had stated in the
almost all the participant prefers the female pattern cued RTA interview, they not really know what is the
interface design. Thus, the conclusion can be made is one
wish list and its function. All these information will be
interface design pattern (female pattern interface) is used during the next phase, the development
of
enough for both genders. Also, female pattern interface
visualization pattern, as a reference.
still needs further improvement, thus, a new design
E. Result of Cued Retrospective Think Aloud (Cued guideline will be come out at the end of this research.
RTA)
For usability research, eye tracking data should be F. Creation of Visualization Pattern
combined with additional qualitative data because eye
As mentioned previously, compared to male pattern movements cannot always be clearly interpreted without
interface, almost all of the participants prefer to use
the participant providing context to the data [42]. Hence, female pattern interface design, also, participants perform
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
298
ISSN 2456-8066 International Journal of Advanced Engineering and Management
better in the female pattern interface. Thus, only the
female pattern interface will be re-designed based on the
analysed eye tracking data and the participant’s
comments, and male pattern interface will be eliminated.
As a conclusion, there are no different interface design
between genders. A new gender based mental model
pattern interface design has been proposed. Fig.10 shows
the genders based mental model interface design guideline
for the shopping mobile web app and Table 12 shows the
features reference for the interface design guideline.
Further analysis will be conducted on the proposed
visualization pattern (interface design guideline) to see
whether satisfy the user. UEQ will be used to analyse the
visualization pattern.
Fig. 10. Genders Based Mental Model Interface Design Guideline
Table 12. Interface Design Guideline’s Features Reference Code Number Features List
1
Logo
2 Internal Link
3
Search
4 Shopping Cart
5
Wish List
6 Login
7
Product Category
8 Content
9
Barcode Scanner
10 Voice Recognition
VII. CONCLUSION AND FUTURE WORK
In order to explore the usefulness and effectiveness of
eye-tracking technology, eye-tracking method including
Heatmap and Scanpath (cued RTA) will be used to
explain the user’s focus areas and their activity. Collected
data will be analysed and used to recreate/modify the
current guideline. A new shopping mobile web app will be
created by adopt the recreate/modify guideline. Created
app will be tested by distributing questionnaire to the
random users through online and face-to-face. The
contribution of knowledge at the end of this research are
exploration of existing UI design guideline (users’ mental
model pattern) by using eye-tracking technology,
development of a visualization pattern of UI guideline
based on eye-tracking analysis, and development of new
UI for shopping mobile web app by adopt the new
guideline.
Next step will start to analyse the shopping mobile web
app that develops based on visualization pattern by using
UEQ. Acknowledgements Researchers are thankful to Universiti Malaysia Sabah
(UMS) for the support of the resources and necessary
facilities for the preparation of the research. This study is
currently funded by a UMSGreat Grant from Universiti
Malaysia Sabah (GUG0071-TK-2/2016).
REFERENCES
[1] Vala, R, Jasek, R, & Malanik, D. (2014) Design of a
Software Tool for Mobile Application User Mental
Models Collection and Visualization. Applied
Mathematics, Computational Science and
Engineering, 133-141. [2] Gagandeep, N. & Gopal, R. (2013). A study of
Factors Affecting on Online Shopping Behavior of
Consumers. International Journal of Scientific and
Research Publications,3(6),1-4. [3] Lina, Z., Liwei, D. & Dongsong, Z. (2007). Online
Shopping Acceptance Model – A Critical Survey of Consumer Factors in Online Shopping. Journal of Electronic Commerce Research, 8(1),41-62.
[4] OFT (2007). “Internet Shopping”, An OFT Market Study. Available at:
http://webarchive.nationalarchives.gov.uk/20140402
142426/http:/www.oft.gov.uk/shared_oft/reports/con
sumer_protection/oft921.pdf. Accessed on 13
January 2017. [5] Dennis, C., Morgan, A., Wright, L. T., &
Jayawardhena, C. (2010). The influences of social e-
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
299
ISSN 2456-8066 International Journal of Advanced Engineering and Management
[6]
[7]
[8]
[9]
[10]
[11]
[12]
[13]
[14]
[15]
[16]
[17]
[18]
shopping in enhancing young women’s online
shopping behavior. Journal of Customer Behaviors,
9(2), 151–174. Hoeger, I. (2006). Shopping-Differences between
Genders or Differences in Interests?.201-254.
Rodgers, S. & Harris, M. (2003). "Gender and E-
Commerce: An Exploratory Study," Journal of
Advertising Research Vol. 43, No. 3: 322-330.
Awad, N. F., & Ragowsky, A. (2008). Establishing
trust in electronic commerce through online word of
mouth: An examination across genders. Journal of
Management Information Systems, 24(4), 101-121. Sebastianelli, R., Tamimi, N., & Rajan, M. (2008).
Perceived quality of online shopping: Does gender
make a difference? Journal of Internet Commerce,
7(4), 455-469.
Doolin, B., Dillon, S., Thompson, F. & Corner, J.L.
(2005). Perceived Risk, the Internet Shopping
Experience and Online Purchasing Behaviour: A
New Zealand Perspective, 2(1), 324-345.
Cyr, D., & Bonanni, C. (2005). Gender and website
design in e-business. International Journal
Electronic Business, 3(6), 565-582. Seock, Y. K., & Bailey, L. R. (2008). The influence
of college students’ shopping orientations and
gender differences on online information
searches and purchase behaviours. International
Journal of Consumer Studies, 32, 113-121. Flavian, B. C., Gurrea, R., S., & Orus, S. C. (2011).
Gender differences regarding the product’s
online visual representation: Impact on
satisfaction and purchase intention. ESIC Market
Economic and Business Journal, 138, 145-170. Ward, M.R., & Lee,M.J. (2000). Internet shopping,
consumer search and product branding. Journal of
Product & Brand Management, 9(1),6-20. Brown, J.,& Dant, R. (2014). The Role of E- Commerce in Multi-Channel Marketing Strategy. In:
Martinez-Lopez, F. (eds.) Handbook of Strategic E-
Business Management, Springer, Verlag. 467–487
Internet Retailer. (2011). E-commerce sales rise
14.8% in 2010. Available at:
http://www.internetretailer.com/2011/02/17/e- commerce-sales-rise-148-2010. Accessed on 12
November 2017.
We are social. (2012). How People Spend Their
Time Online. Available at: http://wearesocial.com/uk/blog/2012/05/people- spend-time-online. Accessed on 13 November 2016. Venkata,N.I., Divya, D.K., Taeghyun,K., & Manikanta, I. (2014). Factors Influencing Quality of
Mobile Apps: Role OF Mobile APP Development
Life Cycle. International Journal of Software
Engineering & Applications, 5(5),115-3.
[19]
[20]
[21]
[22]
[23]
[24]
[25]
[26]
[27]
[28]
[29]
Chui, Y.W., Chee, W.K., Kimberly, C. (2012).
Interface design practice and education towards
mobile apps development. Procedia Social and
Behavioral Sciences, 51,698-702. Nurul-Hidayah, M.Z., Fariza-Hanis, A.R., Azizah,
J. & Mohd-Firdaus, Z.(2011). Eye Tracking in
Educational Games Environment: Evaluating
User Interface Design through Eye Tracking
Patterns, in Proceedings of the Second
International Conferenceon Visual Informatics:
Sustaining Research and Innovations - Volume
Part II, ser. IVIC’11.Berlin, Springer-Verlag. (pp.
64–73).
Velasquez, J.-D. (2013). Combining eye-
tracking technologies with web usage mining for
identifying Website Keyobjects, in Engineering
Applications of Artificial Intelligence No.26 (pp.
1469–1478). Tullis, T., Siegel, M., & Sun, E. (2009). Are people
drawn to faces on webpages? In Proceedings of the
27th International Conference Extended
Abstracts on Human Factors in Computing
Systems.
Djamasbi, S., Siegel, M., & Tullis, T. (2014). Can
fixation on main images predict visual appeal of
homepages? Proceedings of the Forty-Seventh
Annual Hawaii International Conference on System
Sciences, 371-375.
Eraslan, S., & Yesilada, Y. (2015). Patterns in
Eyetracking Scanpaths and the Affecting Factors.
Journal of Web Engineering - Special Issue on
”Engineering the Web for users, developers and the crowd”, 14(4&5), 363-385. Underwood, G., Humphrey, K., & Foulsham, T.
(2008). Knowledge-Based Patterns of Remembering:
Eye Movement Scanpaths Reflect Domain
Experience. Lecture Notes in Computer Science,
5298, 125–144. 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
and Applications. ACM, New York, NY, USA, 147–
154. Akpinar, E., Yesilada, Y. (2015). “Old Habits Die
Hard!”: Eye tracking Based Experiential
Transcoding: A Study with Mobile Users. In
Proceedings of the 12th Web for All Conference,
ACM, New York, NY, USA, W4A ’15, 12:1–12:5. Eger, N., L. J. Ball, R. Stevens & J. Dodd. (2007).
Cueing retrospective verbal reports in usability
testing through eye-movement replay, hlm. 129-
137. Rama P., & Baccino T. (2010). Eye fixation-related
potentials (EFRPs) during object identification.
Visual Neurosci. 27, 187–192.
Lau King Lieng and Aslina Binti Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web
Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017.
DOI: https://doi.org/10.24999/IJOAEM/02120061
300
ISSN 2456-8066 International Journal of Advanced Engineering and Management
[30] Rayner, K. (2009). Eye movements and attention in
reading, scene perception, and visual search. Quarterly Journal of Experimental Psychology, 62, 1457–1506.
[31] Faulkner, L. (2003). Beyond the five-user
assumption: Benefits of increased sample sizes in usability testing. Behaviour Research Methods, Instruments, & Computers 35(3), 379–383.
[32] Pernice, K., & Nielsen, J. (2009). How to Conduct
Eyetracking Studies. Tech. rep., Nielsen Norman
Group. JANOSCHKA, A. 2004. Web Advertising:
New Forms of Communication on the Internet. John
Benjamins Publishing Company. [33] Hwang, W., & Salvendy, G. (2010). Number of
People Required for Usability Evaluation: The 10±2 rule. Communications of the ACM 53, 5 (May), 130–133.
[34] Alroobaea, R., & Mayhew, P. (2014). How many
participants are really enough for usability studies?
In Science and Information Conference (SAI), 2014, 48–56.
[35] Manhartsberger, M. & Zellhofer, N. (2005). Eye
tracking in usability research: What users really see. OCG Publication, 198, 141-152.
[36] Johansen, S.A and Hansen, J.P. (2006). Do We Need
Eye Trackers to Tell Where people Look?. Montreal Quebec, Canada. ACM 1-59593-298-4/06/0004.
[37] Ellis, K. (2009). Eye Tracking Metrics for Workload
Estimation in flight Deck Operation, Thesis, University of Iowa.
[38] Bergstrom, J.R. and Schall, A. (2014). Eye Tracking
in User Experience Design. Morgan Kaufmann, Burlington.
[39] Bruggink, J. (2013). More than 6 in 10 people wear
glasses or contact lenses. https://www.cbs.nl/en-
gb/news/2013/38/more-than-6-in-10-people-wear- glasses-or-contact-lenses. Accessed on 17 July 2017
[40] Rosler, A. (2012). Using the Tobii Mobile Device
Stand in Usability Testing on Mobile Devices. Tobii Technology in the United States.
[41] Gatsou, C., Politis, A. Zevgolis, D. (2012). The
importance of Mobile Interface Icons on User Interaction. International Journal of Computer Science and Applications, 9(3), 92-107.
[42] Hyrskykari, A., Ovaska, S., Majaranta, P., Räihä, K‐J. and Lehtinen, M. (2008). Gaze path stimulation in retrospective think aloud. Journal of Eye Movement Research, 2(4), 1‐18.
Author Details Lau King Lieng Faculty of Computing and Informatics, Universiti Malaysia Sabah (UMS), 88400 Kota Kinabalu, Sabah, Malaysia
lau.kinglieng@yahoo.com Aslina Binti Baharum Faculty of Computing and Informatics, Universiti Malaysia Sabah (UMS), 88400 Kota Kinabalu, Sabah, Malaysia aslina@ums.edu.my
Lau King Lieng and Aslina Baharum, “Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web Application”, International Journal of Advanced Engineering and Management, Vol. 2, No. 12, pp. 287-301, 2017. DOI: https://doi.org/10.24999/IJOAEM/02120061
301