Web Map Effectiveness in the Responsive Context of the Graphical User Interface

Abstract

The main objective of this article was to determine the effectiveness of a web map GUI (Graphical User Interface) layout designed specifically for desktop monitors and smartphones. A suitable design of buttons for the graphical user interface is vital for the effectiveness of web maps. This article presents a study of three rules that prevail in GUI map design in terms of responsiveness, which was analyzed on two devices: a smartphone and a PC screen. The GUI effectiveness study, based on six variants of web maps, was conducted by means of eye-tracking on a group of 120 participants. An additional goal was to find an index (based on eye movements, mouse tracking, and time) that would be assessing the effectiveness of the GUI layout on both devices. The main motivation for conducting the research described in the article was the desire to find a synthetic measure based on more than one factor (time) in the context of determining the effectiveness of the GUI.

1. Introduction

Web maps, such as Google Maps and OpenStreetMap, are globally known products. Their phenomenon is related to the globalization of cartography [1], as the same maps have never been used by people all around the world on a daily basis and for such diverse reasons (i.e., planning trips, car navigation, storytelling). The wide range of web portals publishing web maps creates competition that allows one to constantly improve their functionality, adapting maps for technological changes and the needs of users. The rapid development of and easy access to the Internet and GIS (Geographic Information System) constitute a direct cause of such a dynamic improvement of maps [2]; hence, new versions or updates occur in web cartography almost daily [3,4]. Technologies of the creation and publication of web maps are understood as an API (Application Programming Interface) interface, frameworks, libraries, services, etc. Open Web Platform Technologies are a collection of (free) technologies that allows one to surf the Internet, employing HTML, CSS, SVG, and XML network standards and the JavaScript programming language. Moreover, web maps can be displayed at different levels of detail and are quite easily updated [5,6]. Web maps are commonly used and, although they can be quickly and easily updated, the problem of providing quick interaction in terms of receiving information from a global map service remains. Meeting users’ needs and preferences is related to the button layout (placement) in a GUI (Graphical User Interface) and constitutes one of the most significant factors that determine the simple usage of web maps [7].

The search for effective rules of web map design has lasted since the emergence of the Internet. This technological innovation was made publicly available in 1991, when the first version of the World Wide Web appeared, or in 1993, when the first search engine that handled GUI was invented [8]. Currently, the literature provides one with multiple terms defining or referring to the significance of employing the rules of multimedia cartographic design in the context of web maps, such as web-mapping platform [9], public web mapping sites [2,10], online map services [1], Internet map [6,11], and web map service [12].

The fundamental attributes of a web map are as follows:

Adaptability [13,14]—the map’s ability to adapt to the system or software (responsiveness), or providing users with tools that allow them to change properties [15], e.g., the language of the map,

Interactivity [16,17]—the term is defined as a dialogue between a man and a map by means of the computer device [18,19,20,21],

Mobility [22,23]—the opportunity the map user is provided with to handle the web map when moving and being supported by navigation [24],

Multiscale [25,26]—the term that describes the employment of cartographic interaction to change scale along with the level of detail regarding the information presented on the map [17],

Being up-to-date [27,28]—real-time updates, providing users with the opportunity to react to events and processes taking place in space as they are intensifying, e.g., traffic density.

Web map design is based on general cartographic rules, such as the choice of the mapping method and cartographic sign design [29], and more detailed rules, e.g., cartographic sign as a core of multimedia [30]. However, regarding online cartography, basic elements related to the human–computer interaction, such as clicks, need to be taken into consideration [31]. Opportunities to work out maps are created by different APIs that generate cartographic (geographic) content and basic interactions [32,33] in the form of base maps. In multimedia cartography, JavaScript libraries with the open code and the opportunity to create web maps on the customer’s side are used. OpenLayers, Leaflet, and D3 constitute the examples of libraries with open source code.

