Designing for Data Visualisation
Can I ask you few questions?
What was the best write up or maybe a diary note that you have written?
— well for many people there might not be a clear cut answer or they might not remember what was the best that they wrote. Let me ask something else,
What was the best place you have been to?
— for me it was a road that lead to a hilltop… The journey starts as early as 4:30am but its well worth it. As the first streak of sunrise set the place alive you see structures that were live some 500 years ago. As if you are looking at a miniature model town but its actually a spread of 4000 miles (the ruins of Vijayanagar empire). The place remains close to my heart and I can conjure the place in my memory anytime I want to. So do you, when it comes to a place you have visited.
The old saying still holds true — a picture is worth a 1000 words. When words fall, short we resort to visuals. A number of studies suggest that it is easier to understand visual (chart) based information rather than the same info in a table of text. This can works well for any structured data.
“Visualisation works from a human perspective because we respond to and process visual data better than any other type of data. In fact, the human brain processes images 60,000 times faster than text, and 90 percent of information transmitted to the brain is visual. … Human beings are visual creatures.” read more…
Our brain has synthesised visual information for billions of years, but textual representation is relatively new — maybe 5000 years old. Even text was represented as visuals in the early days, hieroglyphics but we have moved a long way from the visual representation to a simplified alphabetical notation. Sometimes we need to understand our roots to build better things for today. It is ironical that there is nothing called invention but we simply re-discover things with a new a branding.
In this era where data seems to play a vital role in decision making how do we design for big data? How do we reduce the cognition involved in data interpretation? How to simplify complex data to represent in visual themes?
The cognitive load to read and infer textual information is comparatively high that too when we are in the age of data science where we have so many channels to capture data; but can we simplify the complex data? We need the data to speak for itself wherever possible. As the hieroglyphics still speaks for itself after hundreds and thousands of years, so is the power of visual representation.
We had a scenario where we had to interpret 20 years of collated data with 100+ parameters for one of our projects. We will be sharing how we designed for data intensive dashboards and data analytics.
- Analysis of data parameters, and its correlated groups
- How relevant can the representation be — picking the chart, graph, map, infographics to better articulate the patterns to make data-drive decisions
- Understanding the technology that allows to implement them (lets not make enemies with our development team 😅)
- Analysing different implementation methods and shortfalls
- Discussion with the development team
- Picking a theme that goes with the data
- Clearly defining the legends for data
Dashboards and charts need not be always boring bars and stacks but there are various representation that available. With little bit of research we found ample of options to represent the data. Next step is to choose themes that can ease the complexity of the chart as well as bring focus and attention to elements that needs to be highlighted. Once the prototypes are ready, a round of usability testing helps to filter any issues that the design team may have over looked. A final round of iteration to make sure all the representations make sense to the user and eases the cognitive load in interpretation and decision making. The reach of a design is defined by level it helps the users to make faster decision independent of their level of IQ.
P.S: Things you may need to understand and implement data visualisation,
Material Design standards for data representation
https://material.io/design/communication/data-visualization.html#types
Pre-built Charts
There are ample of pre-built charts options to choose from, listed below are few reference.
- Google Charts
2. Chart.js
3. D3 for complex data visualisations
4. Highcharts
