DETERMINATION OF VISUAL INTEREST POINTS OF GRAPHICAL USER INTERFACES FOR TABLET NEWSPAPERS APPLICATION

Original scientific paper In this paper the authors determine the visual interest centres and the points of visual entry of observers on the page of graphical user interface for newspaper tablet application using the method of monitoring the eye movement. The research presented in this paper demonstrates that the key visual elements and points of entry in this case function in the same way as in the case of the printed edition of daily newspapers, and do not follow the patterns that occur in the application of content on websites of corresponding newspaper.


Introduction
The technological development and the implementation of information and communication technologies in different segments of publishing and printing production process have enabled the transfer of content of the printed products into new formats that are mainly containing the same content but in the digital forms.It is primarily the spread of print media, respectively newspapers and magazines, on the Internet, and later into the applications for mobile devices and tablet computers.Such a transfer of content results in the new technological and production requirements for many professionals and companies whose area of interest relates to publishing.
As shown for example in the Report of the Research Center of the U.S. Congress [1] certain segments of printing industry, mostly ones connected to publishing, face a number of problems that result in a reduction of print media consumers.Accordingly there is a decrease in newspaper circulation, resulting in the drop of sales of advertising space and ultimately in decline in revenues.At the same time the influence and presence of the digital versions of the same products on the Internet as a new channel to media public are increasing.Also, certain traditional printed products fully move to online editions.In recent years, the boosting of mobile Internet even more encourages and highlights the same trends.
However the transition from print to different versions of digital applications and editions requires a series of adjustments of different visual parameters in order to meet the growing demands of the modern consumers.Visual and graphic design rules applied to print are not fully (if at all) applicable to online formats, as will be shown in Chapter 2 of this article.Accordingly, visual and design content organization and presentation rules for new graphical user interfaces of newspapers applications on tablet computers are still lacking serious scientific research.In accordance with the stated this paper will explore how average consumers view the pages of different newspaper tablet editions to determine the visual centres of interest and other visual entry points, with the aim of determining the optimal elements of graphic design for graphical user interfaces intended for tablet computers.

The graphical user interface and the research of the visual entries
"The user interface is the most important part of any computer system from the aspect of user" [2].It is part of a computer system that enables the user to use the different computer operations and functionalities.
It consists of an input, i.e. the segment that enables the user to express the needs and desires towards the computer, and of an output, i.e. the segment that enables the response of the computer system to requests and messages, i.e. stimuli of the users.In this sense, the graphical user interface represents "a variety of display and interaction techniques interconnected to a common system" i.e. "a set of elements -objects -which can be seen, touched, heard or otherwise experienced and whose purpose is to conduct certain operations and tasks, regardless of other objects" [2].
It is characterized by: a) sophisticated visual presentation and continuous presence, b) pick-and-click interaction, c) a limited number of optional interfaces, d) visualization, e) orientation of objects, f) use of identification, and g) simultaneous functions performing [2].
The most common way to use a graphical user interface is a direct objects manipulation, i.e. the selection and use of individual elements using some kind of demonstration mechanism, such as a mouse, joystick or touch screen.In order to have an efficient and organized interface, Marcus recommends [3] three basic modes of organization: a) The use of the network, b) Standardization, c) Grouping of elements.Also, he considers the visual grouping of elements to represent, depending on their functional connection, a quality way of designing interfaces, considering it enables logical link between them.A graphical user interface "must accurately and efficiently be associated with tasks, workflow, goals, education, personality and culture of users" and "provide for the following design components in the functional and aesthetic form: a) metaphors (basic concepts communicated through the terms and images), b) mental model (organization of data, functions, tasks and roles), c) navigation of mental model (menus, icons, dialog box and windows), d) appearance (visual, auditory and verbal properties of controls and background ) and f) interaction (behavior of the controls of interactive screen, and of input and output devices for display)" [3].
Given the stated above, graphical user interface for newspaper tablet application should follow the mental model of either printed or online (web page) edition of related newspaper, described by authors such as Garcia [4] and others.Therefore it is important to examine different ways in which readers perceive and read mentioned editions.Research in the field of Theory of reading [5]  In order to determine what the eye sees first and in which way, when the reader reads the newspaper, Garcia and Stark Adam [6] at Poynter Institute conducted the first in a series of researches to determine the way of reading by using eye tracking technology.
The conclusions of their seminal research were: 1) photographs attract the attention of the audience, both those in colour and black and white, where the colour photographs especially attract attention when positioned on the opposite pages, 2) eyes follow the usual way of navigating the page: most readers enter pages using the dominant photograph or illustration, then move to the dominant headline, then to the attention (eye) catcher (separate parts of the text, frames, etc.) and only then they pay attention to the text, 3) quotes and frames accompanied by visuals attract more attention than the quotes themselves, 4) two facing pages are perceived as one which is -if there is no dominant visual elements -entered in the top right corner and followed with immediate move to the left, 5) readers like the colour, find that colour pages contain more information and read them more (longer), 6) images (photographs and graphics) are watched more than the text: in the first place photographs and art reproductions, followed by headlines and advertisements, then summaries of articles and frames, and at the very end the text itself.
Figure 1 Usual movement of the eye on the double spread newspaper pages [6] When movement of the eye through a newspaper web page is considered, Lewenstein, et al. [7] studied the reader's eye movement on the webpage of the two daily newspapers by using the "eye tracking" method and found that: 1) readers first look at the text, the title of the article and the text under the photographs, and only after that the visual element, 2) photographs attract more attention and time spent than the other graphical elements, 3) reading is shallow, but broad, 4) the attraction of readers is drawn by electronic advertisements (add banners).In another eye tracking research relevant to this topic Outing and Ruel [8] came to the conclusion that: 1) reading the website starts in the upper left corner where the logo or the title of the page are placed while the eye view remains for some time in this area before it descends or moves to the right, 2) the navigation on the top of page receives a lot of attention, 3) dominating headlines immediately draw attention, especially if they are on the top left side of the page and the big headlines draw more attention than the small ones, 4) underlined titles or elements marking the broken down text (lines, etc.) discourage readers to continue reading the rest of the broken down text, 5) a text, not image, represents the point of entry into the page, 6) shorter paragraphs receive twice more attention than other paragraphs, 7) lower parts of the screen, especially those to which a person must scroll down gain modest level of attention, 8) standard format of one column is proven to be superior to format with multiple columns, 9) summaries and descriptions as for example an introduction to the article proved to be popular, and 10) advertisements are best seen if they were big or placed in the top and/or left side of the website and if they were connected with the content of the article.
Several researches have concentrated on the potential transition from the printed newspapers to mobile devices.
In order for the different e-readers to replace printed newspapers and in order for them to reach the experience of reading printed newspapers, the devices primarily must achieve light portability, simplicity in usage and quality in readability [9,10,11].Also, the readers have expressed concern regarding the way the information is presented and the way the relevance of the information is determined [10], considering that in the case of the simpler display like the Kindle or the iPhone one does not see 'visual -spatial' relevance of the news which is clear and understandable to the readers of printed editions.