In multimedia cartography, it is necessary to use the rules of GUI, which are defined as a way of presenting information on the computer and interacting with the user. The program window with cartographic content as the largest element is a basis for graphical interface. Basic elements, referred to as widgets and designed in the concept stage of the creative process, are responsible for interactivity. In the process of web map design, preparing a comprehensive web map layout [34] that includes typical map elements and user’s interactions (Figure 1) is of great significance. For interactions in the map content window, one uses buttons that allow one to augment, reduce, move and in other ways alter the map view. On the interactive map, different icons, such as the one of a magnifying glass, hand, or an arrow, can appear, as users intuitively associate them with specific navigation functions. The object search function can be handled by the edit box, in which the searched name is typed. Moreover, cartographic signatures are interactive thanks to events (e.g., mouseover, click), which activate additional information included in tooltips and pop-ups.

GUI has become highly significant in software engineering and programming. In this paper, GUI denotes spots symbolized by buttons (with specific placement) for the user’s interaction with a program or a web map. In this study, we use only buttons with symbolic icons as the GUI. It is a highly relevant element of each web map. GUI’s functioning is based on associations and knowledge of users by the employment of simple symbols in button design. The same icons (symbols) have been used by the most popular web map, Google Maps, for many years. Google maps is widely used, which makes its symbols easily recognizable [7].

The problem of users’ preferences is also related to the type of equipment on which a web map is displayed. At present, web maps and their GUI follow two rules on how the content adjusts to the device. The first one assumes a different button layout on the PC monitor and on the smartphone, e.g., Google Maps, whereas the second one assumes only the transformation of the existing web maps, which were originally designed for non-mobile devices, into mobile maps, such as OpenStreetMap [12]. The adjustment of the map size and GUI button placement to a particular display screen is defined as a responsive web map. In general terms, responsiveness is associated with the ability of a website to adjust to different devices and types of definition. Responsiveness consists in designing websites/web maps for mobile devices (with smaller display screens, such as smartphones) prior to extending the design process to devices with larger display screens, e.g., PC monitors [35]. So far, maps have not been analyzed in this respect.

The effectiveness of GUI of web maps, just as of any other product in multimedia cartography, can be studied by means of multiple techniques and methods. Questionnaires [36] and the usability method [2,37] are the two most important methods of measuring effectiveness in cartography. Along with technological advancement, the eye-tracking technique, which combines the questionnaire method with the usability method, extending the research by parameters resulting from the direct observation of human eye movement, has been worked out [38]. To meet the objective of this article, the previously suggested GUI effectiveness index, based on time parameters obtained thanks to the eye-tracking technique, both for mobile devices and PC screen, was employed.

2. Related Research

Studies of effectiveness regarding both cartographic products and the interface are well described in the literature. Goldberg and Kotval [39] noted that in the evaluation of the interface, the visual strategy of the user should be taken into account. They noticed also that a more effective interface results in a smaller number of fixations, whereas the less effective interface causes more fixations. Furthermore, they proved that higher effectiveness correlates with a shorter scanpath time, as opposed to interface elements laid out at random. Some authors identify an effective search for elements of the map with accuracy, whose criterion is determined by correct location in space and task completion time [38,40]. Sutcliffe et al. [40] showed that the effectiveness of an interface is affected by, among others, the knowledge of the system on which a task is performed and experience. Less experienced users demonstrated significantly more conservative strategies of interacting. Çöltekin et al. [38] compared two GUIs of multimedia and interactive web maps in tasks with users. In their conclusions, they showed that they had additionally used tools for eye movement registration, which enriched their study in terms of both quality and quantity, thus corroborating the hypothesis that one interface is faster and more accurate.

In computer simulations that use the map as the basis for spatial information, Saw and Butler [41] also employed the approach that consists in the comparison of interfaces. In their opinion, GUIs with buttons located in the bottom part and with map navigation functions were more effective during the work with users than the interface located on the left-hand side. Research on users’ interactions with the interface was also conducted by Gołębiowska et al. [42]. They proved that during the exploration of a coordinated and multiple views (CMV) interface, novice users paid attention to elements explaining how specific tools worked. Moreover, it turned out that users would much more often use interactions by means of a mouse rather than buttons, such as the zoom in/out button. Furthermore, not all available interactions were used. The eye-tracking analysis helped researchers establish which interface elements were observed the most and how users’ attention was changing during exploration.

