Go Small or Go Home

What to consider when transforming visualization from large to small screens.

Nowadays people can read news on their smartphones or attend virtual conferences using their desktops or laptops. Some people read this post using their smartphones whereas others use a regular computer. From the smartphone in your, the tablet in hand, the laptop in your backpack, and to the big screen TV in your living room, people today tend to use different types and sizes of displays during a full day.

Showing the same visualization for all screen sizes is not practical: labels, buttons, and representations work differently on different form factors. In fact, a visualization designed for one platform may even become misleading on another platform. For this reason, just like in modern web design, visualizations should be transformed to the specific screen used to display it. For the web this transformation process is called responsive web design (or even “mobile-first web design”); accordingly, for visualization it is called responsive visualization.

In the paper “Designing Patterns and Trade-offs in Responsive Visualization for Communication”, the Hyeok Kim, Dominik Moritz, and Jessica Hullman discussed the design strategies of responsive visualizations and the trade-offs when transitioning visualizations on between different screen sizes.

What elements change

1. Data — Data includes rows, columns, and level of hierarchy. For example, the number of data points is different from each screen size. Small screen has smaller space to show the visualization, for this reason, some data points might be omitted. Another example is switching the time intervals from daily basis to monthly or yearly basis.
2. Encoding — Encoding includes switching a visual channel. Eliminating a redundant encoding can be an example of this category
3. Interaction — Interaction includes features (to composites of interactions), trigger, and feedback. For instance, there is a pop-up search box on a smaller screen. Users using smaller screen devices can click a search icon to find some information, instead of using a text input field on a larger screen. In this case, a search icon or button is a trigger to simplify the visualization.
4. Narrative — Narrative includes sequencing, annotations, emphases, and text. Annotation on visualizations can be moved to another space. Hovering text on images or visualizations can be moved to fixed space to show the information.
5. References/Layout — Reference and layout include labels, references, layouts, and size. Layout of the visualization can be transposed for a smaller screen especially for the smartphone. Most desktops or larger screens have landscape orientation, however, most smartphone screens or smaller screens have portrait layout (longer height than width). For this reason, the visualization can be easily transposed and transformed the layout depending on the screen ratio.

How the elements change

1. Recompose — includes removing, adding, replacing, and aggregating. Recompose is a very common example for responsive visualization, for example, hovering text on images to show names or information can be removed.
2. Rescale — refers to the changing the size of element either bigger or smaller. One example is modifying the label to be a more simplified or shortened version.
3. Transpose — includes serializing, parallelizing, and axis-transposing. Changing the orientation of visualization is common, especially for the layout of the visualization. Imagine that the horizontal bar chart can be transposed to a vertical bar chart in order to show on the smaller screens.
4. Reposition — includes externalize, internalize, fix, fluid, and relocate. Hovering text on images examples can be easily applied to this category. The hovering text can be placed in fixed space to show the information.
5. Compensate — includes toggle, and number. With using numbering, the labels can be simplified without losing the context.

1) Screenshots of Bond Yield’s large screen and small screen view pair that illustrates remove records, remove annotations, remove emphases, and reduce width. 2) Screenshots of U.S. Cabinet’s large screen and small screen view pairs that demonstrate disable hover interaction, remove encoding, serialize label-marks, transpose axes, and fix tooltip position.

Challenges and Losses

Several challenges arise in the transformation process. Due to the smaller screen size, the smaller screen view has a higher information density, which may cause overlapping two or more data points. Visualizations often also have to be proportionally rescaled when adapting to new screens. And devices with smaller screen have less computing power compared to the larger screen devices such as desktops. For this reason, small screen devices might not have the same interactions on visualizations. Alternatively, they may have different ones, such as for touchscreens versus computer screens.

Similarly, the transformation may also introduce message loss. For example, when we remove some data points, there is inevitably some loss of information. Smaller devices yield loss of computing power, as well as reduced discoverability due to less screen space for interface, labels, and data points. Finally, even graphical perception may be affected, such as when transposing the axes from a horizontal bar chart to a vertical bar chart.

Citation

• Kim, H., Moritz, D., & Hullman, J. (2021). Design Patterns and Trade‐Offs in Responsive Visualization for Communication. Computer Graphics Forum, 40(3), 459–470. https://doi.org/10.1111/cgf.14321