How people acquire knowledge from a web page: An eye tracking study

: The article describes a pre-experimental research study that focuses on learning objects. Web objects that capture the attention of users and that characterize the content of a website were examined. The main goal was to identify the most relevant design of three web objects by using the eye-tracking tool Areas of Interest and feedback questioning as research methods. Eye tracking was used to gather data about students’ learning activity and questioning to gather students’ learning achievements. The eye movement analysis shows exactly in which order and how long participants spend on viewing selected items. In all three experimental stimuli, the majority of students started the learning process with a focus on the headline and headline and illustration (diagram), not on the box with information with written text. Heat maps and gaze plots document the learning process (Tobii Pro, 2017). As the findings of the learning process show, the students from the third quartile, which paid more attention to the learning process, achieved the best learning performance. The study contributes to our understanding of learning objects as small (reusable) “knowledge packages”.


Introduction
The term learning object is popular in the e-learning field.A common understanding is that a learning object provides a small chunk of students' learning activity and also a reusable "knowledge package".The key characteristic is that a learning object leads to a concrete learning objective being reached (Eger, 2012;Horton, 2006).A learning object requires both learning activities and a test.Horton (2006) divided these activities into three main groups: absorb activities, do activities and connect activities.Tests or other assessments then verify whether learning occurred and whether the objectives were accomplished.
e-Learning depends on technology (Carliner & Shank, 2008).One of the main tasks of ICT use in learning (e-learning) deals with the delivery and presentation of information.The central question is: How to display web content in an effective way that contributes to successful learning and achieving learning objectives?
This paper deals with acquiring knowledge from a web pages and its influence on students' achievement in the e-learning process.There are many variables that can impact successful achievements of students, and especially in e-learning an effectively designed learning object is one of the most critical.

Review of related theories and or studies
A learning object is a very important foundation stone in each learning activity.For elearning, Horton (2006, p. 32) states: "A learning object is a chunk of electronic content that can be accessed individually and completely accomplishes a single learning goal and can prove it."IEEE (2002, p. 5) has defined a learning object as "any entitydigital or non-digital -that may be used for learning, education and training."From the technical perspective, a learning object is described as the SCORM standard (ADL, 2016;Keramida, 2015;Nugent, Soh, & Samal, 2006).
A learning object is a unit that can be completed in some number of seconds or minutes.In e-learning, a (reusable) learning object is usually a concrete collection or mix of text and multimedia resources.It is a micro-course and can be accessed and evaluated individually as a piece of learning content apart from other pieces.Keramida (2015) notes that e-learning professionals should think of learning objects as small sharable "knowledge packages".
Web objects are defined (Dujovne & Velásquez, 2009) as "any structured group of words or a multimedia resource that is present on a web page that has metadata which describe its content."Velásquez (2012) use the term Website Key Object.It is a web object that captures the attention of users and that characterizes the content of a website (Loranger, 2015).From the above-mentioned definition it is possible to deduce that every website consists of a set of web objects but for their learning purpose a learning objective, supposed activity and possibility to test or verify the learning outputs are important.
Each learning objective requires us to design a learning object in the way that leads to the planned objective being accomplished.Successful e-learning design is the result of four main influences (Horton, 2006), each contributing concerns and capabilities (instructional design, media design, software engineering, and economics).The presented study focuses on selected topics from instructional and media design that can help us to present information on web pages in an effective way from students' point of view.
Today we need to select an appropriate mixture of text, graphics, voice, music, sound effects, animation, and video to design effective learning objects (cf.with genres of learning objects, Chen, Moore, & Chen, 2015).In very complex learning objects, authors even have to sequence these various media and synchronize complementary media parts.
In this context, Clark and Mayer (2003) ask a key question: How do people learn?They underline cognitive learning theory, which explains how mental processes L. Eger (2018) transform information received by the eyes and ears into knowledge and skills in human memory.Cognitive learning theory gives us several key ideas that explain learning:

•
Human memory has two channels to process information: visual and auditory.
• Human memory has a limited capacity for processing information.

•
Learning occurs by active processing in the memory system.

