This month, we changed up the format of the Flux Report to focus on some very interesting data from the Department of Energy. Using popular cars as guinea pigs, we...
Two things that food and information have in common: the more attractive and richer it is, the more we want it.
When you’re really hungry, almost anything tastes good. Eat too much, and it has detrimental effects. The same is true with information. Most of us have more than enough, and it starts to slow us down. But when information must be consumed, it is very helpful to present it in a way that is appetizing, and not just more of the same.
Information Design is the intersection of graphic design and analytical thinking. I had a friend and photovoltaic expert tell me, “No offense but I wouldn’t come to you for information about my industry.” I then showed him the Flux Report and he couldn’t take his eyes off of it for five minutes. It was a great example of how information, when presented the right way, becomes very compelling and potentially more useful than it’s source materials.
Lately we’ve been going down that road of information design, extracting the key points from complex data and converting them into tasty little bites that go down easy.
How does that work? Our basic mode of thinking goes: Think critically about the information you’re trying to convey. How many steps of logic will it take for your audience to figure out what it is that you’re trying to say? To continue the analogy, do they have to make the sandwich out of your raw ingredients? Realize that information is better consumed when it is prepared for quick consumption.
The Flux Report
For an IBM study that we interpreted, they asked a good question for their survey: I wonder how the opinions of consumers and industry executives differ on the reasons for buying an electric vehicle. They polled the public and industry, added up the percentages, and created a bar graph with one color for the public and one for the execs. That’s pretty straight forward. But remember – they wanted to show the difference between the two groups. So there’s one last step the viewer has to go through. It’s to do the math between, say 45% for the public and 37% for execs.
We helped the viewer along by doing the math and adding a third element to the table. That element represented the size of the difference. Now viewers can easily see the difference between the differences.
In another project, nTelos, a regional telecom, would represent all of the TV channels it provides across several grades of packages with overlapping, optional features. The web presentation of this required about eight pages to say everything.
With that much information, the first task is to group similar elements. Then reduce redundancy, enhance the important and attractive and de-emphasize everything else as much as possible.
In nTelos’ case, we cut the number of channel logos displayed nearly in half by piggybacking the deluxe package on the standard package. We created one box to contain the standard package which visually funneled all of its contents into the deluxe package. This was done with two boxes and a single triangle. We also reduced the amount of real estate used (and thereby reduced the amount of scrolling and number of page clicks) by displaying the channel logos in a scrolling box. A viewer can only look at so many of these things at one time, right? So if we show 8 at a time instead of 50, no one’s going to complain.
The Curry School
In a third example, an office of UVa’s Curry School of Education has a proprietary Electronic Lesson Planner (ELP) used by 15,000 K-3 teachers in Virginia. Version 1.0 had many support requests related to design and technical challenges its users had.
The original ELP led the user between the pages with a tab structure, much like you see in software and websites. This is a very stable and time-tested structure. Users know how to work with it. What the ELP authors intended though, was to use the tabs in a sequential order. We morphed the tabs into right-facing arrows to give some horizontal thrust to the user’s tab-clicking ways.
Within each page, we also saw a lot of information which by it’s nature was separate but by design morphed together into a big lump. We kept the left margin that was already in place but reserved it only for the highest level of organization within the page. That allowed a clear division between sections, and then allowed for us to have a secondary level of division within the first. The icing on the cake was using two photo images throughout all four ELPs and to add a blast of color to each one (originally a full color photo) to distinguish one ELP from the others.
I’ll set aside the technical issues for now, but will mention that we solved some technical issues with design solutions by guiding the user along an easier path around the technical problem.
In all of the examples above, the information design component was achieved with simple design principles like geometry, typography, color, size, location and simplicity. Individually, they are small changes. Put together, they greatly improved the legibility and usability. That is information design at its best.