Design Patterns and Trade‐Offs in Responsive Visualization for Communication

Abstract

Increased access to mobile devices motivates the need to design communicative visualizations that are responsive to varying screen sizes. However, relatively little design guidance or tooling is currently available to authors. We contribute a detailed characterization of responsive visualization strategies in communication‐oriented visualizations, identifying 76 total strategies by analyzing 378 pairs of large screen (LS) and small screen (SS) visualizations from online articles and reports. Our analysis distinguishes between the Targets of responsive visualization, referring to what elements of a design are changed and Actions representing how targets are changed. We identify key trade‐offs related to authors' need to maintain graphical density, referring to the amount of information per pixel, while also maintaining the “message” or intended takeaways for users of a visualization. We discuss implications of our findings for future visualization tool design to support responsive transformation of visualization designs, including requirements for automated recommenders for communication‐oriented responsive visualizations.

An Automated Approach to Reasoning About Task-Oriented Insights in Responsive Visualization

“…Prior work on responsive visualization, which tends to focus on Webbased communicative visualization, or scalable visualization [13] more broadly, emphasizes the importance of maintaining intended takeaways between source and transformed views. Analyzing 378 responsive visualization pairs on desktop and mobile devices, Kim et al [43] identify density-message trade-offs in responsive visualization where authors need to balance adjusting visual density or complexity for different screen types while maintaining patterns, trends or other important information conveyed in the source view. Focusing on maintaining key information at different scales, earlier work on visualization resizing introduces algorithms that repeatedly remove the pixels determined to be least important [18] and iteratively minimize scaling in more salient regions [76], for example.…”

“…We propose formulating responsive visualization as a search problem from an input source view to transformed target views, following the characterization proposed by Kim et al [43]. Consider a recommender that takes a source desktop view as input and returns a ranked set of targets as illustrated in Fig.…”

“…The first step in creating such a recommender is to define a search space that can enumerate well-formed responsive targets. To generate useful target views from a source (large screen) visualization, a search space should cover common transformation strategies in responsive visualization, such as rescaling, aggregating, binning, and transposing [30,43]. After enumerating target views, a responsive visualization recommender should evaluate how well each target preserves certain information or "insights."…”

“…For example, authors might simplify charts for audiences with different graphical literacy, altering information conveyed in the new design [14]. Authors of responsive visualizations create multiple designs for different screen sizes and interactivity [30,43]. However, transforming visualizations may invoke trade-offs between desirable design criteria.…”

“…1 and compare them with the original design [30]. Kim et al [43] identify trade-offs in designing responsive visualization where authors try to strike a balance between maintaining graphical density (i.e., an appropriate number of marks per unit screen size) and the preservation of a user's ability to arrive at certain insights. For example, authors need to decide either to preserve distributional characteristics with higher visual density by rescaling proportionately (a) or to adjust visual density while losing distributional details by changing the bin size (d).…”