Practices and Strategies in Responsive Thematic Map Design: A Report from Design Workshops with Experts

TL;DR

The paper tackles the problem of making thematic maps responsive across devices, a task complicated by fixed map aspect ratios, variable spatial unit sizes, and data density. It employs three preliminary expert interviews and eight sandboxed 1:1 design workshops with experienced map designers to extract practical challenges and design solutions, culminating in 17 strategies organized into four groups. The core contributions are a hierarchical, map-specific design framework (S1–S4) and an illustrated cheat sheet for practitioners, plus a discussion of tool support needs and future validation through user studies. The work advances usable, actionable guidance for designers of responsive thematic maps and highlights gaps between generic responsive visualization methods and cartographic requirements, with implications for education and visualization tooling. The online cheat sheet provides a concrete, accessible resource to enhance real-world design practice and testing across device types and screen sizes.

Abstract

This paper discusses challenges and design strategies in responsive design for thematic maps in information visualization. Thematic maps pose a number of unique challenges for responsiveness, such as inflexible aspect ratios that do not easily adapt to varying screen dimensions, or densely clustered visual elements in urban areas becoming illegible at smaller scales. However, design guidance on how to best address these issues is currently lacking. We conducted design sessions with eight professional designers and developers of web-based thematic maps for information visualization. Participants were asked to redesign a given map for various screen sizes and aspect ratios and to describe their reasoning for when and how they adapted the design. We report general observations of practitioners' motivations, decision-making processes, and personal design frameworks. We then derive seven challenges commonly encountered in responsive maps, and 17 strategies to address them, such as repositioning elements, segmenting the map, or using alternative visualizations. We compile these challenges and strategies into an illustrated cheat sheet targeted at anyone designing or learning to design responsive maps. The cheat sheet is available online: https://responsive-vis.github.io/map-cheat-sheet

Figures (4)

• Figure 1: Workshop participants were randomly allocated one of these two maps: a choropleth map of the 2019 General Election results in the UK (left) and a world map showing population by country (right).
• Figure 2: Excerpts from the Miro board used for the study. Participants were provided with one of two maps, a choropleth map of UK election results (left) or a proportional circle map showing global population by country (right). The top left image shows the empty Miro board provided to each participant in the beginning of the workshop. Some of the rectangles are labeled with the common devices they correspond to (laptop, tablet, smartphone); it was explained to participants that the remainder were in-between sizes. Participants created designs by repositioning, resizing, duplicating, and cropping the original map, as well as adding additional elements and images found on the internet, supplemented with (virtual) sticky notes to specify designs. We show the final Miro boards of three participants here: P6 (top right), P2 (bottom left), and P5 (bottom right). Full-size versions of these Miro boards excerpts are available in the supplemental material.
• Figure 3: Responsive Map Cheat Sheet, released under a CC BY 4.0 license and available in web page format or as a printable PDF at https://responsive-vis.github.io/map-cheat-sheet.
• Figure 4: Sketches from our case study trialing the cheat sheet. Among other techniques, participants used cartograms (left) and segmented the map into continents (right).