Feature Info Improving the visualization and usability of ... · source Web mapping technologies [7]. Figure 1. An example of a feature info [8]. Feature info notion has remained

Yevgeniya Litvinova

Feature Info – Improving the visualization

and usability of GIS background information

in the context of a mobile tourist application

FEATURE INFO – IMPROVING THE VISUALIZATION AND

USABILITY OF GIS BACKGROUND INFORMATION IN THE

CONTEXT OF A MOBILE TOURIST APPLICATION

Dissertation supervised by

Prof. Dr. Christian Kray

Prof. Dr. Pedro Cabral

Dr. Morin Ostkamp

February 2018

II

ACKNOWLEDGEMENTS

I would like to acknowledge my supervisors Prof. Dr. Christian Kray from the

Institute for Geoinformatics, University of Mūnster, and Dr. Morin Ostkamp from con

terra GmbH for guiding and assisting me with carrying out my research and writing

this thesis. Your critique has always been constructive and motivating and I enjoyed

working with and learning from you.

I would like to thank Marcel van Remmerden for many discussions where he

shared his experience that expanded my background knowledge of the user experience

domain.

A special word of thanks goes to Wayne, my partner. This thesis could not

have been realized without your support and encouragement. Finally, my family:

mom, dad, and my brother, for being the best family I could ever ask for and teaching

me to be inquisitive, persistent, and not afraid to seek help.

III

FEATURE INFO – IMPROVING THE VISUALIZATION AND

USABILITY OF GIS BACKGROUND INFORMATION IN THE

CONTEXT OF A MOBILE TOURIST APPLICATION

ABSTRACT

Feature info is an interactive map tool that allows viewing background information

about a map feature in response to a user action. Mobile devices come with a number

of limitations, e.g. small screen real estate and the variety of screen sizes, that can

affect map and feature info usability. Existing recommendations for feature info

design [1], [2], [3] focus mostly on content, i.e. effective communication of data,

leaving the “interaction design” aspect overlooked. This Master’s Thesis attempts at

improving the visualization and usability of feature info interfaces in the context of

mobile tourist applications and presents nine feature info design guidelines that

address specific usability problems. The problems were identified through heuristic

evaluation of five tourist applications and a user interview. Literature survey and two

usability experts provided ideas regarding how several of these problems can be

resolved. Three guidelines were evaluated in a lab-based usability test with twenty

participants. On average, assessed guidelines demonstrated a significant positive

effect on feature info usability by decreasing task completion time by 33% and

increasing task completion rate and System Usability Scale (SUS) score by 26% and

28% respectively. Proposed guidelines are not restricted by any specific use case and

can be applied to other application domains. Researchers and business practitioners

can use the guidelines as a reference in their daily work.

IV

KEYWORDS

Mobile Human-Computer Interaction

Usability

Usability evaluation

Interactive maps

UX/UI design

User interfaces

User-Centered Design

V

ACRONYMS

GIS – Geographic Information Systems

GI – Geographic Information

HCI – Human-Computer Interaction

POI – Point of Interest

PWA – Progressive Web Application

SUS – System Usability Scale

UCD – User-Centered Design

UI – User Interface

UX – User Experience

WebGIS – Web-based Geographic Information Systems

VI

TABLE OF CONTENTS

ACKNOWLEDGEMENTS ....................................................................................... II

KEYWORDS ............................................................................................................ IV

ACRONYMS ............................................................................................................. V

TABLE OF CONTENTS .......................................................................................... VI

INDEX OF FIGURES ............................................................................................ VIII

INDEX OF TABLES ................................................................................................ IX

1. INTRODUCTION ............................................................................................... 1

1.1. What is Feature Info? ................................................................................... 1

1.2. Use Case: con terra App ............................................................................... 5

1.3. Motivation and Research Questions ............................................................. 7

2. RELATED WORK ............................................................................................. 8

2.1. Usability of WebGIS .................................................................................... 8

2.2. Usability of Mobile Maps ........................................................................... 10

2.3. Feature Info Status Quo .............................................................................. 11

3. METHODOLOGY ............................................................................................ 16

4. ANALYZING FEATURE INFO USABILITY ................................................ 20

4.1. Heuristic Evaluation ................................................................................... 20

4.2. User Interview ............................................................................................ 25

4.3. Questionnaire for Experts ........................................................................... 28

5. GUIDELINES FOR FEATURE INFO DESIGN ............................................. 31

6. EVALUATING GUIDELINES ........................................................................ 39

7. RESULTS AND DISCUSSION ....................................................................... 46

VII

8. CONCLUSION ................................................................................................. 53

REFERENCES .......................................................................................................... 54

APPENDIX ............................................................................................................... 61

A. List of usability problems detected during heuristic evaluation ................. 61

B. Level of detail and actions offered in feature info in evaluated mobile

applications ............................................................................................................ 64

C. User questionnaire ...................................................................................... 66

D. Expert questionnaire ................................................................................... 68

E. Tasks designed for prototype usability test ................................................ 70

F. Declaration of Academic Integrity ............................................................. 71

VIII

INDEX OF FIGURES

Figure 1. An example of a feature info [8]. ................................................................ 2

Figure 2. Feature info interface of Google Maps in 2005 [9]. ................................... 3

Figure 3. Feature Info windows in various mapping technologies. ........................... 4

Figure 4. Web application developed by con terra GmbH. ........................................ 6

Figure 5. User-centered design framework for WebGIS applications. ...................... 9

Figure 6. Common feature info layout types. ........................................................... 14

Figure 7. The number of attributes and actions shown in a single feature info by apps

studied in this thesis. ................................................................................................. 24

Figure 8. Google Maps uses icons to represent “Address” and “Open time”. ......... 33

Figure 9. Map (A) and Collect screen (B) interfaces of Collector for ArcGIS. ....... 35

Figure 10. Feature info window for two features. Currently displayed feature is

indicated by enumerator in the bottom right corner. ................................................. 36

Figure 11. City districts and tourist attractions shown in con terra app. .................. 37

Figure 12. Thumb reachability areas during one-handed interaction with a mobile

device [42]. ................................................................................................................ 38

