Squared rectangles: A space-efficient layout for ranked graphics

Many people have seen Marcos Weskamp's brilliant visual design of Newsmap. The site uses the Google News aggregator to rank news stories by popularity across the Web, and then maps them out with the popular items larger, and less popular headlines smaller, all in color-coded categories. Here's a quick screenshot if you haven't seen it, but view it live if you can.

The beauty of the layout is that it allows a user to quickly glance to see what's most popular. But what if you wanted to do the same thing with a set of identically-proportioned graphics? (Like channels of video, CD artwork, or avatar options on a social networking site.) You couldn't use different proportions for the images, as Weskamp does with headlines, without sacrificing the graphics' integrity.

What you could do is use "squared rectangles."

Continue reading...

The Ford Fusion SmartGauge: good stuff, missed opportunities

There's been a certain amount of buzz in automotive circles about the new SmartGauge dash display in the Ford Fusion hybrid. What's so cool? According to Ford, the car encourages fuel-efficient driving habits by giving users constant feedback. What's not to love about encouraging cleaner driving (if we can't get people out of their cars entirely)? Then there's the customizable LCD, which is what really has the car geeks going (check out this video of how it works).

Unfortunately, Ford missed multiple opportunities by thinking of the LCD as basically a digital translation of an analog dashboard--right down to the secondary km/h display on an "analog" dial--plus the ability to display some pretty pictures. The real benefit of that LCD is that you can show users exactly the information they need--and only the information they need--at any time. The less visual information there is, the more likely a driver (who already has a heavy cognitive load) will be able to make use of it. Unlike a physical dashboard, a digital display doesn't need to show engine temperature, for example, until it's becoming a potential problem. I suspect most people would much prefer to see their dash display driving directions or even the name of the song currently playing on the radio.

The visual display itself could be rendered much more legible. For example, it would help not to have lines running behind the numbers on the mpg display. If the green leaves are supposed to make drivers feel good about their behavior, that's a legitimate aim, but a simple gauge would make the fuel-efficiency of my driving style easier to interpret.

Since there's an onboard computer assessing driving style, Ford could have made better use of the information the car is already gathering. For example, if the car knows the fuel tank and battery are half-full and knows how fuel-efficient I'm being, why can't it save me some mental math and tell me how many miles I can go without refueling? Also, if it knows what makes my driving style less efficient than it could be, why not visually point out behavior (such as shifting to a different gear) that would be more fuel efficient?

Kudos to Ford for thinking green and for incorporating a long-overdue technology in the car dashboard. As is so often the case with technology products, though, I think I'll be waiting for version 2.

What do you think? Join the conversation in Comments

Demand a better ballot

Election Day is finally here, and as ballots are cast and counted, I’m hopeful that voters will declare victory for the candidates and measures that I care most about. But as I review my sample ballot in preparation for my visit to the voting booth, I am discouraged to find that it includes many of the design flaws that the AIGA’s Design for Democracy project has been working to expose and eliminate over the past 8 years. As AIGA reports on their website:

“In July 2007 the U.S. Election Assistance Commission (EAC) accepted AIGA Design for Democracy’s research and best practice recommendations for ballot and polling place information design. Guidelines and editable samples were distributed to 6,000 election officials across the country this January. As a result, local jurisdictions now have the tools to apply communication design principles and make voting easier and more comprehensible for all citizens.”

Why, then, am I holding a ballot that violates at least three of the Top 10 election design guidelines, including the use of all caps, center-alignment, and tiny fonts?

As Marcia Lausen notes in Design for Democracy: Ballot + Election Design, typographic specifications are often dictated in well-intentioned but misguided election law. So while the valuable work of Design for Democracy is to be commended, it alone is not enough to bring about the change we need in the design of ballots and other voter information and materials.

So as you head to the polls, review your ballot carefully — not only for its content, but for its design. Make note of the ballot’s flaws, and contact your state and county registrar and representatives to press them to implement the AIGA guidelines. In addition, consider participating in the Polling Place Photo Project, which seeks to document what is politely described as the “richness and complexity" of the voting experience in America.

Most of all, don’t forget to vote!

What do you think? Join the conversation in Comments

Startle wayfinding

Axel Peemoeller’s wayfinding system for the Melbourne Eureka Tower Carpark has been making the internet rounds. Props to him, it’s a novel and eyecatching design. (See below for one example from his site.) But something about it makes me think it’s disorienting (and possibly dangerous) for drivers. Let me try and articulate my amateur cognitive science/interaction design theory to explain.

While driving, your brain’s 3D systems are in high gear. (Pardon the pun.) Your mind is tuned to look for positioning cues such as occlusion, parallax, and especially size changes. This last is most important, as your visual system is on the lookout for anything that suddenly grows larger than the things around it, which would be a clear sign that you’re about to hit something. It’s called the startle response, and it happens within about 80 milliseconds, far too fast for any rational processing to counteract it.