3. Motivation, Aim, and Research Questions

To sum up the research described above, we would like to highlight that GUI effectiveness research, apart from correctness and task completion time, should also take the user’s eye movement analysis into account. Hence, the willingness to find synthetic measurement based on more than one factor (time) in the context of determining GUI effectiveness constituted the main motivation for carrying out the research described in this article.

We ask the following questions to the discussed topic:

• Do the rules of web map design related to GUI have the same effectiveness for cartographic products that are displayed on devices of varying size?
• Does the way that interactive map-based tasks are performed depend on the interaction button layout?
• Should the rules of web map design for maps with the same cartographic content be the same for smartphones and PC monitors?

The main objective of the article was to determine the effectiveness of a web map GUI layout designed specifically for a desktop monitor and smartphone. An additional goal was to confront the existing principles of web map design with the rules of responsiveness. A second additional goal was to find an index (based on eye movements, mouse tracking, and time) that would be assessing the effectiveness of the GUI layout on both devices.

4. Methodology

An effectively designed GUI of web maps is characterized by the quick and correct location of the button with a map function searched for by the user. The map function, which is ascribed to the appropriate button and represented by the appropriate icon, gives the user the opportunity to interact with the map and obtain the information that it includes. In this article, effectiveness shall be understood as dependence between the time to first fixation, time of identification, and time of completion of the task (the so-called time to first mouse click). The fixation time is associated with the time to first fixation. A fixation is understood as focusing/fixing one’s gaze on a given spot (i.e., the GUI button searched) for a longer time, which suggests that the person is paying attention to this spot. The identification time is related to identification, i.e., proper understanding of the icon that represents the searched map function located in the GUI button. Time to first mouse click is the time of proper interpretation of the icon and activation of the function by pushing the right button.

To achieve our objective, the author adopted four main stages of research:

-

To select three variants of GUI (Section 4.1, Figure 2),

-

To work out three variants of GUI (Section 4.2, Figure 2),

-

To carry out the eye-tracking research with participants (Section 4.3),

-

To formulate GUI effectiveness index (Section 4.4),

-

To analyze and demonstrate the results (Section 5, Tables 1 and 2).

4.1. Choice of Three Gui Variants

One of the research simplifications in this article was to adopt the unified set of icons representing map functions, on the basis of which researchers decided to consider icons not because of their use by popular web maps but because they were understood by users best. Thus, the set of icons from the research by Horbiński et al. [7] was selected. In the research, a group of 100 respondents was questioned. The respondents were supposed to assign icons to specific web map functions. Icons that were matched correctly constitute the set used in this article.

Currently, there are two rules in terms of designing a web map GUI:

• To design two different web map GUIs for the PC monitor and the smartphone, e.g., Google Maps (Figure 2 Rule 3),
• To adjust the GUI of the web map designed for a PC monitor to a smartphone screen, e.g., OpenStreetMap (Figure 2 Rule 2).

The author of this article decided to verify the responsiveness rule by Marcotte [35] in the context of the GUI of the web map user. The rule consists of designing for mobile devices (smartphones) first and creating products for PC monitors afterward. Researchers decided to use the button layout variant worked out on the basis of the study by Horbiński et al. [7]. The GUI of the user is based on the choice of respondents, who decided on the map function layout on the smartphone screen. They could choose from 6 map functions, i.e., Geolocation, Change layer, Search, Route, Default range map, and Measure. Three map functions were selected by each respondent (Geolocation, Search, and Route). Referring directly to other currently existing web maps, researchers decided to include, apart from the three most frequently used functions, also the Layer button. It was necessary and dictated by the fact that exactly these four functions (Geolocation, Layer, Route, and Search) occurred in most mobile versions of web maps [11,12]. With the hypothetical variant of the web map GUI, designed exclusively for smartphones, the author of the article adjusted the variant to the PC monitor (decreasing the buttons) (Figure 2, Rule 1). Hence, he employed the responsiveness rule by Marcotte [35].

