Content uploaded by Paweł Cybulski
Author content
All content in this area was uploaded by Paweł Cybulski on Jun 29, 2020
Content may be subject to copyright.
ISPRS Int. J. Geo-Inf. 2020, 9, 412; doi:10.3390/ijgi9070412 www.mdpi.com/journal/ijgi
Article
User Experience in Using Graphical User Interfaces of
Web Maps
Paweł Cybulski * and Tymoteusz Horbiński
Department of Cartography and Geomatics, Adam Mickiewicz University, 61-712 Poznań, Poznan;
tymoteusz.horbinski@amu.edu.pl
* Correspondence: p.cybulski@amu.edu.pl
Received: 21 May 2020; Accepted: 26 June 2020; Published: 27 June 2020
Abstract: The purpose of this article is to show the differences in users’ experience when
performing an interactive task with GUI buttons arrangement based on Google Maps and
OpenStreetMap in a simulation environment. The graphical user interface is part of an interactive
multimedia map, and the interaction experience depends mainly on it. For this reason, we
performed an eye-tracking experiment with users to examine how people experience interaction
through the GUI. Based on the results related to eye movement, we presented several valuable
recommendations for the design of interactive multimedia maps. For better GUI efficiency, it is
suitable to group buttons with similar functions in screen corners. Users first analyze corners and
only then search for the desired button. The frequency of using a given web map does not translate
into generally better performance while using any GUI. Users perform more efficiently if they work
with the preferred GUI.
Keywords: multimedia cartography; web map; graphical user interface; eye-tracking; UI/UX
1. Introduction
The importance of web maps in the development of the so-called “Multimedia Cartography”
was noticed by researchers several years ago [1]. Also, the Commission on Maps and the Internet of
the International Cartographic Association presented the purpose of investigating the role of
efficient integration multimedia and maps on the Internet. Multimedia, such as graphics, photos, or
video, plays an essential role in the transmission of spatial information on the web [2,3]. In internet
cartography, one of the fundamental factors is interactivity. Interaction is a human–map
communication system [4]. This is the way in which the user manipulates the map (by changing the
scale or panning movement) [5,6]. The interaction on the map mainly takes place using the graphical
user interface (GUI). It consists of buttons that have specific functions and a symbolic icon [7,8]. The
most popular interactive buttons include geolocation, searching, changing layers, and routing [9].
They are available on almost all global map services, such as Google Maps, Bing Maps,
OpenStreetMap, Baidu Maps, or Yandex Maps. Kraak and Ormeling [10], in their manual, described
GUI as a ‘minimum requirement’ for designing an interactive map.
Interactivity is part of the users’ experience [11,12]. Most web cartographic products are
interactive. However, there is a difference between the user interface (UI) and the user experience
(UX). User interface refers to tools (usually GUI buttons) that allow communication with a digital
map and data manipulation [13]. User experience is a broader term. This refers to the experience and
user preferences of the two-way communication process request–result [14]. According to Norman
[15], this experience is responsible for the success of a given product. Thus, UI design is a process
aimed at implementing tools that allow interaction, e.g., using a Leaflet.js library or dedicated API
ISPRS Int. J. Geo-Inf. 2020, 9, 412 2 of 14
[16,17]. On the contrary, UX design involves developing the interaction result and the
communication process itself so that the experience is satisfying for the user [18].
From a pragmatic point of view, assessment of both UI and UX seems relevant [19]. Objective
evaluation of GUI tools, such as are currently used on online maps, is possible through efficiency
parameters. Efficiency includes, among others, the time for proper competition and a spatial task
using a given interactive tool [20–22]. Therefore, the GUI buttons themselves have an essential
impact on the efficiency of a web map. GUI research considers the placement, number, and graphics
of buttons in the first view as influential factors [4,23–25]. This is especially true for global online
map services like Google Maps or OpenStreetMap that have the same interactive tools with various
arrangements, numbers of buttons, and graphics [26]. As a result, the use of various map services is
associated with a slightly different experience of interactivity. As a consequence, it leads to the
separation of users who prefer a given web map [27].
Due to the diverse UX of interaction on different web mapping services, the need for measuring
these differences arises. Eye-tracking is one of the methods that enable understanding the UX when
working with multimedia and the interactive product [28,29]. It provides many indicators related to
the movement of the gaze in space and time, such as time to the first fixation, fixation count, fixation
duration, saccadic amplitude [30,31]. Fixations are places were gaze maintains relatively constant,
and saccades are a quick movement of the gaze [32]. This provides an objective way of measuring
the users' perceptual (visual) experience called the visual strategy [33]. It provides mental attention
data [34]. This type of research is crucial, since some interactions, such as navigation, sometimes do
not have a tool in the form of a button, and the user can still experience it.
The research topic presented in this way raises the question about differences in UX when
interacting with a web map. Questions that arise include: does a different number of corners with
buttons affect the user's view path? Are there measurable differences in UX between two GUIs with
the same buttons but arranged differently? In particular, we aimed to define the difference in the
users' visual experience using eye-movement metrics, such as the total number of fixations (FC),
number of fixations on the specific GUI button (FCB), percentage of participants’ attention needed
for button identification (ATT), saccadic amplitude (SA), and time to the first fixation (FFT) in three
interactive tasks. Participants performed a task in two different GUIs based on Google Maps or
OpenStreetMap. The tasks consisted of finding and using the appropriate button that caused the
desired interactions (geolocation, searching, finding the route). Eye movement measurements
defined users' visual experience. An additional goal was to determine the efficiency of individual
interfaces to compare UI/UX. This was measured with the use of time to the first click on the
appropriate button in each task (TC). This study shows that different arrangement of the same
interactive tools may have a different effect on the user experience and efficiency of web map.
2. Related Work
The number and placement of buttons play an important role in interface design. Wang [27]
drew attention to this, especially during the opening page. He noticed that if the start page appears
to be disordered and does not support the user’s habits, it negatively affects its efficiency. Interface
disorder is closely related to the location of the button because, as Wang noted, the search button
plays an essential role in the interface layout. On the other hand, Nivala et al. [35] noticed that
interactive web maps are meant for the general public and may not always meet all users’ needs.
Nivala, in conclusion, drew attention to the need to design the GUI in an orderly manner. Hegarty et
al. [36] also referred to the issue of the importance of the interface in experiencing interaction.
Newman et al. [37] came to similar conclusions about the simplicity of the user interface. Based on
the respondents’ responses, they redesigned the interface to suit preferences (e.g., they changed
buttons location, removed navigation arrows, and changed the way of choosing layers).
Some researchers [7] have drawn attention to the GUI differences arising not only from the
placement of individual buttons but also that each map provider has a different graphic style of
buttons. Even the same interactive functions, such as wayfinding, may work differently, e.g., by
adding waypoints manually or typing the next location. However, as noted by Horbiński et al. [9],
ISPRS Int. J. Geo-Inf. 2020, 9, 412 3 of 14
UX and preferences may be different from what map providers propose. Haklay [13] explained this
by the fact that user expectations may be due to the various devices on which they use web maps.
Assessment of the GUI and methods of assessing UX constitute a research gap in cartography.
Although there are studies on the use of eye-tracking in interface studies, only some refer to
cartography [38]. Çöltekin et al. [22] analysis is one of the few studies in the cartographic field. In
their research, they focused on two differently designed interfaces. They measured effectiveness,
efficiency, and overall satisfaction during three tasks. The experiment also used eye movement
recording. The results gave interesting conclusions about user experience. It turned out that despite
the more accurate execution of tasks with the Natlas interface, the study participants preferred the
Carto.net interface. These types of conclusions also appear not only concerning for the interface but
also for the methods of cartographic visualization [39]. Eye-tracking results discovered usability
problems associated with individual buttons on both GUIs. According to Çöltekin, data from
eye-tracking also provide information on users' expectations.
There are significant similarities in UX while using different interfaces of web map navigation
in zooming tasks [40]. The eye-tracking analysis helped to find differences and similarities in UX
while using four methods of zooming interaction: pan zoom, rectangle zoom, double click, and
wheel zoom. Manson’s research shows that most users performed better with rectangle zoom, even
though they sometimes felt frustration using it. Pan zoom and click zoom were rarely preferred, and
users were not satisfied using them.
According to research on the effectiveness of user interfaces, eye-tracking methodology
combined with questionnaires provides a crucial setting for examining user experience. The
presented studies motivated us to research the assessment of users’ visual experience while
performing different interactive tasks based on Google Maps or OpenStreetMap interface.
3. Methodology
The research methods used include web map and GUI design, efficiency and eyeball movement
data acquisition, and data processing. We also presented the participants' pool and experiment
procedures.
3.1. Web Maps
The study used a web map with an OpenStreetMap map designed with Leaflet.js library. We
selected OSM because it is a free to use under an open license world map with geodata stored in a
database that is accessible through JavaScript. The main factor in choosing the OpenStreetMap GUI
is the compatibility of this web map with the Leaflet.js environment. In addition, the popularity of
OSM is very large on a global scale, which was confirmed by search results of browsers such as
Google, Bing, or Yahoo. The map view setting was φ: 52.17° N (latitude) and λ: 3.43° W (longitude)
with zoom level 16. The area of the map was placed into the <body> section of HTML (Hypertext
Markup Language) structure as <div id=”map”></div>. Parameters of the map were set to 100%
height and width in cascading style sheets (CSS). We added the map using the L.tileLayer function,
which enables us to render the tile-based map in real-time [41]. Figure 1 presents the OpenStreetMap
opening view developed in Leaflet.js.
ISPRS Int. J. Geo-Inf. 2020, 9, 412 4 of 14
Figure 1. Opening view of OpenStreetMap prepared in Leaflet.js.
3.2. Graphical User Interface
In GUI design, we used the placement of buttons according to Google Maps and
OpenStreetMap, which are two of the most popular and recognizable web maps in the world. For
the study, we adopted a simplified version of the interface, consisting of the six most significant
buttons that enable interaction with the map: geolocation, search, route, change layers, and zoom
buttons (plus and minus) [42]. According to Horbiński and Cybulski [7], these buttons are on every
global web map. Figure 2 shows the location of the buttons on a computer monitor according to
selected web maps. Button positioning (exact location) was possible with the use of CSS code. We
used absolute positioning instead of relative without using JavaScript code. In our case, the map as
an area of the website had no relationship with other elements. Thanks to this, we identified the map
area <div id="map"> as both <body> and <html>. Based on this assumption, we treated all buttons
between the <div id="map> </div> tags as independent elements. That is why we decided to use
absolute positioning. The simplicity of CSS positioning dictates not using JavaScript coding in this
case.
Figure 2. Buttons placement on the computer monitor according to (1) OpenStreetMap and (2)
Google Maps. Letters indicate buttons: (A) geolocation, (B) search, (C) route, (D) change layers, (E)
zoom in, and (F) zoom out.
ISPRS Int. J. Geo-Inf. 2020, 9, 412 5 of 14
Because each GUI has its unique graphic style, we decided to unify button graphics and
dimensions. We proposed black and white 60 × 60 px buttons with a 2 px frame. Figure 3 shows all
buttons along with the labels that refer to Figure 2. First, we prepared the concept of the layout, and
then we inserted button graphics along with interactive functions.
Figure 3. All buttons that we used in the graphical user interface (GUI) design. Labels refer to the
description of Figure 2.
Buttons with specific graphics were placed in the GUI, as shown in Figure 4, following the
arrangements of layouts according to OpenStreetMap and Google Maps. We believe that naming
GUIs based on the names of web mapping services is necessary. The point is to draw attention to the
fact that it is a practical solution used by map providers.
Figure 4. Web map and the unified GUI design according to (1) OpenStreetMap and (2) Google
Maps.
For each button, we wrote a JavaScript code that allowed correct interaction with the map. The
leaflet-control-geocoder.js (https://github.com/perliedman/leaflet-control-geocoder) plugin is
responsible for geolocation, but it does not work correctly on desktop computers. For this reason, we
simplified the plugin in such a way that the press of the button caused the view change to a specific
location. The leaflet-search.js (https://github.com/stefanocudini/leaflet-search) plugin, which uses
the OpenStreetMap spatial database, is responsible for the search. A circle with a diameter of 5 px
marks the found point. We supplemented the plugin with the auto-complete function. We used the
leaflet-routing-machine.js plugin (https://github.com/perliedman/leaflet-routing-machine) for route
search. However, we had to simplify its operation by removing navigation options, using multiple
markers, route length, and time in JavaScript code. We added a code that opens only after clicking a
decision window, enabling the addition of more locations. Another coded interactive function was
change of layers. In this case, we did not use an additional plugin but only the Leafleat.js library. We
needed a second map background (Mapnik) for changing layers. Thanks to this, the layers were
changed using radio switching (baseLayers). For zooming, we used the leaflet-control-zoombar.js
plugin (https://github.com/elrobis/L.Control.ZoomBar) so that we could change the position of the
zoom out and zoom in buttons. The possibility of zooming and dragging was blocked due to the
study of using the geolocation button. We used Boolean values available in the L.map function of
Leaflet.js:
zoomControl: false,
ISPRS Int. J. Geo-Inf. 2020, 9, 412 6 of 14
scrollWheelZoom: false,
dragging: false,
doubleClickZoom: false.
3.3. Participants and Experimental Process
In this study, we adopted two research groups of 20 participants each. One group performed
survey tasks on a GUI based on OpenStreetMap and the other based on Google Maps. For both
study scenarios, participants were randomly selected from a group of students from Adam
Mickiewicz University in Poznan from a geodetic and cartographic course. Participants took part in
the survey voluntarily and had the opportunity to opt-out of continuing at any time. In the
participants’ group performing tasks based on the Google Maps GUI, there were 16 men and 4
women. Nine people were in the 18-21 age range, ten in the 22-25 age range, and one was in the age
group of 26 and over. We determined the experience in using Google Maps based on the frequency
of use. Five people said they use it every day, eleven people once a week, three people once a month,
and one person does not use it at all. In the same way, we defined the experience in using
OpenStreetMap. Two people use it once a week, eleven once a month, and seven people do not use it
at all. Four people use other web mapping services once a month and the other sixteen do not use
them at all. There were 12 men and 8 women in the OpenStreetMap-based GUI group. Fourteen
people were in the 18-21 age range, five people in the 22-25 age range, and one person in the age
group of 26 and over. One person used Google Maps every day, nine use it once a week, seven
people once a month, and three people said they did not use it at all. As for OSM, one person used it
every day, eight people used it once a month, and eleven did not use it at all. One person uses other
web mapping services once a month, and rest of the participants group do not use at all.
We experimented on a desktop computer with Windows 10 with the Firefox browser. We
displayed web maps on a 21.5-inch screen with a resolution of 1920 x 1080 px. To capture gaze, we
used Tobii eye-tracker X2-60 with a sampling frequency of 60 Hz. We used the Tobii Fixation Filter
with a velocity threshold of 35 pixels/windows and distance threshold 35 pixels [43]. We used these
parameters to classify raw eye movement data into fixations and saccades.
We asked participants in the questionnaire about the frequency of using Google Maps,
OpenStreetMap, and other web maps. There were four possible answers for each question: I use
daily (rank 4), once a week (rank 3), once a month or less (rank 2), I don't use it (rank 1). We used
ranks to categorize participants’ experience. Therefore, we were able to check if there were
correlations between the frequency of using the specific GUI and the time of task completion.
Each group had three tasks to perform using GUI buttons. We implemented all web maps,
instructions, tasks to solve, and questionnaires (with questions about age, gender, and frequency of
using Google Maps, OpenStreetMap, and other web maps) in Tobii Studio 3.4. Before the
participants started the task, it was necessary to calibrate the gaze with the eye-tracking device. The
first task was to ‘find your location using geolocation button’. The participant had to point to and
click on the geolocation button. This action took him to the current location. However, to complete
the task, the participant had to press the F10 button. The second task was to ‘find the Żywiec city
using the search button’. After clicking the appropriate search button, the user entered the particular
city name and then confirmed it. The F10 button finished the task. The third task was to ‘find a route
between Leżajsk and Jasło using the route button’. After clicking the route button, a window
appeared in which the participant entered the start and destination and then confirmed his choice.
As in previous tasks, the F10 button ended the task. Each participant performed the tasks in this
order with no time limit.
3.4. Efficiency and Eye Movement Metrics
Based on the web maps and questionnaires, we obtained time data on the solution of each task
and the eye movement recordings. Because all users performed the individual tasks correctly, we
used parameters related to the time of task execution to assess efficiency. Therefore, the first time
parameter was the time taken to solve the task, evaluated from displaying the map to the first click
ISPRS Int. J. Geo-Inf. 2020, 9, 412 7 of 14
on the geolocation button (TC). It was measured for each task separately. For the second task, it was
time to the first click on the search button, and for the third task, the time to the first click on the
route button. We used the time to the first click because participants also had to enter the name of
the place, and typing names is not directly related to GUI efficiency—it relates to participants’ ability
to write speed on a computer. Mouse events, such as time to the first click, are often a part of web
map assessment [44].
An essential part of UX is eye movement assessment. Therefore, the first UX assessment
parameter was the total number of fixations during the task (FC). This tells you how frequently the
participant stopped his gaze on the map screen or any GUI element. A visualization that is visually
more demanding often has more fixations in overall [45]. The reason for the higher number of
fixations may be users' lower spatial abilities [46]. However, in the study, we adopted homogeneous
groups, so this factor does not influence the number of fixations. The next parameter is the number
of fixations that appeared on the button used to complete the task (FCB). To obtain this parameter, it
was necessary to specify the so-called areas of interest (AOI) [47]. The ratio of FCB to FC allows for
determining what percentage of attention the participant needed to finding and identifying the
specific button, which is another parameter (ATT). Saccadic amplitude is another parameter that
defines the user's visual experience (SA). It is the angular distance of eye movement between
fixations [48]. Some studies claimed that the shorter the SA, the less effective the visual scanning
[49]. The last parameter defining visual UX is time to the first fixation (FFT) on the specific button.
4. Results
4.1. GUI Efficiency
GUI efficiency was determined based on TC for two interfaces independently. The time needed
to complete individual tasks was lower when using the OpenStreetMap-based GUI. For the first
task, TC median was 8.5 s for the OpenStreetMap-based GUI and 11.7 s for the Google Maps-based
GUI. However, the Mann–Whitney test did not show statistically significant differences (p>0.05). A
similar situation, but with a smaller difference, was observed with the second task, in which TC
median resulted in 1.8 s for Google Maps-based GUI and 1.6 s for OpenStreetMap-based GUI
(p>0.05). The third task presents similar efficiency measured with TC – median 3.0 s for Google
Maps-based GUI and 4.2 s for OpenStreetMap-based GUI (p>0.05).
As the TC results of individual participants show, the first task was the most time-consuming in
both interfaces (Figures 5 and 6). The Mann–Whitney test confirms the statistical significance of
results in both GUIs (TC in Task 1 > TC in Task 2 p<0.05; TC in Task 1 > TC in Task 3 p<0.05). As for
the differences in TC between tasks 2 and 3, only the OpenStreetMap-based GUI has a statistically
significant difference (TC in Task 2 < TC in Task 3 p<0.05).
ISPRS Int. J. Geo-Inf. 2020, 9, 412 8 of 14
Figure 5. The percentage of time needed for completing tasks (TC) by each participant on Google
Maps-based GUI.
Figure 6. The percentage of time needed for completing tasks (TC) by each participant on
OpenStreetMap-based GUI.
We used the Spearman correlation test to study the relationship between TC and participants’
preferences. We found several statistically significant correlations (p<0.05). As for the first task,
which was to find your location using the geolocation button, there was a substantial relationship
between the frequency of using Google Maps and TC on Google Maps-based GUI (r = -0.54). It
means that the more often participants use Google Maps, the faster they perform the first task while
using the Google Maps-based GUI. In the second task, the frequency of using OpenStreetMap
correlated with TC while using the OpenStreetMap-based GUI (r = 0.51). This means that the more
often participants used OpenStreetMap, the more time they needed to complete the task with the
OpenStreetMap-based GUI. In the third task, there was a similar correlation as in the first task. The
more often participants used Google Maps, the faster they performed tasks based on the Google
ISPRS Int. J. Geo-Inf. 2020, 9, 412 9 of 14
Maps-based GUI (r = −0.56). It means that the more often participants use Google Maps, the faster
they perform the third task using the Google Maps-based GUI. The correlation between the
frequency of using OpenStreetMap and the time to complete the third task based on the Google
Maps-based GUI is similar (r = -0.68).
4.2. Users’ Visual Experience
Despite the similarities in the effectiveness of both tested GUIs, the study participants showed
differences in experiencing interactions. These differences were determined based on eye movement
analysis. The first parameter is the number of fixations (FC). In the first task, the median was
different for the Google Maps-based GUI—36 fixations—and for the OpenStreetMap-based
GUI—38. Although the Mann–Whitney test did not show statistically significant differences (p>0.05),
the spatial distribution of fixations indicates different places of the participants' gaze concentration.
This mainly applies to the first task (Figure 7). Google Maps-based GUI users searched for the
geolocation button in three corners of the screen, while OpenStreetMap-based GUI users only
searched for it in two, as shown by heatmaps. In the second task, the median FC on the Google
Maps-based GUI was 34, while on the OpenStreetMap-based GUI, it was only 28. Although the
Mann–Whitney test did not show statistical significance, the recorded distribution of fixations shows
that, as in the first task, Google Maps-based GUI users were looking for a 'search' button in three
corners of the screen. In the third task, the median FC is very similar. The Google Maps-based GUI
median was 51 fixations, and the OpenStreetMaps-based GUI median had 54 fixations. Here, too,
Google Maps-based GUI users searched for a ‘route’ button in three corners. The main similarity in
UX when working with the interface is that the participants visually analyze all the corners where
the buttons are, regardless of the task performed. The Google Maps-based GUI requires participants
to analyze one corner more, compared to OpenStreetMaps-based GUI.
The number of fixations on the searched button (FCB) is another visual UX assessment
parameter along with the percentage of attention paid to it (ATT). In the first task, the average FCB
for both GUIs was 3. However, concerning FC, it gives 4.8% attention to the geolocation button in the
Google Maps-based GUI and 9.3% attention while using the OpenStreetMap-based GUI. In the
second task, the average ATT is at a similar level—35.5% (13 FCB) when using the Google
Maps-based GUI and 40.2% (11 FCB) while using the OpenStreetMaps-based GUI. The longer
interaction process associated with typing names caused an increased ATT level. In the third task,
FCB for two interfaces was 2, which translated into 4.5% ATT using the Google Maps-based GUI and
3.5% ATT using the OpenStreetMap-based GUI, respectively. This task also requires a more
sustained interaction. While the route search extends the name entry field, we did not obtain
fixations from the area in which the participant entered the name.
ISPRS Int. J. Geo-Inf. 2020, 9, 412 10 of 14
Figure 7. Six heatmaps presenting the spatial distribution of fixations in each task on both GUIs.
OSM (from 1 to 3) stands for the OpenStreetMap-based GUI, and GM (from 1 to 3) stands for the
Google Map-based GUI.
The median saccadic amplitude (SA) in the first task on the Google Maps-based GUI was 6.50°,
while on the OpenStreetMap-based GUI, it was 6.16°. In the second task, SA on the Google
Maps-based GUI was 5.73°, and that on the OpenStreetMap-based GUI median was 5.53°. In the
third task, SA on the Google Maps-based GUI was 4.59°, and on the OpenStreetMap median it was
4.90° on average. We did not found statistically significant differences using the Mann–Whitney test.
Spearman's correlation showed that the more FC, the shorter SA (r = -0.47; p<0.05) in the first task
while using the Google Maps-based GUI. We found statistically significant differences (p<0.05) with
the Mann–Whitney test in FFT during the first task. For the Google Maps-based GUI, the FFT
median was 7.8 s, and for OpenStreetMap-based GUI, FFT was 4.6 s. In the other two tasks, the
Mann–Whitney test showed no statistical significance; however, the FFT on Google Maps-based GUI
was slightly longer (for Task 2, the median was 0.5 s, and for Task 3 it was 1.2 s) comparing to
OpenStreetMap-based GUI (Task 2—median was 0.4 s and Task 3—0.8 s).
5. Discussion
Based on the test results presented, we confirm Wang’s [27] conclusions that different GUIs
may cause different user experience. This is especially evident in the visual experience called the
user's visual strategy described by eye movement metrics [30,33]. Depending on the GUI, the spatial
distribution of fixations confirms this conclusion. In each task, participants observed three corners in
the Google Maps-based GUI. However, in the OpenStreetMap-based GUI, only two corners were
observed. This agrees with the claim of some researchers about the crucial button placement in the
GUI layout [9,37]. More corners of the screen with buttons can translate into a longer cognitive
process. However, as the correlation results show, the frequency of using a given map service has a
high impact on the efficiency of the GUI. Wang [27] claimed that the preference of individual map
ISPRS Int. J. Geo-Inf. 2020, 9, 412 11 of 14
services leads to the separation of users. However, the frequency of use (preference) of a given web
map does not translate into generally better performance while using any GUI. Users perform more
efficiently if they work with their preferred GUI. Using a preferred GUI of a multimedia map
reinforces user habits [7]. However, participants who preferred OpenStreetMap were less efficient
while using the OpenStreetMap-based GUI. It can also be a tip for designers of web multimedia
maps to introduce GUI changes gradually, as Google does [50]. As noted by Horbiński and Cybulski
[7], the GUI buttons of web mapping services are characterized only by pictograms. However, as
noted by Muehlenhaus [51], button symbols are built on certain conventions that influence UX and
efficiency.
Using the GUI for specific tasks on the map generates specific visual experiences. As the results
in Figure 7 show, the participants investigate all the corners where the buttons occur. In this context,
Nivala et al. [35] suggested that the interface on the map should be simple. Users examine all corners
but not all buttons. According to this observation, we conclude that users analyze the GUI layout in
search of the target button. They do not analyze all buttons in turn. On this basis, we can also
recommend a guide for interactive map designers. The idea is to design groups of buttons with
similar functions and place them together. In our opinion, this is a factor that contributes to
increasing the efficiency of a web map, which is part of multimedia cartography [52]. This is also
consistent with the principle presented by Shneiderman and Plaisant [53]—striving for consistency.
6. Conclusions
Map interactivity is a crucial element of multimedia cartography on the internet. The
methodology of evaluating the visual user experience presented in the study has provided
interesting conclusions about the performance of the graphical user interface. The results show the
differences in experiencing interaction while using two different GUIs. The main difference in eye
movement between Google Maps-based GUI and OpenStreetMap-based GUI is the visual analysis
of a higher number of corners with buttons. There are also differences in time parameters such as the
time to first fixation, fixation count, and saccadic amplitude. However, not all of the presented
relationships showed statistical significance. This may be due to a small research sample. We think
that increasing the number of participants could have resulted in more definite differences. This is
true, especially since some test results showed p<0.10.
Like any study, we rely on experimental simplifications. The two GUIs compared prove the
importance of button placement in the UX. Of course, we see the possibility of developing our
research on GUIs based on other web mapping services, e.g., Baidu Maps, Yandex Maps, Bing Maps,
Map Quest, and HERE Maps. We can also include the GUI arrangement according to user
preferences in future analysis. There are several significant lessons to be learned from extending this
comparison. Firstly, if we examine the higher the number of GUIs based on different web maps, the
more meaningful the results will be. Secondly, this can lead to more recommendations of proper
GUI design that are desirable in GUI design. Third, it could help to exclude the least effective
solutions. Fourthly, it would help in better understanding the UX when using the GUI. Among other
things, one could answer the question of which solutions increase distraction and which are intuitive
and supportive for users.
Eye-tracking combined, with a questionnaire, proved to be an effective method to obtain data
on GUI efficiency and users' UX. In future studies, we see the possibility of adaptation of this
methodology to study the GUI of web maps on mobile devices such as smartphones. It is also
possible to examine UX while performing tasks with an animated map interface. This type of
interface has additional buttons (sliders) responsible for changing the time [54,55]. It is also possible
to use this methodology to study GUI on maps in augmented reality [56].
The use of eye-tracking brought surprising conclusions regarding UX. The participants of the
study observe all the corners with buttons in each of the tasks. More corners with buttons generally
result in a longer and more complex view path. This translates to eye-tracking metrics that define
differences in UX. A larger number of corners with buttons also slightly reduces the performance of
the web map. Studies have shown that the arrangement of GUI buttons according to the
ISPRS Int. J. Geo-Inf. 2020, 9, 412 12 of 14
OpenStreetMap layout was more efficient when performing tasks. We noticed that participants who
preferred Google Maps were better when working on an interface based on Google Maps. This
allows us to believe that users who work with the web map interface are largely guided by their
habits. However, the most problematic task was to find the geolocation button in both GUIs.
Observing all the corners (not all buttons) to find the appropriate button prompts us to
recommend arranging buttons with similar interactive functionality together (searching, routing).
Another recommendation is to arrange the buttons in the lowest number of screen corners. Since the
participant visually examines all of the screen corners, the more corners a display uses, the more
complex the scanning path.
Author Contributions: Conceptualization, Tymoteusz Horbiński; Formal analysis, Paweł Cybulski;
Methodology, Paweł Cybulski; Resources, Tymoteusz Horbiński; Writing–original draft, Tymoteusz Horbiński;
Writing–review and editing, Paweł Cybulski All authors have read and agreed to the published version of the
manuscript.
Funding: This research received no external funding.
Acknowledgments: The paper is the result of research on visualization methods carried out within statutory
research in the Department of Cartography and Geomatics, Faculty of Geographical and Geological Sciences,
Adam Mickiewicz University in Poznań, in Poland.
Conflicts of Interest: The authors declare no conflict of interest.
References
1. Cartwright, W.; Peterson, M.P.; Gartner, G. Multimedia Cartography, 2nd ed.; Berlin: Springer-Verlag, 2007;
ISBN 978-3540366508.
2. Medyńska-Gulij, B. Pragmatical Cartography in Google Maps API [in German]. Kart. Nach. 2012, 5, 250–
255, doi:10.1007/BF03544493.
3. Medyńska-Gulij, B.; Lorek, D.; Hannemann, N.; Cybulski, P.; Wielebski, Ł.; Horbiński, T.; Dickmann, F.
Cartographic reconstruction of the landscape development of the Upper Silesian industrial area (Poland)
and the Ruhr area (Germany) [in German]. KN – J. of Cartog. and Geo. Info. 2019, 63, 131–142,
doi:10.1007/s42489-019-00018-y.
4. Roth, R.E. Interactivity and Cartography: A Contemporary Perspective on User Interface and User
Experience Design from Geospatial Professionals. Cartographica. 2015, 50, 94. DOI
http://dx.doi.org/10.3138/cart.50.2.2427.
5. Roth, R.E. Interactive maps: What we know and what we need to know. J. of Spatial Inform. Science. 2013, 6,
59–115, doi:10.5311/JOSIS.2013.6.105.
6. Całka, B.; Cahan, B.B. Interactive map of refugee movement in Europe. Geod. & Cartog. 2016, 65, 139–148,
doi:10.1515/geocart-2016-0010.
7. Horbiński, T.; Cybulski, P. Similarities of global web mapping services functionality in the context of
responsive web design. Geod. & Cartog. 2018, 67, 159–177, doi:10.24425/118707.
8. Panchaud, N.H.; Hurni, L. Integrating Cartographic Knowledge Within a Geoportal: Interactions and
Feedback in the User Interface. Cart. Perspect. 2018. 89, 5-24, doi:10.14714/CP89.1402.
9. Horbiński, T.; Cybulski, P.; Medyńska-Gulij, B. Graphic Design and Button Placement for Mobile Map
Applications. Cartog. Jour. 2020, published online, doi:10.1080/00087041.2019.1631008.
10. Kraak, M-J.; Ormeling, F. Cartography: Visualization of Spatial Data. 3rd ed.; London: Routledge; ISBN
978-0273722793.
11. Roth, R.E. User Interface and User Experience (UI/UX) Design. In The Geographic Information Science &
Technology Body of Knowledge (2nd Quarter 2017 Edition); Wilson, J.P.; Eds.; doi:10.22224/gistbok/2017.2.5.
12. Medyńska-Gulij, B.; Myszczuk, M. The geovisualization window of the temporal and spatial variability
for Volunteered Geographic Information System. Geod. & Cartog. 2012, 61, 31–45,
doi:10.2478/v10277-012-0020-y.
13. Haklay, M.M. Interacting with geospatial technologies. Wiley-Blackwell, 2010; ISBN 978-0470998243.
14. Garrett, J.J. The elements of user experience: User-cantered design for the web and beyond, 2nd ed.;
Berkeley: Pearson Education, 2010; ISBN 978-0321683687.
ISPRS Int. J. Geo-Inf. 2020, 9, 412 13 of 14
15. Norman, D.A. The design of everyday things: Revised and expanded edition. The MIT Press, 2013; ISBN
978-0262525671.
16. Horbiński, T.; Lorek, D. The use of Leaflet and GeoJSON for creating the interactive web map of the
preindustrial state of the natural environment. J. of Spat. Science. 2020, published online,
doi:10.1080/14498596.2020.1713237.
17. Roth, R.E.; Donohue, R.G.; Sack, C.M.; Wallace, T.R.; Buckingham, T.M.A. A Process for Keeping Pace
with Evolving Web Mapping Technologies. Cart. Perspect. 2014, 78, 25–52, doi:10.14714/CP78.1273.
18. Sundar, S.S.; Bellur, S.; Oh, J.; Jia, H.; Kim, H.S. Theoretical importance of contingency in human-computer
interaction: Effects of message interactivity on user engagement. Comm. Research. 2016, 43, 595–625,
doi:10.1177/0093650214534962.
19. Medyńska-Gulij, B. Map compiling, map reading and cartographic design in “Pragmatic pyramid of
thematic mapping”. Quaest. Geograph. 2010, 29, 57–63, doi:10.2478/v10117-010-0006-5.
20. Gkonos, C.; Enescu, I.I.; Hurni, L. Spinning the wheel of design: Evaluating geoportal Graphical User
Interface adaptations in terms of human-cantered design. Int. J. of Cartog. 2019, 5, 23–43,
doi:10.1080/23729333.2018.1468726.
21. Cybulski, P.; Wielebski, Ł. Effectiveness of dynamic point symbols in quantitative mapping. Cartog. Jour.
2019, 56, 146–160, doi:10.1080/00087041.2018.1507183.
22. Çöltekin, A.; Heil, B.; Garlandini, S.; Fabrikant, S.I. Evaluating the effectiveness of interactive map
interface designs: A case study integrating usability metrics with eye-movement analysis. Cartog. and Geo.
Info. Science. 2009, 36, 5–17, doi:10.1559/152304009787340197.
23. Peterson, M.P. Maps and the Internet: What a Mess It Is and How To Fix It. Cart. Perspect. 2008, 59, 4–11,
doi:10.14714/CP59.244.
24. Cartwright, W., Crampton, J.W., Gartner, G., Miller, S., Mitchell, K., Siekierska, E., Wood, J. Geospatial
Information Visualization User Interface Issues. Cartog. and Geo. Info. Science. 2001, 28, 45–60,
doi:10.1559/152304001782173961.
25. Vincent, K., Roth, R.E., Moore, S.A., Huang, Q., Lally, N., Sack, C., Nost, E., Rosenfeld, H. Improving
spatial decision making using interactive maps: An empirical study on interface complexity and decision
complexity in the North American hazardous waste trade. Env. and Plan. B: Urb. Anal. and City Scien. 2019,
46, 1706–1723, doi:10.1177/2399808318764122.
26. Skopeliti, A.; Stamou, L. Online Map Services: Contemporary Cartography or a New Cartographic
Culture. ISPRS Int. J. of Geo-Info. 2019, 8, 215, doi:10.3390/ijgi8050215.
27. Wang, C. Usability evaluation of public web mapping sites. Int. Arch. of Photo., Remote Sens. and Spatial Info.
Sciences. 2014, 4, 285–289, doi:10.5194/isprsarchives-XL-4-285-2014.
28. Bojko, A. Eye Tracking the User Experience: A Practical Guide to Research. New Jork: Rosenfeld Media;
ISBN 978-1933820101.
29. Duchowski, A. Eye Tracking Methodology: Theory and Practice, 2nd ed. London: Springer-Verlag; ISBN
978-1846286087.
30. Krassanakis, V.; Cybulski, P. A review on eye movement analysis in map reading process: The status of
the last decade. Geod. & Cartog. 2019, 68, 191–209, doi:10.24425/gac.2019.126088.
31. Kiefer, P.; Giannopoulos, I.; Raubal, M.; Duchowski, A. Eye tracking for spatial research” Cognition,
computation, challenges. Spat. Cogn. and Comp.. 2017, 17 (1-2), 1-19, doi:10.1080/13875868.2016.1254634.
32. Ooms, K.; Krassanakis, V. Measuring the spatial noise of a low-cost eye tracker to enhance fixation
detection. J. of Imag. 2018, 4, 96, doi:10.3390/jimaging4080096.
33. Cybulski, P. Spatial distance and cartographic background complexity in graduated point symbol map
reading task. Cartog. and Geo. Info. Science. 2020, 47, 244–260, doi:10.1080/15230406.2019.1702102.
34. Webb, N.; Renshaw, T. Eyetracking in HCI. In Research Methods for Human Computer Interaction; Cairns, P.;
Cox, A.L.; Eds.; 2008; Cambrigde: Cambrigde University Press, 35-69; doi:10.1017/CBO9780511814570.004.
35. Nivala, A. M.; Brewster, S.; Sarjakoski, L. Usability Evaluation of Web Mapping Sites. Cartog. Jour. 2008, 45, 129–
138.
36. Hegarty, M.; Smallman, H.S.; Stull, A.T.; Canham, M.S. Naïve cartography: How intuitions about display
configuration can hurt performance. Cartographica. 2009, 44, 171–186, doi:10.3138/carto.44.3.171.
37. Newman, G.; Zimmerman, D.; Crall, A.; Laituri, M.; Graham, J.; Stapel, L. User-friendly web mapping:
Lessons from a citizen science website. Int. J. of Geo. Info. Science. 2010, 24, 1851–1869,
doi:10.1080/13658816.2010.490532.
ISPRS Int. J. Geo-Inf. 2020, 9, 412 14 of 14
38. Goldberg, J.H.; Kotval, X.P. Computer interface evaluation using eye movements: Methods and
constructs. Int. J. of Indust. Ergonom. 1999, 24, 631–645, doi:10.1016/S0169-8141(98)00068-7.
39. Wielebski, Ł.; Medyńska-Gulij, B. Graphically supported evaluation of mapping techniques used in
presenting spatial accessibility. Cartog. and Geo. Info. Science. 2019, 46, 311–333,
doi:10.1080/15230406.2018.1479311.
40. Manson, S.M.; Kne, L.; Dyke, K.R.; Shannon, J.; Eria, S. Using Eye-tracking and Mouse Metrics to Test
Usability of Web Mapping Navigation. Cartog. and Geo. Info. Science. 2012, 39, 48–60,
doi:10.1559/1523040639148.
41. Edler, D.; Vetter, M. The Simplicity of Modern Audiovisual Web Cartography: An Example with the
Open-Source JavaScript Library leaflet.js. KN – J. of Cartog. and Geo. Info. 2019, 69, 51–62,
doi:10.1007/s42489-019-00006-2.
42. Mitchell, T. Web Mapping Illustrated: Using Open Source GIS Toolkits. Sebastopol: O’Reilly Media. 2005;
ISBN 9780596554866.
43. Olsen, A. The Tobii I-VT fixation filter. Tobii Technology. 2012;
https://www.tobiipro.com/siteassets/tobii-pro/learn-and-support/analyze/how-do-we-classify-eye-movements/
tobii-pro-i-vt-fixation-filter.pdf.
44. Kraak, M-J.; Brown, A. Web Cartography: Developments and prospects. London: CRC Press. 2005; ISBN
978-0203305768.
45. Popelka, S.; Vondrakova, A.; Hujnakova, P. Eye-tracking Evaluation of Weather Web Maps. ISPRS Int. J. of
Geo-Info. 2019, 8, 256, doi:10.3390/ijgi8060256.
46. Dong, W.; Zheng, L.; Liu, B.; Meng, L. Using Eye Tracking to Explore Differences in Map-Based Spatial
Ability between Geographers and Non-Geographers. ISPRS Int. J. of Geo-Info. 2018, 7, 337,
doi:10.3390/ijgi7090337.
47. Hessels, R.S.; Kemner, C.; van den Boomen, C.; Hooge, I.T. The area-of-interest problem in eyetracking
research: A noise-robust solution for face and sparse stimuli. Behav. Resear. Meth. 2016, 48, 1694–1712,
doi:10.3758/s13428-015-0676-y.
48. Göbel, F.; Kiefer, P.; Giannopoulos, I.; Duchowski, A.T.; Raubal, M. Improving map reading with
gaze-adaptive legends. Proceed. of the 2018 ACM Symp. on Eye Track. Research & Applic. 2018, 29, 1–9,
doi:10.1145/3204493.3204544.
49. Phillips, M.H.; Edelman, J.A. The dependence of visual scanning performance on saccade, fixation, and
perceptual metrics. Vis. Resear. 2008, 48, 926–936, doi:10.1016/j.visres.2007.12.020.
50. Horbiński, T. Progressive Evolution of Designing Internet Maps on the example of Google Maps. Geod. &
Cartog. 2019, 68, 177–190, doi:10.24425/gac.2019.126095.
51. Muehlenhaus, I. Web Cartography: Map Design for Interactive and Mobile Devices. London: CRC Press.
2013; ISBN 978-1439876220.
52. Lorek, D. Multimedia integration of cartographic source materials for researching and presenting
phenomena from economic history. Geod. & Cartog. 2016, 65, 271–281, doi:10.1515/geocart-2016-0015.
53. Shneiderman, B., Plaisant, C. Designing the User Interface: Strategies for Effective Human-Computer
Interaction. 5th ed. Boston: Addison-Wesley. 2010; ISBN 978-0321537355.
54. Cybulski, P.; Medyńska-Gulij, B. Cartographic Redundancy in Reducing Change Blindness in Detecting
Extreme Values in Spatio-Temporal Maps. ISPRS Int. J. of Geo-Info. 2018, 7, 8, doi:10.3390/ijgi7010008.
55. Medyńska-Gulij, B.; Wielebski, Ł.; Halik, Ł.; Smaczyński, M. Complexity Level of People Gathering
Presentation on an Animated Map—Objective Effectiveness Versus Expert Opinion. ISPRS Int. J. of
Geo-Info. 2020, 9, 117, doi:10.3390/ijgi9020117.
56. Halik, Ł.; Medyńska-Gulij, B. The differentiation of point symbols using selected visual variables in the
mobile augmented reality system. Cartog. Jour. 2017, 54, 147–156, doi:10.1080/00087041.2016.1253144.
© 2020 by the authors. Licensee MDPI, Basel, Switzerland. This article is an open access
article distributed under the terms and conditions of the Creative Commons Attribution
(CC BY) license (http://creativecommons.org/licenses/by/4.0/).
