*Article* **Map Design and Usability of a Simplified Topographic 2D Map on the Smartphone in Landscape and Portrait Orientations**

**Beata Medy ´nska-Gulij 1,\*, Jacek Gulij <sup>2</sup> , Paweł Cybulski <sup>1</sup> , Krzysztof Zagata <sup>1</sup> , Jakub Zawadzki <sup>1</sup> and Tymoteusz Horbi ´nski <sup>1</sup>**


**Abstract:** Map design and usability issues are crucial when considering different device orientations. It is visible, especially in exploring the topographical space in landscape or portrait orientation on the mobile phone. In this study, we aim to reveal the main differences and similarities among participants' performance in a map-based task. The study presents an original research scheme, including establishing conceptual assumptions, developing map applications with gaming elements, user testing, and visualizing results. It appears that the different phone orientation triggers different visual strategy. This transfers into decision-making about the path selection. It turned out that in landscape orientation, participants preferred paths oriented east–west. On the other hand, portrait orientation supported north–south path selection. However, considering the given task accomplishment, both mobile phones' orientations are adequate for the exploration of topographical space.

**Keywords:** map design; geomedia usability; smartphone; landscape orientation; portrait orientation; mapping technique; eye-tracking; cartographic visualization; Unity; gameplays

### **1. Introduction**

The most popular maps on websites tend to have highly simplified graphics and symbols that create cartographic content that does not require map legends as they are interpreted intuitively [1]. Using basic map design principles enables easy map use, particularly on small display screens. These principles are: limit color choice and have perceptually clear differences [2], use conventional colors [3], ensure high contrast of point symbols [4], and low density of graphic elements [5]. Traditional topographic map design focuses on the graphical representation that can be read as a whole or separately and presented in a large format [6], whereas map design for smartphones' size of the view is limited, and the two orientations, landscape and portrait, become significant. The user's classic way of moving around the large printed cartographic image is to move one's finger on it. However, the user's way of moving around the map on a small smartphone display will necessarily be quite different. Indeed, traditional map design principles may still be employed, e.g., the focus of attention [7,8]. For centuries, map design has adapted to the methods of publication and the medium [9]; therefore, how maps are implemented on mobile devices and how users interact with them requires investigation.

Video games are one of the more interesting and littler explored mediums for presenting and researching cartographic products for smartphones [10]. The main concept that appears in such research is 'Gamification', which is the use of technology to design characteristic elements for video games in contexts not related to the game [11]. Gamification is a popular technique in many mobile applications that are content driven that require rich interaction between the user and the application [12].

To develop apps with interactive map viewing for mobile devices, one option is to use game engines such as Unity, Unreal, and Godot. These allow one to implement moving in

**Citation:** Medy ´nska-Gulij, B.; Gulij, J.; Cybulski, P.; Zagata, K.; Zawadzki, J.; Horbi ´nski, T. Map Design and Usability of a Simplified Topographic 2D Map on the Smartphone in Landscape and Portrait Orientations. *ISPRS Int. J. Geo-Inf.* **2022**, *11*, 577. https://doi.org/10.3390/ ijgi11110577

Academic Editors: Wolfgang Kainz and Florian Hruby

Received: 13 October 2022 Accepted: 18 November 2022 Published: 20 November 2022

**Publisher's Note:** MDPI stays neutral with regard to jurisdictional claims in published maps and institutional affiliations.