Figure 13. Examples of prototyped feature info interfaces (A, Prototypes # 1 and 2.

B, Prototypes # 3 and 4. C, Prototypes # 5 and 6, D. Prototypes # 9 and 10). ......... 43

Figure 14. Task completion time and rate, and SUS scores for Prototype 1 (before)

and Prototype 2 (after) applying the guideline # 3. ................................................... 46








and Prototype 10 (after) applying the guideline #8. .................................................. 49


and Prototype 12 (after) applying the guideline #8. .................................................. 50

IX

INDEX OF TABLES

Table 1. Research methods used in this thesis .......................................................... 16

Table 2. Summary of measurement and analysis types used in this thesis .............. 16

Table 3. Problems found during heuristic evaluation of the apps ............................ 22

Table 4. Demographic profile of user interview participants ................................... 25

Table 5. Feature info design guidelines .................................................................... 31

Table 6. The overview of conditions placed to produce prototypes ......................... 40

Table 7. The SUS version used in the usability test ................................................. 44

Table 8. Results obtained in this thesis linked to the research questions ................. 51

1

1. INTRODUCTION

This section describes the problem that motivated the author to carry out this

research. The first subsection presents the definition of “feature info” and its role in

map applications. It also describes the challenges of mobile development and how

they may affect feature info design. As this thesis is use case driven, the second

subsection introduces the main application under study and highlights usability

defects in its feature info. The third subsection outlines the goal of this thesis and

proposes research questions that are aimed at achieving it.

1.1. What is Feature Info?

Ubiquitous accessibility to the Internet, personal computers, and smartphones

have impacted the development of geographic information systems (GIS) in the last

30 years. In addition, broadband Internet and cloud technologies have made possible

the shift from desktop to web, leading to the advent of Web-based Geographic

Information Systems (WebGIS). Initially designed for experts, today online map

services and applications have become a mainstay in our daily life. Today the average

person relies on map-based technologies to determine where they are, how to get

where they are going, how to track their personal health, and so much more. They link

people and devices all over the globe allowing them to share spatial data, information,

and knowledge instantaneously and cost-effectively [4].

With the beginning of “map revolution”, where interactive maps are taking

over their static ancestors, cartographic research has started focusing on interaction

design in pursuit of finding best solutions for map interaction. Making map services

and applications more user-friendly and accessible has shifted the focus of industry

and academia to usability. The term “usability” refers to a quality of a product

describing to what degree it can be used by a specific user group in order to achieve

its specific goals in a specific context with effectiveness, efficiency, and satisfaction

(adapted from ISO 9241-210:2010 [5]). If a system is developed following the

2

principles of usability and user-centered design1 (UCD), it benefits not only users, but

also its creators through reduction in production and maintenance costs as well as

increase in productivity, popularity, and sales [6].

This thesis sets out to explore the usability of feature info interfaces. Feature

info (Figure 1) is an interactive map tool that retrieves background information about

a single geographic entity and presents it in a dialogue window that overlays the map.

The dialogue window appears as a result of an action: click, hover over, or tap applied

to select a feature of interest shown on the map. The tool has different names across

different GIS software and services: “pop-up balloon”, “pop-up”, “info window”,

however, to stay consistent the term “feature info” will be used further on in this

thesis. Feature info is a core map interaction element of many proprietary and open

source Web mapping technologies [7].

Figure 1. An example of a feature info [8].

Feature info notion has remained unchallenged during the last several years. For

instance, Figure 2 demonstrates a feature info interface from Google Maps back in

2005. Below in Figure 3 displayed are feature infos of six currently popular Web

mapping technologies. As GIS applications have evolved, feature info has maintained

its “classic” look - a pop-up balloon with background information anchored to a map

feature.

1 User-centered design – “approach to systems design and development that aims to make interactive

systems more usable by focusing on the use of the system and applying human factors/ergonomics and

usability knowledge and techniques” [5].

3

Figure 2. Feature info interface of Google Maps in 2005 [9].

Because technologies mentioned in Figure 3 are frequently used as platforms for

dissemination of geographical information and knowledge, map applications based on

them oftentimes inherit the default “classic” feature info look, unless map creators

invest their time and effort into customizing not only the content, but also the visual

appearance.

(A) Map by Google Maps JavaScript API [10]. (B) Map by ArcGIS Online [11].

4

(C) Map by Leaflet [12]. (D) Map by CARTO [13].

(E) Map by Mapbox [14]. (F) Map by OpenLayers [15].

Figure 3. Feature Info windows in various mapping technologies.

The aforementioned companies encourage map creators to customize feature

info (e.g. [13], [16]) by styling it to match the map’s user interface (UI) design and by

displaying content to users according to their needs. For example, general users may

prefer to see multimedia files (photos/videos) about a feature to get to know it better,

while experts may be satisfied with the ability to view just a few numbers describing

feature’s attributes. In some applications, apart from only displaying background

information about a feature of interest, feature info also incorporates additional

functionality. For example, certain action buttons, a form that can be filled out to

submit additional information about the probed feature, or sophisticated tools that

show temporal dynamics of attributes of the probed feature. It is, then, necessary to

distinguish between working with the map and working with the feature info. Based

on that, feature info dialogue windows will be an auxiliary or main interface element

respectively. Finally, feature info functionality and visual appearance should not be

5

overlooked. Rather, approached by applying design thinking2 and integrating users

into the design process [17].

Nowadays mobile map applications are just as popular, if not more, as desktop

web map services [4]. They came to existence with the wide spread of mobile

technologies starting from 1990’s and have grown beyond mapping to offering

location-based services that are used by the majority of smartphone owners [18] . Such

services include local recommenders, navigation, fitness-tracker apps etc.

The usability of mobile applications depends on a number of factors:

limitations of mobile devices, such as small screen real estate, various screen

sizes, single-window interfaces, connectivity, fragmented sessions, and

touchscreen input;

a wide variety of available devices and their operating systems;

different ways of deployment (Web vs. native apps) [19].

As a result, mobile map applications need a separate design approach when it

comes to their development. Let us have a look at a specific example: open feature

info window blocks a certain part of the map. Having obstructed map view may cost

users losing understanding of the environment. Compromising between two windows

on a mobile screen will not be possible without trade-offs, although map view should

be the first priority [20]. Conclusively, further usability studies of feature info

interfaces in mobile map applications are required.

1.2. Use Case: con terra App

The main application under study is a Web map service3 developed by con

terra GmbH (“the con terra app”) as this thesis is a collaboration between the

University of Münster and the aforementioned company. The application is a

technology demonstrator and offers geographic data about Cologne, namely city

districts, boroughs, and precincts grouped into Basic Data layer4; libraries, museums,

and schools – grouped into Education and Culture layer; and tourist attractions,

2 Design-thinking - “design-specific cognitive activities that designers apply during the process of

designing” [60]. 3 https://www.conterra.de/en/produkte/con-terra-solutionplatform/mapapps/produktdetails 4 Layer – “A collection of entities of the same geometric type (dimensionality)” [4].

6

playgrounds- and sports areas, and places of event – grouped into Recreation layer.

The con terra app can be accessed through any browser on any device and once loaded

the Recreation layer is shown by default what makes it looks like a typical tourist

application. Examples of feature info windows are shown in Figure 4. They present

only simple attribute data and have easily noticeable usability problems. For instance:

the heading with its large margins leaves 20 pixels-wide space for scrolling and

viewing background information; only one row of the table can be viewed at a time,

and there is missing information.

(A) (B)

Figure 4. Web application developed by con terra GmbH accessed via

Samsung Galaxy S8 (A, feature info opened. B, feature info scrolled).

Feature info interface in the con terra application has a lot of room for

improvement. Further formal usability inspection is required to detect additional

problems. It will be useful to look at other mobile applications of similar nature to see

the broader spectrum of usability defects in feature infos.

7

1.3. Motivation and Research Questions

The goal of this thesis is to improve the visualization and usability of feature

info interfaces in the context of mobile tourist applications. It is motivated by the lack

of scientifically-derived recommendations on feature info interaction design; and the

need of considering the limitations of mobile devices and producing high-usability

feature info interfaces. To achieve this goal, the following research questions are

proposed:

1. What usability problems occur when users interact with feature info in

mobile tourist applications?

2. How solutions addressing these problems can be generalized into

usability guidelines for feature info design?

These research questions will be answered by applying the UCD approach, i.e.

understanding problems that occur in feature infos, specifying design guidelines to

address these problems, producing design solutions based on the guidelines, and

evaluating them. The results obtained in thesis are supposed to help usability

researchers better understand feature info interfaces and how users interact with it.

The remainder of this thesis is structured as follows: section two discusses the

usability of WebGIS and mobile maps as well as existing literature focusing on feature

info design; section three discusses research methods applied in this thesis; section

four provides detailed description of how feature info usability data was analyzed and

answers the first research question; section five introduces feature info design

guidelines and answers the second research question; section six describes in detail

the usability test conducted to evaluate the proposed guidelines; section seven

discusses the results of the evaluation and this thesis, the limitations, and future work;

and section eight concludes this thesis.

8

2. RELATED WORK

Originally, research in WebGIS usability was focused on desktop scenario,

whereas today it has been increasingly revolving around mobile technology. This

section follows this pattern and discusses, first, the usability principles of WebGIS

services and, second, mobile map applications. The third subsection provides an

overview of existing literature that supports feature info design. In addition, it also

establishes feature info design dimensions and describes what research methods can

be applied to evaluate the usability of feature info interfaces.

2.1. Usability of WebGIS

Usability of WebGIS is an emerging research field and recent publications

discuss establishing methodologies to measure it, conducting lab and field

experiments to benchmark systems and improve them.

In order to evaluate the performance of WebGIS, their specific particularities

must be taken into account [21]. Schobesberger, for instance, developed a framework

for UCD and evaluation of Web map-based systems [17]. The framework suggests

various usability research strategies that depend on resources available to researchers

at any given stage of system design (Figure 5). As UCD advocates for prioritizing

user in order to design better products, in the context of this thesis it was important to

learn more about potential users of tourist GIS applications. Chang and Caneday [22]

found that the behavior and perception of users who seek tourist information via

WebGIS depends on sex, age, and education. These user characteristics, therefore,

must be taken into consideration when initiating any usability research for such

applications. Another study by the same authors [23] showed that two factors –

usefulness and playfulness – drive users to interact with WebGIS when executing

tourism-related tasks. Of particular interest is playfulness because it is associated with

the presence of interactive tools, such as feature info, that allow to manipulate spatial

and attribute data.

9

Figure 5. User-centered design framework for WebGIS applications. Methods in

bold type correspond to a minimal required strategy. Adapted by permission from

Springer Customer Service Centre GmbH: Springer Nature, Modern Trends in

Cartography, Integrating User and Usability Research in Web-Mapping Application

Design, Schobesberger D., [COPYRIGHT] (2014).

https://link.springer.com/chapter/10.1007/978-3-319-07926-4_12




10

Although WebGIS has its own domain-specific usability principles proposed

by Komarkova et al. [24], it is very common that researchers apply Nielsen’s

heuristics [25] to design and evaluate user interfaces. Common usability problems

identified in desktop WebGIS relate to violation of cartographic principles,

accessibility, input and search problems [26]; map visualization and map tools [27];

violations of usability principles such as learnability, flexibility, robustness, and

aesthetics [28]. Usability problems associated with map tools in the above mentioned

studies include issues with map legend, calculate distance tool, scale bars, missing

control to turn on/off map layers, panning and zooming. Problems related to feature

info were not described, however authors suggested it as new tool that could provide

benefits to users. Roth and MacEachren [29] described interaction strategies users

apply to interact with map primitives (zoom, pan, retrieve [feature info] etc.) of a web-

based geoapplication. Rapid usage of feature info was indicative of the user being lost,

confused, and unaware of the filter tool. On the other hand, a single purposeful

instance of using feature info supported users in executing their tasks, although

slightly increasing efficiency.

2.2. Usability of Mobile Maps

Similar as with WebGIS, usefulness, ease of use, and satisfaction drive users

to interact with mobile map applications [30], [31]. Usefulness can be described as

how the content of an app is relevant to users, ease of use – how easily that content

can be extracted, and satisfaction – how they feel about using the app. UCD stresses

that users must decide and prioritize what content they want to see in a mobile app.

However, it is developers who are in charge of ease of use and usability of mobile

applications that both are determined by the choice of a development platform.

The recent evolution of progressive web5 apps (PWA) made it possible for

PWAs to expand their capabilities and offer almost the same functionalities as native

apps do, e.g. using device’s hardware: GPS, proximity sensors, accelerometer,

camera, storage, and other exclusive features. Web applications can only be accessed

via a mobile browser that has its own controls and functionalities. An example

5 https://whatwebcando.today/

11

provided further in this thesis demonstrated that users’ behavior was influenced by

continuous usage of native apps. Performing these habitual actions in a web app

resulted in a usability error.

Usability principles for mobile map-based applications have been established

and validated recently by Kuparinen [20]. These heuristics, however, lack a

comparative study against general heuristics that would allow judging their

effectiveness. Little if any research is available on usability of mobile map-based

applications and especially interactive map tools. Some studies have explored how

users’ background influenced their ways of zooming and panning [32]; how multiple

modalities (speech and touch) make it easier to interact with a mobile GIS [33], and

how searching is carried out in a context-aware location-based service with an

adaptive interface [34].

2.3. Feature Info Status Quo

Steady growth of map-based applications produced commercially and

voluntarily has led to sophisticated innovations in feature info design that appear

sporadically in a small number of map products. These innovations have a potential

of wider application if scientific evidence of their efficiency is obtained and properly

documented in academic publications.

GIS companies publish videos and documentation on feature info design

within the capabilities of their desktop software, however there exist very little

recommendations for mobile platform. Skarlatidou [1] presented trust guidelines for

WebGIS interface design in five dimensions: graphic design, content design, structure

design, and functionality design. However, only some of these guidelines are also

applicable to mobile feature info interfaces. Muehlenhaus outlined general design

guidelines specifically for the feature info in interactive and mobile devices [2]. He

stated: “On maps that make heavy use of info windows [feature info], as much thought

should be put into their design as is put into the design of the mapped area itself”.

This thesis proposes four design dimensions that constitute the feature info

interface: interaction technique (how to open/close and interact with it), placement

(where on the screen it will appear), content (what user will see when it opens), and

12

layout (or styling, i.e. how the user interface will look like). Below are presented

literature findings that provide design recommendations for each corresponding

dimension.

Interaction technique

Tapping (a “mobile” alternative to mouse clicking) as a gesture corresponds

to “select” user action [35] and map users always need to select a map feature for its

feature info to open. As a result, tapping is the most common gesture to open a feature

info window. A general rule of thumb is that only one feature info can be open at a

time [36]. Once open, user should be able to close it easily. Not only mobile screens

limit the size of the map displayed, they also require objects on the map to be larger

to match the touch target size. When the feature info window is active, it may occupy

only a small portion of the map or the entire screen. Depending on the content, it is

also possible to perform interactive actions within the feature info, for example

swiping, tilting, or scrolling.

Placement

By supplying information on top of what is shown on the map, the system

increases user’s cognitive workload – an important aspect of usability [37]. Placing

feature info window next to the map feature will stress the connection between them.

Placing it at the top or bottom of the screen may yield different results depending on

the context of use. There are several open-source plugins, e.g. Snazzy Info Window6

or Leaflet Responsive Popup7, that support responsive placement. These and other

empirically implemented ideas should also be supported by theoretical frameworks.

Content

Providing relevant, accurate, and reliable content is important in order to

support users in executing their tasks. Unless textual content is easily understood by

user, it must be supplied with explanations and definitions for any kind of terminology

and abbreviations, and other notations [25]. For instance, users participated in the

study [38] commented that “ID” of the object presented in the feature info was not

6 https://github.com/atmist/snazzy-info-window 7 https://github.com/yafred/leaflet-responsive-popup

13

informative, and knowing object type would be more beneficial. If this system-related

information is not meaningful to users, there is no need in including it in the feature

info. Frequent content updates must be carried out to ensure that users are supplied

with up-to-date information, and to avoid having missing data or broken links. Non-

technical explanations should be provided also for error messages, along with the

information about alternative ways for user to achieve the desirable goal/result [1].

Hennig and Vogler outlined content recommendations to guide feature info

design in web apps for teenage users [3]. The total of 5 recommendations were

derived through participatory design and focused on content requirements (e.g. youth-

specific language, multimedia) and its visual representation (labeling and highlighting

hyperlinks, high contrast between letters and background, different text size to

differentiate between title, headings, and text). Another research [39] also supports

simple language and avoiding technical jargon when presenting natural hazard

information to non-expert users. These two examples suggest that context of use is

crucial to feature info, and to evaluate mobile tourism systems it is necessary to

understand user’s travel behavior [40].

In the proliferating era of interactive technologies and big data, researchers

raise the question of useful integration of rich content into mobile maps [41]. It is no

longer what to tell, but rather how and why, and whether what is told relates to users

and adds value into their interaction with mobile map technologies.

Layout

One way to design feature info layout is according to structure design

guidelines from Skarlatidou [1]:

1. “Group content in a logical manner (information should be easy to find)

2. Textual information on different pages [feature info may be scrollable/have

tabs] should be grouped effectively and should be relevant to the context.

3. Titles, headings and subheadings should be meaningful and should help with

skipping paragraphs”.

Among many examples of feature info available on the Internet, it is possible

to delineate three common layout types: cards, table, and narrative (Figure 6). ESRI

14

has similarly proposed three feature info “display options” [16] that appear similar to

those proposed. Cards is an example of a completely custom layout where information

and action buttons are all shown separately as cards on a surface. Table is the simplest

form to display content since it only includes attribute names and values. Narrative

could be either information from a single attribute field or just text that surrounds the

attribute value, e.g. “Current water temperature [VALUE]”. The choice between these

types of layout should be made according to user needs and preferences. As mentioned

earlier, custom styling of feature info is often regarded as a mandatory. It must go

hand in hand with responsive sizing, which is essential in mobile context because

users access maps from a wide variety of devices.

(A) Cards (B) Table (C) Narrative

Figure 6. Common feature info layout types.

Current usability state of a feature info interface can be evaluated for each

dimension individually or together using human-computer interaction (HCI) research

methods [42]: interviews, camera studies, customer feedback, surveys,

questionnaires, usability testing, heuristic evaluation etc. Specific methods applied in

this thesis will be discussed in the next section. Collecting qualitative and quantitative

data through lab and field testing allows understanding user’s workflow with it,

finding usability defects and measuring precisely the impact these defects produce,

e.g. lowering efficiency or effectiveness. It is very common that researchers mix

methods in order to achieve their research goals [43]. Although mobile web

applications differ from native ones in a number of aspects, in terms of feature info

visual design and content presentation both can be easily compared.

https://cdn.dribbble.com/users/72215/screenshots/1156002/map-pin_1x.jpg

15

This overview of related work summarized usability principles of WebGIS

and mobile map applications, methods of evaluating the degree of compliance to these

principles, common usability problems associated with map applications and feature

info in particular. Content, as one of the feature info usability dimensions, is the most

extensively studied and described in academic literature, whereas interaction

technique, placement, and layout are generally subjects to experimenting and finding

optimal solutions for specific use cases. The rest of this thesis will be dedicated to

exploring these three dimensions and establishing specific design guidelines related

to them.

16

3. METHODOLOGY

Research methodology of this thesis was based on the framework for user-

centered design and evaluation of Web map-based applications (Figure 5) [17]. The

summary of research methods applied to answer each of the research questions is

presented in Table 1. Measurements and analyses carried out as part of the applied

methods are shown in Table 2. How these methods work together and why they were

a good choice is described below.

Table 1. Research methods used in this thesis

Research question # 1

(analyzing usability problems)

Research question #2

(creating design guidelines)

Heuristic

evaluation

X

User interview X

Literature review X

Questionnaire for

experts

X

Usability test X

Table 2. Summary of measurement and analysis types used in this thesis

Qualitative Quantitative

Measurements Questionnaires for users and

experts, comments and

feedback obtained in the

course of the user interview

The number of usability

problems found during

heuristic evaluation,

usability testing of prototypes:

task completion time and rate,

and SUS scores

Analysis Interpretations of

questionnaire responses,

comparative analysis of apps

reviewed in heuristic

evaluation

Comparative analysis of

heuristic evaluation results,

Statistical analysis of the

usability test results

17

The first research question, finding and analyzing feature info usability

problems, was to be answered by testing existing systems. A heuristic evaluation of

five mobile tourist applications was conducted by the author of this thesis along with

a semi-structured user interview where users evaluated one of the five applications -

the con terra app. The decision to mix two methods was made because heuristic

evaluation done by one evaluator allows finding only 20 to 51% of the usability

problems in an interface under study [44]. Thus, an interview with users was

conducted in order to find additional problems that could have been missed during the

heuristic evaluation and to explore how users perceive feature info.

Heuristic Evaluation

A heuristic usability evaluation is a fast way to understand the current usability

state of an interface by comparing it against a set of predefined usability principles or

“heuristics”. It is called “fast” because it does not necessarily require user

participation. The evaluation can be carried out by both usability specialists and non-

specialists, although the former tend to produce better results [45]. Some of the

heuristics for map-based services (Kuparinen [20], Komarkova et al. [24]) mentioned

in Related Work section were not applicable for feature info evaluation since they

were developed to assess an entire system and not just an individual interface. Hence,

generic Nielsen’s heuristic for user interface design [25] were chosen.

User Interview

Interviews is popular qualitative research method that is also used to evaluate

the usability of existing information systems [46]. In contrast to heuristic evaluation,

users take part in the interview and share their experience while interacting with the

system either by thinking aloud or filling out a post-interview questionnaire. During

the interview conducted in this research, users only interacted with the con terra app.

The main reason for this was that the app was not ready for deployment and could still

benefit from participatory design, i.e. user feedback would provide more details about

how feature info could be improved. Another goal of the interview was to understand

how people with cartographic/GIS background perceive feature info as opposed to

people without one.

18

The second research question, creating feature info design guidelines, was to

be answered by proposing recommendations that would help eliminate usability

problems identified while answering the first research question. While some problems

already had solutions available in academic literature, others lacked theoretical

backing. Then, it was decided to seek answers from best-practice examples by sending

a questionnaire to industry experts to get qualitative insights into how they approach

feature info design and development. Altogether, literature review and responses from

the questionnaire contributed to deriving feature info guideline concepts. Lastly, a lab-

based usability test was chosen to make conclusions regarding how guidelines

influence user’s efficiency, effectiveness, and satisfaction.

Literature Review

Literature review is an essential step in carrying out any research project [47].

The review of related work presented in the previous section showed that feature info

interaction design was an area where further research was needed. Once usability

problems were analyzed, another round of literature review was carried out this time

looking for specific solutions to specific problems. Supporting literature was also

found to back up expert opinions.

Questionnaire for Experts

Same as interviews, questionnaires are widely used for qualitative research of

information systems [46]. This method is moderately complex in its execution: first,

it requires creating a list of unique questions, second, recruiting participants, and

finally, analyzing obtained qualitative data that may come in different levels of detail.

Gable also reported that questionnaires may not provide deep insights into the studied

phenomena [48]. One particular challenge in the course of this thesis was designing

the questionnaire. It required a lot of modifications to ensure it was formatted properly

and questions were easy to understand.

19

Usability Testing

Engaging target users into usability testing is encouraged by UCD. By letting

them interact with prototypes, developers can identify early on if concepts work as

expected and user requirements are met. If concepts contain usability problems, then

prototypes require another iteration of design and testing. The goal of the usability

test in this thesis was to compare feature info interface prototypes before and after

applying the guidelines. To achieve this goal, methods of observation and a System

Usability Scale (SUS) questionnaire [49] were employed. Observations consisted of

tracking task completion time (i.e. efficiency) and rate (i.e. effectiveness). SUS score

was a measure of perceived ease of use. SUS is a post-study standardized

questionnaire that offers a number of advantages: objectivity, replicability,

quantification using mathematics and statistics, economical to use, the results are easy

to communicate, and, of course, scientific generalization [50]. In addition, the

questionnaire produces reliable results even with small sample sizes, does not require

any license fee, and the scores can be easily calculated by downloading a spreadsheet

[51].

Summing up, methods used in this thesis were selected based on the amount

of resources available, i.e. personal, human, financial, and temporal. Further detailed

explanations of how each method was applied are provided in the next sections.

20

4. ANALYZING FEATURE INFO USABILITY

This section is dedicated to answering the first research question posed in this

thesis - what usability problems occur when users interact with feature info in mobile

tourist applications? Research methods applied to answer this question are described

in depth together with the obtained results. The first subsection covers heuristic

evaluation. The second – user interview. Additionally, the section touches upon the

second research question and explains how some of the problems can be resolved.

This knowledge and how it can be acquired is described in subsection three dedicated

to questionnaire for experts.

4.1. Heuristic Evaluation

Participants. The evaluation was performed by one evaluator, the author of

this thesis, who was not a usability expert, however had several years of active

experience with mobile map applications.

Apparatus and Material. Heuristic evaluation of feature info interfaces was

carried out for five mobile map applications: con terra app, TripAdvisor, Foursquare,

Google Maps app, and mobile version of Google Maps website. The applications were

selected based on their: category – tourist app, popularity – with more than 10 million

downloads (it is hard to imagine that apps with bad usability would be popular), and

platform – native and Web-based. Three of the apps analyzed were native (Google

Maps, TripAdvisor, Foursquare) and two were web-based (mobile version of Google

Maps website and con terra app).

After selecting the applications, a list of tasks was defined to help the evaluator

get familiar with their feature info interfaces:

1. Find Cologne on the map and zoom in to view the city.

2. Select any point of interest (POI) on the map, open its feature info and

scrutinize background information and actions presented.

3. Repeat the previous step 20 times with other POIs randomly selected from the

map.

21

Nielsen’s heuristics for user interface design [25] were used to detect usability

problems and categorize them. The severity of problems was rated according to the

following scale [52]:

0 = I don't agree that this is a usability problem at all

1 = Cosmetic problem only: need not be fixed unless extra time is available on

project

2 = Minor usability problem: fixing this should be given low priority

3 = Major usability problem: important to fix, so should be given high priority

4 = Usability catastrophe: imperative to fix this before product can be released.

In addition to heuristic evaluation, feature info interfaces of the applications

were analyzed to obtain additional details:

interaction technique (e.g. tap or double-tap),

placement (top, bottom, or next to the feature),

percentage of the screen occupied when minimized,

available modes (minimized or maximized),

layout (table, cards, narrative),

content amount (level of detail, actions in maximized feature info),

context (temporal – e.g. “Open Now”, spatial – “0.5 km from current

location”) and help, as well as,

means of handling missing information (blank field, hidden field, or a

suggestion to contribute).

The first five items from this list above related to feature info design dimensions

introduced in Section 2.3.

Procedure. For each application, the evaluation took around two to three

hours. While carrying out the predefined tasks, the evaluator recorded feature info

usability problems and assigned each problem a severity score. After the evaluation

was completed, additional details were collected including required estimations, i.e.

percentage of screen occupied, amount of content offered. To identify the proportion

of the screen that was covered by feature info, the area in pixels occupied by feature

info was divided by the total area in pixels of the screen. Measurements were carried

out in GIMP 2.8.22 image manipulating program. To measure the amount of content

22

presented in feature info, level of detail and actions available were counted. This was

done only for maximized feature infos because minimized usually offered just feature

name, address, and rating.

Results. The summary of problems identified during heuristic evaluations is

shown in Table 3 (the numbers in each cell represent the amount of discovered issues

with regards to that specific heuristic).

Table 3. Problems found during heuristic evaluation of the apps

Con

terra

app

Mobile

Google

Maps

website

TripAdvisor Google

Maps

App

Foursquare

1. Visibility of system

status. 1

2. Match between

system and the real

world.

1 1

3. User control and

freedom. 4 1 1

4. Consistency and

standards. 4 1

5. Error prevention. 1

6. Recognition rather

than recall. 1

7. Flexibility and

efficiency of use. 2 2

8. Aesthetic and

minimalist design. 3 2 2

9. Help users recognize,

diagnose, and

recover from errors

1 1 1

10. Help and

documentation

Total number of errors 17 1 8 3 1

Major or catastrophic

problems 16 1 4 1 1

23

The full description of problems can be found in Appendix A. The greatest

number of usability defects, especially major and catastrophic, was found in the con

terra app. This result was expected since the application is only a demo product.

Among the released apps, TripAdvisor had more errors than Foursquare or Google

Maps (both the app and mobile website). Such outcome can be partially described by

the fact, that TripAdvisor offered the widest variety of content (Figure 7, Appendix

B) in comparison to the rest of the evaluated apps, and it might have been cumbersome

for developers to keep everything in order.

Because heuristic evaluation was conducted only by one non-expert evaluator,

some usability problems detected might have been misclassified. It was not seen as a

problem, because the goal of the evaluation was only to identify the problems and

Nielsen’s heuristics were used just for reference. There is also a possibility that some

problems detected were false positive.

A general trend among the analyzed apps shows that it takes one tap on the

map feature to open its feature info window in minimized mode, i.e. located at the

bottom of the map and covering a certain part of the map. Percentage of the screen

occupied by feature infos in minimized mode ranged from 10 (Foursquare) to 30%

(con terra app).

In four out of five apps, maximized feature info is presented in fullscreen mode

as a separate window that slides by swiping from left to right (TripAdvisor,

Foursquare) or from bottom up (Google Maps app, mobile version of Google Maps

website). In Google Maps app, it is also possible to view feature info in full-screen

mode by double-tapping on a map feature. In the con terra app, by tapping the

“maximize” icon in the upper right corner of the feature info, it does not maximize

into a fullscreen window, but moves from the bottom of the map closer to the selected

feature. As a result, it covers up a significant amount of the map and prevents from

viewing other POIs unless closed. It is worth noting, that in Google Maps certain

features with limited temporal extent (e.g. road construction) only have a minimized

feature info that presents the most relevant information about a feature (less than five

lines of text). In applications with feature info available in fullscreen mode

24

(TripAdvisor, Foursquare, Google Maps app, and mobile version of Google Maps

website) all information about a feature can be viewed by scrolling down the dialogue

window. Google Maps app and Foursquare also offer shortcut tabs that help users

access faster certain sections of the scrollable feature info window. Depending on the

operational layer that is viewed on the map (e.g. attractions, hotels, restaurants), the

layout of a feature info interface may change. Thus, the apps can be commended for

customizing the layout according to the content displayed.

Content and actions offered in the feature info interfaces deserve a separate

paragraph. If one chose to sort the apps analyzed based on the amount of content

offered (Appendix B) from the largest to the smallest, then he or she would get the

following result (Figure 7).

Figure 7. The number of attributes and actions shown in a single feature info

by apps studied in this thesis.

Con terra app currently provides only basic attribute information about POIs

in the form of text. On the other hand, Google Maps app and website, Foursquare, and

TripAdvisor altogether let users to:

view infographics, browse videos and photo gallery of the feature;

read, translate, filter, and write reviews;

email, call, share, save to favorites, and navigate to the feature;

check availability, make reservations and place orders;

open other websites to access real-time information;

3

17

30

35 36

C O N T E R R A A P P G O O G L E M A P S W E B S I T E ( M O B I L E

V E R S I O N )

F O U R S Q U A R E G O O G L E M A P S A P P

T R I P A D V I S O R

25

know average time spent at the feature and its popular times;

view upcoming events at the POI, other places located within the POI, and

also suggested similar POIs;

submit any missing information, suggest edits, and ask questions.

Each feature info provides minimum background information about the

feature, but enough so to allow users make decisions without accessing any second-

party sources, for example the feature’s official website. In crowd-sourced apps

(Google Maps, TripAdvisor, Foursquare) features located around the city center tend

to have more background information supplied by users (reviews, scores etc.), than

those on the periphery. This may be explained by tourists visiting only the most

popular places (usually around the city center) and sharing their experiences

afterwards.

When installed for the first time, none of the apps provide any tutorials or tips

on how to work with the map and the feature info. Developers, perhaps, assume that

by now tapping on a feature to retrieve more information is a conventional rule and

potential users of the app are expected to possess that knowledge.

4.2. User Interview

Participants. According to [44], having more than 5 evaluators allows finding

at least 75% of usability problems. The total of 6 users (age group: 20-30) took part

in the study (user demographics is presented in Table 4). None of the participants had

worked with the con terra app before. The study was approved by the Ethics

Committee of the Institute for Geoinformatics, University of Münster. Recruiting

participants and carrying out the study took one week.

Table 4. Demographic profile of user interview participants

Male Female

With GIS background 2 1

Without GIS background 1 2

Total 3 3

26

Apparatus and Material. Three tasks similar to those used during heuristic

evaluation were created to let users get acquainted with the con terra app:

1. Find Cologne on the map and zoom in to view the entire city.

Note: When the application is started, you will see markers on the map that represent

attractions and venues.

These markers altogether have been grouped into “Recreation” category. In addition

to this category, there are two others - Basic Data that shows city districts, boroughs,

and precincts; and Education and Culture that shows libraries, museums, schools.

Choose the category you want to view by clicking on the icon at the bottom

panel of the app.

2. Select any point of interest on the map (POI) and try to get the following

background information about it:

a) Name

