Infographics for the social sector webinar
•Download as PPTX, PDF•
1 like•519 views
Does your organization have loads of unused data? Information design can turn that data into understandable visuals, giving your members the right information to make choices or learn something new about your industry. Be better positioned to tell your story by learning how to make your infographics clear, compelling, and convincing. Learn how infographics can boost your website’s SEO and can aid in user engagement in this free webinar.
Recommended
Recommended
More Related Content
Similar to Infographics for the social sector webinar
Similar to Infographics for the social sector webinar (20)
Recently uploaded
Recently uploaded (20)
Infographics for the social sector webinar
- 1. Webinar: Infographics for the Social Sector Steve MacKley Dir. Of User Experience
- 2. Infographics • TheWhat • TheWhy • The How Our agenda for today
- 5. 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
- 6. Either can be static, animated or interactive.
- 8. Why Infographics? http://neomam.com/interactive/13reasons/ a great source of info!
- 9. 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
- 10. It only takes 150ms for a symbol to be processed + 100ms to attach a meaning to it
- 11. We are in an age of data overload
- 12. 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?
- 13. Infographics are a counterbalance to this data overload
- 14. Researchers found that color visuals increase the willingness to read by 80%. More Engaging Green, R. (1989). The Persuasive Properties of Color, Marketing Communications
- 15. 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.
- 16. 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’
- 17. 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
- 19. A simple approach to the infographic experience
- 20. Act I: Setup Act II: Confrontation Act III: Resolution The 3 Act Play
- 21. • Your users/audience are the protagonist • Establish what they need to know • …to be confronted with the dramatic question Act I: Setup
- 22. • emails • banner ads • campaign landing pages • social media images (memes) Common setup methods include
- 23. Audubon Birds & Climate Changes • Learn what you can do to help…
- 24. ALSA New to the Ice Bucket Challenge? • So you want to take the IBC – A helpful how to guide
- 25. ALSA Your Dollars atWork • See how the funds are being used
- 26. 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/
- 27. 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
- 28. Anatomy of a Social Media Image
- 29. • Also called the “rising action” • The protagonist attempts to resolve the issue; • …but often needs new knowledge or understanding to proceed. Act II: Confrontation
- 30. The infographic design process http://visual.ly/infographics-process
- 31. Dos and Don’t of Infographic Design Do • Tell a Story withYour 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'tWait for the Audience to Come toYou
- 32. • https://www.canva.com/create/infographics/ • http://piktochart.com/ • http://www.easel.ly/ • http://vizualize.me/ Some FreeTools
- 33. Canva
- 34. Social Media Best Practices for Sharing Infographics http://lemonly.com/wp- content/uploads/2013/09/Sharing-Infographic-Online- Best-Practices-1.jpg
- 35. Your Brain on Beer vs. Coffee http://en.ilovecoffee.jp/posts/view/79
- 37. 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.
- 38. • The climax • Dramatic questions get answered • Heeding a Call to Action Act III: Resolution
- 39. 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
- 40. ALSA example
Editor's Notes
- The second act, also referred to as "rising action", typically depicts the protagonist's attempt to resolve the problem initiated by the first turning point, only to find him- or herself in ever worsening situations. Part of the reason protagonists seem unable to resolve their problems is because they do not yet have the skills to deal with the forces of antagonism that confront them. They must not only learn new skills but arrive at a higher sense of awareness of who they are and what they are capable of, in order to deal with their predicament, which in turn changes who they are. This is referred to as character development or a character arc. This cannot be achieved alone and they are usually aided and abetted by mentors and co-protagonists.[1]
- Consider what the grandfather of data visualization, Edward R. Tufte once said: “Design cannot rescue failed content. If picking a color palette is hard for you, stick to the rule of three. Choose three primary colors. Of the three, one should be the background color (usually the lightest of the three), and the other two should break up the sections. If you need to add other colors, use shades of the three main colors. Words setup, support, but don’t have to star
- The third act features the resolution of the story and its subplots. The climax is the scene or sequence in which the main tensions of the story are brought to their most intense point and the dramatic question answered, leaving the protagonist and other characters with a new sense of who they really are.[1]