Figure 2. Variants of GUI (Graphical User Interface) design according to three rules (A—Geolocation, B—Search, C—Route, D—Change Layer).

Figure 2. Variants of GUI (Graphical User Interface) design according to three rules (A—Geolocation, B—Search, C—Route, D—Change Layer).

4.2. Creation of Three Gui Variants

All three variants were programmed for the needs of the research with the use of the Leaflet library (and coexisting plugins) (Figure 2) [43,44,45]. The responsiveness of variants was secured by media queries, fluid grid, and breakpoints that conditioned displaying elements created thanks to CSS coding. OpenStreetMap was used as a base map, as this global map with geodata stored in a database available through JavaScript could be used for free with the open license. The compatibility of the web map with the Leaflet.js environment constituted the main factor that determined the choice of GUI of OpenStreetMap. In addition, OpenStreetMap (OSM) was highly popular on a global scale, which was confirmed by search results by browsers such as Google, Bing, or Yahoo [46]. The view of the map was centered to be 52.17° N (latitude) and 3.43° W (longitude) with the zoom level of 16. The author emphasizes that GUI variants are being considered only at the first level of interactions, i.e., the activation of map functions occurs during the first interaction with the button (after pressing it). The base map is designed similarly to the topographic map. It contains points, lines, and areal objects. This includes anthropogenic and natural features. We did not change the map content. The OSM functionality contains interactions that enable e.g., legend preview or change layers; however, for the experimental simplification, we used only tools presented in Section 4.1.

4.3. Eye-Tracking Study with Respondents

A homogenous group of respondents with similar experience in working with web maps and from a similar age group participated in the research. Researchers assumed that each variant of tasks connected with the web map would be solved by 20 people. One hundred and twenty students aged 18–25 (66% men, 34% women) participated in the research. All the respondents declared that they used web maps (on smartphones and PC monitors). It is the most adequate research sample for such studies, as it consists of people that use mobile products in their daily life.

The research was conducted in a room with continuous lighting, with the use of the following equipment and software: Smartphone—Samsung Galaxy S7 (screen diagonal 5.1”, resolution 1920 × 1080), Monitor—LG Falatron E2260T-PN (screen diagonal 21.5”, resolution 1920 × 1080), Eye-tracker—Tobii X2-60, Software—Tobii Studio 3.4, Web browser—Mozilla Firefox, MDS—Mobile Device Stand. The same device for tracking the eye movement has been implemented on a desktop computer monitor and on a smartphone. For a smartphone, we used the Mobile Device Stand. In this solution, the mobile device is attached to a holder in a known location. Above the smartphone, an adjustable camera is placed, which enables recording the participants’ interaction with the device. Eye tracking equipment is located below the smartphone so as to not interfere with the smooth use of the mobile device (Figure 3). In both solutions (PC and smartphone), the eye tracker is indirectly connected to the computer via a computing module. The overall accuracy corresponded to 24 pixels on the monitor and 72 pixels on the smartphone. This was based on the average distance between participants and the device. On a desktop monitor, it was 68.2 cm, and on a smartphone, it was 65.4 cm. For the detection of fixations and saccades, we used the velocity-based algorithm (I-VT). The velocity threshold was set to 2.1 px/ms.

Each respondent was instructed on how to use the equipment and the objective of the research, after which the equipment was calibrated. We performed a 5-point calibration, and during the test, we did not observe any anomalies. During the research, respondents had to complete three tasks that were supposed to verify the effectiveness of the web map button layout in analyzed variants, i.e., Geolocation, Search, and Route:

-

Q1: Identify your location through geolocation (press Geolocation),

-

Q2: Search for the town of Żywiec through the Search button (press Search),

-

Q3: Determine the route connecting two towns: Jasło and Leżajsk (press Route).