b) Type

c) Address

3. Repeat the previous step 10 times with other POIs randomly selected on the

map.

While completing the tasks, users were requested to share their experience by

thinking out loud. Upon finishing, they were also requested to fill out a questionnaire

(Appendix C) that consisted of twelve open-ended questions designed by the author

of this thesis. Questions aimed at achieving the goals of this interview: recording

usability problems in the feature info of the con terra app, finding how users perceived

the feature info, and finding what users were missing in the feature info. Pilot

interview was conducted with one person, after which some questions were modified

for the sake of clarity.

Procedure. The interviews were held in a lab-based setting. At the start,

participants (or users) were requested to sign the informed consent. Then, they were

invited to get acquainted with the con terra app by performing the tasks. While users

were performing the tasks they were requested to think aloud and their comments

were recorded by the facilitator. After finishing the tasks, the participants were invited

to fill out the questionnaire. The responses have been anonymized and processed in

27

aggregate. Finally, usability problems detected during heuristic evaluation and user

interview were matched to eliminate duplicates.

Results. Users felt like feature info could benefit them by providing more

information about a single geographic entity, allowing to manipulate that information

through actions, and serving as an access point to new screens and interfaces that

would show even a deeper level of detail about specific aspects of interest. All users

indicated that they would like to view background information in an interactive way

