Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web … · 2018-01-18 ·...

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


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


289


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


290


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)


291


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


292


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.


293


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


294


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


295


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


296


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


297


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


298


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-


299


[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


[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

[email protected] Aslina Binti Baharum Faculty of Computing and Informatics, Universiti Malaysia Sabah (UMS), 88400 Kota Kinabalu, Sabah, Malaysia [email protected]


301

Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web … · 2018-01-18 ·...

Documents

Transcript of Eye-Tracking Analysis for User Interface Design of Shopping Mobile Web … · 2018-01-18 ·...