Each group (20 people) completed three tasks for one variant of button layout (Figure 2) on one device (monitor or smartphone). Specific respondents were selected for groups on the basis of their characteristics to make groups as homogenous as possible. No time constraints were established in the research for completing the tasks. In tasks no. 2 and 3, town names with Polish diacritics were used to decrease the number of results shown. Although performing the tasks did not take too long, one needs to note that the entire research included introducing the respondent to the topic of the research, discussing the equipment, and explaining how specific elements worked (e.g., the issue of the mouse cursor, which was always invisible at the moment of beginning the task and the respondent had to move it from the left edge of the screen, was explained), the characteristics of the user, calibration and, finally, performing tasks by users.

4.4. GUI Effectiveness Index

As a part of the research, the GUI effectiveness index was suggested. The index uses the correlation between the time of fixing the gaze on the button (time to first fixation—T_FF), time of identifying the button (i.e., the difference between task completion time and identification time—IT), and task completion time (time to first mouse click—T_FMC). The importance of T_FF allows us to determine after what time the user consciously noticed the button. On the other hand, T_FMC tells us how quickly the user clicked on the button that he had noticed. IT, which denotes how much time the user needed for identifying the button from the moment he noticed the button until he interacted with it, also occurs in the index; however, it occurs indirectly. The index defines three activities (times) of the user on the map. Compared to previously used methods that considered only one measurement, the index turned out to be more comprehensive here.

The rate is considered in two variants; i.e., when (T_FF and IT ≠ 0):

T_FF <= IT

(1)

then:

EI_GUI = [((T_FF/IT)/T_FMC) * (T_FF + IT + T_FMC)]/value of T_FF

(2)

and when:

T_FF > IT

(3)

then:

EI_GUI = [((IT/T_FF)/T_FMC) * (T_FF + IT + T_FMC)]/value of IT.

(4)

The analysis of the index in two variants is supposed to indicate the most effective GUI for web maps, both in terms of layout and the graphics used. Adopting only the first variant in the situation of very quick identification time and relatively longer first fixation time, the value of the index would not indicate high effectiveness. Multiplication by the sum of times eliminates the unit of measure (1/s) that we would receive only when dividing times by themselves. Final division by the value (without the unit of measure) of the first fixation time or identification time is the most significant element of the pattern. It has a highly relevant impact on the value of the index. Assuming that there are small differences between time to first fixation and identification time, the index would have the same value, regardless of the time value. Thus, division by the value of T_FF or IT favors a lower time value, which makes the rate value objective. Objectivity results mainly from the fact that when the value of both T_FF and IT is low, the index is high and may achieve the maximum value of 2. When the value for both times is high, the index is low. The index does not favor large disproportions between the times, i.e., when the value of T_FF is low and the one of IT is high or the other way around, the value of the index is low.

Correctness of the GUI index was tested by means of the program written in JavaScript (Figure 4), which was started along with the HTML code structure in each search engine. The getRandomInt function determined a random number from the range provided as function arguments (min, max) for the testing, thanks to which the function adopted random data, regardless of the testing person. The code presented in Figure 4 adopted the values in the range (0.3; 10), but any other range could be determined. The index_EGUI function calculated the GUI effectiveness index, considering two cases (T_FF <= IT || IT < T_FF), and all the values collected were included in the table in the key-value section. The size of the table (the number of verses in the table) was determined by the val attribute of the index_EGUI function.

5. Results

The first step of the result analysis was to calculate the average T_FF, IT, and T_FMC. The average time value is presented in

Table 1. The average time to first fixation (T_FF), identification time (IT), and time to first mouse click (T_FMC) for individual tasks and button layout variants in GUI as suggested on the basis of three rules (Rule 1—Design from smaller to larger device; Rule 2—Design from larger to smaller device; Rule 3—Two different designs).

		TFF [s]			IT[s]			TFMC [s]
	Rule	Q1 (σ)	Q2 (σ)	Q3 (σ)	Q1	Q2	Q3	Q1 (σ)	Q2 (σ)	Q3 (σ)