because it could give better first impression of place and let them execute certain

actions right in the feature info (e.g. without having to copy the phone number and

paste in the dial screen). One user stated that he or she would like to customize feature

info to see only preferred content. Users were indifferent towards the layout of the

feature info and could not tell how recent the provided information was. They needed

the map often and five users shared that having minimized feature info still kept their

focus on the map, whereas fullscreen feature info would let them focus only on the

background information.

Four users liked the design of the feature info interface and especially that

external links were provided. However, there were more comments about particular

things they disliked, for instance the feature info was uncomfortable to use (icons were

difficult to select, scrolling area was too small, text font was too small); it did not

provide enough information (note: the app is only a demo); some did not understand

attribute names, and also they could not see the connection between the map feature

and its feature info. Participants also expressed what background information they

were missing: opening hours, pictures, distance from current location, prices,

popularity, contextual information (e.g. distance from current location or current

events at the venue).

The main result was recording six additional usability problems missed during

heuristic evaluation:

1. font size was too small;

2. the UI was difficult to understand;

28

3. “maximize” and “close” controls were small and located too closely to each

other – participants had problems using them;

4. system failed to respond when a feature was tapped on, however after zooming

in, it responded with opening a feature info;

5. missing information made table look incomplete; and, finally,

6. there was no visual cue to hint users that the feature info was scrollable.

4.3. Questionnaire for Experts

Participants. To find experts, LinkedIn8 was queried for specialists in UX,

front-end development, and usability, currently working in companies of mapping /

GIS industry, such as ESRI, Mapbox, CARTO, HERE, TripAdvisor, and Trivago, and

involved in the development of mobile apps. Out of eight prospect participants that

agreed to participate, only two submitted their responses. Recruiting participants and

collecting responses took three weeks. The study was approved by the Ethics

Committee of the Institute for Geoinformatics, University of Münster.

Apparatus and Material. The questionnaire (Appendix D) consisted of sixteen

open-ended questions that covered specific aspects related to feature info, such as

visual design, content, customization, and conducted usability studies. Questions were

designed in the way to obtain best-practice examples from mobile map application

and feature info development.

Procedure. After experts expressed their interest in participating, they were

provided with a consent form together with a questionnaire document, with a

submission deadline of two weeks. Once the responses were collected, they were

anonymized and processed in aggregate.

Results. Both respondents indicated that they approach feature info

development following user-centered design. One interviewee stated that “If the map

isn’t going to be critical for the user to get to the end goal, I make it a smaller feature

in the application, however if it is, I make it larger”. Visual design of feature infos in

different products usually remains the same and agrees with design guidelines

8 https://www.linkedin.com/

29

established by their respective companies. Feature info layout is chosen according to

the target audience, e.g. presenting background information as a table makes content

easy to scan and understand. However, a table may look too mechanical when it shows

“Walking duration: 1 minute 47 seconds” instead of “2-minute walk”.

With regards to feature info placement, if it is a feature users are expected to

use frequently, it is critical to make sure it is placed in a location that not only the user

can find, but can access quickly if need be. While one respondent suggested

experimenting in identifying optimal feature info shape, its dimensions and position

through user testing, another suggested trying to maximize available screen real estate,

prioritizing map view over feature info view, and taking into account reachability.

Any type of content can be presented in feature info as long as it is relevant to

the map feature, recent, and benefits the user. Providing dynamic context is important

because the feature info should be assisting users in real-time decision making. Also,

developers may want their app to be a “one-stop shop” providing the maximum

necessary information for users in order to support them in executing their tasks. Both

respondents also indicated that when designing feature info windows for mobile map

products, they only customize content presented in the feature info. One respondent

stated: “I haven’t come across a use case for personalizing the look of the feature info,

but of course there may be scenarios where this is needed”. Another argued that

“Giving users the ability to customize the look/content causes the user to potentially

lose focus of why they were there in the first place, which could cause a higher bounce

rate”. Suggested use cases where feature info customization might be relevant were

saving/bookmarking places and adding personal notes or comments, customizing

layout to access the most frequent actions/information, adding missing information,

i.e. flagging or suggesting an update.

Both experts indicated feature info discoverability as a main usability problem

many novice users face. Therefore, they suggested that having a feature info tutorial

or a walk-through during onboarding would benefit users.

Only two out of eight experts contacted, submitted their responses to the

questionnaire. This might have inhibited the author of this thesis from getting a deeper

30

understanding of how industry experts approach feature info design. In addition,

having more best-practice examples would allow producing even more specific

guidelines.

The results of the heuristic evaluation and user interview answered the first

research question and presented thirty-four unique usability problems in feature info

interfaces. The majority of those problems were the result of poor interaction design.

For some usability problems described in this section it was challenging to find

complete solutions in academic literature. Contacted usability experts shared their

opinions regarding how these and other problems they experienced could be resolved.

31

5. GUIDELINES FOR FEATURE INFO DESIGN

This section provides an answer to the second research question, i.e. how

solutions addressing these problems can be generalized into usability guidelines for

feature info design? It introduces the guidelines and explains them on a conceptual

level.

Feature info design guidelines that target specific usability defects are

presented in Table 5. Seven out of nine guidelines cover the “Design” aspect that is

related to usability dimensions (interaction technique, placement, and layout)

established in Section 2.3. The other two guidelines focus on “Content” and

“Awareness” (one for each category respectively). Guidelines:

# 2, #3, #5 were derived based on expert feedback;

#1 and #6 were derived based on existing solutions presented in studied

applications – Google Maps app, TripAdvisor, Foursquare;

#4, #7, #8, #9 were derived based on a combination of sources: expert

feedback or existing solutions further supported by research literature.

How each guideline was derived and what usability problem it addressed is further

elaborated below.

Table 5. Feature info design guidelines

Content

1. Provide context, e.g. measurement units for numerical values or relative rank of the

feature based on an attribute (e.g. area size or popularity), to help user understand

the relationship between the currently viewed feature and the rest of those presented

on the map.

Design

2. Choose feature info layout according to target audience. Users must decide and

prioritize what type of content they want to have in the feature info and how it should

be presented.

32

Table 5. Feature info design guidelines Continued

3. Avoid cramming more content by making minimized feature info window scrollable