•
New knowledge and skills must be retrieved from long-term memory for transfer to the job (Clark & Mayer, 2003, p. 35).
"Working memory is the centre of cognition since all active thinking takes place there" (Clark & Mayer, 2003, p. 36).The way that leads new knowledge to its integration into long-term memory is called encoding.Encoding requires active processing of information in a working memory that has a limited capacity.For example, in advertising and also in teaching and learning we commonly use the rule: "seven plus or minus two chunks".
There are too many sources of information competing for a limited capacity and the learner must select those that best match their goals (Clark & Mayer, 2003, p. 37).It is also commonly known that this selection process can be guided by instructional methods that direct the learner´s attention.Effectively designed learning objects (cf. Pernice & Nielsen, 2009;Sauro, 2015) which are presented on a web page increase the learner´s attention and support an effective learning process.Velásquez (2012) suggest redesigning learning objects according to user requirements.This approach requires us to know how much time a user spends looking at each web object and to identify the most important web object from the user's point of view.Clark and Mayer (2003) argue: When the limited capacity of working memory becomes filled, processing becomes inefficient.Learning slows, and frustration grows.An important way to support learning is to reduce the cognitive load in instructional materials.This means that limited cognitive capacity when designing learning materials needs to be taken into account (Mayer, 2009;Chiu & Churchill, 2016)."Working memory integrates the words and pictures in a lesson into a unified structure and further integrates these ideas with existing knowledge in long-term memory" (Clark & Mayer, 2003, p. 38).The authors emphasise that: "Using the Internet for learning is not the same as using it for entertainment.We really need to shape the media to our purpose."(Clark & Mayer, 2003, p. 38) Mayer (2009) developed the cognitive theory of multimedia learning which explains what is involved in processing and suggests twelve design principles to apply when presenting a learning message using words and images (Chiu & Churchill, 2015).Mayer (2009) argue that multimedia supports the way that the human brain learns.They assert that people learn more deeply from words and pictures than from words alone, which is referred to as the multimedia principle (Mayer, 2005(Mayer, , 2014;;Sorden, 2012).According to Mayer (2014), there are three cognitive processes required for meaningful learning: selecting, organizing, and integrating.Knowledge that is constructed in working memory is then transferred to long-term memory.In the multimedia learning model, the verbal information and pictorial information are processed by two sensory channels: the auditory channel and the visual channel (Mayer, 2014;Wang, Tsai, & Tsai, 2016).
There is a call for research concerning the design of e-learning environments.Comparing learning processes and the outcomes from the learning process in different learning objects seems to be very important.Designs promoting active learning effectively facilitate a level of understanding that can be referred to as mental representation (Mayer, 2009).
The classic web objects in e-learning are text (printed texton the screen or spoken text -speech) and graphicsstatic illustrations (drawings, charts, graphs, maps, photos).Dynamic graphics (e.g., animation and videos) is currently also a widely-used web object in learning objects but it often increases the costs and production time.The presented study focuses on an experiment with a headline, box with text and static illustrationa coloured diagram.Our learning object is declarative knowledge (knowing what) and as Chyung (2007) notes, declarative knowledge is often a foundation for more complex knowledge.Clark and Mayer (2003, p. 79) point out that from eye movement studies involving text and corresponding diagrams comes evidence: successful learners tend to read a portion of the text, then search the diagram for the object being described in the text, then read the next portion of the text and search the diagram for the object being described, and so on.Velásquez (2013) states that web user behaviour is not the same when facing a text-only page versus an illustrated one.Visual Teaching Alliance (http://visualteachingalliance.com/) and e.g.Burmark (2002) argue that people transmit messages faster from visuals.Image-rich learning material can reach more students and teach them more quickly and meaningfully than traditional text-based learning material.A large body of research indicates that visual cues help us to better retrieve and remember information (Aisami, 2015;Lohr, 2007).Horton (2006) emphasises that each learning objective requires us to design a learning object to accomplish that objective.Next, he describes the three main types of learning activities: the learner absorbs knowledge by reading or watching, the learner does practice or discovers activities to deepen learning, and the learner completes activities designed to connect what they are learning to their lives and work.

Purpose of the study
The purpose of this study is to investigate a) how university students read information presented as learning objects on a web page, and b) how successful students are in gaining knowledge on the web.Based on the above, we are interested in exploring how students pay attention to learning through multimedia, how they acquire semantic knowledge.
Mayer notes that new multimedia technology is emerging faster than the science of instruction is developing, and that more research in these new areas is needed, especially as textbooks migrate to computer-based media (Sorden, 2012).
This study may contribute in several ways to the literature regarding e-learning, learning objects, working memory and cognition.First, the theory of learning objects and of multimedia learning are briefly described.Second, eye tracking and the preexperimental design of the study is introduced.Third, it adds to the very limited research on acquiring knowledge from web pages with a sample of university students using eye tracking.

