Just like Massimo Viagnelli spent several years observing people coming in and out of the subway for several years, the first step is to observe customers under the pressures of their job. Observation is worth a thousand times referencing material design guidelines, reading articles or copying trendy patterns from other products. Through observation our team learned to distinguish the interactions people have between a dashboard on a computer monitor versus a dashboard on a large monitor in a triage room.
Next, see the layout of the virtual space where the data will be displayed. What is the current grid the product uses for a dashboard versus a regular page? What are the breaking points for different screen sizes? A clear grasp of the grid will help you see where the trade-offs are around sizing, special characters’ spacing and rules for truncation or wrapping.
When text is compressed due to panel resizing in a dashboard, it’s easy to add embellishments to bring focus to small details. However, there are times when removing some elements (skipping intervals) can help people understand the data better. Less noise with a hint of time intervals is an approach to keep the data the star of show.
Caution: Labels in advanced visualizations need to be more visible since people face a high learning curve in understanding the interaction. In this case, withholding information (time interval) doesn’t add value.
In common visualizations (area, line or bar charts), legends are placed next to the chart. However this pattern breaks down in the world of high cardinality data - too many data points and long strings of text the users needs to see for his job. Truncation is not best solution.
Formatting tends to be the most overlooked element since different people work in different product areas and don’t always connect the dots from one product area to another. Number formatting reduces the cognitive load when people are comparing numbers across different visualizations. Take an inventory of all visualizations across the product to find the discrepancies.
Color can enhance or ruin readability of data. If colors are critical for users to read the data, then determine the amount of flexibility given to the user. Too much flexibility can lead to a rainbow that’s not accessible and takes away from directing the user to the right content. Limited options champions the essential and eliminates cognitive load.
An effective data visualization strikes a balance between data density and readability. Designing readable data is not just about adjusting visual design details but also developing a deep understanding of the people analyzing the data so those choices don’t hinder their work. In the DevOps world, every second of downtime comes at a cost -- people need insights quickly. Learn more about your users first before jumping into details to create a succinct experience that fits their context.