and switch to maximized/full-screen window instead. The size of feature info should

be primarily guided by the amount of content it offers. Shape and dimensions of the

minimized feature info window must be chosen in a way that prioritizes map view.

4. When designing feature info interface, the control to return back to the map should

be clearly visible and touch-friendly.

5. Choose maximized feature info window to present interactive content because

interactive gestures - swipe, pan, or tap, may contradict those of the map.

6. To avoid selecting multiple features accidentally, cluster point features at small

scales and show them individually when zooming in; for polygon and line features,

make only labels selectable.

7. To ensure natural interaction, place minimized feature info window at the bottom

of screen.

8. Find a way to show the connection between the map and the feature info window

by bringing into focus the feature that was selected (e.g. change marker color / size).

Awareness

9. Feature info as a map tool struggles with the problem of discoverability. Provide a

tutorial or a walk-through during onboarding to let users know about it.

Guideline # 1: Providing measurement units and relative ranks. On a

mobile device, due to limited screen real estate it may be cumbersome to fit in the

map legend that displays maximum and minimum values and a measurement unit of

a layer currently displayed. When feature info is open, user will see the value of an

attribute at current feature without knowing the measurement unit or relative rank of

the attribute at this feature in comparison to other features (e.g. colder/bigger/more

populous than others). In tourist apps that were reviewed, e.g. features were always

ranked based on the ratings they receive from the people who visited them. It could

be a good practice to provide measurement units and a relative scale position of a

value characterizing a certain attribute in feature infos.

33

Guideline # 2: Choosing feature info layout. Six out of eight user interview

participants agreed that presenting background information formatted as a table makes

content easy to scan and understand. Especially when it comes to comparing

background information between several features. Knowing the target audience and

the type of content that will be displayed can definitely benefit the design process of

the feature info layout. When users need information urgently, having to process

narrative or long text may cause frustration, make user lose track and turn to other

sources for desired information. For advanced users of an app/system, table or cards

will be the fastest and easiest way to obtain information, often because they memorize

the names, measurement units, and order of the attributes in the feature info thanks to

their daily exposure to the map product they utilize. In other scenarios users might

prefer information presented in a natural conversational flow as if “offered by

Wikipedia” (quoted from one of the interview responses).

Ensuring that an attribute’s value can be fetched easily on demand, hence,

becomes the main task for the UX researcher. One way to make table look “friendlier”

is by experimenting with its visual design. Eliminating borders or making them subtler

may help drive more focus to the content. Certain terms used to describe attributes

may seem ambiguous or confusing, and providing context (text that surrounds the

attribute value, e.g. “You can fly your drone at [WIND SPEED VALUE] m/s”) will

make the interaction between users and the map app seem more natural. Another

option would be to use icons instead of words for certain commonly understandable

attributes (see Figure 8 below). By doing so, designers manage to achieve two goals

at the same time: keeping the design clean and intuitive and also saving screen real

estate. Icons created for any other attributes are suggested to undergo user testing to

ensure that they communicate the right information.

Figure 8. Google Maps uses icons to represent “Address” and “Open time”.

34

Guideline # 3: Choosing feature info window size. Another important aspect

is identifying the amount of content that will be presented and the need for a full-

screen feature info window. As one expert stated: “having a miniature feature info

window allows presenting the most relevant background information about a

geographic feature while still keeping the user’s focus on the map”.

According to Material Design, feature info definition is somewhat similar to

the “card”– “a sheet of material that serves as an entry point to more detailed

information” [53]. Material Design does not encourage making the card scrollable.

During user interview this rule was empirically proven by all users who participated

in the study and found it extremely difficult to scroll in a narrow space of the feature

info of the con terra app (users with “fat fingers” were frustrated the most). Moreover,

heuristic evaluation of the apps showed that none of the apps except the con terra app

allowed scrolling through minimized feature info window. If the amount of content

that needs to be presented in the minimized feature info window does not fully fit into

the window’s boundaries, instead of making it scrollable, expand it into a full-screen

window that can be scrolled internally. Vice versa, there is no need for full-screen

feature info window if no extra information is provided. To help users understand that

the feature info can be expanded into a full-screen window, a number of visual cues

can be implemented, such as animation (sliding in from the bottom would suggest that

the window is swipe-able); cropping content, or simply showing a “more info” button.

Alternatively, shortcut tabs can be offered to help users access certain sections of the

scrollable dialogue window faster, like in Google Maps or Foursquare.

Guideline # 4: Providing visible controls to close feature info. While

observing participants interacting with the con terra app during the user interview,

several of them had a problem closing the feature info. The reason for this could be

the fact that users of Android native apps were accustomed to using the system’s

“Back” button to exit an unwanted state. Applying the same action in a browser while

using a Web app, instead, returned users to a previously visited website. Thus, another

usability catastrophe was witnessed. When designing feature info windows, the

control to close them should be clearly visible and touch-friendly [2].

35

Guideline # 5: Choosing maximized feature info for interactive content.

All participants of the user interview wanted to see interactive content in the feature

info. When offering such content, designers should consider making it fullscreen,

because otherwise interactive gestures such as swipe/pan/tap may conflict with those

of the map. This practice is widely followed by apps evaluated during the heuristic

evaluation and also other mobile map apps (see Collector for ArcGIS example with a

form in Figure 9 below):

(A) (B)

Figure 9. Map (A) and Collect screen (B) interfaces of Collector for ArcGIS.

Guideline # 6: Making map features easy to select. Zoom level plays an

important role when users interact with the map and feature info. When multiple

features were located nearby (Figure 10), the app did not cluster feature markers,

making the map look cluttered.

Since the tap target size is usually considered to be 48 x 48 pixels, multiple

map features can fit into this square. Tapping on a feature marker at a small scale

sometimes opened feature info for another than selected map feature. Moreover, four

36

out of six users had problems with opening the feature info, i.e. system failed to

respond upon tap until they zoomed in to a larger scale. One way to tackle all these

issues would be to reduce marker overload by clustering and showing one cluster

marker with a number of features that belong to it. Tapping on a cluster marker should

bring map to a certain scale where each individual marker can be selected to view its

feature info separately.

Figure 10. Feature info window for two features. Currently displayed feature

is indicated by enumerator in the bottom right corner.

Finally, if two layers were displayed on the map at the same time (Figure 11),

e.g. a polygon and a point layer, and it happened so that a point was located within a

polygon, two users faced a situation when upon tapping the point, a feature info for

the polygon was shown instead and users were confused and unable to execute the

assigned task. This particular problem can be solved by placing a name label within

each polygon and making only the label clickable. Labels, of course, should be visible

only at a certain zoom level. In such way, even if there are point features within the

polygon, they can be selected individually to open their feature infos.

37

Figure 11. City districts and tourist attractions shown in con terra app.

Guideline # 7: Placing feature info to ensure natural interaction. Placing

feature info next to the selected feature can block a substantial area in the middle of

the map. User interview participants responded negatively to this while they were

using the con terra app. In general, users of mobile devices prefer to hold them in one

hand [54] and use that hand’s thumb for interaction. Thumbs can only reach so far and

limited thumb reachability narrows down the functional area of the screen (shown in

green in Figure 12). Keeping in mind these two ideas and also expert feedback, place

minimized feature info window at the bottom of screen to prevent it from blocking

the map and allow it to be reached easily.

38

Figure 12. Thumb reachability areas during one-handed interaction

with a mobile device [42].

Guideline # 8: Establishing mental connection between the map feature

and its feature info. If feature info is shown at the bottom of the screen, it is important

to provide visual distinction of the selected feature from the rest of those displayed on

the map, as done by TripAdvisor, Foursquare, and Google Maps. While listing the

aspects users liked the least in the con terra app, two users indicated that features were

difficult to distinguish between, and after certain amount of time they lost the track

which feature the currently displayed feature info window belongs to. Therefore, it is

highly important to show the link between the feature and its feature info window by

e.g. changing the color of the marker selected, dropping the shade, or increasing its

size (as suggested by users participated in the interview and [2]).

Guideline # 9: Supporting feature info discoverability. Both experts

indicated feature info discoverability as a main usability problem many novice users

face when working with mobile map apps. This claim was further supported by

Andrienko et al. [55] and by the fact that none of the tourist apps analyzed during the

heuristic evaluation provided any tips or hints on how to use feature info. Experts

commented that having a tutorial or a walk-through during onboarding might be

beneficial to users. While onboarding is quite common for native apps, product

developers must think carefully of how to implement it into Web apps. If every time

the link is clicked, a map opens up with an onboarding popup, users may get frustrated

with having to get rid of it. One solution could be having a “help” button on the map

that could provide tips for working with that map and its interactive tools.

39

6. EVALUATING GUIDELINES

How the proposed guidelines can affect a feature info interface was decided to

assess through a lab-based usability test. Due to the time constraint placed by the

deadlines of this thesis, only three out of nine guidelines were chosen for testing. In

addition, recruiting large sample of participants in short time appeared challenging,

therefore the test was designed to be within-group. The choice of guidelines was based

on the severity of problems that they were supposed to solve, and also on the fact that

the majority of users clearly expressed their frustration when they faced these

problems. The following hypotheses were proposed:

Hypothesis 1 - based on Guideline # 3: Maximized feature info design will

perform better than minimized window when serving user rich content:

Sub-hypothesis a: Long text

Sub-hypothesis b: Forms

Hypothesis 2 - based on Guideline #4: Visible control to close feature info

window will perform better than invisible.

Hypothesis 3 - based on Guideline # 8: The presence of visual feedback will

allow establishing and maintaining the mental connection between the selected feature

and its feature info window.

The effect that guidelines produce was assessed through performance and perception

measures: task completion time and rate, and SUS score.

Participants. Twenty participants (aged 20-30, 10 males and 10 females, 10

with GIS background) were recruited to take part in the usability test. Participants had

to have knowledge and experience of using mobile tourist applications. The study was

approved by the Ethics Committee of the Institute for Geoinformatics, University of

Münster. Recruiting participants and carrying out the test took two weeks.

Apparatus and Material. Selected guidelines were applied to redesign feature

infos of two applications: the con terra app and Google Maps. The former was chosen

because it was the source of usability problems that provided the basis for the

40

guidelines under study. Whereas the latter was chosen because of its popularity [56],

[57]. Having used it on a daily basis, users acquired a certain behavior where they

became accustomed to certain controls and layouts. It was of interest to observe how

users’ behavior would change after induced interface changes. The total of twelve

prototypes (Table 6) were created to test the hypotheses.

Table 6. The overview of conditions placed to produce prototypes

Prototype

#

App Stimuli

Hypothesis 1a

1. con terra app Small feature info

2. con terra app Fullscreen feature info

Hypothesis 1b

3. Google Maps app Small feature info

4. Google Maps app Fullscreen feature info

Hypothesis 2

5. con terra app Visible control to close small feature info

(“X” button)

6. con terra app Invisible control to close small feature info

(tapping outside feature info)

7. Google Maps

app

Visible control to close fullscreen feature info

(“Back to the map” button)

8. Google Maps app Invisible control to close fullscreen feature info

(use Android’s Back button)

Hypothesis 3

9. con terra app Presence of visual feedback for small feature info

10. con terra app Absence of visual feedback for small feature info

11. Google Maps app Presence of visual feedback for fullscreen feature

info

12. Google Maps app Absence of visual feedback for fullscreen feature

info

41

The prototypes were designed in Balsamiq Mockups9 v.3.5.15. Static

prototypes exported in PNG-format were transferred to a Samsung Galaxy S8 mobile

device and uploaded into POP 2.0 - Prototyping on Paper10 app to create interactive

prototypes by linking images with one another. Examples of prototypes are shown in

Figure 13.

Twelve tasks typical for tourist map applications (e.g. finding phone number,

ordering cinema tickets, browsing restaurants) were created for the test (Appendix E).

