Part I: Foundations
1. Why Visualise: From Information to Wisdom
The life of a visual communicator should be one of systematic and exciting intellectual chaos.
The first and main goal of any graphic and visualization is to be a tool for your eyes and brain to perceive what lies beyond their natural reach.
In information graphics, what you show can be as important as what you hide.
But if you don’t present your data to readers so they can see it, read it, explore it, and analyze it, why would they trust you?
The role of an information architect is to anticipate this process and generate order before people’s brains try to do it on their own.
2. Forms and Functions: Visualization as a Technology
What does the designer want me to do with this graphic? In other words: If we accept that an infographic is, at its core, a tool, what tasks is this one intended to help me with? Here is my personal list for the Brazilian defense graphic: 1. The graphic must present several variables—armed forces personnel, population to be defended, defense budget, and so forth—so that I have the proper information in front of me.
2. It should allow comparisons. At a glance, I should be able to tell which country has the biggest and the smallest army, is more or less populated, or invests more heavily or lightly in its military.
3. It should help me organize countries, from the biggest to the smallest, based on the variables and the comparisons. 4. It should make correlations or relationships evident to me. For instance, are population and size of defense forces directly and perfectly proportional?
relationship between form and function succinctly: Effective analytic designs entail turning thinking principles into seeing principles. So, if the thinking task is to understand causality, the task calls for a design principle: “Show causality.”If a thinking task is to answer a question and compare it with alternatives, the design principle is: “Show comparisons.”The point is that analytical designs are not to be decided on their convenience to the user or necessarily their readability or what psychologists or decorators think about them; rather, design architectures should be decided on how the architecture assists analytical thinking about evidence.
What is really important is to remember that no matter how creative and innovative you wish to be in your graphics and visualizations, the first thing you must do, before you put a finger on the computer keyboard, is ask yourself what users are likely to try to do with your tool.
3. The Beauty Paradox: Art and Communication
No one can write decently who is distrustful of the reader’s intelligence, or whose attitude is patronizing. —E. B. White, from The Elements of Style
Learning to deal with frustration is part of professional life. So is being able to explain what you do and why you do it.
journalism is not just about covering the news, but also about providing context for the news.
Building a Narrative Structure
the visualization wheel. See Figure 3.2 .
Identifying your audience The complexity of a graphic should be adapted to the nature of your average reader.
Figure 3.11. Different professional backgrounds, different ways of facing projects.
Boredom is as much a threat in visual design as it is elsewhere in art and communication. The mind and eye demand stimulation and surprise.
4. The Complexity Challenge: Presentation and Exploration.
The first step to finding the middle ground between radical minimalism and a more playful approach to information graphics and visualization is to remember that a good graphic realizes two basic goals: It presents information, and it allows users to explore that information.
Seek Depth
My advice is: No matter what style you choose—whether you decide to follow Tufte and become a hardcore minimalist or adopt a friendlier approach—always take advantage of the space you have available to seek depth within reasonable limits. After that, and only after that, worry about how to make the presentation prettier.
In other words , graphics should not simplify messages. They should clarify them,
Focusing too much on making things pretty can also lead to poor decisions.
Beauty is not the goal of visualization and it is usually not required to achieve the goal (…) Remember that the goal is to enlighten.
I do this to compensate for the fact that we usually underestimate what our readers are capable of. Next: 1. Organize your graphics in layers. First, offer a summary of the data, such as a good intro, some averages, or highlights of the main figures. This will be the entry point into the graphic, clueing readers into how to read what follows. 2. Beneath the outer layer of your onion-like graphic, on the next level, include as many inner layers of information as possible. Don’t include everything, of course. Make editorial decisions based on the story and your focus. 3. Structure the layers in a logical order. In some cases, the structure will be linear. In others, you can organize the navigation (regardless of whether you are doing a print or an interactive project) so that readers can explore as they wish.
Never, ever dumb down your data just because you think your readers will not “get it.”
Part II: Cognition
5. The Eye and the Visual Brain
The third lesson of this story is that seeing, perceiving, and knowing are different phenomena.
The best way to disorient your readers is to fill your graphic with objects colored in pure accent tones. Pure colors are uncommon in nature, so limit them to highlight whatever is important in your graphics, and use subdued hues—grays, light blues, and greens—for everything else.
6. Visualizing for the Mind
The brain is much better at quickly detecting shade variations than shape differences.
The Gestalt School of Thought and Pattern Recognition
- Proximity
This principle notes that objects that are close to each other tend to be perceived as natural groups.
- Similarity
Identical objects will be perceived as
belonging to a group.
- Connectedness
Objects linked by means of a graphic artifice, such as a line, will be perceived as members of a natural group.
- Continuity
The continuity principle holds that it is easier to perceive the gross shape of an object as a coherent whole when its contours are smooth and rounded than when they are angular and sharp.
- Closure
Objects inside an area with crisp, clear boundaries will be perceived as belonging to a group.
In other words,
if two tasks are in the same bullet point, the accuracy is equivalent. The tasks include: •Position along a common scale
•Position along nonaligned scales
•Length, direction, angle
•Area
•Volume, curvature
•Shading, color saturation
Figure. 6.12 Cleveland and McGill’s elementary perceptual tasks. The higher an encoding method on the scale, the more accurate the comparisons it facilitates.
7. Images in the Head
Roughly speaking, the brain identifies objects by comparing what you see with what you know and remember.
The better we understand the shortcuts the mind uses to make sense of the world, the better we will be able to anticipate them and to take advantage of them for our purposes. As Robert Spence has pointed out (2007) visualization is not something that happens on a page or on a screen; it happens in the mind.
Part III: Practice
8. Creating Information Graphics
Start with a strong focus, do as much research as you can, organize, summarize, and then deliver your conclusions in a structured and visually appealing manner.
As you’ll see, the following cases share a common creative methodology:
1. Define the focus of the graphic, what story you want to tell, and the key points to be made. Have a clear idea of how the infographic will be useful to your readers, and what they will be able to accomplish with it.
2. Gather as much information as you can about the topic you are covering. Interview sources, look for datasets, and write or storyboard ideas in quick form.
3. Choose the best graphic form. What shapes should your data adopt? What kind of charts, maps, and diagrams will best fit the goals you set in the first step?
4. Complete your research. Flesh out your sketches and storyboards.
5. Think about the visual style. Choose typefaces, color palettes, etc.
6. If you’ve been sketching offline, move the design to the computer. Complete the graphic using the appropriate software tools.
Many designers I know skip the preliminaries and jump directly to steps 5 and 6. Big mistake. Before you think about style, you must think about structure.
The structure is the skeleton and muscles of your graphic; the visual style is the skin. With no bones to support it, the skin of your project will collapse.
Keep type and color under control, and Create a solid layout by imagining your graphics as if they were groups of rectangles.
That’s the first step for any project: defining its goals and scope. The second step is to gather your information.
Limiting the amount of colors and different fonts in your graphics will help you create a sense of unity in the composition. I usually recommend to my students at the University of Miami and the University of North Carolina at Chapel Hill to stick to just two or three colors and play with their shades.
9. The Rise of Interactive Graphics
The Design of Everyday Things by Donald A. Norman, originally published in 1988, is a perfect starting point.
- Visibility
The more visible the functionality of an object, the easier it will be for users to create a mental model of what they can obtain from it.If something is important in your graphic, highlight it in such a way that readers can sense its relevance and how it operates.
- Constraints
Any infographic can offer just a small amount of interactive possibilities, depending on what we want users to achieve with the graphic or extract from it. To avoid confusion, the designer consciously imposes limits.
- Consistency
A rule in traditional graphic design states that entities of similar nature should look alike. That is, elements of the same kind—whether they are headlines, body copy, footnotes, or whatever—should always be designed with the same typefaces, size, and style.
Visual Information-Seeking Mantra: “Overview first, zoom and filter, then details on demand.
Figure 9.11. Examples of linear and non-linear structure.
Different Kinds of Interaction
- Instruction
In the most basic and common kind of interaction, the user tells the infographic to do something by means of pressing buttons, typing commands, or double-clicking the mouse.
- Conversation
This kind of interaction allows the user to have a dialogue with the presentation, as if he is having a conversation with another real person.
- Manipulation
we allow manipulation when we let readers change the structure and appearance of what is presented to them so they can achieve certain goals.
- Exploration
You were not represented in the story by a cartoony hero running around on the screen. You were the hero. You held that gun and shot it at hundreds of aggressive (and, yes , cartoony ) Nazi bullies. The kind of interaction these games apply is called exploration, and it can be used in information graphics with interesting results.
TheJourneyOfBookworld 
One reply on “Notes from Functional Art by Alberto Cairo”
Really helpful
LikeLike