For travelers in Colorado, the state's Department of Transportation has given you a little gift for your summer journeys: an updated user interface at their site, CoTrip.org. They've smoothed out user interactions for finding traffic cameras (something I look at when planning a ride in metro denver, or heading up to the mountains to go skiing), and the programming seems to have speeded up load times as well. At first glance, it's a great improvement over the functional but hard-to-navigate version I was looking at just a couple of weeks ago.
A few other items worth noting: all the most-accessed info is now right there on the front page, including latest road conditions/weather, traffic speeds, and alerts.
Cool Infographics posted this chart showing the national debt over the last 33 years. The data are accurate, and the scaling is ok, which makes all of the things that are horrible about how the data are displayed even more relevant.
I can understand the relevance of noting which party was in control of the White House (although a more relevant item might be who was in charge of Congress) but the commentary (""another BUUSH in the White House!") is juvenile, at best. The typography doesn't help much either, if your point is to try and present evidence in the hopes of swaying the opinion of someone who isn't already familiar with the data.
Cool Infographics makes some of these points as well, and notes that
This is a great example of data being visualized with a specific agenda in mind. Obviously, this is a chart framed to make Republicans look bad, and Democrats look good.
...which may be true, but I would argue that information presented in a more objective visual environment would actually make a stronger case for the author's advocated point, rather than the partisan interpretation shown here.
For example: here is the total national debt load, ported into the simplest chart possible:
This is a different representation than the year-by-year increases in the National Debt; however, by showing the total debt (not just the increase for a given year) it places each year's contribution to the Debt into a broader context. Even in this simple representation, partisans could still visually show how the total debt load for the country increased more quickly under the current administration. Even in this representation there is some unintentional bias: the "floor" of the chart starts at a not insignificant $400 Billion dollars. Granted, that's far below the $9 trillion shown at the end of the series, but it does lead the reader to the assumption that four hundred billion dollars is akin to no debt at all. A better interpretation of the data might look more like this:
Granted, that's not much of a difference. But the visual display now shows that $400 billion in context with the possible floor of Zero debt!
Note: I've had this post sitting around since last August, waiting to find time to create a better version of this. So, if anyone wants to pretty-up this chart (in other words, make it even more visually compelling via some best practices), shoot it over to me and I'll include it in a revised post here. One place to start might be to differentiate between which party had control over the congressional and executive branches during the timespan of the chart....
A user interface straight from a 1990's German car radio
VW has been using this blaupunkt-style navigation menu interface for a couple of years now, and even when it was new, it looked pretty old.
Takes up a lot of space, too, and doesn't integrate with the look and feel of anything on the rest of the site. Wassup with that, VW? I love the chunky german radios in your older cars as much as the next guy, but what are they doing on my computer monitor?
Breaking out of your own self-imposed view of things with SiloBreaker
In researching my last post about Newsweek's redesign article in the New York Times, I found this little site, SiloBreaker, which is an excellent example of innovating a new service that solves a problem created by the very medium it's exploiting. In short, you can enter in a keyword or phrase and get results organized by geographical mapping, trends over time, top people mentioned, and visual network representations of key players. The data is collected from a wide range of news sources, so you're not just getting your news from the same old place. This allows one to look deeply into a topic from a number of geographical, political, economical, and sociological viewpoints.
For example, I browsed through a world map, and clicked on this hotspot poised over Minnesota, and was handed a page dealing with the subject of deportation, illegal immigration, and Liberians=.
"If you can't get people to pay for what they love, we're all out of business."
That quote (in today's NYT article) from the Newsweek's chief executive sums up why they are redesigning their magazine and focusing on a core audience that is half the size of what it was.
The new rationale is to concentrate on the high-value experiences that a printed periodical can bring to a reader. This is by no means a bad thing. In fact, it's what publications have always tried to do.
The issue here is that the definition of "high-value experiences" has changed. We can get up-to-the-minute news online, and more often than not in-depth analysis (although critics of internet-delivered content rightly point out that readers "silo" themselves pretty quickly, filtering out tone, point of view, and whole areas of content that they don't want to hear or don't agree with; and that this is a bad thing if you are a critical thinker).
So, Newsweek will focus less on breaking news, and more on columnists and commentary, longer feature articles, and more photography and visual information. In the context of the internet and it's never-ending fire hose of information, this sounds like a little island of calm, reasoned content (whether it is or not will remain to be seen).
From a tangible standpoint:
The magazine will replace its thin paper with heavier stock that is more appealing to advertisers and readers. It will also put more emphasis on photography. Pages of a mock issue that Mr. Meacham displayed in his office on West 57th Street in Manhattan show a cleaner, less cluttered layout that has more open space and fewer pages that seem an uninterrupted sea of words.
The print designers at Newsweek must be doing a little happy white space dance right about now.
The Times rightly points out that Newsweek is reaching out to an audience that already has high-value, high-touch periodical experiences with such magazines as the New Yorker, The Atlantic, and others.
In some ways this moves in the direction I've discussed previously, and that others have mentioned in terms of what to offer when the "news" is free for the taking on the internet. You have to create a positive visual experience that relates to the reader on a personal, compelling level to get them to pay for it.
For something to be well-designed, it must meet the functional needs and expectations of the user. For it to be styled well, it must live up to the aesthetic needs and expectations of the user. An important difference. Often, design and style influence each other, and good style often is just as important to a successful marketing effort, or branding effort, or architectural effort, as design. But a fun style doesn't always lead to a beneficial experience, at least in the funcitonal sense.
One thing I remind people about all the time: everything anyone has ever made has been designed by someone. Great graphic design makes products, companies, and ideas more accessible by more people. Bad graphic design just makes products, companies, and ideas more opaque.
What differentiates the good from the bad? Lots of things. Focus. Brand integration. Accessibility. Grokability.
Paying someone $150, or $400, to design a logo will almost always result in bad design. Does that mean the designer who made it is not a good designer? Not necessarily. What it does mean is they aren't taking the time to find out what the essence of that brand should be. The same thing goes for paying a similar amount to design a website. Or a brochure. Even if you think about that money in terms of an hourly rate, rather than the value the design has for you (which is really how you should look at it), what does $150 translate to, in hours? I'll tell you: very, very little.
Would you trust a lawyer to draft the articles of incorporation for your business for $50? Would you let a $400 doctor operate on your heart?
Don't have a torque wrench handy? No prob. If you use a Smartbolt, the disc in its head will change color as the right amount of torque is applied to it. This is no different from breadcrumbs in website interfaces (which shows the user where on the site they are at a given moment). Or an activated menu item in a software program (or website). Excellent idea and execution!
A large part of a graphic designer's job (or anyone who traffics in visual information) is to curate the visual elements that are brought to the project table so that they are useful and understandable to the viewer. One such effort I am currently undertaking is the creation of thumbnail images for a photographer's website (not just any photographer, but the great photographer Andrew Bale, whose site we're retooling already has some beautiful work).
The current navigation scheme for moving throughout Andy's bodies of work uses an empty and full visual metaphor to show you what images you've visited, and which ones you haven't. It looks a bit like this:
The dark gray square shows the image you're looking at. The white squares are ones you've seen already. The blank ones are yet to be seen.
The new navigation uses snippets from each image as a representation of the whole image, so people can anticipate (or have their curiosity piqued). There are some good reasons not to use thumbnail crops (people want to see the whole image), but the advantages (you get the essence of an image, and can use it for navigation in a smaller area) are greater than the disadvantages--at least for this application.
In the case of this site, we're using a thumbnail image that is 64 pixels square. Andy's images are usually not square, so a crop is inevitable under this rule.
The issue here becomes what 64 pixels in a given image will evoke the larger whole, and that's where my job moves from being a production monkey to something that requires an understanding of the aesthetics, intent, and forms inherent in each image.
Take, for example, this image:
This is the same image you see above. I've rendered it here at the new enlargement size, which as you can see is a lot larger than the current view. Another improvement in the site that takes advantage of the growth in computer screen real estate since the initial site was developed.
So, what portion of this image evokes the whole? The blurry gondolas? The lamp on the right edge of the frame? The dark water below? Well, it's open for debate, surely, which is one thing I love about this job, but here's what I selected:
I think the darker mooring pole on the right, combined with the lighter one (in motion, slightly) to its left, along with the misty air and hazy building in the background, these elements evoke the whole of the image to me.
It's also mysterious enough that is makes you want to see more. It's a little call to action, without even having to use the words "click me!"
Visual editing doesn't just apply to photographs. Any time you consider using a visual element like a logo, color bar, or illustration, you have to "curate" its placement on the page, making sure it works in harmony with the other elements (text, page proportion, browser capabilities, paper stock, etc.) you are using. It's, simply put, the essence of any design problem.
you don’t need Photoshop to editorialize. We can go back to Mao and Stalin and Castro and Mussolini, and all these guys. All the dictators doctored photographs in order to effectively change history. So why is this a big deal? Is it because of the power of visual imagery, the fact that it resonates so much? Maybe that will change with the next generation. Maybe this new generation will be thinking about images differently. There is a savviness about what technology can do. Kids now are growing up in digital age where they routinely see doctored images in their mailboxes, in the media, on television, and so on and so forth.
Lazlo Molhoy-Nagy, the bauhaus photographer, told us way back in the 20s and 30s that visual literacy would be the most important tool free-thinkers and informed people of the 20th century could have. And he was right. Visual literacy is still important today, and knowing how to put it into context with visual disinformation and other factors is something that we 21st-century citizens need to master.
"Becoming comfortable with and confident in our visual abilities--improving our ability to look at complex information, see important patterns emerge, imagine new possibilities, and clearly show those discoveries to others--is going to become our most valuable asset. Looking just a short time into the future, visual thinking will significantly alter how business gets done in three ways:
Help us make better decisions faster. Within the next few years we will see most business analytics delivered in immersive graphic formats that allow for simultaneous manipulation of individual numbers and visualization of complex interactions and outcomes. There are many companies out there now like Tableau and Business Objects building these tools, and even plain-Jane Excel has enormous potential given the graphics processing capabilities of even the most basic business personal computers.
Help us communicate our decisions and visions more effectively. As more businesspeople become more aware of the power of pictures as a communications tool, more tools will become available to help create meaningful charts, diagrams, timelines, maps, and flowcharts--both alone and as teams. The great issue here is to first understand what we want to show and what our audience is willing to see and only then boot-up the machines.
Help our teams execute those decisions more efficiently. Project managers have always known the power of a visual timeline to ensure everybody knows what they're supposed to be doing when. The problem is that the product manager was the only one who knew how to understand the chart they created--to the rest it looked like a wall of hieroglyphics. Several companies are now working on interactive, team-created timeline tools of infinite scalability. Such tools will allow for globally distributed groups to be in instant visual contact with their project and each other and to monitor whatever needs to be happening at the level of detail that matters most at that moment."
Where the Democratic Candidates got their votes: some variations on the NY Times graphic
Amanda Cox and Farhana Hossain at the New York Times put together a graphic showing where in the US Obama and Clinton got their votes during the grueling, historic five month primary season this year. It's (as always) a nice visual explanation (click on any of the images to enlarge them):
While this is an accurate representation of the votes each candidate got, I noticed that it reflected some more general trends, in terms of geography. Obama did well in a wide swath from Philadelphia, down the east coast, and then well into Texas, for example. Clinton had support through the New England/Allegheny/Appalachia/South-Central portion of the midwest, and on down into rural Texas.
In terms of looking at this in a more general geographic sense, the precise circles of vote tallies made these broader areas of influence more segmented. So, in a spare ten minutes I made a couple of variations on Cox and Hossain's map that (while admittedly far less accurate) show the more general voting geography: This one takes the green and blue colors the Times has used throughout the campaign to display Obama and Clinton votes and gives them a higher degree of color contrast by placing them in red and blue. Already I think the broader geographic trends are more visible. But I wanted to smear the data a little more, so I did just that: a little gaussian blur, followed by some increase in contrast, then a filling of the selected areas with a flat color (note that my half-assed casual attempt results in some obvious inaccuracies in which candidate got votes in some of the smaller datasets....now that I've mentioned it, feel free not to pick at me for it):
Now, this is a very general graphic, compared with the original. In many ways it is inaccurate. But it also helps to give a general picture of the topography of the race. I think there is some value in this, and I am sure that with the precinct-by-precinct data available to both the politicos and the journalists that create visual representations of a campaign a more accurate and at the same time more general picture of such campaign results (or polls or projections) could be generated. I'd love to see them, alongside the more traditional visual information graphics that we have become accustomed to seeing at the Times.
Data Visualization: Making traffic patterns understandable
Steph Thirion, an interaction designer, has been creaeting some elegant tools for visualizing data dynamically. My favorite so far is Cascade on Wheels. One version (shown above) shows traffic flow overlaid dynamically on conventional aerial photograph...and then lets you turn that photo on its side, revealing a three-dimensional bar chart of the flow through the streets of a city. Another shows traffic flow on an overhead map, but allows you to also hear the data: the denser the traffic, the louder the white noise. Bringing in not just your eyes, but your ears, is brilliant.
Tip o the cap to Jay Parkinson for bringing Steph's work to my attention.
A cellular or stained-glass view of the tanking economy, and how it affects the consumer
Amanda Cox over at The New York Times online has a nice interactive graphic of "All of Inflation's LIttle Parts."It shows a snapshot of the average consumer's spending on basically everything, from cable tv to heating oil. Roll over each of the segments to get data on increases or decreases in costs for that item.
What I like: Since we all spend a finite amount of money on everything, it's a closed system; therefore a circle is a good way of representing the whole. What makes this different from a typical pie chart (and better, I think) is that there are main sections (like housing and utilities, versus clothing, for example) and then many little categories within those sections, that we can view here.
Now, you could group your pie-chart slices up and show it that way, but I think this makes the smaller categories easier to view and inspect, especially online. Have a look and let me know what you think of this vs. a pie chart.
Yeah, I am doing that thing, now, like everyone else. It seems that six months ago it was all about Facebook. Now it's Twitter. Next thing you know we'll have webcams installed in our necks and will stream it all to our circle of friends and voyeurs.
If you want to follow me, you can catch the twitterstream here. But I swear if you are a fracking robot I will boot you, then reboot you after wiping your nvram, then hunt down your robot children and take an electromagnet to their innards.
ok, so I am working out right now. even as I blog.
Here's a lovely bit of graphic design interpretation from calorielabs.com. Several states are featured, and I can't decide whether or not I like New Mexico's or South Carolina's flag-as-infographic better. What do you think?
My own interpretation of the Colorado state flag is below:
Lifestreaming: Aggregating all your social networking crap.
So, want Microsoft's ever-present life-recording tool, but don't want to wait for it to be invented? Find a lifestreaming tool. I've found one that seems promising: Dipity. It collects a bunch of your social networking data from places like twitter, Facebook, flickr, Picasa, blogger blogs, and pretty much any RSS feed, and places items from those feeds on a timeline. Lots of ways to view them, and it looks like they will be expanding their automated importing options, too. My import went well, although it (for some reason) missed all my blog posts from 2002-05, as well as other posts here and there farther back, which was a bit odd. Maybe it's still importing them (I just started an account literally minutes ago). If you have a chance, check out my timeline. And tell me what you think of the interface.
I think it's a good first step for a timeline interface, but it's a bit clunky when you have a ton of info all in one space of time. You can zoom in to the day level of detail, which brings out each event, but it would be nice to see a more intuitive way of viewing the density of events across a wider span of time. You Tufte-ites will know what I mean.
This is one of the twenty-something graphics I created for a book on Participatory Action Research, called (aptly enough) Participatory Action Research for Educational Leadership: Using Data-Driven Decision Making to Improve Schools, by E. Alana James, Margaret T. Milenkiewicz, and yours truly. The graphic pertains to outliers, and keying in on them when examining constituencies within a learning environment. From Chapter 11: Educational Leadership:
[this graphic] displays a school, showing both the diversity and clustering of activity within the main influences of the staff and student populations and the few instances where entirely different forces are at work. Leaders at all levels within complex environments such as this illustration continually need to evaluate the questions presented by individuals on the fringe
Speaking from personal experience, I can attest to this. From the time I became a teenager until I graduated from college, I was an outlier within my educational environment. Like a substantial minority of kids, I dressed differently, made different decisions on my educational focus (art! band! philosophy! eek!) and enjoyed being unpredictable enough--at least in the eyes of my peers--that I could fit in with anyone, without really being of any particular group (except for when I was). I never gave educators a headache, but I was an outlier in many ways, and there were enough of us that I am sure we had to be dealt with in a special way--even if it was just to give us a special activity or class to occupy us and keep us out of trouble and enrich us at the same time.
Outliers are more than just social groups. As the book states,
Outliers may also indicate the start of important trend. Imagine how strong the academic potential of a school the created a robust [English as a Second Language] department as immigration emerged in the neighborhood rather than waited until the challenge became overwhelming.
So the outlier becomes the hub of "normal" within a few years, and those who weren't paying attention missed the boat.
As to the diagram: I think it does a good job of showing the variety in a typical educational environment, along with the clustering-with-overlapping-and-connecting elements that are present in any catholic environment (bonus points to my readers who know the nonreligious meaning of "catholic", by the way :) In the book it's black and white, but I present it here as displayed in the book's precursor, which was a web-based professional development tool.
If I was developing this solely for the web today, I'd animate it using Flash, to show the change of outliers becoming the norm over time, as well as showing how people within the "norm" move around, how groups wax and wane in popularity and population, and in general showing how dynamic the educational environment really is.
And in case you still don't believe that graphic design can change lives, just check out this quote, from Nicholas Kristof, who was relating a story about the impact graphics that were designed to accompany his article on the state of public health in Africa had on one particular individual: Bill Gates. Gates was telling him how, initially, he and his wife were planning on essentially wiring the continent, thinking that this would do the most good in bringing Africa out of poverty. Then he read Kristof's article, and decided funding public health initiatives for clean drinking water, malaria prevention, and the like would have a far greater impact. He continues:
Great! I was really proud of this impact that my worldwide reporting and 3,500-word article had had. But then bill confessed that actually it wasn't the article itself that had grabbed him so much -- it was the graphic. It was just a two column, inside graphic, very simple, listing third world health problems and how many people they kill. but he remembered it after all those years and said that it was the single thing that got him redirected toward public health.
No graphic in human history has saved so many lives in africa and asia.
[emphasis added]
So, what moves the richest couple in the universe to make Africa a healthier place to live? Good graphic design. It doesn't need to be flashy, it doesn't need to be hip. It needs to work: deliver information effectively. This is what I tell my clients, and I swear by it. Effective information delivery--whether it's for marketing, advocacy, or journalism--isn't about clever, hip, new, etc.... It's about presenting everything you need to present, and nothing extra, in a succinct, direct way. It's that simple.
A nod in this run up to the November elections towards the importance of good graphic design in everyday things. Like ballots, for example. We all remember the hanging chad debacle of the 2000 general election, right? As Alice Rawsthorn writes in her article appearing in the International Herald Tribune,
One glance at the [Palm Beach County] punch card explains why they did so: the layout is hopelessly confusing, as is the blizzard of text. Those ballots are such a (booby) prize example of lousy information design that it's a mystery how anyone managed to vote correctly.
The AIGA also created, with the Election Assistance Commission (EAC), Ballot and Polling Place Guidelines which can be immediately implemented for state and federal elections. By making ballots more easily understandable, good design best practices can help the will of the people be accurately and clearly heard.
What Party are Creatives Supporting for President?
The Huffington Post has a fundraising exploration tool that uses Google's API to visually map donations to political candidates, and it provided me with a whole evening of fun (which explains why it's a good thing I'm married and not out trying to pick up a future mate). After virtually stalking my neighbors to see who was giving to Mitt Romney and who was giving to Barack Obama, I noticed that I could search donations by occupation. I entered in a few occupations in the creative field: "graphic designer", "creative director", "web developer", and so on. It was very illuminating. More importantly, this query provided me with a nice little dataset to make infographics out of. And now you can enjoy them too. (Click on any graphic to enlarge to about 1280 pixels wide)
The first chart takes the raw amounts of cash donated to Democrat and Republican candidates for president, grouped first by party donated to, and segmented within those groups by occupation. You can see that creatives are donating overwhelmingly to the Democratic candidates over the Republicans. In raw dollar amounts, it's about two to one. And look at those photographers! Man, they (meaning, in part, me) must be getting paid way too much to be giving all that dough out (actually, it's due to the larger number of photographers that donate, relative to other occupations).
So, now we know that creatives seem to support Dems over the GOP. But that brought me to a finer point: if you are, say, an art director, are you more likely to give to a Democrat or to a Republican? Remember, the first chart simply shows the total amount given. Within each party's breakdown, you get a feel for total amounts given by production artists versus ad execs, for example, but remember, there might be just one or two P.A.'s giving money, and a whole lot of ad-men donating, skewing the relative data. That's what brings me to the next set of graphics:
The second and third graphics show the relative amounts given by each occupation to Democrats and Republicans. The numbers are standardized to the largest pool of donors (those profligate photographers)at a 1:1 ratio between Dem-donating shooters and GOP-loving imagemakers. Now we can use the data to estimate if you are more likely to give to Clinton or to McCain, if you are an illustrator:
The third graphic overlays the data blobs for each occupation's Democrat and Republican donors, to help visually compare relative giving preferences. Which do you think works better?
One analysis suggests that art directors and photographers tend to be the most split groups, with nearly equal likelihood that you would give cash to either party. It also shows that we need to pay illustrators and production artists a hell of a lot more money before they give some of it away to candidates (or they are just really smart and spend the cash on more important things, like beer and espresso).
One thing this proportional representation doesn't factor in are the total number of donors for republicans versus democrats. Obviously, if there was just one Republican donor for each occupation (and they gave a lot of money), the relative charts above wouldn't work. But in general terms, I think it's a nice representation (this is why I am an information presenter and not a pure statistician...if you can give me figures adjusted for total number of donors, send it to me and I'll make new graphics!)
So, that's my two cents before Super Tuesday. Now: no matter who you support, go and make your voice heard and GO VOTE!
Once again, the New York Times does Information Graphics Right
The folks over at the New York Times always seem to do visual displays of any kind of information the right way. From graphics showing deaths in Iraq to the US elections, their illustrators manage to pack a lot of information into a compact, understandable package. The latest case in point: Analyzing the January 5th Democratic presidential debate transcript.
The amount of words for each candidate, the moderator, and video clips are displayed as blocks in a chart. Run your mouse over the candidate's name, and their blocks are highlighted. It gives the reader a sense of the pacing of the exchanges between candidates, and allows them to see who talked the most on which topics. Run the mouse over a block, and the transcribed debate text appears in a box to the right.
You can read the entire debate this way, look at just the statements of one candidate, pick out the long passages of speech, or look into the snipes and jabs exchanged between the speakers. It's one more example of why the NYT is so good at conveying information to a broad audience.
The Elements of User Experience: User-Centered Design for the Web
If you are someone interested in hiring a designer or team to create/improve/reimagine your web presence, you owe it to yourself to know what the term "user experience" means. Sure, it means, basically, "how the user sees what is on the screen", but it's really a whole lot more involved than that.
I would recommend to anyone who touches a website project (from designers, to writers, to illustrators, to programmers, to clients) the book I'm reading now: The Elements of User Experience: User-Centered Design for the Web by Jesse James Garrett. Good info that you can go back to time and again for reference or additional understanding of underlying concepts. The diagram here is by Garrett (a snippet of a larger whole, which can be downloaded from his book's site) and is the basis for the idea that spawned the book. Check it out, and if you are intrigues in the least by what is there, buy the book. You won't be disappointed.
This, from The Net is Dead, via Heather G-M: The sad thing is this is (mostly) true. You can, actually, do anything a table can do in CSS, but there is a lot of tweaking to make things look lovely in all the browsers your client might require. The bit about Internet Explorer is completely true, and probably under-reports the amount of time we spend making any site work as expected in IE. The folks in Redmond follow their own laws. It's like they are vigilantes in an old-west movie, strutting into town while the marshall is out catching cattle rustlers, occupying his office and saying, "law? Law? Ma'am, we are the law, now."
The map is a nice example of how you can show a large amount of data in an understandable fashion. I wish there was some way of typing in a band or album name and having the map display relative popularity from country to country...as it stands now, you can only roll over one country at a time and view those stats by themselves. Why not have a color- or intensity-coding scheme tied to specific artist popularity?