Wireframe for Aid Transparency (Photo credit: Edith OSB)
I’m participating in a MOOC – Massive Open Online Course – titled Introduction to Infographics and Data Visualization, taught by Alberto Cairo @albertocairo (see open.journalismcourses.org/) who blogs at The Functional Art .
This week, we were assigned to create the design for an interactive infographic to present the data on organizational transparency of big international aid organizations – the World Bank, for instance, and many governmental aid organizations. The data and some basic graphs are presented by the Publish What You Give organization.
The exercise really makes me think. In the video lectures, Albert Cairo tells us that that an interactive design needs to be obvious – to make clickable things look clickable. That sounds great — and anyone who has spent 30 minutes finding the link on a page of text understands its importance — but it is harder to achieve than it looks. In earlier versions of this design, the boxes where information appears (on the right) and those with options to click (on the left) looked the same. Then I realized: how would anyone know where to click?
In this design, the solid boxes on the left would present choices. The top box chooses among the three types of transparency rated: Organizational, the biggest donor Country, and the biggest Project. Once selected, subsequent boxes would let you choose just governmental or private, or types of aid (military, humanitarian, health, etc.) The blue box would let you select individual organizations and get some score card information about each one.
For each selection, a Top 10, a Bottom 10, and an Improved Since 2011 would pop up in the boxes on the right.
The headline area would provide basic background information about aid transparency (and lack thereof) and show the overall growth in aid – total and by recipient continent – for the last 50 years.
The lower area explores the transparency scores by the total amount of aid given, and will also light up (or not) according to the selections on the left side.
I haven’t yet learned enough of Illustrator to use it — although it’s the right tool, because the vector graphics can be resized. This was done is trusty old Photoshop Elements 9.
