be rad…be foolish

Purists would have you believe a perfectly designed infographic requires no interactivity.  All the information is adequately, if not perfectly, presented and in a logical, hierarchical, intuitive and easy to understand way.  As of the beginning of February 2011, I shared this view.  Now, I think this view is about as old-hat as, I don’t know, rubbing two sticks together to make fire.

With any sort of information design, logical, hierarchical, easy to understand information presentation is a must.  Print designers have been doing this for years: tables, ledgers, bar charts, pie charts and, the beloved, venn diagram–just to hit the highlights.  Any sort of non-prose information can fall into this category of ‘designed’ information.  We think of information design and infographics as a recent phenomena, but it goes way back; as long as we’ve been assembling information without the traditional subject, verb, object model.  Merchants needing to keep inventory, cartographers making a map, stone cutters telling a story on a monument.  They all had to rely on something more intuitive.

Information design is all about guiding the viewer’s eye around that piece of media.  Different fonts, different sized fonts, the placement of text and non-text elements, something as simple as a thin line, these are all tools an information designer uses to logically tell the story of the data they’re working with.  We all understand this–top to bottom, left to right, bigger fonts to smaller fonts, lines separate or guide, color to emphasize, &c.

This all still applies to interactive infographics.  So if an interactive infographic doesn’t adhere to the these conventions, forget it, it’s useless.  Interactive infographics, sitting on a screen, without any input from the user, should be up to par with a static infographic.  They should tell a story, convey information, be intuitive, all without any input from the user.  The value of interactivity are the additional layers of information that a static infographic could never achieve.  A user can click or hover over an element that’s already presenting information to get even more information.  Visual elements can be animated presenting a visually rich experience.  And like all interactive media, the user is put in the driver’s seat.

Interactive infographics require an even greater sense of hierarchy, intuition and clarity than static.  Elements will move and shift and animate.  The user must always know where he/she is in the infographic.  The minute they get even a little confused, they move on.

It’s a trade off, users can potentially be exponentially more engaged with an interactive infographic than a traditional, static infographic.  But interactive infographics must be flawless in their execution of information design.

And on that note, a parting thought.  Given that interactive infographics must be even more organized and intuitive than static, how do we balance simplicity of design and presentation with complexity and depth of data?

I haven’t been happy with my capstone site since the first design.  I changed a jQuery hover over element to a basic slider.  Then last night I changed the entire interface design.

I’d been thinking about incorporating a sprawling urban landscape silhouette somewhere.  Originally I thought it’d go at the bottom of the div that drops down when you click on the About This Project button.  But given how the site will be presented to the user once I add a video clip I’m making in After Effects, I didn’t think many users would see this little bit of artwork I’ve created.

So it’s sitting in the header now.  That might change too.

Designed this back in February.  Was going to drop the opacity really low and have it printed on the back of my business card.  Decided not to do it, thought it’d make the card too busy.  But I stumbled on it just a minute ago and figured I’d post it.

It’s relatively interesting.  At least for myself.

I just finished the iMedia Showcase invite.  Was happy to design it with a few minutes here and there over the past week or so.  It was a nice break from working on capstone.  I used Trajan–inspired by AKQA’s website–as the display type and District Thin for the text.  District Thin has a pretty high x-height and was more readable than some other thin, san-serif fonts I considered.  Desaturated the blacks to various degrees for the text; obviously left the company logos as they are.

I think it turned out well.  Wanted to play with whitespace and a little bit of grid design.

*The logos aren’t pixelated on the print version, just this screenshot.