infographics for the social sector webinar
TRANSCRIPT
Webinar: Infographics for the Social Sector
Steve MacKleyDir. Of User Experience
Infographics
• The What
• The Why
• The How
Our agenda for today
Infographics The What
InfographicsData
Visualizations
Infographics are visual representations of information, data or knowledge often used to support information, strengthen it and present it within a specific context.
They are context-specific and often times hand-crafted.
Data visualizations are visual displays of measured quantities by means of the combined use of a coordination system, points, lines, shapes, digits, letters quantified by visual attributes.
They are context-free and usually created automatically.
For example: http://data.foundationcenter.org/
Communication vs. Exploration
Editor of Datavisualization.ch
Either can be static, animated or interactive.
Infographics The Why
Why Infographics?
http://neomam.com/interactive/13reasons/ a great source of info!
We are visually wired?
Almost 50% of your brain is involved in visual processing
70% of all your sensory receptors are in your eye
We get the sense of a visual scene in 1/10 of a second
Merieb, E. N. & Hoehn, K. (2007). Human Anatomy & Physiology 7th Edition, Pearson International Edition. Thorpe, S., Fize, D. & Marlot, C. (1996). Speed of processing in the human visual system, Nature, Vol 381
It only takes 150ms for a symbol to be processed + 100ms to attach a meaning to it
We are in an age of data overload
We receive 5x as much information today as we did in 1986
On average users only read 28% of words per visit.
Big Data = Big Distraction
Alleyne, R. (11 Feb 2011). Welcome to the information age – 174 newspapers a day. The Telegraph. Nielsen, J. (2008). How Little Do Users Read?
Infographics are a counterbalance to this data overload
Researchers found that color visuals increase the willingness to read by 80%.
More Engaging
Green, R. (1989). The Persuasive Properties of Color, Marketing Communications
People following directions with text and illustrations do 323% better than people following directions without illustrations
More Accessible
Levie, W. J. & Lentz, R. (1982). Effects of text illustrations: A review of research, Educational Communication and Technology.
50% of an audience is persuaded by a purely verbal presentation
67% of an audience is persuaded by the verbal presentation that had accompanying visuals
More Persuasive
Wharton School of Business. ‘Effectiveness of Visual Language’
People remember
10% of what they hear,
20% of what they read and
80% of what they SEE and DO.
More Recall
Lester, P. M. (2006). Syntactic Theory of Visual Communication. - See more at: http://neomam.com/interactive/13reasons/#sthash.7BMWULpr.dpuf
Infographics The How
A simple approachto the infographicexperience
Act I: SetupAct II: ConfrontationAct III: Resolution
The 3 Act Play
• Your users/audience are the protagonist
• Establish what they need to know
• …to be confronted with the dramatic question
Act I: Setup
• emails
• banner ads
• campaign landing pages
• social media images (memes)
Common setup methods include
Audubon
Birds & Climate Changes
• Learn what you can do to help…
ALSA
New to the Ice Bucket Challenge?
• So you want to take the IBC – A helpful how to guide
ALSA
Your Dollars at Work
• See how the funds are being used
It can be a confusing mess, you just want to share and promote your new infographic…
Social media images
http://blogs.constantcontact.com/social-media-image-sizes/
Shared Image Sizes
• Start with the Facebook Open Graphs (OG) size
• Use images that are at least 1200 x 630 pixels for the best display on high resolution devices.
• At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.
• Ratio: 1.91:1
Twitter and LinkedIn will follow from this. (they have similar aspect ratios)
• Twitter: 1024 x 512
• LinkedIn: 646 x 220
• Pinterest: sorry prefer vertical images
A more universal social media image
https://developers.facebook.com/docs/sharing/best-practices
Anatomy of a Social Media Image
• Also called the “rising action”
• The protagonist attempts to resolve the issue;
• …but often needs new knowledge or understanding to proceed.
Act II: Confrontation
The infographic design process
http://visual.ly/infographics-process
Dos and Don’t of Infographic Design
Do• Tell a Story with Your
Infographic
• Maintain a clear focus
• Keep the ‘graphic’ in infographic
• Write for your audience, not for your business
• Choose soothing but contrasting colors (3 color palette-to start)
Don’t• Use too many words.
• Overbrand your infographic
• Forget to cite your sources
• Overuse visual embellishment
• Don't Wait for the Audience to Come to You
• https://www.canva.com/create/infographics/
• http://piktochart.com/
• http://www.easel.ly/
• http://vizualize.me/
Some Free Tools
Canva
Social Media Best Practices for Sharing Infographics
http://lemonly.com/wp-content/uploads/2013/09/Sharing-Infographic-Online-Best-Practices-1.jpg
Your Brain on Beer vs. Coffee
http://en.ilovecoffee.jp/posts/view/79
Travel Hacks
http://www.besthospitalitydegrees.com/travel-hacks/
Anatomy of an Infographic Landing Page• Have a thumbnail for
ease of sharing on various social media
• Add a transcript of the infographics contents for SEO and accessibility
• Give the user something “next” to do. Don’t let this page be a dead end.
• The climax
• Dramatic questions get answered
• Heeding a Call to Action
Act III: Resolution
Give the user something next to do. Don’t let the infographic landing page be a dead end.
Redundant CTAs areas are not a bad idea.
• Soft Asks○ Email sign-up○ Social likes○ Social shares
• Or Hard Asks○ Donate○ Petitions
What’s Next
ALSA example
Thank You Questions?