Research methodology and measurement
Visual elements on the page and readers eye movement are explored by using 'eye tracking' method [12] for the two types of the Front page layout.Layout was designed by a group of design professionals with a wide experience in graphic design, newspaper layout and tablet applications.They were structured in two ways: 'tabloid' and 'broadsheet' layout, following the general theoretical characteristics of both types of layout described by leading scholars in the field [4,16,21].For the purpose of this research, four simulations of tablet newspaper frontlines were used (in portrait and in landscape format for each layout).The same methodology called "Latin square" has already been used in previous similar research [17].Eye tracking method has already been successfully used in various cases, i.e. for research of the ways of viewing the newspaper pages, the visual entries to the page and multimedia content in a digital environment [6,7,8,15,16].
Eye tracking was performed using Tobii X60 device [13], with a recording resolution of 1920×1200 px and applied I-VT fixation filter, which is based on Olsson algorithm for the detection of reading [14].The eye movement is measured by recording eye glances at intervals of 0,02 sec and at a frequency of 60 Hz of the convenient sample of respondents.
Each front page was divided into a number of different areas of interest (AOI) and eye movement through those areas is recorded.The areas are defined by their visual characteristics, as shown in Fig. 3 and Fig. 4 in such a way that every single graphic element is considered as a unique area of interest.The research included 38 examinees, the graduates at the Faculty of Graphic Arts, University of Zagreb.The examinees observed the presented simulations in the limited period of time of 15 seconds per layout 1 (t 1 = 15) and 20 seconds per layout 2 (t 2 = 20).The task of the examinees was to look at the presented front pages and select the story they would like to read, which simulates the actual form of reading newspapers [20].Time to exposure was defined as an average time of viewing in previously held unrecorded viewing test in which 15 examinees not included in recorded tests were given the same task without any time limitation.
In the first test with a portrait format the results of 18 examinees (n = 18) were analyzed and in the landscape format test the results of 16 subjects (n = 16) were analyzed.The results of 4 examinees were not suitable for data analysis because they had insufficient percentage of recorded intervals (from 0 to below 50 % of intervals).
The data were analyzed using the Tobii Studio software (version 3. represents the results of Mann-Whitney U test and p represents p-value at the 0,05 significance level.

Results and discussion
The results of the eye tracking recordings are summarized in two tables (Tab.3. and Tab.4.) with the corresponding areas of interest (AOI) and shown in four corresponding figures (Fig. 5 to Fig. 8).
Time to first fixation is the time from the start of the stimulus display until the test participant fixates on the corresponding area of interest for the first time, the order of which is also shown in Fig. 5 and Fig. 7. Total Fixation Duration, as well as the Total Visit Duration, shows how long the observer´s view was present in a particular area of interest, and these results are presented in Fig. 6 and Fig. 8 in the form of heat maps.Data shown in Tab. 3 and Tab. 4 under column Mean 1 refer to arithmetic mean of the results obtained for portrait layout and under column Mean 2 to arithmetic mean of the results for landscape layout for each corresponding area of interest.
Applied statistical tests of the results showed no significant difference between the results for all the examined visually dominant elements, except for the results for the Rectangle 3 in Tabloid Layout test.Visually dominant elements in this case are considered to be all the photographs, led by the biggest one in the main article on the page and all the large headlines.According to Mann-Whitney U test (Tab.1), there is no statistically significant difference between the results for visually dominant elements (areas of interests) in Broadsheet Layout (p>0,05).
Mann-Whitney U test for Tabloid layout (Tab.2.) showed there is no statistically significant difference between the eye tracking results for all the areas of interest tested (p>0,05) except for the Rectangle 3 in landscape and portrait oriented pages (p=0,0061).
This difference could be addressed to the fact that Rectangle 3 photo is a part of the visually most dominant element composed of two photographs (Rectangle and Rectangle 3) and main headline (Rectangle 2) and examinees could have perceived it as one visual field, not giving it more attention, after looking at the Rectangle and Rectangle 2. However, that is not affecting all the other results or ranks thus the general conclusions can be drawn from the research.In broadsheet type of layout it is obvious that the text (labelled as Polygon), where examinees dwell the longest, comes after the images and titles regarding the order of the fixation (Fig. 7 and Fig. 8), and the examinees return to it after watching the other elements such as less dominant images and titles.As the visual entries on the page, it is necessary to emphasize the identification mark/logo (Rectangle 4 with broadsheet and Rectangle 18 with tabloid layout) and navigation elements as the visual entry points to the page that particularly come to the fore in tabloid layout interface.Technical Gazette 22, 3(2015), 659-665 The results show that the movement of the eye through the tablet application page is carried out in the same or similar manner as applied to printed newspapers, where the dominant visual entries on the page are the photographs that accompany and illustrate articles, regardless whether it is a tabloid or broadsheet type of layout.
Another important visual entry to page is a headline, especially large one and one that is associated with the corresponding photograph, wherein it can be noticed that headline can become dominant or first visual entry in the case when there are no dominant photographs or these are in their size and position smaller or unclear in relative relation to the headline, which is well evident from the data regarding the tabloid layout.Although the eye movement through the web page is based on the somewhat similar principle (headline first, illustration second), it is important to note that in this case large headline is a second or third element to be looked upon, which is more similar to the way readers look at print.What used to be newspapers head in print edition, in tablet application is represented with identification mark or logo and is seen more often than the other similar elements, for example a banner add or navigation tools.In a situation of transfer from print to tablet identification mark may serve as an element of familiarity and connectedness of a reader and a brand, just like Garcia [21] suggested.Shape and size of identification mark, as well as optimal shape and size of text, headlines, quotes and all types of illustrations should be a subject of further, possibly longitudinal research.
identified a direct relation between what the eye sees (scans) and what the mind thinks.

Figure 2Usual movement of
Figure 2Usualmovement of the eye on the newspaper website[8]

Figure 3
Figure 3 Areas of interest in measured tabloid layout

Figure 4
Figure 4 Areas of interest in measured broadsheet layout 2) [19] and presented in the form of: a) gaze plots b) heat maps through a defined area of interest.Since the distribution of obtained data significantly differs from the normal distribution, which is tested with Kolmogorov-Smirnov test, to test statistical difference between the two independent samples, a non-parametric Mann-Whitney U test is used.Results of the test are presented in Tab. 1. and Tab 2. in which Z value Technical Gazette 22, 3(2015), 659-665

Figure 5 Figure 6
Figure 5 Gaze plot for landscape oriented tabloid layout

Figure 7 Figure 8
Figure 7 Gaze plot for landscape oriented broadsheet layout

Table 1
Results of Mann-Whitney test for broadsheet layout

Table 2
Results of Mann-Whitney test for tabloid layout