All tasks were designed to be independent from one another.

Observed data were recorded by the facilitator (the author of this thesis). Task

completion time was tracked using a simple stopwatch from the moment user started

interacting with the prototype until reaching a predefined goal. Completion was

recorded using binary digits: 1 - for success and 0 - for failure. Although SUS is a

post-study questionnaire, in this usability test, it was used to measure perceived

usability after each task. The reason for this, was that technically each prototype

represented a different [feature info] system. Original SUS questions were modified

by substituting “system” for “feature info” (Table 7). According to Lewis and Sauro

[58], such substitution does not affect the resulting scores.

Google Forms11 were used to collect and organize SUS data. Later, the scores

were calculated using the spreadsheet [51]. A pilot test was conducted with one

participant, after which some tasks were modified for clarity.

9 https://balsamiq.com/ 10 https://marvelapp.com/pop/ 11 https://www.google.com/forms/about/

42

(A)

(B)

43

(C)

(D)

Figure 13. Examples of prototyped feature info interfaces

(A, Prototypes # 1 and 2. B, Prototypes # 3 and 4.

C, Prototypes # 5 and 6, D. Prototypes # 9 and 10).

44

Table 7. The SUS version used in the usability test

Strongly Strongly

disagree agree

1 2 3 4 5

1. I think that I would like to use this feature info.

2. I found the feature info unnecessarily complex.

3. I thought the feature info was easy to use.

4. I think that I would need the support of a technical

person to be able to use this feature info.

5. I found the various functions in the feature info were

well integrated.

6. I thought there was too much inconsistency in this

feature info.

7. I would imagine that most people would learn to use

this feature info very quickly.

8. I found the feature info very cumbersome to use.

9. I felt very confident using the feature info.

10. I needed to learn a lot of things before I could get going

with this feature info.

Procedure. Participants were invited to participate in the test individually. The

test was conducted in a lab-based setting with one facilitator. Prior to starting the test,

an informed consent was collected from each participant. Following the explanation

of the test procedure, users were presented a practice prototype to get acquainted with

the test. Once they were ready to start, printed tasks were randomly mixed and users

drew one task at a time. After completing the task, users shared their experience by

filling out the SUS questionnaire. The executed task was then removed from the pool

to avoid having some tasks not performed. Before each experiment, all tasks were put

back together and shuffled to randomize their order and avoid learning effect. Average

test duration was 35 minutes.

Data analysis. Raw performance and perception data were reported using box

plots. Shapiro-Wilk Normality Test was performed to verify if collected data was

normally distributed (p < 0.05). Non-parametric Wilcoxon Signed-rank test was

performed to identify the effects of guidelines on task completion time and SUS

scores. This test was chosen because the general assumptions for parametric tests were

45

not met: some populations were not distributed normally and some were measured

through ordinal variables (SUS scores were based on Likert-type scale). Since task

completion data was categorical (1 or 0), McNemar’s test, a paired version of Chi-

square test, was applied to determine how guidelines affect completion rate. Spearman

correlation test was performed to identify the effect of GIS background on

participant’s performance and perception. Data analysis was performed in R Studio

Version 1.0.143. For Wilcoxon test, an additional package ‘coin’ [59] was installed

to address the problem of calculating the exact p-values because of ties.

46

7. RESULTS AND DISCUSSION

Prototypes 1 and 2. Fullscreen feature info demonstrated higher usability

when users had to work with long text. On average, applying the guideline reduced

task completion time by 15% and increased SUS score by 20% (Figure 14). Task

completion rate also decreased by 5% only because 1 out of 20 participants failed to

complete Task 2. The reason for failing was that the participant misunderstood the

task. The guideline # 3 was found to have insignificant effect on task completion time

(W = 143, Z = 1.42, p > 0.1, r = 0.22), but significant effect on task completion rate

( (1, N = 40) = 17.05, p < 0.001) and SUS score (W = 14.5, Z = -2.82, p < 0.005, r

= 0.45). Obtained results supported Hypothesis 1a.

Figure 14. Task completion time and rate, and SUS scores for Prototype 1

(before) and Prototype 2 (after) applying the guideline # 3.

Prototypes 3 and 4. Fullscreen feature info demonstrated higher usability also

when users had to work with a form. On average, applying the guideline reduced task

completion time by 32%, and increased task completion rate and SUS score by 10 and

38% respectively (Figure 15). The guideline # 3 was found to have significant effect

on all three: task completion time (W = 195, Z = 3.35, p < 0.001, r = 0.53), task

completion rate ( (1, N = 40) = 13.14, p < 0.001), and SUS score (W = 6, Z = -3.64,

p < 0.001, r = 0.58). Obtained results supported Hypothesis 1b.

47



Prototypes 5 and 6. Tapping outside small feature info to close it appeared to

be challenging for users in comparison to using visible “X” button. On average,

applying the guideline reduced task completion time by 42%, and increased task

completion rate and SUS score by 45 and 22% respectively (Figure 16). The guideline

# 4 was found to have significant effect on all three: task completion time (W = 196,

Z = 3.40, p < 0.001, r = 0.54), task completion rate ( (1, N = 40) = 9.09, p < 0.005),

and SUS score (W = 26.5, Z = -2.58, p = 0.01, r = 0.41).



48

Prototypes 7 and 8. It was natural for users to close feature info using Android

system’s “Back” button. Thus, introducing “Back to the map” button WITHIN

fullscreen feature info yielded smaller effect than described in the previous paragraph.

On average, applying the guideline reduced task completion time by 31%, and

increased task completion rate and SUS score by 5% and 13% respectively (Figure

17). The guideline # 4 was found to have significant effect on task completion time

(W = 180, Z = 2.8, p < 0.005, r = 0.44), task completion rate ( (1, N = 40) = 12.19,

p < 0.001), and SUS score (W = 36.5, Z = -2.13, p < 0.05, r = 0.38).



Overall, results obtained from testing Prototypes 5, 6, 7, and 8 supported

Hypothesis 2.

Prototypes 9 and 10. Because feature info was small and users could see the

map, it was very easy to point out the highlighted map feature after it was selected.

On average, applying the guideline reduced task completion time by 48%, and

increased task completion rate and SUS score by 65% and 57% respectively (Figure

18). The guideline # 8 was found to have significant effect both on task completion

time (W = 210, Z = 3.91, p < 0.001, r = 0.62) and SUS score (W = 0, Z = -3.86, p <

0.001, r = 0.61). It was also found to have insignificant effect on task completion rate

( (1, N = 40) = 1.09, p > 0.05).

49


(before) and Prototype 10 (after) applying the guideline #8.

Prototypes 11 and 12. Because feature info was fullscreen and needed to be

closed before returning to map view, it was more challenging to point out the map

feature that was selected. Sometimes it led to confusion because the feature info

window was already closed, but the marker was still highlighted. One user

commented: “I’d prefer seeing the marker highlighted before the [fullscreen] feature

info window comes up. Maybe highlight the marker first, and then after a short delay

make the [fullscreen] feature info window appear”. On average, applying the

guideline allowed reduced task completion time by 27%, and increased task

completion rate and SUS score by 25% and 16% respectively (Figure 19). The

guideline # 8 was found to have significant effect on task completion time (W = 170,

Z = 2.43, p = 0.01, r = 0.38), task completion rate ( (1, N = 40) = 5.76, p < 0.05),

and SUS score (W = 26, Z = -2.40, p < 0.05, r = 0.38). Another critical comment was:

“Changing only the color of the selected marker may not be obvious [because of lack

of contrast]. Changing color and making it bigger would be much better”.

50


(before) and Prototype 12 (after) applying the guideline #8.

Overall, results obtained from testing Prototypes 9, 10, 11, and 12 supported

Hypothesis 3.

The correlation between GIS experience and users’ performance and

perception was identified as weak (all r’s ≤ ±0.5). The functionality of the prototypes

was limited since they were only used as proof of concept. Fidelity may have affected

users’ perception and led to high standard deviation of SUS scores. The chosen

prototyping software (POP 2.0 - Prototyping on Paper app) may have affected users’

performance as it did not support scrolling and users had to tap when they wanted to

scroll. Nevertheless, users succeeded in completing the tasks and excluded this

shortcoming from consideration when evaluating the prototypes.

Summarising usability test results, all three guidelines (#3, #4, and #8)

appeared capable of improving the visualization and usability of feature info

interfaces. Several implications for designing feature infos were drawn. First,

maximized (or fullscreen) window size is recommended for displaying long text and

forms. Second, the salience of the control (or button) to close feature info is an

important factor in its interface design. Third, strong visual feedback proved to be

helpful in establishing a mental connection between a selected map feature and its

open feature info window. Although the application of guidelines in this usability test

51

demonstrated significant positive effect on user performance and perception, it is

worth reminding that the test was conducted in a lab-based environment. There is a

possible risk that unobserved normal performance could yield different results as

suggested by Lazar, Feng, and Hochheiser [42]. Another limitation comes from

participants’ demographic characteristics, i.e. all of them were university students of

the same age group. The results of the evaluation might have been different if other

user groups took part in the usability test.

Regardless of what type of control to open/close feature info is chosen; it

would be useful to demonstrate it and other core functionalities to user during

onboarding. Since feature info discoverability was noted as one of the biggest

usability problems, we suggest that further research prioritizes finding ways of

introducing the tool to users. Future work consists of concept testing the rest of the

proposed guidelines. Although the usability test was conducted using tourist

applications, it is also possible to apply established feature info guidelines to mobile

apps of other domains.

All results of this thesis are summarized in Table 8. Answers provided to both

of the research questions are an important contribution to the literature for two

reasons. First, because they facilitate closing the existing “interaction design” gap in

feature info design literature. Second, because they are intended for improving the

Table 8. Results obtained in this thesis linked to the research questions

Research question

# 1: What usability

problems occur when

users interact with feature

info in mobile tourist

applications?

#2: How solutions

addressing these

problems can be

generalized into usability

guidelines for feature info

design?

Main result 34 usability problems

related mostly to

interaction technique,

placement, layout

9 design guidelines with

7 of them focusing on

interaction design

52

usability of mobile maps and taking full advantage of the mobile technology

considering its limitations. These reasons were the motivation for this master thesis,

seen in Section 1.3. Although some ideas presented explicitly help the con terra app

(i.e. results of the participatory design), it is feasible to apply them to any other mobile

map application provided its feature info faces similar challenges and appropriate

adjustments are considered.

53

8. CONCLUSION

This thesis was dedicated to improving the usability of feature info interfaces

in mobile tourist map applications. Dimensions that affect feature info usability were

established. Existing general recommendations for feature info design from academic

and industry sources were consolidated.

The main contribution was nine feature info design guidelines that were

produced to tackle specific usability problems. The guidelines mostly focused on

interaction design of feature infos, an area that received little attention from research

community. In addition, the guidelines were tailored specifically for mobile devices

considering their technical particularities. The usability problems were detected

during heuristic evaluation of five systematically selected mobile tourist applications.

In addition, a user interview was conducted, where one of those five applications was

further scrutinized. Because certain problems lacked obvious solutions, two usability

experts were asked to share their experience of feature info development for mobile

map-based applications. Their responses, existing solutions in evaluated applications,

and supporting academic literature provided the basis for the guidelines.

Three out of nine guidelines were selected for concept testing and initial

evidence of their potential to solve usability problems was obtained. The concepts

produced a significant positive effect on feature info usability, i.e. reduced time

necessary to complete predefined tasks, increased chances of completing tasks

successfully, and were generally well received by the participants. The remaining six

guidelines should also undergo testing prior to being implemented in map products.

Although the guidelines were derived from and tested on tourist applications, they

could be applied to any other domain, provided they match design goals established

by mobile map developers. Once applied, an additional study could be carried out to

collect feature info usability data from a real-world session where users will interact

with a mobile map application unobserved (e.g. A/B testing). Another area for future

research could be feature info interfaces in mobile 3D maps.

54

REFERENCES

[1] A. Skarlatidou, T. Cheng and M. Haklay, "Guidelines for trust interface design

for public engagement Web GIS," International Journal of Geographical

Information, vol. 27, no. 8, pp. 1668-1687, 2013.

[2] I. Muehlenhaus, "Information Window Design," in Web Cartography: Map

Design for Interactive and Mobile Devices, Boca Raton, FL, CRC Press, 2013,

pp. 42-45.

[3] S. Henning and R. Vogler, "User-Centred Map Applications Through

Participatory Design: Experiences Gained During the ‘YouthMap 5020’

Project," The Cartographic Journal, vol. 53, no. 3, pp. 213-229, 2016.

[4] P. A. Longley, M. Goodchild, D. J. Maguire and D. W. Rhind, The Technology

of Problem Solving, 4th ed., Wiley Publishing, 2015.

[5] ISO 9241-210:2010, Ergonomics of human-system interaction — Part 210:

Human-centred design for interactive systems - Terms and definitions, 2010.

[6] J. Earthy, "Development of the usability maturity model," 30 September 1996.

[Online]. Available:

http://www.processforusability.co.uk/Documents/IN511T1.pdf. [Accessed 10

October 2017].