Method
The presented research focuses on a learning object on a website that is built of (three web objects) a headline, a small box with text and one static illustrationa diagram.The main goal is to identify the most relevant design of the three web objects by using the L. Eger (2018) concept of Website Key Objects (Loyola et al., 2015).The study will address the following specific research questions:

•
How do university students read information presented as a learning object on a web page?
• Which of the three basic designs of the three web objects is the best?
How successful are students in gaining knowledge from learning objects on the web?
To capture the interest of learners in the different elements of a learning object and to receive feedback on the learning results, a procedure with two methods, eyetracking and questioning, will be used.

Methodology for website object identification
Eye tracking analysis is based on the important assumption that there is a relationship between fixations, our gaze and what we are thinking about.Velásquez (2012) developed the concept of Website Key Objects, which are a set of web objects that attract user attention and characterize the content of a web page (in our research we use the term learning object).This approach takes into account the time and frequency of fixations to infer the subset of elements that represent user interest (Loyola et al., 2015).Eye tracking allows us to follow carefully what is being looked at and when (Nisiforou & Laghos, 2013).To assess the learning object in our experiment we use a combination of two methods, eye-tracking and questioning aimed at the learning outcomes immediately as a part of the eye-tracking project.The study focuses on getting the user's point of view.Eye-tracking allows us to obtain more precise quantitative measurements.Eye-tracking is one of the most objective methods in terms of usability measurement (Pernice & Nielsen, 2009).
For experimental purposes, three learning objects as web pages were prepared.Each learning object consists of three elements (web objects): a headline in a bordered box, a short text in a text box and a static illustration as a diagram.All the learning objects are related to marketing and participants were university business students (the learning objects were relevant for the target group).All the headlines were situated at the top of the web page.The text in the text boxes was similar in length and difficulty from the students' point of view.All diagrams presented a marketing process (Kotler & Keller, 2006) and were designed in a similar way (size, colours, boxes, arrows).For each object three variants of location between the text in the text box and the illustration (text left, right or below the illustration) exist.The web pages did not have a navigation menu.
Eye tracking was used to gather data about students' learning activity.An eyetracking device was used as a visual gaze analysis tool to identify attention paid by learners to web objects.The task was to gain information about learners' fixation impact via a gaze plot (a map which shows gaze fixations on a webpage) and heat map (graphical representation of data using colours to indicate the level of activity).Heat maps and gaze plots are tools for data visualizations from eye-tracking surveys that can communicate important findings of visual behaviour clearly and with great power.
The area of interest (AOI) is a concept that develops the concept of Website Key Objects (cf.Velásquez, 2012) and an eye tracker is a tool that allows us to analyse and calculate quantitative eye movement measurements.These include fixation counts and durations.The software of the eye tracker then calculates the desired metrics within the boundary over the time interval of interest.Size and placement are two important considerations regarding the relationship between the stimulus = Areas of Interest.We measure how much time and in what order participants paid attention to selected Areas of Interest.Analysis of AOIs presents quantitative analyses of gaze behaviour.Knowledge of how people interact with information in AOIs can help us better understand the learning process when people gain knowledge from a web page (cf.Keifer, Giannopoulos, Raubal, & Dochowski, 2017).
In our experiment we use three AOIs.Their choice influenced the research questions.Each sub-task contains a headline, a box with text and a picture (marketing diagrams).The headlines in all three tasks are of the same size (from 45 to 47 words), the text boxes are also of the same size and the text in the boxes is of the same length and difficulty for the student (Race, 1998).The pictures were similar (to each other) marketing diagrams with the same colours and with similar but not exactly the same size.
Gaze plots show the location, order, and time spent looking at locations on the stimulus, whether a web page, print advertisement, or video (the term gazing means viewing).The primary function of the gaze plot is to reveal the time sequence of looking or where participants look and when they look there.The time spent looking, most commonly expressed as fixation duration, is shown by the diameter of the fixation circles.The eye movement analysis shows exactly in which order and how long participants spend viewing selected items.Eye gaze can also reveal how several pieces of information are integrated or compared during a task (Eckstein, Guerra-Garrillo, Miler Singley, & Bunge, 2017).
Learning can be regarded as a cumulative process.There are numerous studies investigating learning cross-sectionally.Time of learning cannot be studied in detail (Schmitz & Wiese, 2006).Eye-tracking is a new tool and opens up the possibility to better measure the outputs of the learning process (see information above about gaze plots and time).Our project with a pre-experimental design also aims to demonstrate the use of eye-tracking to analyse time spent looking at locations on the stimulus and student learning performance assessment (cf.Wang, Tsai, & Tsai, 2016).
Heat maps show how looking is distributed over the stimulus.In contrast to the gaze plot, there is no information about the order of looking on a static heat map.Heat maps are a visualization that can effectively show the focus of visual attention for many participants at a time.Choosing the right basis for constructing a heat map according to the research objective is an important task (MangoldVision, 2015;Tobii Pro, 2017).
In this study, we explored three hypotheses: H1: Students studying a learning object immediately after reading the headline pay attention to the study text.
H2: Because an illustration is concentrated information about the learning object, students pay attention to diagrams before they start answering feedback questions.
H3: Students who spend more time studying the learning object are more successful in answering the feedback questions.