Smartphone	1	2.04 (1.65)	0.66 (0.7)	1.21 (1.07)	4.78	2.61	5.53	6.82 (3.76)	3.27 (1.5)	6.74 (6.86)
	2	1.73 (1.27)	0.86 (0.85)	0.93 (0.92)	4.17	3.06	4.66	5.9 (1.27)	3.92 (1.98)	5.59 (3.54)
	3	1.25 (1.54)	0,83 (0.73)	1.68 (1.51)	5.57	4.77	4.25	6.82 (2.67)	5.6 (6.05)	5.93 (1.57)
Desktop Monitor	1	5.96 (5.16)	0,34 (0.56)	3.15 (3.02)	5.72	2.16	1.33	11.68 (9.59)	2.5 (2.85)	4.48 (3.6)
	2	4.27 (2.96)	1.42 (3.36)	1.75 (2.06)	4.82	2.04	2.69	9.09 (6.38)	3.46 (4.44)	4.44 (3.47)
	3	8.23 (5.42)	1.29 (2.62)	5.26 (5.84)	5.12	3.17	2.11	13.35 (11.09)	4.46 (5.57)	7.37 (6.87)

. Time results should be analyzed for specific tasks and devices. The pink color was used for marking the box with the shortest time and the blue color was used for the box with the longest time needed for individual tasks.

The lowest average T_FF both on the smartphone (0.66 s) and on the PC screen (0.34 s) was achieved for the task no. 2 (Search)—the button layout variant according to the first rule. The Search button in the layout variant following the first rule was identified on the smartphone the most quickly (2.61 s), whereas the Route button (Rule 1) was identified on the PC most quickly (1.33 s). Similar to T_FF, the average T_FMC was also the shortest for task no. 2 (rule 1), both on the smartphone (3.27 s) and on the PC (2.5 s) (Table 1).

One task, correctly and quickly completed by respondents on two devices, related to the Search button, does not determine the effectiveness of the GUI variant. Objective results for GUI can be achieved through the employment of the GUI effectiveness index suggested in the article.

According to the pattern suggested (Section 4.4), GUI effectiveness indices were calculated for individual tasks. All the results were juxtaposed in the table (

Table 2. GUI effectiveness index (EI_GUI) for individual tasks and variants of the GUI button layout.

		EIGUI
	Rule	Q1	Q2	Q3	Sum
Smartphone	1	0.418	0.766	0.362	1.546
	2	0.480	0.654	0.429	1.562
	3	0.359	0.419	0.471	1.249
Desktop Monitor	1	0.336	0.926	0.635	1.896
	2	0.415	0.980	0.743	2.139
	3	0.243	0.631	0.380	1.254

). As in Table 1, the blue color was used to mark the lowest index and the pink color was used to mark the highest index. To evaluate GUI, the indices for individual tasks needed to be summed up (the Sum column). In the research, respondents completed three tasks, so the total value of the index can reach a maximum of 6 (for the individual device). In terms of responsiveness (for the smartphone or PC monitor), the variant following rule 2 (3.701) was the most effective GUI variant, which does not directly verify the responsiveness rule on websites (Rule 1—3.439) by Marcotte [35], according to which web maps should be designed for small mobile devices (smartphones) first and then adapted for large screen devices (PC monitor).

In Figure 5, 18 heatmaps were demonstrated for the spatial layout of fixations during performing tasks by individual users, both on the PC monitor and on the smartphone (compare to Figure 2). Due to the equipment limitation that made it impossible to place the smartphone in the same position on MDS (Mobile Device Stand) each time, it was impossible to generate summary heatmaps for all users for specific tasks (individual scenes for each research participant).

The spatial fixation layout of users performing tasks 1, 2, and 3 on the basis of Rule 3 on a PC monitor shows different gaze fixation spots. Such layout of fixation concentration directly decreases the index (Table 2) as well as affects the average task completion time (Table 1). One can also observe multiple indirect fixation clusters in the straight line between buttons (the diagonal of the screen). The GUI, based on Rule 3 (PC monitor), requires users to analyze one corner with buttons more compared to other rules. The results can be seen on the smartphone; however, the differences between the value of indices are smaller than those for the PC monitor.