[7] R. Roth, R. Donohue, C. Sack, T. Wallace and T. Buckingham, "A Process for

Keeping Pace with Evolving Web Mapping Technologies," Cartographic

Perspectives, no. 78, pp. 25-52, 2015.

[8] Design Deck, "Map Pop Up (PSD)," 6 December 2011. [Online]. Available:

http://designdeck.co.uk/a/1241. [Accessed 29 September 2017].

[9] P. Merholz, "Google Maps UI - Some thoughts," 17 February 2005. [Online].

Available: http://www.peterme.com/archives/000454.html. [Accessed 12

January 2018].

[10] "Creating a Custom Popup - Google Maps JavaScript API," Google

Developers, 11 December 2017. [Online]. Available:

55

https://developers.google.com/maps/documentation/javascript/examples/overl

ay-popup. [Accessed 12 January 2018].

[11] ESRI, "View pop-ups," [Online]. Available: http://doc.arcgis.com/en/arcgis-

online/get-started/view-pop-ups.htm. [Accessed 15 9 2017].

[12] Agafonkin, Vladimir, "Leaflet Quick Start Guide," 2017. [Online]. Available:

http://leafletjs.com/examples/quick-start/. [Accessed 30 September 2017].

[13] CARTO, "CARTO Editor - Maps - CARTO Documentation," [Online].

Available: https://carto.com/docs/carto-editor/maps/#infowindows. [Accessed

15 9 2017].

[14] Mapbox, "Attach a popup to a marker instance," [Online]. Available:

https://www.mapbox.com/mapbox-gl-js/example/set-popup/. [Accessed 30

September 2017].

[15] The OpenLayers Dev Team, "Popup," [Online]. Available:

https://openlayers.org/en/latest/examples/popup.html. [Accessed 30 September

2017].

[16] ESRI, "Designing Web Map Pop-ups," 10 July 2012. [Online]. Available:

http://storymaps.esri.com/downloads/designingwebmappopups.pdf. [Accessed

10 July 2017].

[17] D. Schobesberger, "Integrating User and Usability Research in Web-Mapping

Application Design," in Modern Trends in Cartography. Lecture Notes in

Geoinformation and Cartography, J. Brus, A. Vondrakova and V. Vozenilek,

Eds., Springer International Publishing, 2015, pp. 147-158.

[18] K. Zickuhr, "Location-Based Services," Pew Research Center, 12 September

2013. [Online]. Available: http://www.pewinternet.org/2013/09/12/location-

based-services/. [Accessed 5 February 2018].

[19] R. Budiu, "Mobile User Experience: Limitations and Strengths," Nielsen

Norman Group, 19 April 2015. [Online]. Available:

https://www.nngroup.com/articles/mobile-ux/. [Accessed 5 February 2018].

56

[20] L. Kuparinen, "Validation and Extension of the Usability Heuristics for Mobile

Map Applications," in International Conference on Cartography and GIS

(6ICC&GIS), Albena, Bulgaria, 2016.

[21] R. Unrau, M. Ostkamp and C. Kray, "An Approach for Harvesting, Visualizing,

and Analyzing WebGIS Sessions to identify usability issues," in Proceedings

of the ACM SIGCHI Symposium on Engineering Interactive Computing

Systems, Lisbon, Portugal, 2017.

[22] G. Chang and L. Caneday, "Web-Based GIS in Tourism Information Search:

An analysis of the effect of socioeconomic characteristics on perception and

behavior," Society and Leisure, vol. 35, no. 1, pp. 155-17, 2012.

[23] G. Chang and L. Caneday, "Web-based GIS in tourism information search:

Perceptions, tasks, and trip attributes," Tourism Management, vol. 32, no. 6, pp.

1435-1437, 2011.

[24] J. Komarkova, O. Visek and M. Novak, "Heuristic evaluation of usability of

GeoWeb sites," in Web and wireless geographical information systems, Berlin

Heidelberg, Springer Verlag, 2007, pp. 264-278.

[25] J. Nielsen, "10 Usability Heuristics for User Interface Design," Nielsen Norman

Group, 1 January 1995. [Online]. Available:

https://www.nngroup.com/articles/ten-usability-heuristics/. [Accessed 25

October 2017].

[26] D. Egginton, O. Turner and T. Wicks, "Common Usability Issues within Web

GIS for Public Information Provision," in The 22nd GIS Research UK

(GISRUK) Conference, Glasgow, UK, 2014.

[27] A.-M. Nivala, S. Brewster and L. T. Sarjakoski, "Usability Evaluation of Web

Mapping Sites," The Cartographic Journal, vol. 45, no. 2, pp. 129-138, 2008.

[28] T. Zhang, N. Kong and I. Stonebraker, "Usability Metrics of Web-based

Mapping Applications," in Digital Library Federation Forum, Atlanta, GA,

2014.

57

[29] R. E. Roth and A. M. MacEachren, "Geovisual analytics and the science of

interaction: an empirical interaction study," Cartography and Geographic

Information Science, vol. 43, no. 1, pp. 30-54, 2016.

[30] E. Park and J. Ohm, "Factors influencing users’ employment of mobile map

services," Telematics and Informatics, vol. 31, no. 2, pp. 253-265, 2014.

[31] A. Hussain, E. Mkpojiogu and M. Yusof, "Perceived usefulness, perceived ease

of use, and perceived enjoyment as drivers for the user acceptance of interactive

mobile maps," in AIP Conference Proceedings, vol. 1761, F. A. A. Nifa, M. N.

M. Nawi and A. Hussain, Eds., Kedah, Malaysia, AIP Publishing, 2016, p.

020051.

[32] A. Garcia, C. Camacho, M. Bellenzier, M. Pasquali, T. Weber and M. Silveira,

"Data Visualization in Mobile Applications: Investigating a Smart City App,"

in Human-Computer Interaction. Interaction Platforms and Techniques. HCI

2016. Lecture Notes in Computer Science, M. Kurosu, Ed., Cham, Springer,

2016, pp. 285-293.

[33] J. Doyle, M. Bertolotto and D. Wilson, "Multimodal interaction-improving

usability and efficiency in a mobile GIS context," in First International

Conference on Advances in Computer-Human Interaction, Sainte Luce,

Martinique, 2008.

[34] J. Feng and Y. Liu, "Intelligent Context-Aware and Adaptive Interface for

Mobile LBS," Computational Intelligence and Neuroscience, pp. 5-15, 2015.

[35] C. Villamor, D. Willis and L. Wroblewski, "Touch Gesture Reference Guide,"

15 April 2010. [Online]. Available:

https://static.lukew.com/TouchGestureGuide.pdf. [Accessed 7 February 2018

].

[36] Google LLC, "Info Windows - Google Maps JavaScript API - Google

Developers," 11 December 2017. [Online]. Available:

https://developers.google.com/maps/documentation/javascript/infowindows.

[Accessed 7 February 2018].

58

[37] R. Adams, "Decision and stress: cognition and e-accessibility in the information

workplace," Universal Access in the Information Society, vol. 5, no. 4, pp. 363-

379, 2007.

[38] N. Ekroth and J. Lennartsson, "Web-based Multicriteria Decision Analysis and

Visualization for Reinvestments in Power Networks," 2017. [Online].

Available: http://www.diva-

portal.org/smash/get/diva2:1119331/FULLTEXT01.pdf. [Accessed 21

October 2017].

[39] P. Haimes, T. Baba and S. Medley, "Mobile map applications and the

democratisation of hazard information," in SIGGRAPH Asia 2015 Mobile

Graphics and Interactive Applications, Kobe, Japan, 2015.

[40] C. Lamsfus, D. Wang, A. Alzua-Sorzabal and Z. Xiang, "Going mobile:

Defining context for on-the-go travelers," Journal of Travel Research, vol. 54,

no. 6, pp. 691-701, 2015.

[41] L. Meng, "The State of the Art of Map-Based Mobile Services," in Map-based

Mobile Services. Lecture Notes in Geoinformation and Cartography, L. Meng,

A. Zipf and S. Winter, Eds., Berlin, Heidelberg, Springer, 2008, pp. 1-12.

[42] J. Lazar, J. Feng and H. Hochheiser, Research Methods in Human-Computer

Interaction, 2nd ed., Morgan Kaufmann, 2017, pp. 39-40.

[43] K. van Turnhout, A. Bennis, S. Craenmehr, R. Holwerda, M. Jacobs, R. Niels,

L. Zaad, S. Hoppenbrouwers, D. Lenior and R. Bakker, "Design patterns for

mixed-method research in HCI," in Proceedings of the 8th Nordic Conference

on Human-Computer Interaction: Fun, Fast, Foundational (NordiCHI '14),

New York, NY, USA, 2014.

[44] J. Nielsen and R. Molich, "Heuristic evaluation of user interfaces," in

Proceedings of the SIGCHI conference on Human factors in computing

systems, Seattle, 1990.

[45] J. Nielsen, "Finding usability problems through heuristic evaluation," in

Proceedings of the SIGCHI conference on Human factors in computing

systems, Monterey, 1992.

59

[46] M. D. Myers, "Qualitative research in information systems," Management

Information Systems Quarterly, vol. 21, no. 2, pp. 241-242, 1997.

[47] J. Webster and R. T. Watson, "Analyzing the past to prepare for the future:

Writing a literature review," MIS quarterly, vol. 26, no. 2, pp. xiii-xxiii, 2002.

[48] G. Gable, "Integrating case study and survey research methods: an example in

information systems," European journal of information systems, vol. 3, no. 2,

pp. 112-126, 1994.

[49] J. Brooke, "SUS: A ‘quick and dirty’ usability scale," in Usability Evaluation

in Industry, P. W. Jordan, B. Thomas, B. A. Weerdmeester and I. L.

McClelland, Eds., London, Taylor & Francis, 1996, pp. 189-194.

[50] J. Sauro and J. R. Lewis, "Standardized Usability Questionnaires," in

Quantifying the user experience: Practical statistics for user research,

Cambridge, MA, Morgan Kaufmann, 2016, pp. 185-186.

[51] T. Tullis and B. Albert, "Measuring the User Experience," 25 September 2017.

[Online]. Available: http://www.measuringux.com/SUS_Calculation.xls.

[Accessed 28 December 2017].

[52] J. Nielsen, "Severity Ratings for Usability Problems," Nielsen Norman Group,

1 January 1995. [Online]. Available: https://www.nngroup.com/articles/how-

to-rate-the-severity-of-usability-problems/. [Accessed 26 09 2017].

[53] Google LLC, "Cards - Components - Material Design," [Online]. Available:

https://material.io/guidelines/components/cards.html. [Accessed 10 November

2017].