Pre-experimental design
The eye tracking project contains selected stimuli that will be presented in a selected order to the participants.In our case the tasks were focused on three web pages with learning objects.Each research session starts with a test of the participant's eyes (calibration) and then continuously runs with the instructions, the stimuli and feedback pages.The software records all the viewing data.

Participants and scenario
For our participants the tasks were clear.The experimental learning object was a basic unit of e-learning (one web page) which provided knowledge through three elements (headline, box with text and picture -diagram).Every learning task was followed by feedback, i.e., a recall test with two questions.One question from this test assessed students' memory regarding the word part and the second assessed their memory regarding the graphic part of the learning object.The test was part of the eye-tracking scenario.Each participant performed the task without disturbance and was monitored by a researcher.
The participants were university students studying programme business administration, in the third year of the course.All the students, young people, have good computer literacy.45 respondents were recorded.Eye-tracking calibration was conducted for each participant.These respondents were divided into three groups (1, 2, 3) and each group started with a different text location and graphic elements (a, b, c) to avoid the effect of experience with the same location.The next two locations presented different content to gain the learner´s attention to web objects.(A = text on the left side, B = text on the right side, C = text below the diagram).
The experiment used a comparison of three experimental groups of students.Each group received different treatment.Creswell (2009) classifies this experimental procedure as a pre-experimental design.The first step in the scenario was calibration and a test trial (the participant filled in their gender in the test item -page).Each participant followed the instructions.The time spent on the learning object was up to each participant and the participant had information that after closing the web page with the learning object two questions in relation to the learning object would follow.This means that each participant started with calibration, then the first answer to a question (gender of participant), the first instruction and then the first learning object, the first two answers to feedback questions, the second instruction and learning object, the second two feedback answers, the third instruction and learning object, the third two feedback answers and the last page with thanks.Student motivation comes from participating in an experiment (it was part of a learning process focused on eye-tracking in digital marketing).
Feedback focused on learning outputs and an evaluation of students' learning achievements was collected via a web-mediated questionnaire (recall test).As mentioned above, the participants answered six yes-no questions.Two questions were always related to one learning object.
Nielsen (2012a) recommended 5 participants to test users in a usability study.He argues "With 5 users, you almost always get close to user testing's maximum benefit-cost ratio."For a quantitative-oriented eye tracking study, in order to receive stable heat maps, he recommended 39 participants.His graph (Nielsen, 2000) shows that a research study focused on a usability test with 15 participants meets 100 % of all possible usability problems.According to his recommendation on eye-tracker surveys, we involved 3 groups of 15 participants (total of 45 participants) in our pre-experimental design, each of which received 3 stimuli in one scenario.
Finally, for the conducted experiment an eye-tracking device and software were used (Mangold Vision, Eye Tracking System).

