Election interactives: 3 visual presentation insights

I’ve watched election returns mostly online since my long-ago start in the Washington Post’s online newsroom. The online geek in me loves seeing how different outlets handle the data almost as much as I like learning the results.

This year, the leap in sophistication of data visualization was particularly fun. There were lots of good lessons, and the New York Times really set the standard.

The scene: I don’t have a TV. The bars were standing-room only, so we ended up on the couch with a bunch of devices. As the night went on, the laptop got pushed aside and the phones got put down, leaving the iPad at the center of the action. All screenshots below are from the iPad (click to enlarge any of them).

#1 – Visual simplicity worked

This came through most clearly on the maps.

In the Huffington Post’s map (above, click to enlarge), the bright yellow outlines added a distracting visual element to an already brightly-multi-colored map. Most outlets opted for a cleaner presentation, with just various shades of red and blue.

Another case of too much visual complexity was the Washington Post’s county view (above, click to enlarge). While it sounds like it would be helpful to show the entire country’s worth of counties at once, in practice, it was both visually distracting and harder to manipulate. I had a really hard time getting my finger over western Virginia counties; I kept selecting bordering West Virginia ones instead.

It also took a lot longer for the map to load as I enlarged and moved it. We saw a lot of this “loading…” notice on the Post’s maps, especially the detailed ones:

The better option was to show the county detail for one state at a time. Both Politico and the New York Times did this (below, click to enlarge).

I especially appreciated that Politico (the Florida map above) made it super-clear how to zoom back out. With the New York Times presentation (Virginia map above), I always managed it, but I wasn’t quite sure how!

#2 – Prioritizing the layout is key

This was most obvious in the table displays. Laid out well, they were an extremely efficient way to make a lot of data digestible.

Huffington Post didn’t help us out much here — did anyone want to see Alabama’s results first? The color-coding tried to make the most closely-watched states easy to spot, but it meant a lot of scrolling and looking back and forth. I went elsewhere for my tables…

CNN did a better job, putting the battleground states at the top of the list. But still, this display required a lot of scrolling, particularly annoying on a tablet.

The Washington Post’s layout was much more successful — on one screen, the entire list of states, using placement on the page to both convey expectations and  focus attention on the most newsworthy states. In this case, the color-coding worked with the layout to highlight potential surprises.

And the New York Times did it even better. They used the same well-prioritized layout, but packed in even more data in an easy-to-understand way. Instead of just color-coded electoral votes, we got the percentages and precincts reporting, adding a lot more depth. They also called it “Bigboard” which  more clearly conveyed what you got there than the plain “Table” label that the Post used.

On my couch, this was the most-reloaded display of the night. (Which might have contributed to the timeouts and server errors we occasionally got…)

#3 – Provide intuitive options in context

The New York Times also knocked it out of the park for offering what intense election-watchers most wanted to see.

I really appreciated this presentation of who had called what states, which elegantly solved two problems.

First, from the journalist’s perspective, it lets them resist the pressure to make a call you’re not ready to make just because everyone else is making it. At the same time, it  acknowledges what other outlets are doing. This was particularly important for the Times, which was much more conservative about calling states, and could easily have felt irrelevant.

Second, from the user perspective, it saved me the trouble of visiting all these sites and channels to see what was going on. It became the one-stop shop of the cliches, and I gotta say, it worked to keep me on the New York Times site. (Solving another problem for them….)

The Times also mined their data visualizations for blog posts through the evening, and cross-promoted really well. I missed getting a screen shot of a post that illustrated the latest news from Indiana (?) illustrated by a screen shot of their map with Indiana’s mouseover detail showing.

Here are a couple examples of widgets the New York Times used to lead people into their presidential map (top) and their paths to victory interactive (bottom):


And as I noted, this all added up to the  New York Times winning my attention for the night.  Not surprising, given how much they have invested in top-notch data visualizations over the past few years. Even with all the competition, I heard from at least one other user experience geek (hi, Trish!) who got sucked into their site, too, which supports the case that good usability really matters.

Any other favorites or horrors from the slew of graphics and interactive elements?