[54] A. Karlson, B. Bederson and J. SanGiovanni, "AppLens and launchTile: two

designs for one-handed thumb use on small devices," in Proceedings of the

SIGCHI conference on Human factors in computing systems, Portland, Oregon,

USA, 2005.

[55] N. Andrienko, G. Andrienko, H. Voss, F. Bernardo, J. Hipolito and U.

Kretchmer, "Testing the Usability of Interactive Maps in CommonGIS,"

Cartography and Geographic Information Science, vol. 29, no. 4, pp. 325-342,

2002.

60

[56] "Top Apps Charts," Apple Inc., 2017. [Online]. Available:

https://itunes.apple.com/story/id1297105905. [Accessed 15 December 2017].

[57] "Bleibe zielsicher auf Kurs – zuhause und weltweit," Google Play, 19 October

2017. [Online]. Available:

https://play.google.com/store/apps/topic?id=editorial_navigation_and_maps_d

e. [Accessed 15 December 2017].

[58] J. Lewis and J. Sauro, "The factor structure of the System Usability Scale," in

Human Centered Design, HCII 2009, M. Kurosu, Ed., Heidelberg, Germany,

Springer-Verlag, 2009, pp. 94-103.

[59] T. Hothorn, K. Hornik, M. A. van de Wiel, H. Winell and A. Zeileis, "coin:

Conditional Inference Procedures in a Permutation Test Framework," 28

November 2017. [Online]. Available: https://cran.r-project.org/package=coin.

[Accessed 15 January 2018].

[60] W. Visser, The Cognitive Artifacts of Designing, Mahwah, NJ, USA: Lawrence

Erlbaum Associates, 2006.

61

APPENDIX

A. List of usability problems detected during heuristic evaluation

Con terra app Mobile Google Maps

website

TripAdvisor Google Maps Foursquare

Visibility of system

status.

Text can’t be seen fully,

because feature name takes

up the majority of space

(Severity: 4)

Match between system

and the real world.

Ambiguous attribute names

(Severity: 4)

Use of terminology (e.g.

"GreenLeader Bronze")

without provided

explanation

(Severity: 2)

User control and

freedom.

“Close” button is too small

and touch unfriendly

(Severity: 3)

When accidentally pressing

the "Review" button, there

is no way to discard a

review, only submit

(Severity: 2)

When trying to continue

reading “About” section,

the app takes you to

“Describe this place”

window

(Severity: 4)

"Maximized" windows

covers the map and offers

less space to view feature

info than the "minimized"

one (Severity: 3)

Tiny scrolling area in

feature info allows user to

view only one line of text at

a time (Severity: 4)

When feature info window

is maximized, it’s

impossible to scroll down

because the header takes up

all available space

(Severity: 4)

62

Consistency and

standards.

Mix of German and English

words (Severity: 4)

“Nearest” station is not

available for all landmarks.

Only for those around

Cologne Central station

(Severity: 3)

Feature Info is not available

for all POIs (no feedback

upon touch) (Severity: 4)

Misspelling (Severity: 3)

Missing spaces or dashes

between words

(Severity: 3)

Error prevention. Directions button does

not work at all

(Severity: 4)

Recognition rather than

recall.

When selecting a feature, it

is impossible to distinguish

between the selected and

the rest of the features.

User has to remember what

feature was selected when

going from feature info

dialogue back to the map

(Severity: 4)

Flexibility and efficiency

of use.

Context is ambiguous:

some polygons have an "%

of the total area" field - is

total area the precinct or

city? (Severity: 3)

It is possible to get lost

within "About" map view

(you are presented with a

map and a minimized

feature info, once feature

info is clicked, you return

into the same position you

were previously at. But to

return to the general map

with all features on it, the

user will have to click the

“back” button three times

(Severity: 3)

63

The menu in the bottom

right corner of feature info

is somewhat hidden. It’s

not clear what "1 of 3"

means: pages / features?

(Severity: 3)

Same problem (as

described above) with the

"Address" field

(Severity: 3)

Aesthetic and minimalist

design.

Very little information

presented

(Severity: 3)

“Nearest” station – you

expect to see one station,

but instead you have a

“forward” button that

shows you a list comprised

of only one station in a

strange way

(Severity: 3)

When in the “Photos” tab,

"Videos" are among one of

the subtabs. Confusing

name.

(Severity: 2)

Heading has very large

margins – wasted space

(Severity: 4)

Different visual design of

feature info for every

operational layer

(Severity: 0)

Slightly different design of

feature info for different

operational layers

(Severity: 0)

Feature name is broken into

multiple lines because

doesn’t fit the text box size

(Severity: 4)

Help users recognize,

diagnose, and recover

from errors

Missing information in

some fields and no

indication that it is

missing/when it will be

added

(Severity: 4)

When no feature info for a

POI is available, a feature

info for a previously viewed

POI is shown (Severity: 4)

Missing information about

some POIs (no About field)

(Severity: 2)

Help and documentation.

Total number of errors

found

17 1 8 3 1

Major or catastrophic

problems:

16 1 4 1 1

64

B. Level of detail and actions offered in feature info in evaluated

mobile applications

Google

Maps

Mobile version

of

Google Maps

website

TripAdvisor Foursquare con terra

app

Level of detail

Address Yes Yes Yes Yes Yes

Open hours Yes Yes Yes

Type Yes Yes Yes Yes Yes

Photos Yes Yes Yes Yes

Videos Yes Yes

Review highlights Yes Yes Yes Yes

Review summary Yes Yes Yes Yes

Reviews Yes Yes Yes Yes

Rank Yes Yes Yes Yes

Rating categories Yes Yes

Popular times Yes Yes

Phone Yes Yes Yes Yes

Email Yes

Website Yes Yes Yes Yes Yes

Social media Yes

Similar place suggestions Yes Yes Yes

Nearest station Yes

About Yes Yes Yes

Suggested duration Yes Yes

Questions and answers Yes Yes

Recently viewed Yes

Accessibility Yes

Amenities Yes

Crowd Yes

Integration with other

websites Yes Yes

Upcoming events Yes

65

Features within the currently

viewed Yes

Actions

Directions Yes Yes Yes Yes

Call Yes Yes Yes Yes

Leave a review Yes Yes Yes

Add more information Yes Yes Yes

Add to a list Yes Yes Yes Yes

Check in Yes

Rate Yes Yes Yes

Add photo Yes Yes Yes

Filter photos Yes Yes Yes

Sort photos Yes

Upvote photo Yes

Add tag to photo Yes

Search reviews Yes

Translate reviews Yes Yes

Filter reviews Yes Yes

Sort reviews Yes

Share reviews Yes

Upvote reviews Yes Yes Yes Yes

Make reservations Yes

Ask question Yes Yes

Answer question Yes Yes

Upvote question Yes Yes

Share Yes Yes

Save to favorites Yes

Total 35 17 36 30 3

66

C. User questionnaire

Please answer the questions below in the corresponding answer boxes.

1. Feature Info is a dialogue window that displays background information

about any selected POI. How can feature info help when retrieving additional

background information about single geographic entities?

2. List any issues that you encountered while working with the feature info

window.

3. How did you like the design of the feature info window interface?

4. How did you like that the background information was presented as a table?

5. How would you describe your experience using the feature info window

interface? What aspects appealed to you the most and the least?

6. Why do you think feature info windows should have maximized and

minimized options?

7. How often did you need the map in this application?

8. What will you choose: viewing all markers on the map or having a list of

objects sorted based on proximity to you? Please explain your choice.

9. What information was missing in the feature info windows you browsed?

10. How does the app provide context for the information presented in the feature

info window?

67

11. Why would you want to view background information in an interactive way?

E.g. as infographics. Feel free to list your own examples.

12. When was the last time the background information was updated?

68

D. Expert questionnaire

Please answer the questions below in the corresponding answer boxes.

1. When designing mobile map-based apps, do you implement user-centered

design approach? How?

2. When designing mobile map apps for your clients, do you create custom

feature info windows based on their needs? Are they custom only in content

presented or also in visual design?

Part 1: Visual design

3. What kind of issues do you face when designing a feature info for mobile

apps? E.g. screen real estate in mobile devices

4. Do you think users should be given freedom to customize the look and/or

content of the feature info window? Why?

5. Have you faced situations when map is better and when feature list is better?

6. How do you judge the optimal settings for the following design elements of

the feature info for mobile devices (smartphones):

a. Shape

b. Shape dimensions (size or percentage of the map covered)

c. Position (top, bottom, next to the selected feature)?

7. Is it always necessary to have a full-screen (maximized) mode for the feature

info?

8. How do you emphasize the feature info to attract users’ attention?

69

Part 2: Content

You may answer the questions below in relation to your most recent project that

involved the design of feature info.

9. How do you identify minimum necessary background information to be

displayed in the feature info window?

10. How much functionality should feature info window have?

11. What content types other than text, hyperlinks, and image files do you

incorporate into feature info?

12. Do you think textual information should be presented in the form of table

(see example below) or narrative? Please explain your opinion.

e.g. City: Moscow

Population: 10 million

13. Why do you think providing context in the feature info is important? (e.g.

min and max values, time reference – “closed now”, distance to the POI

from user’s current location).

14. Is there any specific hierarchy in which content should be presented?

Part 3: Usability

15. Have you ever conducted any usability studies for feature info window

interface in mobile map-based applications? Please describe most common

problems / insights of these studies.

16. What issues can users encounter when they are trying to view background

information in mobile map-based applications?

70

E. Tasks designed for prototype usability test

Prototype Task description

1. You want to call the LWL museum to ask about current exhibition.

Please use the app to find the telephone number of LWL museum.

2. You are thinking about visiting the LWL museum but would like to

check it’s rating first. Please use the app to find the review score.

3. You and your friend want to go to Cineplex movie theater and watch

Jumanji: Welcome to the Jungle at 17:00. Please use the app to

reserve tickets.

4. You and your friends want to go to Cineplex movie theater and watch

Jumanji: Welcome to the Jungle at 23:00. Please use the app to

reserve tickets.

5. You want to go to a wine bar. There’s only one bar open right now.

Is it a wine bar? If not, close the window.

6. You want to go out for beers. There’s only one bar open right now.

Do they serve craft beer? If not, close the window.

7. You want to have dinner at a Korean restaurant. There’s only one

restaurant open right now. Do they serve Korean cuisine? If not, close

the window.

8. You want to have dinner at a Russian restaurant. There’s only one

restaurant open right now. Do they serve Russian cuisine? If not,

close the window.

9. You want to go to a night club. Pick one of the clubs on the map and

check it out. After you done, please look back at the map. Can you

point to the exact club that you picked?

10. You want to go to a night club. Pick one of the clubs on the map and

check it out. After you done, please look back at the map. Can you

point to the exact club that you picked?

11. You are located at Komodienstrasse. Browse souvenir shops and pick

one that is located on the same street. After that please return back to

the map. Can you point to the exact shop that you picked?

12. You are located at AlterMarkt. Browse souvenir shops and pick one

that is located on the same street. After that please return back to the

map. Can you point to the exact shop that you picked?

71

F. Declaration of Academic Integrity

I hereby confirm that this thesis on “Feature Info – Improving the visualization and

usability of GIS background information in the context of a mobile tourist

application” is solely my own work and that I have used no sources or aids other than

the ones stated.

All passages in my thesis for which other sources, including electronic media, have

been used, be it direct quotes or content references, have been acknowledged as such

and the sources cited.

13.02.2018,

___________________________________________

(date and signature of student)

I agree to have my thesis checked in order to rule out potential similarities with other

works and to have my thesis stored in a database for this purpose.

13.02.2018,

___________________________________________

(date and signature of student)