**Copyright:** © 2022 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 (https:// creativecommons.org/licenses/by/ 4.0/).

311

2D space and displaying appropriate maps in this space [13,14]. Unity, combined with the C# programming language, is an appropriate environment for creating cartographic apps. During the process of mobile map app design, it is important to minimize the interface but exploit the intuitiveness of touching the screen [1,15].

In this study, we analyze responsive map design in two contexts [16]. The first is related to the adaptation of cartographic content displayed on-screen, the so-called adaptation to the size and resolution of the device, while the other one is linked to the change in the device's orientation [17]. The small size of the display also limits the space that can be allocated to buttons and other functions [18]. In the literature, there is a gap in research on using the same content of spatial information in landscape and portrait orientations of smartphones. There is very little evidence of the differences resulting from the interaction with the geographical space in the landscape or portrait orientation on small displays.

The methods of studying map usability are often based on the experiment in which map users do the same task but using different map versions [19,20]. A homogenous group usually consists of 20–30 respondents for public users and 10–20 respondents for experts [21]. Tasks to be performed by each individual respondent become the basis for obtaining objective data on the time of completing the task and the way of moving around the geographical space [22]. Tasks should be comprehensible for the user and possible to complete in a few minutes.

Nowadays, what is gaining popularity is eye-tracking applied in empirical studies on the efficiency of maps, e.g., animated maps [23], recognizability of map symbols in video games [24], user preferences and behavior in a topographic immersive virtual environment [19,25], walking and teleporting in a virtual stronghold [26]. However, the eye-tracking technique has only been employed in a few studies using mobile cartography [27] and focused more on many kinds of human–phone interfaces and the efficiency of apps on smartphones [28,29]. Therefore, eye tracking could show the differences in the visual strategy among users who perform a map-based task in different device orientations. If landscape orientation could lead to more frequent users' activity on the east–west parts of the map, then eye tracking would help understand the visual attention distribution related to the device orientation.

Data obtained from any experimental research are saved in tables, print screens, text files, etc., which are then subject to statistical analyses and cartographic visualization. The use of graphical methods and mapping techniques for presenting results allows one to interpret the results more fully [22,30]. Appropriate statistical analyses [31,32] and data mapping techniques [33] are employed to form partial and full conclusions (cartographic research method).

### **2. Aim and Questions**

The main objective of the research is to demonstrate the similarities and differences in moving around on the 2D map on the smartphone in the landscape and portrait orientations with attitude to map design and cartographical methods for representation of usability. The objective of the research raises the following questions:

• How to design a simplified 2D topographic map for gameplay with the opportunity


### **3. Materials and Methods**

To meet the objective and answer the above questions, we have adopted six main research stages (Figure 1):

• to establish the basic conceptual assumptions (Section 3.1);


### *3.1. Concept*

Considering the cartographico-geomedial attitude (design of topographic map, map orientation, mapping techniques, geomedia efficiency, eye-tracking for cartographic content) and IT aspects (Information Technology: game engines software, programming scripts, data collection scripts, numerical data of path occupation), we adopted a concept embracing the following assumptions (Figure 1):


### *3.2. Creating a 2D Map for Smartphone*

Simplified content of the topographic map was created in six perceptual colors (gray roads, red—buildings, blue—lakes/rivers, green—forests/parks, black—stone monuments, and yellow—location of the user. A yellow circle is used to symbolize the location of the user; initially is located in the center of map. For designing the map, the landscape and portrait frames (which would provide the initial views) were placed in the center of the area (Figure 2). The location of the eight stone monuments is significant. The first three locations were also placed beside roads but outside the initial view. They had a similar distance from the center of the map and kept well inside the frame of the map extent.

New cartographic elements were created in a vector graphical program, Inkscape, as an SVG file. The basic cartographic symbols are easily distinguishable, both perceptively and intuitively, by using conventional colors and styles. The fundamental content (roads, rivers, lakes, forests-parks, buildings) was then supplemented with the monument point symbols of high contrast (Figure 2). The symbol of the user's location, always located on the road exactly in the middle of the map displayed, was the focus of visual attention [10]. To increase the contrast, the yellow circle has a black outline [7]. Following the rules of map design, the background of the map was made very light yellow. Stone monuments are

extent.

*ISPRS Int. J. Geo-Inf.* **2022**, *11*, x FOR PEER REVIEW 4 of 17

similar distance from the center of the map and kept well inside the frame of the map

an SVG file. The basic cartographic symbols are easily distinguishable, both perceptively and intuitively, by using conventional colors and styles. The fundamental content (roads, rivers, lakes, forests-parks, buildings) was then supplemented with the monument point symbols of high contrast (Figure 2). The symbol of the user's location, always located on the road exactly in the middle of the map displayed, was the focus of visual attention [10].

map design, the background of the map was made very light yellow. Stone monuments

New cartographic elements were created in a vector graphical program, Inkscape, as

characterized by the shape from topographic maps [34], although each of them received a unique white number (1–8). The finished graphics of the map was saved as a PNG file at a high resolution. are characterized by the shape from topographic maps [34], although each of them received a unique white number (1–8). The finished graphics of the map was saved as a PNG file at a high resolution.

**Figure 1.** Graphical scheme with six research stages. **Figure 1.** Graphical scheme with six research stages.

**Figure 2.** Simplified content of the designed topographic map with initial view frames in landscape and portrait orientations. **Figure 2.** Simplified content of the designed topographic map with initial view frames in landscape and portrait orientations.

#### *3.3. Creating an Application for Smartphone*  App development began with preparing a scene in which the map, the player, *3.3. Creating an Application for Smartphone*

monuments, the camera, and a summary screen were located. Then, the behavior of these elements, their interactions, and reactions to user input were implemented. The graphic of the map was directly placed on the scene and included roads that had been reflected in the physics system by roads made of *Edge Colliders*. The player was represented in physics as *Circle Collider* but also had a component of *Rigidbody* component that is necessary for moving objects. The player moves in the direction indicated by the finger that touches the screen. While the player is moving, contact with the nearest road is constantly checked (the collision of *Colliders* of the player and roads), and the player is required to be in the middle of the road to prevent them from leaving the path. Monuments had their own *Circle Colliders,* which were placed on the adjacent road. App development began with preparing a scene in which the map, the player, monuments, the camera, and a summary screen were located. Then, the behavior of these elements, their interactions, and reactions to user input were implemented. The graphic of the map was directly placed on the scene and included roads that had been reflected in the physics system by roads made of *Edge Colliders*. The player was represented in physics as *Circle Collider* but also had a component of *Rigidbody* component that is necessary for moving objects. The player moves in the direction indicated by the finger that touches the screen. While the player is moving, contact with the nearest road is constantly checked (the collision of *Colliders* of the player and roads), and the player is required to be in the middle of the road to prevent them from leaving the path.

Only the *Collider* for the monument being searched for is active. When the player *Collider*  meets the *Collider* for active monument information about successfully seizing that control point. The action of saving this data changes the active monument to the next one in the sequence. In the beginning, only monument 1 is active, and after monument 8 is seized, the results are summed up. The order of collecting stones was not voluntary. After stone no. 1 is captured, stone no. 2 would activate in black. After stone no. 2 was reached, stone no. 3 would activate, etc. Monuments had their own *Circle Colliders,* which were placed on the adjacent road. Only the *Collider* for the monument being searched for is active. When the player *Collider* meets the *Collider* for active monument information about successfully seizing that control point. The action of saving this data changes the active monument to the next one in the sequence. In the beginning, only monument 1 is active, and after monument 8 is seized, the results are summed up. The order of collecting stones was not voluntary. After stone no. 1 is captured, stone no. 2 would activate in black. After stone no. 2 was reached, stone no. 3 would activate, etc.

*3.4. Surveys among Map Users* 

*ISPRS Int. J. Geo-Inf.* **2022**, *11*, x FOR PEER REVIEW 6 of 17

The camera on the scene is constantly following the player, which means that the player remains in the center of the view throughout the activity. Initially, the script adjusts the size of the camera view to the selected portrait/landscape mode. The summary screen includes a list of times when individual stones were seized and the tracks that the player completed. The data on tracks are collected, starting with the moment the app is started, and *LineRenderer* is used for displaying them on screen. completed. The data on tracks are collected, starting with the moment the app is started, and *LineRenderer* is used for displaying them on screen. Figure 3 presents the code to implement moving toward the touch by the user's finger. The Update method is activated approximately 60 times per second and serves to

The camera on the scene is constantly following the player, which means that the

the size of the camera view to the selected portrait/landscape mode. The summary screen includes a list of times when individual stones were seized and the tracks that the player

Figure 3 presents the code to implement moving toward the touch by the user's finger. The Update method is activated approximately 60 times per second and serves to interpret the user's touch. The *FixedUpdate* method is activated exactly 50 times per second and is used for moving the symbol of the player. Placing the player on the road is crucial for moving on the roads on the map. Out of all roads located nearby the touch point, the nearest road is picked, and the new position of the player becomes the contact point with this road. Furthermore, obtaining the number of walks that users took down individual stretches of the roads was implemented (stretches marked with two letters are presented in a flow map. The load of the road stretch is measured by the number of walks taken down the specific stretch by 30 respondents. interpret the user's touch. The *FixedUpdate* method is activated exactly 50 times per second and is used for moving the symbol of the player. Placing the player on the road is crucial for moving on the roads on the map. Out of all roads located nearby the touch point, the nearest road is picked, and the new position of the player becomes the contact point with this road. Furthermore, obtaining the number of walks that users took down individual stretches of the roads was implemented (stretches marked with two letters are presented in a flow map. The load of the road stretch is measured by the number of walks taken down the specific stretch by 30 respondents.

**Figure 3.** The implementation of moving toward the touch by the user's finger. **Figure 3.** The implementation of moving toward the touch by the user's finger.

The researcher would invite a participant into the room, and the respondent would

all black stone moments, starting with 1 to the last one, as quickly as possible. The authors of this study decided that the time between the game entering and taking monument no. 1 will be time for the user to familiarize themselves with the application and its gameplay. After collecting monument no. 1, the game time was officially counted, which was later

sit down at the table in front of a smartphone mounted on a handle. Then, the researcher explained the research objective in general terms and presented the way the smartphone worked with an eye-tracker. The participant selected the required orientation of the

### *3.4. Surveys among Map Users*

The researcher would invite a participant into the room, and the respondent would sit down at the table in front of a smartphone mounted on a handle. Then, the researcher explained the research objective in general terms and presented the way the smartphone worked with an eye-tracker. The participant selected the required orientation of the smartphone and then the eye-tracker calibrated eyesight (Figure 4). After the player entered the game, the researcher informed the participant about his/her location with a yellow circle in the middle of the map. Next, the participant would receive a task to reach all black stone moments, starting with 1 to the last one, as quickly as possible. The authors of this study decided that the time between the game entering and taking monument no. 1 will be time for the user to familiarize themselves with the application and its gameplay. After collecting monument no. 1, the game time was officially counted, which was later analyzed in the study. When the participant reached stone monument no. 8, the researcher thanked the participant for completing the task and recorded the data of that completed walk.

In the research, all the respondents held the smartphone in two hands and used their thumbs to interact with the screen, which is in keeping with how mobile devices are typically held [35–37]. Such use of smartphones also resulted from the ability of the user's marker to move down the roads, i.e., from smooth scrolling down the map. The settings resulting from the eye-tracking technology supported this solution too. The data were recorded on the smartphone after each completed gameplay. Figure 5 presents an example of data collected from participant no. 18 (see Figure 6B).

### **4. Results**

### *4.1. Statistical Analysis*

The time data of the 60 research participants were divided into two main categories: the total time of the walk and the time of individual paths (Figure 6). The shortest time in portrait orientation was achieved by user P12 (83.96 s) and the longest time—by P29 (185.42 s) (Figure 6B). The median value of the total game time for the entire portrait group was 116.70 s, and the standard deviation was 22.37, which confirms the temporal discrepancies between players. The shortest time of going through the entire application in landscape orientation (Figure 6A) was achieved by user L29 (70.20 s), and the longest time was by user L25 (182.70 s). The median of the total game time for the entire landscape group was 118.09 s, and the standard deviation was 25.45, which also confirms time intervals between users. The non-parametric Mann–Whitney U test for independent samples was carried out in PQStat (v 1.8.). This is an appropriate test to compare two groups when the data distribution does not fit the criteria of a normal distribution [31,32]. To evaluate differences for portrait and landscape orientation groups, the medians for individual categories are compared (Figure 7). Users that went through the application in portrait orientation would complete the search faster by 1.39 s than those in landscape orientation. The statistical test results did not confirm the significance of this difference.

The Mann–Whitney U test on these median times is shown in Figure 8. For moving between monuments 4–5 (*p*-value = 0.04) and for 5–6 (*p*-value = 0.009), the test demonstrated the differences in parameters between the two orientations. For paths 4–5, users in landscape orientation would find the point faster than in portrait orientation. The difference may result from the fact that points 4 and 5 were more visible for users in horizontal orientation, which allowed users to find the right route to the destination faster. The difference may be corroborated by eye-tracking analyses and route traffic loads. For paths 5–6, users in portrait orientation would find the point faster than in landscape orientation. Although while seizing point 3, the landscape players would see the location of monument 6 (considering the width of the field of vision), this knowledge failed to translate into moving from 5–6 faster than portrait users.

*ISPRS Int. J. Geo-Inf.* **2022**, *11*, x FOR PEER REVIEW 8 of 17

**Figure 4.** Researcher and participant with a smartphone in landscape and portrait orientation. **Figure 4.** Researcher and participant with a smartphone in landscape and portrait orientation. **Figure 4.** Researcher and participant with a smartphone in landscape and portrait orientation.

**Figure 5.** Path data of participant no. P18 (see Figure 6)**. Figure 5. Figure 5.** Path data of participant no. P18 (see Figure 6) Path data of participant no. P18 (see Figure**.** 6).


**Figure 6.** (**A**): Time data of 30 participants with landscape orientation; (**B**): Time data of 30 participants with portrait orientation (red is the longest time, and blue is the shortest time in each column). **Figure 6.** (**A**): Time data of 30 participants with landscape orientation; (**B**): Time data of 30 participants with portrait orientation (red is the longest time, and blue is the shortest time in each column). **6.** participants with orientation; 30 participants with portrait orientation (red is the longest time, and blue is the shortest time in each column).


**Figure 7.** Comparison of the median time for landscape and portrait orientation. **Figure 7.** Comparison of the median time for landscape and portrait orientation. **Figure 7.** Comparison of the median time for landscape and portrait orientation.

**Figure 8.** Box plots of statistical significance for paths 4–5 and 5–6 in portrait (P) and landscape (L) orientation. **Figure 8.** Box plots of statistical significance for paths 4–5 and 5–6 in portrait (P) and landscape (L) orientation.

### *4.2. Cartographic Visualization 4.2. Cartographic Visualization*

A cartographic visualization of the research results included three quantitative mapping techniques: a heat map, a comparative flow map (band cartodiagram), and a proportional point symbol map [38] (Figure 1). A cartographic visualization of the research results included three quantitative mapping techniques: a heat map, a comparative flow map (band cartodiagram), and a proportional point symbol map [38] (Figure 1).

The first visualization in the form of six heat maps was based on fixation distribution (Figure 9). This cartographic image presents a visual strategy for completing tasks in portrait and landscape orientation. The results presented are related to the entire task, i.e.**,** the user's moving from monument 1 toward monument 8. In the portrait version, the users' gaze was focused on the central part of the smartphone screen, slightly below the geometric center (Figure 9A). Fixations are distributed significantly more along the longer vertical axis of the screen. Therefore, the point of the highest density of fixations (app. 600,000) had an ellipsoidal shape. The further away from the center, the lower the number of fixations. The place located above the main concentration of fixations was the only exception, as an area that was smaller but with a high number of fixations. In the landscape version, the users' gaze also focused on the central part of the screen and slightly below the geometric center of the display. Even though the distribution of the red area with the highest number of fixations has a semi-circular shape, one can still observe a slight elongation towards the ellipse (Figure 9B). The first visualization in the form of six heat maps was based on fixation distribution (Figure 9). This cartographic image presents a visual strategy for completing tasks in portrait and landscape orientation. The results presented are related to the entire task, i.e., the user's moving from monument 1 toward monument 8. In the portrait version, the users' gaze was focused on the central part of the smartphone screen, slightly below the geometric center (Figure 9A). Fixations are distributed significantly more along the longer vertical axis of the screen. Therefore, the point of the highest density of fixations (app. 600,000) had an ellipsoidal shape. The further away from the center, the lower the number of fixations. The place located above the main concentration of fixations was the only exception, as an area that was smaller but with a high number of fixations. In the landscape version, the users' gaze also focused on the central part of the screen and slightly below the geometric center of the display. Even though the distribution of the red area with the highest number of fixations has a semi-circular shape, one can still observe a slight elongation towards the ellipse (Figure 9B).

Due to significant differences in the time of completing paths 4–5 (Figure 7), we have analyzed the differences in visual strategy during moving between those two stone monuments (Figures 9C,D). The concentration of fixations on the choropleth map C is close to the total gameplay visible in visualization 9A. The deviation of the significant part of fixations toward the right side of the screen, both in portrait and in landscape orientation, constitutes the main difference, the reason for it being surely the fact that the user was moving from monument 4 (located in the most left part of the map, in the west) to monument 5 (located in the most right part of the map, in the east) (Figure 2). The places where concentration was the greatest oscillated at around 110,000 fixations, which constituted around 18% of fixations from the entire task. Due to significant differences in the time of completing paths 4–5 (Figure 7), we have analyzed the differences in visual strategy during moving between those two stone monuments (Figure 9C,D). The concentration of fixations on the choropleth map C is close to the total gameplay visible in visualization 9A. The deviation of the significant part of fixations toward the right side of the screen, both in portrait and in landscape orientation, constitutes the main difference, the reason for it being surely the fact that the user was moving from monument 4 (located in the most left part of the map, in the west) to monument 5 (located in the most right part of the map, in the east) (Figure 2). The places where concentration was the greatest oscillated at around 110,000 fixations, which constituted around 18% of fixations from the entire task.

The differences were also outlined in the analysis of the visual strategy research participants adopted for moving from monument 5 to monument 6 (Figure 7). For portrait orientation, fixations are concentrated slightly below the center of the screen along the vertical axis, forming the ellipsoidal shape (Figure 9E). There are extra hot spots of visual activity closer to the upper part of the screen, which may be related to moving toward The differences were also outlined in the analysis of the visual strategy research participants adopted for moving from monument 5 to monument 6 (Figure 7). For portrait orientation, fixations are concentrated slightly below the center of the screen along the vertical axis, forming the ellipsoidal shape (Figure 9E). There are extra hot spots of visual activity closer to the upper part of the screen, which may be related to moving toward

monument 6 at the top (the north) of the map. On the other hand, in landscape orientation, extra hot spots are located closer to the bottom and the right part of the screen (Figure 9F).

The proportional point symbols map in Figure 10 represents the number of fixations on individual stone monuments while they were active in black, and the participant was moving toward that point. No. 2 was the most frequently observed point in portrait orientation (4.4 fixations on average) and point 3 in landscape orientation (4.9 fixations on average). In this aspect, the greatest difference between orientations occurs for monument 2. In portrait, while point 2 was active, it had 4.4 fixations on average, whereas in landscape, it had 3.1 fixations. Interestingly, monuments 1–4 had more than three fixations on average in both orientations, whereas other points had less than three fixations of the value of 2–3.

A comparative flow map (band cartodiagram) is the last statistical map, presenting the numerical load of individual road stretches (Figure 11). The number of walks down a specific stretch taken by 30 research participants in landscape orientation and by 30 participants in portrait orientation was presented from monument 1 to monument 8 in six classes. The maximum load for a single road stretch for one user is 7 and for 30 users is 210. To obtain the number of walks that participants took, stretches were labeled with two letters, e.g., AA. Each two-letter description is placed in the middle of the distance between nodes. We adapted this method of placing the description for sections from the description of the kilometers value in road maps. The roads have been divided into small sections according to road crossings, section length, and the location of the monument.

Based on the comparative flow map, a significant load of roads is visible in both orientations in the center of the area, between monuments 1-2-3 (Figure 11). Moreover, a similar load of road stretches between monuments 5–7 in the north and east of the area is visible in both versions. In landscape orientation stretches, BB, BC, BD, and BV report a greater load. Whereas, when it comes to portrait, it is typical to have a greater load on BU, BW, and BX. In the western part, in landscape orientation, the AP stretch has a significantly greater load than in portrait orientation. CI and CF stretches have a greater load in portrait orientation.

### **5. Discussion**

The visual strategy of research participants that were doing a topographic task on the smartphone with portrait orientation is highly similar to the one applied in task-oriented monster elimination during the experience with mobile games [39]. Supposedly, it is also a strategy similar to observing one's position and the elements that occur in a mobile car navigation. On the other hand, tasks related to navigation in topographic space in landscape orientation demonstrate a visual strategy focused on the central part of the screen. Certain similarities may also be observed in the research by Hejtmánek et al. [40], in which during navigation in a virtual city, the central part of the monitor in landscape orientation was the spot that the gaze was most focused on.

The difference in fixation distribution between tasks 1–8 and 4–5 may be explained by the fact that point 5 was located in the right part of the map. Hence, the greater the density of fixations on the right side of the smartphone screen. The situation is similar for the track between points 5 and 6 but only for landscape orientation. When it comes to the average number of fixations on individual points of the map, the smaller number of fixations on points 5 to 8 may result from having familiarized oneself with topographic space participants to a satisfactory degree. Time results seem to corroborate this, not showing any drop in the amount of time necessary to complete the task, whereas participants do not need to look at sequentially activating monuments that often anymore.

**Figure 9.** Heat map with participant fixation locations on smartphone: (**A**)—portrait orientation for the movement from monuments 1 to 8; (**B**)—landscape orientation for the movement from monuments 1 to 8; (**C**)—portrait orientation for the movement from monuments 4 to 5; (**D**) landscape orientation for the movement from monuments 4 to 5; (**E**)—portrait orientation for the movement from monuments 5 to 6; (**F**)—landscape orientation for the movement from monuments 5 to 6.). **Figure 9.** Heat map with participant fixation locations on smartphone: (**A**)—portrait orientation for the movement from monuments 1 to 8; (**B**)—landscape orientation for the movement from monuments 1 to 8; (**C**)—portrait orientation for the movement from monuments 4 to 5; (**D**)—landscape orientation for the movement from monuments 4 to 5; (**E**)—portrait orientation for the movement from monuments 5 to 6; (**F**)—landscape orientation for the movement from monuments 5 to 6.).

*ISPRS Int. J. Geo-Inf.* **2022**, *11*, x FOR PEER REVIEW 13 of 17

**Figure 10.** Proportional point symbols map with the presentation of the fixation on specific stone monuments. **Figure 10.** Proportional point symbols map with the presentation of the fixation on specific stone monuments. **Figure 10.** Proportional point symbols map with the presentation of the fixation on specific stone monuments.

road sections (two-letter description of sections from AA to CR). **Figure 11.** Comparative flow map with the presentation of the moving number along individual road sections (two-letter description of sections from AA to CR). **Figure 11.** Comparative flow map with the presentation of the moving number along individual road sections (two-letter description of sections from AA to CR).

**Figure 11.** Comparative flow map with the presentation of the moving number along individual

Each form of result analysis presents different similarities and differences but what is important is to use them in a complementary way [19]. In analyzing the fixation field deviation to the right from the center of the display in moving from monument 4 to 5, the heat map is not enough because it is only the comparison with the basic topographic map and the flow map that reveals the cause of the deviation. Hence, we can conclude that the area of high fixations is located slightly below the geometric center of the smartphone in the shape of the ellipse, significantly elongated vertically for portrait orientation, whereas for landscape orientation, there is little elongation. However, the direction of moving around on the map has a great impact on the deviation of the high fixations field. The effect of perceiving the symbol exactly in the optical center of the graphical image is one of the rules of map design that recommends placing the symbol in the optical center of the image, i.e., slightly above the geometric center. Therefore, it is worth considering whether one may apply this rule to influence the distribution of fixations.

The analysis of the load of individual stretches of the road made by means of a flow map proves that there are differences in the choice of the road between landscape and portrait orientation in the eastern part of the map. The track that is chosen more often in portrait orientation from monument 5 to monument 6 is a consequence of the screen orientation. The change of the screen orientation would lead to east–west road stretches being chosen more often than north–south stretches, which translated into slower times. In the western part of the field, a similar tendency occurs. In portrait orientation, the north–south stretches (CI and CF) have a definitely higher traffic load, whereas in landscape orientation, east–west stretches (AP and AF) were used more frequently. It has also been observed that individual research participants were wandering around vertically in landscape orientation because they reached CC, CA, BN, and BO stretches. It may result from the smartphone's orientation. On the other hand, in portrait orientation, individual participants were wandering around horizontally, reaching CE, CH, and CM stretches in the west. In both orientations, research participants would wander around CR and CP stretch. Interestingly, in landscape orientation, no participant would enter stretches that were directed leftwards, i.e., CE, CH, or CM. What is convincing is the fact that, when moving around on frequented roads AV-CF-CI-CN, the participant would already see the edge of the frame enclosing the content of the map. The users of portrait orientation had an easier situation when it came to noticing the edge of the map at the top and at the bottom of the screen.

The implementation of the minimized touch interface that follows current tendencies in app design turned out to be a practical solution because no research participant would report any problems with moving around on the map by means of touch [41]. The elimination of joysticks and other buttons resulted in the participant's focus solely on cartographic content. However, in some cases, it was necessary to remind participants that they were allowed to move around only on roads, which was not obvious to players. Probably a car or walker symbol would be more obvious to the player, but we assumed that we would use very simplified graphics.

The number of cartographic visualizations of results and their graphic complexity of form remains a topic to be discussed [38]. The opportunities of complementary partial analysis and full synthetic presentation of map use features have both effective and impressive aspects [42]. From the example of six heat maps, which can be analyzed separately but without being interpreted as a whole, it is not possible to draw more general conclusions, proving that fact. Comparative cartodiagrams have great advantages, but it is necessary to use a maximum of six ranges of the range scaling. The use of absolute scaling for the map of proportional point symbols may complicate the adjustment of the symbol's size to the factual numerical value. The authors used uncomplicated graphic result mapping techniques because methods that are graphically attractive often fail to be effective enough for the proper interpretation of phenomena in geographical space.

### **6. Conclusions**

To sum up the research, we can say that the concept of research suggested resulted in the demonstration of similarities and differences in usability on a simplified topographical 2D map on the smartphone in the landscape and portrait orientation:

Main similarity:

• regardless of the orientation of the smartphone, participants completed the whole task at a similar time (this is the recommendation that both device orientations are adequate for presenting topographical space on a mobile phone);

Main differences:


Answering the questions raised at the beginning, we can conclude that interactive map design for smartphones should take place according to the rules of cartographic design and current IT trends to create a map application with gameplay elements. Such an approach applies both to designing the movement on the topographic graphics and obtaining data on movement in two smartphone orientations.

The presentation of data on how users move requires the employment of complementary cartographic methods. The application of a single representation method shows only one aspect of the issue, whereas using a few methods allows us to link the results together and demonstrate the broader spectrum of the problem of moving around on the map on the smartphone. The flow map, the proportional point symbols, and the heat map method turned out to be particularly useful.

In our study, we were attempting to solve a few problems related to the use of a traditional cartographic medium in the form of a 2D map in its geomedia extension on smartphones. We understand such a geomedia extension of the map's functionality as the user's opportunity to interactively move around the map's content on the smartphone screen. 'The voyage of a finger across the map' has a new geomedia dimension nowadays. On a printed static map, a finger moves around on the roads, whereas in the research, the user's fingers move around on the roads as the user is 'anchored' to the road in the middle of the smartphone display.

While users feel more comfortable in a portrait orientation of a smartphone, most vehicles have their screens in landscape format. This fact makes the development of research in the context of the usability of applications or cartographic products inevitable. The authors of this article hope that the obtained results may contribute to the development of research in this area and, consequently, lead to improvements in maps on various devices, not only smartphones. Future studies should consider conducting an experiment with both device orientations for both groups so that there would be feedback if the different orientation improves previous user experience.

**Author Contributions:** Conceptualization, Beata Medy´nska-Gulij; data curation, Paweł Cybulski, Krzysztof Zagata, Jakub Zawadzki and Tymoteusz Horbi ´nski; formal analysis, Beata Medy ´nska-Gulij, Paweł Cybulski, Krzysztof Zagata and Jakub Zawadzki; investigation, Paweł Cybulski, Krzysztof Zagata and Jakub Zawadzki; methodology, Beata Medy´nska-Gulij, Jacek Gulij, Paweł Cybulski, Krzysztof Zagata and Tymoteusz Horbi ´nski; project administration, Beata Medy ´nska-Gulij; resources, Beata Medy´nska-Gulij, Jacek Gulij, Paweł Cybulski, Krzysztof Zagata, Jakub Zawadzki and Tymoteusz Horbi´nski; software, Beata Medy´nska-Gulij, Jacek Gulij, Paweł Cybulski, Krzysztof Zagata, Jakub Zawadzki and Tymoteusz Horbi´nski; validation, Beata Medy´nska-Gulij, Paweł Cybulski, Krzysztof Zagata and Tymoteusz Horbi´nski; visualization, Beata Medy´nska-Gulij and Krzysztof Zagata; writing—original draft, Beata Medy ´nska-Gulij, Jacek Gulij, Paweł Cybulski, Krzysztof Zagata

and Tymoteusz Horbi´nski; writing—review and editing, Beata Medy´nska-Gulij. All authors have read and agreed to the published version of the manuscript.

**Funding:** This research received no external funding.

**Data Availability Statement:** Not applicable.

**Conflicts of Interest:** The authors declare no conflict of interest.

### **References**

