How to design a visually working map mashup?

Text: Jari Korpi

A map mashup is a typical modern map in which thematic data is displayed on top of the background map. This thematic data can be material of the owner of the mashup, whereas the background map often comes from another party. It can be a commercial party, such as Google, or a community, such as OpenStreetMap. This type of a map offers a relatively easy way to visualise geographic information, as the background map is readily available, and all that needs to be done is to visualise the thematic layer.

However, not everyone focuses on the visual design of thematic layers. This leads to clumsy maps, even though the data and technical implementation were otherwise impeccable. By putting a little more into it, a significant leap could be taken in terms of usability. This would ensure that information reaches its user and the map offers a good user experience.

I focused on challenges in the design of thematic layers in my last year’s dissertation in which I studied design problems from the viewpoints of graphic design and human perception. My strategy was to apply the visualisation principles of conventional cartography, cognitive ergonomics, perception psychology and computer science to map mashups. In practice, I tested hypotheses derived from previous research using user tests. The results hinted at simple solutions to improve the usability of map mashups.

Map mashups can be used for various purposes. Different design challenges are typical when designing different kinds of maps. Three of these challenges are briefly described below: symbol design, congestion control and the visualisation of highlighted objects.

Symbol design has an impact on the information content of a single symbol

If the number of objects on a map is limited and the map does not include many functions, symbol design is the most important factor that affects the usability of map mashups. General quality factors applied to symbols define their functionality in all operating environments. As map symbols are small, they need to be simple and stand out from the background map. Symbols should also form a coherent set, while individual symbols should be easily distinguishable from one another.
 
Map symbols can be roughly divided into abstract and pictographic symbols. Abstract symbols are geometric shapes, in which case map users need to use the legend to interpret them. Pictographic symbols try to resemble the object they represent, in which case their meaning can be deduced. Therefore, pictographic symbols can represent objects more intuitively, while they have much more design challenges than abstract symbols.

When using pictographic symbols, focus should be placed not only on factors that define the appearance of the symbols, but also on semantic factors that define how easily each symbol can be interpreted correctly. In addition to effectiveness, aesthetic factors determine how highly users regard the symbols and the entire map.

In addition to general quality factors, the intended users need to be taken into consideration, as the interpretation of pictographic symbols, in particular, depends highly on the culture, and people with different cultural back- grounds may interpret individual symbols in different ways. Multicultural environments, such as international crisis management operations where participants come from highly different backgrounds, present another challenge.

Congestion control is essential when data volumes are high

When a map includes many objects, the map easily gets congested and symbol design loses its significance, unless congestion is under control. On a normal digital map, the data volume and the presentation method are controlled when the scale changes using automated generalisation operators that remove, transfer, simplify and aggregate objects. In this way, users can always view an understandable map.

In general information visualisation domain information is largely visualised using the same methods as those used in cartography. However, information visualisation applications provide users with interactive tools, using which they can freely edit different views. In addition, objects can be animated or the background map can be stretched so that the most congested areas are enlarged. As a map mashup is both a map and an information visualisation app, both of these congestion control approaches are feasible. Congestion control is always a compromise, and different methods have their pros and cons.

 Sports locations in the Helsinki region visualised on a map using pictograms. Even though the symbols can be interpreted without any legend, this interpretation is not always unambiguous
 Sports locations in the Helsinki region visualised on a map using pictograms. Even though the symbols can be interpreted without any legend, this interpretation is not always unambiguous

 

All sports locations visualised on a background map. There are so many objects that information gets congested.
All sports locations visualised on a background map. There are so many objects that information gets congested.

 

An example of a user interface in which the user has highlighted their pre-defined favourite locations. The highlighting method used has a significant impact on the usability of maps.
An example of a user interface in which the user has highlighted their pre-defined favourite locations. The highlighting method used has a significant impact on the usability of maps.

 

For example, high congestion cannot be resolved simply by displacing symbols, and some data can be lost by aggregating different objects. This means that no single method is considered better than another. The correct solution must be identified in each individual situation.

Visualisation of highlighted symbols is essential in terms of usability

Highlighting symbols in different views is a key feature in interactive user interfaces. When an object or a group of objects is selected in a one view, similar objects will also be highlighted in other views. In interactive map interfaces, highlighting can be used to visualise a selection of objects. For example, a user may be allowed to highlight service stations that sell fuel below a user-defined price on a map. This is not a big thing to design but, if a little effort is put into it, it makes the interactive map easier to use.

From the viewpoint of perception, the purpose of highlighting objects is to help to distinguish them from other objects and to guide attention towards them. This can be done by increasing the visual value of highlighted objects, by decreasing the visual value of other objects, or by adding a visual element that visually groups highlighted objects.

 

Not even good data results in a highquality map if the visuals aren’t right.

 

An optimal difference between the visual values of highlighted and other objects is a key factor in terms of the effectiveness of highlighting. This can be done by editing attention-guiding visual variables, such as the symbol size or colour brightness. Of course, the appearance of symbols has an impact on what method to select. For example, if symbols are already visually powerful, dimming other objects is a better solution than increasing the visual value of highlighted symbols even further.

 

Article in pdf >>
Positio 2/2019 table of contents >>