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?