Have you ever seen this kind of sloppy visualization when you browse your phone on a morning subway? One-third of the picture is out of frame; the text is too small to be read; the interactivities of the data visualization are not even functioning at all. You might close the app immediately, thinking about how unprofessional this content provider is — no information is delivered, which is contrary to the goal of a visualization.
Before I get any further, I have to admit this visualization is one of my side own projects. Creating responsive data visualization is challenging. However, researchers at the University of Washington and Adobe Research are building something amazing for visualization creators such as me.
Jane Hoffswell, Wilmot Li, and Zhicheng Liu notice the issue — Mobile devices are important platforms for consuming information nowadays. About 60% of Americans get news on mobile devices, and only about 30% of them are using desktop devices for information. Yet, lots of data visualization is not adaptive to different sizes enough. When a thoughtless responsive visualization shows up on the users’ mobile screens like my project, it can ruin their moods to enjoy the articles' story-telling.
The researchers examined 231 data visualization from 53 news articles and interviewed 5 journalists to discover more insights into the topic. From the surveys they’ve done, they classified the techniques people usually use when designing responsive visualizations into 6 actions: no change, resize, reposition, add, modify, and remove. These actions are beneficial in creating clear representations with essential information. They found that it is more common for designers to remove than add content when creating mobile views. There are also more responsive techniques used in portrait than landscape views. In some cases, designers even completely recreate the visualization for different device sizes.
Although various techniques can be used when designing responsive visualization, the process still takes lots of creators’ time and effort. Therefore, the researchers proposed a system focusing on representing the responsive views of the visualization design, aiming to ease the restlessness of the design process. They identified the following 4 guidelines before they started building the responsive visualization system:
#1: Show cross-device previews. Providing immediate, visual feedback across different devices simultaneously allows designers to evaluate their works smoothly. They can further decide which design should be consistent across devices and which choices should be customized on a particular view with the previews.
#2: Enable simultaneous cross-device edits. The feature can speed up users’ design process. It can also lower the chance of errors and inconsistency from repeated manual edits.
#3: Facilitate device-specific customizations. The visualization's adaptiveness to particular device sizes is the core of designing effective, responsive visualization designs.
#4 Support propagation of edits. It is common that when designing visualizations, designers only focus on refining one specific device size. Tools that propagate edits to other sizes can highly accelerate the design process.
Based on the guidelines identified, they implemented a responsive visualization design tool that shows a synchronized representation of designs across multiple screen sizes. The main panel displays different views of the design. The toolbar and other panels show the information of visualization components. The system support group selections of visualization components both within and across views such that users can simultaneously edit different views or create customization of a specific view. The system enables more flexible and iterative workflows with its design. For example, the designer can quickly explore the impact of high-level design decisions with the simultaneous editing and the cross-devices previews features. She can also customize a single device view by selecting visualization components in a subset of views. Propagate edits allows her to apply a device-specific design decision to other device views.
“A key benefit of our system is that it allows designers to iterate fluidly back-and-forth between these global and local editing modes.”
To better understand how the system work, I highly recommend watching the videos on the example gallery Jane provided. From these demos, you can get a sense of how the system works and how it is different from other visualization authoring approaches. The system’s expressiveness and flexibility for supporting the iterative design process of responsive visualization are impressive and admirable. I’m looking forward to their next steps on this exciting system. My project mentioned above truly needs an easier way to be recreated — We all know the pain when polishing our design works on different device sizes.
This blog post is based on the following paper:
- Jane Hoffswell, Wilmot Li, and Zhicheng Liu. Techniques for flexible Responsive Visualization Design. In Proceedings of the ACM Conference inf Human Factors in Computer Systems, 2020.
