10 Data Visualization Best Practices for the Web
Data visualization has rapidly become an established method of disseminating information through the web. It’s utilized across various fields, including business intelligence, to journalism, to help us comprehend and communicate the information contained in data.
Our brains are wired to process information visually. This makes it easier to comprehend information presented in graphs and charts as opposed to data presented in spreadsheets and tables. A well-designed data visualization should draw on the capabilities of our visual system to submit information to ensure that it is easily absorbed and comprehended. It should consider the knowledge we have about visual processing to improve and enhance the viewer’s experience with the data.
With the various tools and frameworks in use to build these visuals, it’s time to get back to the basics. What is it that makes data visualizations efficient? What principles should we be following when designing using data?
The best practices listed below will assist you in creating engaging, insightful experiences with data.
1. A Design for a Particular Audience
Visualization highlights patterns offers context, and explains relationships in data. The designer has no control over the ways or connections within a particular collection of data, she can decide how much information to present and what information to show depending on the viewer’s needs. In the end, as in any other item, visualization is useless when its user can’t use it.
Visualizations designed for beginners are required to be well-organized, clear, and captivating. They should clearly define and, in plain language, what viewers can learn from the information.
Visualizations designed for experts are, however, offer the details of the data, allowing readers to explore and discover. Detail and density of data should always be the top priority: simpleness and clarity.
2. Make use of (but Do not rely upon) Interactivity to Enhance Exploration
This is a shocking statistic: Only 10% of the visitors to interactive visuals found on the New York Times website click on buttons. The New York Times graphics team creates some of the most impressive work in the industry but very few interactions with the graphics!
The New York Times graphics team is responsible for some of the finest work available, And very few people interact with the team!
This tells us about interactive visualization that we should rely on something other than interaction to develop knowledge. Important data should not hide behind interactivity and should be readily available without interactivity.
The most appealing aspect of interaction is that it allows the integration of other information (that could otherwise be left out) to permit people interested in studying the data more thoroughly. Nathan Yau of Flowing Data has dominated the market with this type of interactive visualization, as evident in his graphic on the causes of death as well as life expectation.
Alternatively, it can be used to create a hook as an eye-catching feature that keeps your audience involved in the project before they are able to navigate distance. Check out Quartz’s amusing piece about Handwriting, culture, and Handwriting. The work starts with a simple task: readers are asked to draw a circle before beginning to sketch out the analysis of shape-drawing in cultural contexts, including easy yet effective visualizations.
Similarly, The Pudding has recently published an interactive visual to educate readers on how to solve the birthday paradox. Although most non-statisticians would consider the birthday paradox, an everyday problem that is part of probability, to be boring and confusing The visualization made it appear intriguing. How the creator incorporates the experiences of current users makes the entire experience accessible.
Both examples work because they permit the user to participate in the content without needing interaction to understand.
3. Make use of visual salience to draw you're on the experience and guide it.
Visual salience, a characteristic that helps a visible object stand out from the rest is an effective instrument in data visualization. It is a tool that can direct the viewer’s attention to the most important data in a visual and prevent information overload. Using visual salience to draw attention to certain particular aspects and omit others makes our designs clearer and more accessible to the user.
Certain visual variables, such as Color and size are the primary control and creation of the salience of our vision.
Colour schemes are the key to excellent data visualization because colors, as we are aware, are especially effective at revealing camouflage. It is possible to use warmer, intensely saturated colors to draw attention to important information points, or apply cool, neutral colors to help push more essential data to the background.
The concept of size is pretty straightforward. Large elements draw more attention than smaller ones. Therefore, it is best to scale up elements you would like readers first to read and then scale down text elements that are optional.
4. Utilize Position and Length to encode Quantitative Information. Utilize Color to encode Categorical Information
Cleveland McGill’s well-known information visualization research analyzed optical encoders’ efficiency (i.e., the mapping of data dimensions to visual characteristics). They classified different kinds of visual encoding based on the accuracy with which we see them and gave us the following (simplified) listing:
- A standard scale for determining position
- Length
- Angle
- Area
- Color
What this means to designers of data visualization is that the first option to display quantitative data ought to be to encode information using location (as seen in the traditional bar chart and the scatterplot). In contrast to encodings based on angles (like pie charts) or encodings based on areas (like bubble charts), using position-based codes helps users make more precise comparisons in a shorter amount of time.
This doesn’t mean that all visualizations must be chart-like or scatter plots. Keeping these basic principles in mind while exploring the latest and most exciting methods for visualizing information is best.
I want to highlight that Color shouldn’t be used to encode quantitative information, but instead, it can be used to encode categorical details. This means that we could utilize Color to indicate that different pieces of data fall into various categories.
5. Create Structural Elements that Look Like Tick Marks and Axes that are clear but not noticeable
If you are a fan of Edward Tufte’s extreme view of minimalist design, Do yourself a favor by removing the visual clutter of your charts. Your data should stand out by creating visual contrasts between the data and other elements, such as Nadieh Bremer has done with her award-winning visualization on birth dates in America.
Eliminate all structural components (like backgrounds, borders, lines, or borders) that do not help make the data more transparent. Reduce structural elements (like grids, axes, or tick marks) competing with your data for attention. Style grids with light grey, with a maximal weight of 0.5 points, and style axes with grey or black with a maximum weight of one percent.
6. Directly label data points
Each visible element that encodes information needs to be identified to ensure the user understands what it is. Simple.
Wrong. Many designers depend on legends to inform readers which colors or symbols represent the various data series on their charts. Legends, although easy on the designer, can be difficult for the user. They make readers scan back and between their legend and information, putting unnecessary stress on readers’ memory.
Another option is to mark data sequences directly onto the charts. It’s usually more of an issue, but you’re the creator. Your task is to perform your job so that the reader is free to. In the illustration below, Nathan Yau has worked not to use the word “legend,” creating a small multiples display with lots of explicit labels.
7. Utilize Messaging and Visual Hierarchy to build a narrative flow
The most compelling visualizations convey compelling stories. These stories are born from trends, correlations, or outliers in the data and are further bolstered by factors surrounding the data. These stories transform data into valuable data.
On the surface, data visualization is only about numbers, but the best data stories can’t be written without words. The use of messaging, which has a clear visual structure, is a great way to guide the reader, in a step-by-step manner, through the information.
For instance, the title of a visual such as this one should begin the story by stating the one crucial insight that the viewer should gain from the graphic. Small annotations throughout the data may support that story by highlighting the outliers or patterns.
I’m trying to convey here to give the viewer a helping hand and explain precisely what to look for in the information!
8. Add Contextual Information directly onto the Chart
As I mentioned earlier, we can use annotations within a visualization to aid in creating the narrative flow. Sometimes, we can incorporate visual elements to make those annotations more significant and link the information to the data more directly.
Take this image from Susie Lu as an example. Its “Summer Blockbusters” and “Oscar Season” overlays help to understand peaks and valleys that may otherwise appear random. They assist the viewer in understanding what’s essential to the information in a more explicit manner than just annotations or captions.
9. The Design for the Mobile Experience
Static visualizations, usually published in bitmap formats such as JPG and PNG, present a significant problem for mobile users. The appeal of many data visualizations is in the details of their images–in tiny pieces and subtle encodings. However, some of these details must be recovered on screens with small resolutions when using static formats.
A case in point is Accurate studio’s stunningly intricate project about Nobel prizes. It looks fantastic in full-size print and on a high-resolution retina display. However, it could be more readable on mobile devices.
To design for a mobile experience, you can create dynamic visualizations using the help of a JavaScript visualization library such as D3.js or Highcharts or develop different versions from the exact static image for desktop, print, and mobile.
10. Combine Complexity and Clarity to foster understanding
Every one of the top techniques I’ve covered in the past comes down to one issue: finding the perfect balance of clarity and complexity that is in line with your customer’s requirements.
Creating stunningly detailed, delicate interactive visualization is easy, but there are better approaches than this. Be mindful when making your visuals. Allow the understanding and expectations of your viewers to determine which and how much information needs to be included. Then, curate your data to convey the story you wish to share.
Leave a Reply