READING SUMMARIES & RESPONSE FOR MODULE 2
My previous post presented a brief history of the history of information design and the popular rise of the data visualization which is a specific type of infographic that only presents quantifiable data. A data visualization only focuses on presenting numerical data in visual form. This week, we will look at the four primary types of infographics, like choosing a direction on a compass, they determine the purpose and presentation of the information. There may be a type overlap in the development of any infographic, at times as designers we may find ourselves moving in a Norhwest or Southeast direction instead of true north or south, but it it is important to understand these four categories, so that we may at least be able to chart our course (pun unintended) and know our direction throughout the journey.
But before we explore these categories, a word about information design and how they are consumed. According to Scott Berinato, author of “Good Charts” regardless of the direction of your information design there are a some common principles that apply to all presentations and how they are perceived by audiences:
- Graphics are not necessarily read in order. They will often be scanned for context clues and key items of importance. Do not expect users to read your infographic left to right or top to bottom first.
- Users see first what stands out. Contrast reliably draws in the viewer – whether it be contrast of colors, curves, clusters, or extreme outliers. Users will find a pattern then focus on anomalies.
- Audiences see only a few things at once. More data points shown at a time is not necessarily better (at least if they are all of equal weight and treatment). Give the viewer something to focus on.
- Users seek meaning and make connections. Our brains naturally try to draw conclusions from elements, even if there is no real connection.
- Humans rely on conventions and metaphors. There are certain popular associations and assumptions that can help communicate the message. Ignoring them may distract from your message and make the information harder to understand. Consider that there may be some preconceptions that are baked into processing new information.
These principles are great guidelines for static charts and presentations but also hold true for newer forms of interactive and animated information design. Now that the Information Age is in full blossom, we find ourselves in increasingly data rich environments and searching for ways to quickly absorb and digest the mountains of data we are exposed to daily. We are starting to see the signs of information overload from displays, dashboards, screens, wearable technology. Now more than ever, it is extremely important to communicate your message effectively and quickly as you compete with thousands of distractions for a sliver of one attention span. Even with audiences who have an interest in giving the subject attention and focus, it is a matter of courtesy and skill to present that information clearly. See this great online infographic by NeoMam Studios entitled “Why your Brain Craves Infographics” . Not only does it have some great parallax effects and css animations, it becomes clear that information design has a biological and social edge and will continue to grow as a disciplinary field in communications.
Where do we begin?
The first two questions we must ask when starting an information design project are:
- Is the information conceptual or data-driven?
- Are we declaring something or exploring something?
That’s it! That is all you have to do. Once you answer those two questions you are already well on your way to successfully taking a bunch of text, facts and figures and turning them into eye candy. Like other types of projects, I found that information design follows the same stages:
- Identification and Collection of Data – You may or not be involved in this stage. It may be pre-existing data or a study your company or another department is undertaking. Ultimately the data has to come from somewhere and the collection methods, data points, sources, columns, and tracking will all need to be identified and gathered.
- Discovery & Purpose – Once you have data, you can begin analysis. Sometimes the purpose is already established before the collection of data, but if you are exploring data without a specific goal, this is the stage where we can assign meaning and purpose to your project. In other types of projects, this is the stage where a preliminary brief is formed. This is the stage where you answer the first two questions and find what category quadrant your infographics will fall under.
- Choosing the most effective form – You have direction, now it is time to pick a viz type. Are we comparing a part to a whole? Perhaps a pie chart. Are we looking for trends? Perhaps a scatter plot or line graph? Are we explaining how to do something? Maybe a metaphorical illustration will work best. You must truly understand the idea before creating a visual for it.
- Production – Finalize your work
- Distribution – What is the medium(s) that your information design will be presented? And what special considerations and adjustments should you make based on that decision. Is your audience going to see your work primarily in a printed annual report? A small mobile touch screen? A conference billboard? Consider how that will impact the communication of the message and desired response.
Exploring the four basic categories and directions for your information design with examples.
The morning that I started collecting the examples for this blog post I woke up to hear that there was yet another mass shooting. This time it was in Virginia Beach and it claimed the lives of 12 people. So I started to look up infographics related to guns, gun violence, and legislation. The declarative type of infographic is the simplest to produce in which you are using data to show a statement. If you began that statement with a theory or hypothesis, the infographic can be confirmatory. The infographic below confirms that guns sales actually go up after every mass shooting and explains the reasons why:
Gun Sales and Mass Shootings in the US | Security Degree Hub. (2019, June 01). Retrieved from https://www.securitydegreehub.com/gun-sales-mass-shootings
Other times, a declarative infographic can be explanatory, where complex information is presented in “how to” format, explain a topic or teach a subject to the viewer. In the infographic below, a viewer is shown how a hand gun works. The power to take a life in any persons hand (without regulation) in full detail:
Good declarative infographics are usually well designed and finished products. However, just because they are intended to tell a narrative and need little explanation does not mean they should not generate discussion. And very often, as with all forms of communication can be used to present only one perspective. Here are a few more examples of declarative infographics before we move on to the next type exploratory.
The above example is what Bertoni describes as an “everyday” DataViz , commonplace charts and graphs that are generated through programs like excel and power point that are simple and chart no more than a few variables. They speak for themselves and should require no explanation. The animated infographic video below communicates the same message in a much longer and dynamic way:
The Infographics Show. (2018, August 01). 10 Most Powerful Militaries in 2018 – Military / Army Comparison. Youtube. Retrieved from https://www.youtube.com/watch?v=KfZvq_GiuUI
The following side by side infographics are examples of declarative statements using visuals to support their arguments on two sides of the same issue.
|Mass Shootings: Acceleration | Security Degree Hub. (2019, June 01). Retrieved from https://www.securitydegreehub.com/mass-shootings||17 Facts That ‘Gun Control’ Advocates Hate. (2019, June 01). Retrieved from http://jpfo.org/articles-2018/17-facts-gun-controllers-hate.htm|
According to Berinato, as we move from declarative to exploratory types of information design, certainty about what you know tends to decrease and the complexity of your information tends to increase. You do not know what you are looking for, not making a statement or telling a narrative and are just reporting findings. This allows the viewers to draw their own conclusions and find meanings. Titles tend to be in the form of a question.
Here are some examples of exploratory visualizations. In this Bloomberg news project, the user can scroll over a fixed image of the united states and as they move down the page the map presents divisions and finds on the primary uses of land across the United States:
I have always suspected that heat (extreme temperatures) makes people crazy. This would go a long way in explaining Florida and the Middle East, put that is just me. Just a notion without any real data behind it. In this project, Yingying Chu uses a scatter plot to show the relationship between temperature and crime rate. Scatter plots are used when you want to show the relationship between two variables. Scatter plots are sometimes called correlation plots because they show how two variables are correlated.
Here is an exploratory infographic that beautifully displays the wing span movements of different flying creatures. This is also an example of how types overlap as one can argue that this is also an “explanatory” infographic as well.
Conceptual infographics primarily attempt to present an idea in visual form. They can be but are not limited to process charts, cycle diagrams and technical illustrations. Conceptual work in information design is not always formal. It can be generated in paper prototypes, rough drawings of a new product. They can rely heavily on metaphors and conventions and take place in more informal settings such as strategy sessions whiteboards, pre-development idea generation and innovation projects to seek answers for non-data related questions.
They can communicate a vision or benefit that may be too complex or long in other formats. In the following illustration by one of my favorite artists Jing Zhang, he manages to stimulate the imagination and present some of the positive elements of an highly technological interconnected city.
Illustrator, designer and typographer Jing Zhang has produced a whole load of adorable infographics. Zhang has also designed infographics exploring the inner workings of iPhones, cameras, clocks and TVs as well as coffees, cakes and teapots. As you can see, there is little quantifiable data presented in these illustrations but they do offer a large amount of information regarding one subject. In our next conceptual example, we find what happens when a conceptual subject such as an NBA players career efforts meets quantifiable stats.
In 2012, Kobe Bryant became the youngest player in NBA history to score over 30,000 career points, in tribute, the LA Lakers released this infographic, designed by J Alexander Diaz, giving an insight to Kobe Bryant’s scoring numbers over the course of 17 seasons. Both beautiful and informative, I placed this on the border of conceptual and data driven because some of the display of numbers is scarified in order to highlight the illustration.
Data Driven (West)
An finally, data driven information design is strictly quantitative. Data driven information design can provide visual confirmation of a theory or exploration of complex data. Data Visualizations are a subset of information design and are exploding as computing speed, data storage, calculation and engineering technology advances. Function supersedes form as software programming, data management and business intelligence skills are more crucial than the ability to create presentable charts. Speed, accuracy and precision are critical as the history of data visualizations history is based in the sciences.
The following example is an interactive project where discriminatory twitter information and geo location has gathered to display hate hotspots:
The next project show how our our laws are being influenced and actually written by special interests. Like the exploratory land use map example, as the user scrolls down the page, new facts and figures are presented to create the complete narrative. This project involved two years of collecting data and building a machine that would compare model legislation written by special interest to 1 million bills introduced in statehouses nationwide. By flagging exact phrases found among the bills, the team identified a bare minimum of 10,000 bills directly copied from language developed by corporations and powerful lobbying groups. To work with the data, the team utilized 150 computers. This project won a Data Journalism Award in 2019.
And there you have it, In America, we love our meat, guns, military, our leaders love to copy and paste, and watch out when it gets hot! But try to enjoy your summer anyway. It is easy to get overwhelmed by data, I hope that by being able to recognize these general characteristics of infographics and knowing the four information design categories, we will at least begin to make sense of both America and the explosion of information displays all around us. It should also structure and ease the terrifying first steps into creating your own visualizations.
Shawn is an Information Technology manager in Washington D.C. and a graduate student at Quinnipiac University pursuing his masters in Interactive Media and Communications.
References and Resources for Further Exploration
Sources of Infographics:
Staff, C. B. (2019). The 55 best infographics. Creative Bloq. Retrieved from https://www.creativebloq.com/graphic-design-tips/information-graphics-1232836/4
Information Is Beautiful Awards Showcase. (2019, June 01). Retrieved from https://www.informationisbeautifulawards.com/showcase?award=2018&pcategory=winner&type=awards
The 100 Best Infographics [Interactive]. (2016, January 25). Retrieved from https://www.siegemedia.com/creation/best-infographics
The 100 Best Infographics of the Last Decade. (2016, November 07). Retrieved from https://visage.co/100-best-infographics
40 Complex Topics Explained Perfectly By Infographics – Design School. (2015, November 12). Retrieved from https://www.siegemedia.com/creation/best-infographics
Jamie. (2018). A Collection Of The Best Infographics. Make A Website Hub. Retrieved from https://makeawebsitehub.com/best-infographics
Sources of Data Visualizations
The 20 Best Data Visualizations of 2018 – Infogram. (2018, December 20). Retrieved from https://infogram.com/blog/20-best-data-visualizations-of-2018
Data Journalism Awards. (2019, June 01). Retrieved from https://datajournalismawards.org
Data is beautiful: 10 of the best data visualization examples from history to today. (2019, June 01). Retrieved from https://www.tableau.com/learn/articles/best-beautiful-data-visualization-examples
The 10 best data visualization blogs to follow. (2019, June 01). Retrieved from https://www.tableau.com/learn/articles/best-data-visualization-blogs
Data visualisation Archives – Data Journalism Awards. (2019, June 01). Retrieved from https://datajournalismawards.org/tag/data-visualisation
The Value of Exploratory Data Analysis. (2019, June 01). Retrieved from https://www.kdnuggets.com/2017/04/value-exploratory-data-analysis.html
What is a Scatter Plot and When to Use It. (2019, May 28). Retrieved from https://chartio.com/learn/dashboards-and-charts/what-is-a-scatter-plot
Berinato, S. (2016). Good Charts: The HBR Guide to Making Smarter, More Persuasive Data Visualizations. Harvard Business Review Press. Retrieved from https://www.amazon.com/Good-Charts-Smarter-Persuasive-Visualizations/dp/1633690709
Recent Posts from the Graduate Series:
- LoFi Prototypes: Rubber meets the road. - MODULE 3 - Low Fidelity Prototyping with Prof. Patrick Hogan Low fidelity prototyping is about ideas. Low fidelity means that…
- Flowcharts: Finding The One Best Way. - MODULE 3 - User Journeys and Flowcharts with Prof. Patrick Hogan As we continue our journey into the practice of…
- About IA - MODULE 2 - Information Architecture with Prof. Patrick Hogan Every good UX Designer is also a competent information architect. Information…
- Ideation Techniques - MODULE 1 - Ideation, Prototyping and Testing with Prof. Patrick Hogan Ideas are the most powerful things in human existence.…
- The Case for Space: DataViz Final Project - STORYTELLING THROUGH VISUALIZATIONS Sourcing Data My final project and very first interactive data story will be about the long term…
- Be Tufte on Bull! - MODULE 5 - Persuasion Versus Deception Persuasion In our last blog post we explored some best practices and common mistakes…