Considering Rules 1 and 2, we do not note significant differences between the values of the index on a smartphone. The size of the screen used by the respondent on a smartphone may be of vital importance here, whereas for a PC computer monitor, the differences are significantly larger. The result could have been affected by placing buttons in the upper (Rule 2) and lower (Rule 1) part of the screen. Users’ habit of using programs with an upper interface could have had an impact on the results in terms of GUI effectiveness for web map users.

6. Discussion

User–map interactions are crucial elements of both web and multimedia cartography. Different ways of designing web map GUI and their confrontation provided the researchers with interesting conclusions. In the evaluation of web map GUI, the effectiveness index suggested is key. In drawing conclusions and presenting data on the effectiveness of the map solutions studied, multiple authors used tables and specially designed diagrams [47,48]. The research considered the quickness and correctness of the answers delivered. These two parameters were associated with the effectiveness of the analyzed cartographic products. Subjective opinions of the respondents were also used [36]. In this analysis, to make both the results and the conclusions more accurate, the author suggested a GUI effectiveness index.

In this article, a group of 20 people completing tasks independently for each of the cases discussed was examined. The choice of such a research sample (the number and characteristics of respondents) was based on other multimedia cartography studies. According to Ware [49], the majority of studies are carried out on 12–20 respondents, whereas studies in which the learning effect may occur require more participants. Usually, the so-called “public users” participate in such studies [47]. These are often students, as they are easily available to researchers and relatively homogenous, particularly when specializing in the same field. A large group of students makes it possible to divide them into several teams, allowing respondents from different teams to evaluate different versions of mapping techniques that depict the same spatial data [50,51]. Multiple examples of studies conducted by other authors confirm such choice of research sample [47,52,53]. In effectiveness research, many authors used subjective opinions by users and, by means of timed task completion [47], checked the effectiveness of the multimedia cartographic presentation that employed VR (Virtual Reality), focusing mainly on talks with students and drawing conclusions on subjective opinions. Wielebski and Medyńska-Gulij [36], researching different variants of mapping methods, centered on determining effectiveness as quick and correct task completion. Such studies are most often carried out among university students and much less often among passers-by [54] or respondents that perform various tasks in space with mobile devices [55,56].

In their research, Nivala et al. [48] touched upon the role of the graphics of icons on web maps. They highlighted that the web map should be designed is such a way so that it considers the feelings of respondents, whereas interface and icons should be as simple as possible and easily understandable for the user at the same time. Not only did the authors use the most easily understandable (identifiable) icons in their research, they also tested the interface suggested by users’ opinions. The interface was designed for mobile devices (smartphones) and then adapted for PC screens so that it still followed the responsiveness rule [35].

The objective of the article was to determine the effectiveness of web maps designed for mobile devices, which were confronted with the existing rules of web map design. The translation of the responsiveness rule by Marcotte [35] into web mapping, particularly into web maps, failed to prove the validity of this rule (Table 2). GUI is the most significant responsive element of each web map. People’s habit of working on programs with the interface located in the upper part of the window translates into the effectiveness of the web map. It is worth mentioning that the employment of Rule 2 of GUI responsive design turned out to be the most effective. Analyzing the results of the index for individual tasks completed on a smartphone showed that each interface has one task that was completed more effectively. That may serve as the evidence that technological advancement should be heading toward the personalization of all the activities on smartphones. In terms of the results obtained and the differences between specific systems, solutions that personalize applications (through the choice of functionality) at the first activation should be favored, supported, and introduced more often. Naturally, it is just the first step in the context of individual GUI of web maps for each user.

On web maps, the possibility of changing a cartographic background is an important element of the interface [12,57]. The real content of the cartographic background is a vital part of map design. Research reports that the visual complexity of the map content is a factor that impacts effectiveness [58,59]. However, psychological studies confirm that in different conditions related to strong attention (when performing a specific map-based task), people tend to omit background information, focusing on task accomplishment [60]. Therefore, it is reasonable to infer that tasks performed by the participants in this study fit in the strong attention map-based tasks. This means that participants’ performance may be similar with high probability when performing any other global web mapping service.

