Summary of thefunctional art
36
www.juantp.com The functional art : an introduction to information graphics and visualization, by Alberto Cairo Summary by Juan Torregrosa P. Introduction to the book and this summary Introduction by Alberto Cairo Why Visualize: From Information to Wisdom Forms and Functions: Visualization as a Technology The Beauty Paradox: Art and Communication The Complexity Challenge: Presentation and Exploration The Eye and the Visual Brain Visualizing for the Mind Images in the Head Creating Information Graphics The Rise of Interactive Graphics Profiles
Transcript of Summary of thefunctional art
www.juantp.com
The functional art: an introduction to information graphics and visualization, by Alberto Cairo Summary by Juan Torregrosa P.
Introduction to the book and this summary Introduction by Alberto Cairo Why Visualize: From Information to Wisdom Forms and Functions: Visualization as a Technology The Beauty Paradox: Art and Communication The Complexity Challenge: Presentation and Exploration The Eye and the Visual Brain Visualizing for the Mind Images in the Head Creating Information Graphics The Rise of Interactive Graphics Profiles
www.juantp.com
Introduction to the book and this summary Information graphics and visualization is something that I never payed too much attention to, beyond of course some random news readings and some wow moments while surfing the web. But I’ve been two years involved in Marketing and Communication so I guess it was a matter of time before I bumped into visualization and information graphics. Why? Well, aside all the technical stuff, I find this is just another tool to improve communication for companies and...why not? ...also a way to optimize our clicksthroughrate, number of fans and credibility. This summary is for almost 99% of it a compilation of those quotes and paragraphs that I found enlightened me the most while reading The functional art. The book itself was entertaining but I thought its narrative was more engaging than its technical advises. For example, at some point I was interested in how to use Adobe Illustrator to enhance some graphics, but the book didn’t give any link. And at other moments, the author made too many personal comments as if the important thing about the book was his experience rather than the technical knowledge. A technique that I think is used a lot in some Master classes, where teacher want to engage students above… A good book, but a bit too expensive and bit too long. I hope my summary can help to save you time and money. June 2016, Madrid Juan Torregrosa Pisonero
www.juantp.com
Introduction by Alberto Cairo
no other activity demands more mental resources than visual perception and cognition
we see because we have previous understanding of certain things. Seeing precedes understanding, and this understanding precedes a better, deeper seeing down the road
InfographicsVisualization
PresentationExploration Some graphics are almost all presentation, so they allow just a limited amount of exploration; hence we can say they are more infographics than visualization In newspapers and magazines, infographics have traditionally been created within art departments. In all of those I’m familiar with, the infographics director is subordinate to the art director, who is usually a graphic designer
www.juantp.com
Why Visualize: 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
Problem: Too many lines Solution: Hierarchy In information graphics, what you show can be as important as what you hide.
How: Edit with Adobe Illustrator to: 1highlight a few rich countries and a few developing and poor countries. 2Make other countries’ lines light gray, so they remain on the scene but don’t obscure the message.”
www.juantp.com
Juan´s tip: You can do the same with Google docs>graphics>edit>click on the lines and change color, size,etc.
Drowning in Data? Only If You Don’t Know How to Swim DIKW Hierarchies (Data, Information, Knowledge, Wisdom)
Just as not all the information we absorb leads to knowledge, not all of the knowledge we acquire leads to wisdom
www.juantp.com
Informational architecture
The structural design of shared information environments The combination of organization, labeling, search, and navigation systems within
websites and intranets The art and science of shaping information products and experiences to support usability
and findability Outside academic circles, an information architect can be someone who writes technical handbooks, a software engineer, a web developer, a wayfinding designer and that nerdy guy who makes charts on fertility just for the fun of it.
www.juantp.com
Forms and Functions: Visualization as a Technology
The usefulness of a graph can be evaluated only in the context of the type of data, the questions the designer wants the readers to answer, and the nature of the audience
I recommend you try whenever you see an information graphic in a newspaper,
magazine, book, or website...Ask yourself: What does the designer want me to do with this graphic?”
Some things a graphic should do: present, compare, organize, correlate
In general, the better defined the goals of an artifact, the narrower the variety of forms it
can adopt” Look at this graphic and try to answer these questions in less than five seconds each: 1. In which region has unemployment grown the most? 2. In which one has it dropped the most?” Likely, you can’t do it.
www.juantp.com
Now, with a different form, try to answer the same questions:
Likely, you can do it
Designers who don’t develop the crucial skill of asking themselves, “What is my graphic for?” are easy victims of fashion
Look at this bubble graph:
www.juantp.com
Have you guessed the right proportion? Now look at this other graph. It shows the same proportions. Why do so many people overestimate the number for 2009 in the bubble chart? Because the human brain is not good at calculating surface sizes. It is much better at comparing a single dimension such as length or height.
www.juantp.com
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” Analyzing through the visualization wheel: 1Look at this diagram and then, through the visualization wheel, analyze it.
www.juantp.com
The visualization wheel’s axes correspond to the main features you need to balance when you design an information graphic.
Deeper and more complex Shallower and more intelligible
Density Lightness
Multidimensionality Unidimensionality
Originality Familiarity
Novelty Redundancy
Functionality Decoration
Abstraction Figuration
www.juantp.com
The complexity of a graphic should be adapted to the nature of your average reader
www.juantp.com
Minimalism and Efficiency Which one you prefer?
www.juantp.com
The original graphic is not very appealing, but the strippeddown version was not easily
remembered I personally (Alberto Cairo) believe they suggest compelling reasons to doubt that always reducing charts to their barest bones facilitates comprehension and memorability. It depends on the audience’s nature, knowledge, tastes, and expectations
www.juantp.com
The Complexity Challenge: Presentation and Exploration
Threedimensional effects are popular in business presentations, but they are hardly appropriate when the goal is to communicate, as they distort proportions.
My objection to graphics that put impact before depth is not that they are visually interesting and fun—they may well be. But having spent so much space and resources on being impactful, they end up being shallow
Beauty is not the goal of visualization and it is usually not required to achieve the goal (...) Remember that the goal is to enlighten.
Organize your graphics in layers. First, offer a summary of the data, such as a good intro
www.juantp.com
www.juantp.com
The Eye and the Visual Brain
The frequency of a light wave is a measure of the number of waves that cross a particular point within a given time frame. Frequency is inversely proportional to length: The shorter a wave of light is, the higher its frequency
The shorter the wavelength and higher its frequency, the more energy the light carries.
The visible range for humans runs from violet (high frequency and energy, short
wavelength) to red (low frequency and energy, long wavelength)
the pupil controls the amount of light that enters the eye. It contracts when there’s too much light and opens when there is very little
Photoreceptors. They come in two main groups: rods and cones, so called because of their shapes. Each retina has around 100 million rods that see in black and white and are active when light is dim. Cones (7 million, more or less) are in charge of color detection Although each of our eyes is capable of taking in everything within a 180degree angle, as shown in Figure 5.4, we only see with full acuity the things that lie in a very narrow field in front of us, an angle around two degrees wide. This angle is centered around the retinal region called the fovea
www.juantp.com
In order for us to identify an object, the rays of light that bounce off of it must stimulate the cones on the fovea; otherwise, we will see only a blurry mass. What is it then that creates our very convincing illusion of acuity, which leads us to believe that we see everything in our vision field with equal accuracy, as if it were a picture? We enjoy this illusion because our eyes don’t remain still These ocular movements are called saccades, and each stop your eyes make on a particular point is called a fixation. Vision is the result of mapping your environment based on the aggregated information your eyes obtain from multiple fixations. But the eyes don’t fix on random sections of the landscape. They are attracted first to certain features before they move to others. They prioritize.
Saccadic movements and fixations are unconscious, but they are not random
www.juantp.com
Moving objects tend to attract our eyes more than static ones. You should never simultaneously show an animation of the robot on the right side of the screen and a text box on the left.
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
www.juantp.com
We are victims of illusions not because the brain malfunctions, but because perceiving illusions can be advantageous in some circumstances.
what we commonly call seeing is not a single phenomenon, but a group of at least three operations: sight, perception, and cognition Long term memory affects our perception!
www.juantp.com
Visualizing for the Mind The Brain Loves a Difference When you open your eyes to the world, one of the first things your brain does is discriminate between background and foreground.
www.juantp.com
The brain is much better at quickly detecting shade variations than shape differences
The Gestalt School of Thought and Pattern Recognition
the visual brain is a device that evolved to detect patterns
preattentive detection feature—the instant sorting of differences and similarities—is one of the most powerful weapons in the designer’s arsenal.
Proximity This principle notes that objects that are close to each other tend to be perceived as natural groups
www.juantp.com
Similarity Identical objects will be perceived as belonging to a 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”
www.juantp.com
Closure
Objects inside an area with crisp, clear boundaries will be perceived as belonging to a group”
www.juantp.com
Don’t overuse background boxes. Doing so will make your graphic look cluttered. If you need to differentiate between different sections, use white space
www.juantp.com
Cleveland and McGill’s elementary perceptual tasks. The higher an encoding method on the scale, the more accurate the comparisons it facilitates.
www.juantp.com
When the goal is to allow readers to make accurate comparisons, a chart based on bars or lines sitting on a single horizontal or vertical axis beats other forms of representation
www.juantp.com
Because the human brain has difficulty comparing angles, directions, and curvatures. Better to do some subtractions, calculate the balance in favor of one of the nations, and plot the derived variable instead.
www.juantp.com
The important criterion for a graph is not simply how fast we can see a result; rather it is whether through the use of the graph we can see something that would have been harder to see otherwise or that could not have been seen at all Stereoscopic depth perception, is not the only way to see in 3D. If it were, we would be in serious trouble when closing (or losing) one eye….The brain uses other tricks to build the illusion of depth...the brain perceives lines that recede toward the horizon until they converge in a vanishing point, even if no real lines are present, just blurry edges
www.juantp.com
lowlevel visual perception, including the most basic tasks of foregroundbackground differentiation, the estimation of the relative sizes of things, the extraction of simple patterns from our surroundings...We are about to enter an even more fascinating territory, that of highlevel perception, which involves the identification of what we see
www.juantp.com
Images in the Head Cognitive psychologists find that during visual perception, information runs in two opposite and convergent pathways. The first pathway brings impulses from the retina to the brain; the other retrieves contents from our memory and brings them to the visual processing areas. The first pathway is called bottomup processing, and the second is called topdown processing
The limited capacity of our visual working memory helps explain why it’s not advisable to use more than four or five colors or pictograms to identify different phenomena on maps and charts
A photograph includes too much information that’s irrelevant for understanding what’s going on.
Realistic photos are better for describing Simplified images are better to show how something works
The brain identifies objects by comparing what you see with what you know and remember
www.juantp.com
The researchers found that the farther the object was rotated from its most common orientation, the longer it took to recognize it. Evidence suggests that, when faced with the task of identifying such pictures, we mentally rotate them
An object can be identified based on its main features, on its components, and on its configuration
It is easier to identify an object when we can see its corners and junctures.
The content of the line art drawing is more easily recognizable, on average
www.juantp.com
Creating Information Graphics
Before you think about style, you must think about structure Create a solid layout by imagining your graphics as if they were groups of rectangles “Limiting the amount of colors and different fonts in your graphics will help you create a
sense of unity in the composition” Stick to just two or three colors and play with their shades. You may pick a neutral tone
for the background elements (bluish gray in this case), and an accent color to highlight the most relevant stuff (yellow). Do the same with fonts. Choose just one or two: a solid, thick one for headlines, and a readable one for body copy”
www.juantp.com
The Rise of Interactive Graphics
If you want readers to press, pull, push, or spin virtual objects on a computer screen, design those objects so as to suggest that they are pressable, pullable, pushable, and spinnable
If a piece of information is indispensable to understand the whole story, it should always
be visible, not hidden behind a layer of interactivity
place your buttons in the same screen position
Overview first, zoom and filter, then details on demand Styles of interaction
Instruction In the most basic and common kind of interaction, the user tells the infographic to
do something Example
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. Example
Manipulation Generally, we allow manipulation when we let readers change the structure and
appearance of what is presented to them so they can achieve certain goals” Example
Exploration. Example
www.juantp.com
Profiles
John Grimwade Juan Velasco Steve Duenes
Jan Schwochow Hans Rosling Moritz Stefaner