So now, think of yourself in the Eureka Tower Carpark. Turning a corner, you’re a little confounded by the strange and lovely colored shapes on the wall. What’s going on here? All of a sudden, your visual system puts all these shapes together in a way that could only make sense if there was something (in this case, typography) jumping out right in front of you. Your gut reaction should be to slam on the brakes, even if your logical brain can decipher the thing a few milliseconds later. Hopefully the driver behind you left enough room.

So I haven’t been there, and I don’t know if this conjecture bears out in fact, but the pictures certainly set off my startle reaction.

What do you think? Join the conversation in Comments

The power of rich visual modeless feedback

One of my favorite aspects of product design is the feedback mechanism. When I think of feedback, I think fundamentally about the car dashboard. Nearly every action that a driver makes in a car is responded to with one or more forms of feedback whether audible, tactile or visual.

When turning into a left lane, the driver will (hopefully) use the turn signal lever to indicate the change of lanes. Pulling the lever anti-clockwise will activate the turn signal on the exterior of the car, but will also offer the following feedback:

• Audible: The dashboard will emit a clicking sound
• Visual: A green arrow will flash on and off in the dashboard
• Tactile: The lever will click or nudge over

All of these feedback mechanisms work in tandem to communicate with the driver that the turn signal is active and working. As a side note, if you’ve ever activated your turn signal and it emitted a clicking sound at double the normal rate, it usually means that one of your lights is dead (this is considered negative audible feedback). That’s great design when you consider how impossible it would be to turn on your signal indicator, get out of the car, run around it to check all the lights are working and then jump back in again, all at 30 miles an hour!

Continue reading...

VizFarm: Visualization jamboree

Last night a couple of us made it out to the VizFarm, July's installment of the incredibly successful IxDA San Francisco monthly event. The format was interesting: 19 presenters, speaking for 5 minutes each on a single visualization or visualization-related project. The brevity of the presentations was reminiscent of Pecha Kucha and certainly served to keep things moving and provide for a serious diversity of material, even if I wished I could hear a bit about some of the projects. (Also, I should say fellow Cooperista Chris Noessel and myself were both presenters and we certainly found it easier to prepare for this than a longer format. This is a good way to encourage participation from a community.)

The visualizations described topics included genetic sequencing workflow, Grand Prix motorcycle racing results, air-traffic control, correlations between deforestation and carbon emissions, as well as between transit times and home prices, and of course, the slightly self-referential but always enjoyable topic of uncovering meaning in qualitative design research.

A recurring theme in many of the presentations was how visualizations can help to uncover answers to complicated questions like "Where are there opportunities to reduce the amount of time it takes to sequence a human genome?" or "Where should I be looking if I want to buy a home that costs under £500k and is within an hour commute to central London?" By structuring the data and display in the right way, we can start to rely on people's abilities to recognize visual patterns to see complex situations in new ways.

Photo: Many Eyes

Of course, readers of Tufte will be familiar with a lot of this — in an academic sense, at least. But there's a huge challenge in making these useful to those who are less familiar with infographic conventions. To address complex questions in a visualization, the creator must communicate the utility of the levers and dials to "readers" at a variety of levels, which require a certain degree of visual and quantitative literacy, and can (potentially) further burden the display/interface.

Martin Wattenberg and Fernanda B. Viégas have made an attempt at this with IBM's Many Eyes project, the goal of which is to "democratize visualization and to enable a new social kind of data analysis." (To avoid any confusion, I'll mention that Many Eyes was not part of the proceedings last night.)

What do you think? Does something like this stand to help citizens better understand the world they live in, without the slant and filter of news organizations? What can we do to provide these new ways of seeing things to audiences unaccustomed to reading data visualizations?

What do you think? Join the conversation in Comments

Seeing patterns in research findings

We’re always on the lookout for engaging ways to communicate the patterns we uncover in our research. What factors cluster into significant groups? What are relevant attributes and relationships? What trends do we see?

Shan Carter and Amanda Cox at the New York Times recently produced a fantastic interactive chart highlighting the voting patterns along several demographic factors in the Democratic primaries. (You can read more about this graphic from Shan Carter here.)

I love the idea of starting with this approach and overlaying additional factors to draw out relationships and relative importance. In the Times example, imagine the squares drawn in relative proportion to the number of delegates in play; color and saturation representing the percentage of Democratic votes in the 2004 presidential election. Combining multiple factors does complicate the visual, so care must be taken to preserve the clarity that makes it so effective.

At Cooper, we often do something similar, with behavioral variables of interview subjects plotted along major axes, combined with demographics like age, organization type and role, to paint a picture of the interrelated web that helps us make meaning of a diverse human population. We always try to walk through these visualizations with a story that ascribes meaning to the observations, but providing clients (and ourselves) with an opportunity to interact with the data in a well-curated way really emphasizes the relevant factors and helps everyone understand the patterns we use to drive decisions and take action.

What do you think? Join the conversation in Comments