The GUI effectiveness index proposed by the authors requires in-depth studies in the future. Confirmation by further empirical research will ensure verification of the proposed GUI effectiveness index. Future research requires index verification, including other devices displaying a web map, different GUI layouts, various button graphics, or diverse functionality. The authors also believe that the developed index does not have to be solely and exclusively used to determine the effectiveness of the GUI of web maps. Further research in other areas may confirm its usefulness.

7. Conclusions

Three presented ways of designing button layout for map functions on smartphones indicate a responsive approach and, in this context, thanks to the index, one can clearly indicate features of each approach. The inclusion of responsiveness in the user–map interaction design seems legitimate, as the same products of multimedia cartography are used on display screens of different size, and the simultaneous designing for at least two devices becomes significant to the designer.

Answering the question asked in the article, it can be concluded that the value of the GUI effectiveness index differs not only for the rules of GUI design analyzed but also between the devices on which the web map is displayed. The fact that the layout of user–computer interaction buttons is of great importance to the times analyzed (T_FF, IT, and T_FMC) is one of the conclusions drawn. The way the task was performed in the context of web map GUI depends predominantly on three factors, which are graphics (symbols) representing the functions of a given button, the location of the button on screen, and the device itself. On the basis of the research, also, the fourth factor in the analysis of web map GUI, i.e., the number of corners with buttons, needs to be taken into account. As the results show (Table 1 and Figure 5), the number of corners with buttons not only affects the spatial fixation layout but also the GUI effectiveness index directly.

In answer to the first question related to the rules of web map design in terms of GUI, it is necessary to say that the GUI effectiveness index fails to provide the same value for the same cartographic products displayed on different devices (smartphone screen and PC monitor), which may be related to the difference in the size of their screens. It can also validate using less information for web maps (fewer buttons and reduced complexity of a base map) [12]. In answer to the second question, it needs to be said that the button layout plays a decisive role in the way tasks are performed (the more corners with buttons, the lower the index). Answering the third question, the highest value of the GUI effectiveness index for Rule 2 suggests that the web map should have the same button layout both on a PC monitor and smartphone screen. It may result from the previously mentioned habits of users, who are accustomed to buttons located in the upper part of the screen, and it also may corroborate the legitimacy of using the existing habits of users in the process of web map design [32].

The results related directly to individual buttons, particularly the Search button, make the statement by Horbiński and Cybulski [12] subject to further research. The statement referred to a habit of using buttons located in upper part of the screen. The authors of the article concluded that facilitation in the form of buttons located closer to the thumb on the smartphone screen might fail to bring the expected results, i.e., higher effectiveness of such map. The average times (Table 1) as well as EI_GUI (Table 2) for task 2 indicate that the location of the Search button in the lower part of the smartphone screen has a positive impact on the effectiveness of such solution. The fact of introducing the toolbar located at the bottom of the screen to Mozilla Firefox (for smartphones) in the latest updates (Android) may serve as the evidence that such solution works.

The interactions with the map presented in this study could be related with the map-using tasks presented by Keates [61]. Firstly, fundamental map activity is searching for places. However, users could perform random visual search, but more often, people are searching for a target place. On a paper map, one could search the name in the index. On a web map, the index of places is replaced by an interactive search button. Another fundamental map-using task is searching for route. This is the most common activity in navigation systems. In a web map, users are able to use the route search button, and the map is used to anticipate future action and verify current position. Maps can be used in more sophisticated ways. Keates use an example of a population map and chart comparison task. This would require extensive visual search in different patterns. A web map could support this type of map use with more complex interactive tools such as spatial queries [62].

The authors hope that the GUI effectiveness index will be useful in other studies of multimedia cartography. In the evaluation of effectiveness of the interface element or the map element, one can employ the index suggested, as it is numeral and objective. However, the interactive user–map action in which the analyzed interface element needs to be used by the respondent in the research is crucial. Indicating the effectiveness of cartographic symbols in web maps can be another example of how one can use the index, as cartographic content consists of various symbols depicting the same types of geographical objects.