Results
To answer the first and second research questions, we analysed the first and the last periods of time (1.5 s) of the participant's focus on the learning object and on its three AOIs.Tables 1, 2 and 3 indicate that students showed a greater tendency to start a study process with the headline and the illustration (diagram).In the time before answering the feedback questions the learner´s attention is divided between different AOIs.

Table 1
The focus on AOIs in the first and last period of the learning process, text on the left side, illustration (diagram) on right side The first period in learning process (1.5 s) The last period in learning process (1.

Table 3
The focus on AOIs in the first and last period of the learning process, text under illustration (diagram) The first period in learning process (1.5 s) The last period in learning process (1.The data contained in Tables 1, 2 and 3 are interpreted as follows: In all three experimental stimuli, the majority of students started the learning process with a focus on the headline and the headline and illustration (diagram) = 75.5%.Thus, hypothesis H1 was confirmed.We argue that for the majority of students in their first look at a learning object, the headline and illustration are important, not the box with information in written text.
41.5% of the students paid attention to the diagrams before they started answering the feedback questions and 23% of them paid attention in this last period to both the diagram and text.
Hypothesis H2 supposes the illustration as concentrated information about the learning object will be important for students before they start answering the feedback questions (in the last period in the learning process).The experimental findings do not show clear outputs.Fig. 1 presents the inconclusive findings and H2 cannot be confirmed.

Fig. 1. Students pay attention in the learning process
As mentioned above, heat maps show how looking is distributed over the stimulus.Heat maps are a visualization that can effectively show the focus of visual attention for many participants at a time.The pictures below document our results.Fig. 2 shows a heat map of 15 students and their first look (1.5 s), the text is on the right.Fig. 3 shows the same group but in the first 10 seconds.Here we can see that the first look is at the headline and illustration and then participants pay attention to the information presented in the text box.We can confirm that the findings for all groups and variants were very similar.The next picture (Fig. 4) presents the final heat map for one variant.We can see that over the total length of time two AOIs are important, the text and illustration, and less time was paid to the headline.But, as mentioned earlier, students start their learning process with the headline and illustration.Table 4 gives us an overview of the time spent on AOIs for all participants in all variants.We present only examples of selected results.

Table 4
Participants, AOIs and variants of web objects (A, B, C) The following provides a commentary on the selected results in Table 4:

•
The findings provide information on how long participants spent on viewing (reading) selected items.
• There are differences in the individual learning process.Participant no.P7 spent extreme time reading web objects and his-her recall test was without mistake.An opposite extreme is represented by participant P5 with the same result in the recall test.

•
Participants who spent less time reading web objects usually made more mistakes in their recall tests (e.g., P9 and P1).
Table 5 and Fig. 5 present findings from the learning process.For this purpose, the recall test was used to assess students' memory of semantic knowledge similar as in the experiment conducted by Wang, Tsai, and Tsai (2016).Only 16% of students (n = 45) were completely successful.Half of the students made only one mistake in the six feedback questions in our experiment.We expected that students who spend more time studying the learning objects will be more successful in answering feedback questions than the others.To answer research question number three, we divided participants into two halves and then into three quartiles.Value of median is 95.627 seconds and thus one participant made one mistake.Table 6 presents findings from the learning process according to the three quartiles of students.As the findings show, the students from the third quartile, which paid more attention to the learning process, achieved the best learning performance.Students from L. Eger (2018) the lower quartile made one-third more mistakes than students from the third quartile.However, we must note that the sample of participants is small and non-representative.
The last Table 7 presents findings according to the experimental variants.
As mentioned above, the research sample is small and non-representative.The findings do not confirm the statement that for people who read from the left it is better when the written text is situated to the left of the illustration in the learning object (each object was first in the scenario once, then came second and third, and participants received a scenario according to the schedule with three variants).In our study design of the learning object, the worst results were achieved when the written text was placed below the illustration.

Discussion
The main goal of this study was to investigate the effects of different designs of areas of interest in learning objects on students' success in their learning process.The research empirically explores visual attention, which is related to eye movements.It explores how students pay attention to the AOIs as elements of interest.Eye tracking was used to gather data about students' learning activity.
The used eye tracker technology is only able to show the areas of the visual scene that the test subject has been fixating on and the jumps between them.To assess the results of the learning process, we used immediate feedback via a web-mediated questionnaire.The redesign of the learning objects in the conducted pre-experimental study involved a manipulation intended to affect a cognitive process, namely attention to AOIs.
Understanding web users' perception is important in designing better and more effective learning objects on websites.However, it is not a simple task, because the attention a student pays to the learning object is related to the user's knowledge background, personal experience and other possible factors such as a unique learning style, etc.To understand what web users are looking for, or how they learn from web pages, it is necessary to find what elements of the learning object capture the learner´s attention.All the mentioned factors also depend on the web usability, represented by the quality attribute that assesses how easy user interfaces are to use (Nielsen, 2012b).
Recommendations for specific design characteristics are often proposed but are rarely evaluated.It is more typical to collect open-ended feedback or feedback with several items based on the Likert scale (Kay & Knaack, 2007;Schibeci et al., 2008).A different tool with which to evaluate a learning object (multiple criteria analysis) from the expert's point of view is offered, for example, by Kurilovas, Serikoviene, and Vuorikari (2014).In our case, we used eye-tracking, which allows us to follow carefully what is being looked at and when, and the evaluation of learning objects is conducted from the student's perspective.
The study reconfirms previous findings published by Clark and Mayer (2003, p. 79) which suggest that successful learners tend to read a portion of the text, then search the diagram for the object being described in the text, then read the next portion of the text and search the diagram for the object being described, and so on.Findings from our experiment showed that almost all students in the first period of their learning process looked at the headline of a learning object and after that immediately at an illustration.Only a few students paid attention to the box with study text first.This leads us to the conclusion that pictures play an important role in gaining students' attention to the learning process.The result confirms the importance of graphically mediated information (Aisami, 2015;Lohr, 2007) for today's students = internet users who usually scan (Nielsen, 2013;Simpson, 2015) information from web pages.
The findings also confirm that the headline is the most important (Rayner et al., 2001) AOI not only in advertising (cf.Rayner, Miller, & Rotello, 2008) but also in the learning and teaching process and in the design of e-learning (Horton, 2006), and grabs the attention of learners.
The eye movement analysis shows exactly in which order and how long participants spend on viewing selected items (cf.Eckstein et al., 2017).Two selected gaze plots represent two different approaches.The results of our study confirm how students learn a simple learning object on a webpage but also show that significant individual differences exist.
The findings suggest that attention and time spent on the learning process correlate with learning outputs.Students who paid more attention to learning (time spent on AOIs), achieved the best learning performance.This output is also a partial contribution to the discussion on effective study habits (cf. Non & Tempelaar, 2016).
We expected that the design of the learning object with text on the left side and with the illustration on the right side would be the best solution and that students would achieve the best learning results.Our study does not confirm this expectation.
Limitations of the study.First, cognitive perspective can be enhanced by taking affective aspects of learning into account (cf.cognitive-affective theory by Moreno, 2006).This study focuses only on cognitive aspects.Multimedia instructional design attempts to use cognitive research to combine words and pictures.The conducted experiment used only a static presentation of words and pictures.Second, the population of the experimental group is small, only 45 students.Therefore, to generalize the results for larger groups, the study should have involved more participants at different levels.Finally, the scope and depth of the discussion in the paper is compromised when compared to the selected research surveys.
For future research it is important to consider other kinds of variables that can help us to improve our understanding of a learner´s behaviour on a website.

Conclusion
The purpose of this study was to investigate how people read information presented as learning objects on a web page.The study is a partial contribution to work that is needed to better delineate the boundary conditions under which the principles of the cognitive theory of multimedia learning apply (Mayer, 2014).The short-term laboratory study focused on the spatial contiguity principle, the temporal contiguity principle and partially on the multimedia principle.Eye tracking was used to gain answers to the question: How can we integrate words and pictures to maximize learning?The results also showed that attention and time spent on the learning process correlate with learning outputs.
The focus on AOIs in the first and last period of the learning process, text on the right side, illustration (diagram) on left sideThe first period in learning process (1.5 s) The last period in learning process (1

Note.
Group 1-3 = pre-experimental designs, AOIs = headline, graphic, text (word part), colours indicate different web objects (A, B, C) Participant and time paid to AOIs according to experiment variants, yellow = text left, green = text right, blue = text under illustration Group Part.

Table 5
Feedback from learning process, number of mistakes Findings from questions that were part of the eye-tracking project

Table 6
Number of mistakes from the learning process