8 best practices for Data Visualization on Web |
Posted: September 27, 2019 |
Just a couple of years ago, infographics became the major standard for distributing information on the internet. Well, that trend is a thing of the past now. Infographics have been replaced with Data Visualization, which is slowly becoming a standard for information dissemination on the internet. Data visuals are used across a range of industries such as healthcare, entertainment, the banking sector, business intelligence, journalism, and much more. So, why is data visualization better? We could just use infographics, right? Data visualization, to put it simply, allows us to process, and communicate insights within the data more accurately. Think about it for a second. Our brains are much more wired towards visuals. Data, when presented visually, is a lot easier to understand and when combined with aesthetics and visual effort, the information displayed increases its influence tenfold. But that is the job of a spreadsheet, right? Yes, but the information presented using tables and spreadsheets is a lot less easy to understand. An effective data visualization display should always take the human visual system into account so that data can be easily understood, which the spreadsheets fail to accomplish. Visual processing enhances and eases the viewing experience of data, not divert attention away from it. If you are a data visualization expert or work in the same domain, you will find the following article very helpful. There is a wide variety of frameworks and tools available for building graphics, but we have to first understand the factors that make data visualization effective and the guiding principles that should be followed when designing with data? These best practices will help you design rich data experiences. 1. Design for your Specific AudienceData visuals are primarily used for patterns, to provide meaning and context to things, and describe the relationships within the data. The visual designers hold no control or influence on the way that data is displayed, and how relationships are formed. They do, however, have the power to choose the amount of data that needs to be displayed. They have control over the context, which they can manipulate to provide context and information, based on the needs of the audience. Let us put this concept into perspective, suppose you work at a company that offers digital marketing services, and you want to create a visual representation of data based on the top-ranking sites on Google in London or the United Kingdom. Your approach should not be to shove every single piece of data and make it “work”, but instead, it should focus on giving context to data, and "humanize" it. This makes it work for the needs of the audience because let us face it, data visualization is meaningless if the viewer does not understand it. The point is that Data that is displayed should be structured, engaging, and unobstructed. They should spell out what the viewers should take away from the data. This point is not meant for expert audiences, for whom you can show a more granular view the data to data to allow for a reader-driven exploration and discovery. With expert audiences, you should never compromise over the details. 2. Employ (but not always!) Interactivity to Facilitate ExplorationLet us look at some humbling statistics: The New York Times’ interactive visualizations, which is possibly the best work produced in the business, though strong on visuals and details, has only 10 to 15% people who click on buttons. What does this fact suggest? Simple, it shows that we cannot rely on interaction for building a stronger understanding of data. Key data should never be hidden behind the veil of interactivity, but it should be available without any interaction. This goes to show that while using interactivity with your data sets is a plus point, it should not be enforced all the time. This displeases the viewer, who would be put-off and disinterested if there are a lot of buttons that display an advertisement or redirect the user. The user should be free to explore the dataset. Nathan Yau of Flowing Data has been the forerunner in keeping the user experience in mind when designing data sets, as seen in his graphics on the causes of death and life expectancy. Interaction can also be used as a hook, a method to grab attention that gets your audience interested in the project before they can navigate or “bounce-off”. You should check out this piece on handwriting and culture from Quartz, it is an attention grabber. The piece starts by asking readers to draw a circle and then goes on to give an analysis of culture shaped drawing that gives out simple but effective visualizations. It might even make you realize that data is indeed beautiful”. The Pudding, in a similar fashion, launched an interactive visual to teach readers about the paradox of birthdays. While the birthday paradox is a standard problem in the theory of probability, the interactive visualization makes it look fascinating. In addition to that, the interactions of recent users make the experience a lot more relatable. These interactive examples work because they allow user-participation, without requiring the ability to interact to understand. 3. Use Visual Salience to Focus AttentionVisual salience, sounds like a difficult word at face value, doesn't it? It is not really. It is a characteristic of visual design which makes visual elements stand out from the surroundings. It is a powerful informational tool in data visualization and helps to prevent informational overload. By employing visual salience to highlight some details and repress the others, the design becomes clearer. This eventually makes the user understand the visual easily. There are two key visual variables which our primary keys in controlling and creating visual salience effectively. They are color and size. Color schemes are important in creating amazing data visualizations because we all know that color is the best way to break content camouflage and present information accurately. To achieve a good color, we can take warm and saturated colors to highlight important data points and cool colors to push less relevant information in the background. The concept of size is pretty much self-explanatory. Larger elements demand a lot more attention than the smaller elements. What you can do with the size is that you can scale up elements within the text that you would want viewers to read first, making the elements stand out more. Similarly, you can also scale down the elements (text, bar charts, etc.) that are a lot less important. The key here is to make the viewer go back with knowledge. Mix up the color and the size. Experimentation with this can lead to better results. 4. Positioning and Lengths for Encoding Quantitative Data and Using Color for Categorical DataCleveland and McGill have a well-known formula for visualizing information that investigated the effectiveness of visual encodings, which is mapping the data dimensions to cater to visual properties. In their findings, they have outlined some visual encodings based on how we perceive them, the scale that they proposed is this: 1. Positioning on a scale. 2. Length 3. Angle 4. Area 5. Color This suggests that for data to be visualized accordingly, our first choice for the display of quantitative information would be the encoding of data by position. The area and angle based encodings, such as pie charts and bubble charts, should always be encoded second. The position-based encodings allow viewers to make accurate and much better comparisons in lesser time. This does not mean, however, that all the visualizations must be bar charts or scatter plots. It is important to keep these fundamentals in check when exploring newer and more exciting ways to visualize data. What I want to emphasize here mostly is that color should never be used for encoding quantitative information. Instead, it should be used towards encoding information categorically. We can, therefore, use the color schemes to showcase data that belongs to different categories. 5. Structural Elements (Tick Marks and Axes) Should be Clear but InconspicuousIt matters not if you support Edward Tufte’s approach towards design minimalism, which is pretty extreme. But you can tone that approach to a lighter tone by removing visual clutter from your charts. You can make your data shine by creating a visual contrast between some data-elements and certain non-data elements. Nadieh Bremer has followed a similar approach in the visualization of birth times in America, which also won her an award. Remove any particular structural elements, like backgrounds and borders. They do not work to clarify the data and make it more cluttered. Similarly, if your visualization is data-heavy, then using axes, grids, and tick marks should be avoided or used sparingly. They will be impeding since they would compete with your data for attention. Your grid styling should be at a maximum weight of 0.5pt and style axes should be in either black or grey with a max-weight of 1pt. 6. Directly Label Data PointsMake sure you label every visual element that needs to be labeled. This makes the viewer understand the visual more accurately and understand the importance. This step looks pretty simple, right? Wrong. Many designers rely on legends in their visuals to give readers a guide on which symbol or color represents what. Designing legends, while very convenient for the designers, is very hard for the readers. They force readers to scan back and forth between the legend and the data, putting an irrelevant strain on the readers' memories. A better alternative that you can use is to label the data series directly on the chart. It is more of a challenge, but as a designer who is user-oriented, it is important. Your job is to put your best foot forward and work out the kinks so that the reader doesn't feel disoriented. Some designers do not even add a legend to their data, and they create small displays with plenty of direct labeling. 7. Visual Hierarchy for Creating a Narrative FlowWe all know that the best visualizations tell the most interesting stories. The trends, correlations, or outliers in the data are the main sources of such stories. They are also reinforced by the elements that surround the data. These stories are the ones that turn raw data into useful information. At face value that data visualization is a numbers game, but in fact, it is not. Great stories cannot be told without words. Messages, conveyed with a sense of visual hierarchy infused, can be used to lead the reader, step by step, throughout the data. The title of visualization, for example, should be able to kick off the narrative by clearly stating the single key insight towards the reader should take away from the visualization. Such tiny annotations scattered amongst the data can provide support towards that narrative by drawing attention towards outliers and certain trends. What I might be saying is this: take the hand of the user and give him exactly what he is looking for in the data! 8. Overlay Contextual Information Directly onto the ChartAs I mentioned before, we can use the annotations in data visualization to help create a narrative flow. Sometimes we can include graphical elements to make annotations more meaningful and understandable. This helps us to connect with information to our data more directly. Your graphical representation shouldn’t seem random, but give meaning to even the most intricate of data. It should help the viewer understand how the data is significant, in a way that is more direct than captions and annotations alone. Conclusion:We talked a lot about Data Visualization in this article. It is the rising force in presenting data on the internet. Gone are the days of using slide-decks and infographics to represent data effectively. If you want to thrive in the modern internet, you should learn about Data Visualization. The article above might be your gateway into the fascinating world of Data Science and representation. All of the steps can prove effective in the long run. Until then…
|
||||||||||||||||||||||||||||||||||||||||||
|