Infographics: New York Times Inspiration

Jun 22, 2011

Hello everyone.  If you have not watched this video, check it out.  http://visualjournalism.com/amanda-cox-in-denmark-for-new-media-days/2010/11/18/.  Amanda is not the greatest speaker, but the points she makes are extremely relevant for eLearning development.

While this may be a product development suggestion for Articulate, I am wondering if anyone has developed an interactive slider, similar to the one used after the Tsunami?  http://www.nytimes.com/interactive/2011/03/13/world/asia/satellite-photos-japan-before-and-after-tsunami.html.  This level of "micro" interactivity is really interesting.  I call it "micro" because the user is in total control of the highlighting the before and after pictures.  There is no predefined "click" points similar to a time line approach.

Have fun and share.

Mark

14 Replies
Greg Friese

Thanks Jeanette for sharing my screenr.

Mark I will look forward to seeing what you come up with.

It just occurred to me that motion path may also work to slide a rectangle as big as or bigger than the image, but I have not tested that idea.

Also I have looked but not been able to find some sort of web based app that would allow you to load your own image and then it creates either an embed code or a full screen image that you could embed into AP as a web object.

Mark Burke

Good afternoon....So I wanted to expand on my thoughts around Infographics. There are a few key points made in Amanda's talk that resonated with me. Great infographics have a number of characteristics.  To chip away, I am thinking in levels. So, level 1 traits or characteristics are:

1.)  Provide directions on the use of the graphic.

2.)  Provide user control (as Greg has demonstrated above)

3.)  Provide additional support to the view of information (or data).

4.)  Provide a "reset" function (I soft of inferred this from the various examples Amanda provided.

Here's my stab at creating a usable example.  I take a look at the population of Tuba players over the years.  This "data" is fictitious, so don't take it too seriously

Bryan Jones

Mark and Greg,

Here's a possibility for starting the image in the middle with the player controls on the slide. This is all done with PPT and Articulate using hyperlinks. I'm working on a few other ideas too.

http://dl.dropbox.com/u/2332114/eLearningArt.com_Articulate_Community/Slider_midstart/player.html

Cheers,

Bryan

Montse Anderson

I missed this thread:-( But it's a good thing I'm stalking Bryan today LOLOL!

Playing off of Mark's example, I tried combining PowerPoint's wipe animation with Presenter's seek bar to create the wiping effect.

http://elearningdesigner.com/tutorials/ppt-before-after/player.html

But to create the NYT example, you'll need to use Flash:

http://elearningdesigner.com/tutorials/beforeafter-demo/ 

Mark Burke

Nice examples....Bryan...I really like the slider mock up.  I did find myself irresistibly click on the center slider and attempting to drag it..   So I was thinking about other similar interfaces and those "zoom in" sliders on maps like Google come to mind.  They are "click" on the scale type sliders.

So, maybe adding stopping points where your hyperlinks are would increase user orientation...granted, somewhat eliminating the open ended nature of a slider though.  I really like the center starting point and with enough hyperlinks, this works in my opinion....

Awesome Bryan.

Montse...nice mixer....I see a musical theme here :-)  Do you have that Flash piece inside an Articulate to show?

Mark

Owen Terry

Nice Idea

I want to share my idea

Infographic: How do the best job
So what about the graphics? They are everywhere these days, but like many new technologies bright toys, we've created a monster!

I have 10 tips for better graphics, 10 great examples of effective data images 21 26 best resources to help you find and produce computer graphics that connect and communicate.

Google the term "graphics" and you'll get more than 5,330,000 visits. There are already dozens of excellent blogs including Cool Infographics Infographics about 10,000 subscribers.

In fact, I'm so tired of the word I'm just going to call the Inspector General for a change.

An extensive list of Wikipedia as a story. I mean I never thought of petroglyphs, hieroglyphs, "The Last Supper" by Da Vinci, Michelangelo's "Creation of Adam" in the Sistine Chapel, Olympic pictograms and infographics. But good. .. were communicating that they were not?

The use of computer graphics to the communication of information easily and quickly gained momentum in 2005 with the popularity of Digg, Reddit and other aggregators of social media. It has become too popular bloggers as a way to spice up the messages the media to add impact to the news and content marketing experts to create viral content.

Now we'll find thousands of tips on the Internet IG. Subscribe to newspaper infographics and get a cool new IG every day by email.

For all I know, there may even be an application to the IG, t-shirts, baseball caps and mugs logo'd monogram. It is inevitable! However, they are so ubiquitous that computer graphics are losing their impact? It's starting to feel like me.

10 Tips for Infographics

Let's start with one of the best examples of effective IG I've seen recently. PR Newswire, which communicates the benefits of social media in press releases easily and visually.
This would not be a real public relations message coach if there is a list of tips and tactics, so here are my ten tips for more effective computer graphics:

Keep it simple: if ever there was a need for the KISS principle, IG they are. Visually complex or too complicated to be ineffective.
Check the facts: incorrect information diminishes your credibility. Always fact check and correct.
Design features: simplicity is a virtue when it comes to effective communication visual design is bad ... well ... bad. A good design, strong headlines, the choice of type, distribution and effective use of white space are essential.
Color Works: use color for maximum impact, but do not use it just to be colorful. We know that the colors convey emotion, but, more importantly, trust your instincts and first impressions.
The numbers must add up: surprisingly, the numbers are sometimes wrong or not communicate what you mean. Too many numbers can also be confusing. Check carefully.
Improving the narrative: Make sure that adds to the visual narrative. Like television, a good story is even better with a great visual.
Maintain the short text: the best visual presentation use only essential text. Stick to the minimum number of words to tell the compelling story.
Size matters: keep your file size as small as possible for fast downloads, but retain image quality for best effects.
Do not overdo it: visual elements in moderation and do not use a GI of every post or every page. Like most things, too much of a good thing ... is a bad thing.
Credit where credit is due: the copyright on your credit and always IG sources. It's what to do.

.................................submit infographics.................................

James Brown

If I'm not mistaken, history is repeating itself. This effect is done with Java Script.

http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

I have been doing some Flash programming lately and I believe you can do the same with flash but I believe the Action Script you would need to use is AS3 which is not currently supported by Articulate.

If you look back through the posts you'll find this very same discussion and there I remember uploading examples of how to do this in PPT.

This discussion is closed. You can start a new discussion or contact Articulate Support.