Election Results, Visualized
A Roundup of News Outlets’ Websites on Tuesday’s Big Night
Let’s talk about this election ... no, not the end result. Everyone is entitled to their vote, opinion, outrage, happiness, or any other range of emotion that’s overwhelming you at this point. I’m not here to talk about that.
We’re here to take a look at how people (mostly myself) consumed information during Tuesday’s big race, and discuss some of our favorite (and not so favorite) visual experiences.
Journalism runs deep at Made By Munsters. Both myself and co-founder Kurt were former visual journalists. My wife is a political reporter here in Indiana. While we don’t focus on news and news coverage like we once used to, our focus and attention on well-crafted, user-driven web experiences hasn’t changed.
Like many of you, I spent Tuesday night flipping between networks and possibly switching between tabs to get the latest up-to-date information about where the races stood, who needed what to win, and what states were left to tally at the end of the night so I could finally get some sleep.
Election results depend on data, and as a designer, I can appreciate good visualization of that content so I’m aware of what’s going on. So let’s start with three main categories of content:
The Main Event
With the presidential election, consumers like me want to know what states are won by which candidate, how many electoral votes have been secured, and who’s going to gain control of the House and the Senate. We’re going to call these the main pieces. Each site we roll through in this post will feature those heavily since they matter so much.
The News Feed
Let’s not forget what many journalists do best: write. There’s a lot of information and content out there to be read, and providing that in a meaningful and consumable way was important to those following.
The Drill Down
Several sites gave us a chance to witness the results broken down into counties and see how our fellow Americans were voting in our states. For those of us heavily focused on our local races, several of these outlets allowed us to take a glance at who were leading those races.
Let’s start by looking at a few of the websites, in no particular order:
Google.com
Google’s experience provided quick and easy access to view results in live time via its search feed. The tabbed format allowed users to quickly view updated content, then drill down into the different elections happening over the course of the night. It chose to go with the traditional map view on the President tab, which was easily to glance and capture the big picture of the stats. I loved the aspect that it was easily accessible, and was displayed prominently without breaking its normal conventions and patterns.
CNN.com
Across the top of the page, CNN broke out the tally for electoral votes while featuring some of the key states in order for a candidate to win. Unlike the others we’ll talk about, CNN didn’t use a conventional US map to display states won. Instead, it used a bubble chart with states in a logical geographic location representative of the state. At first glance, I was confused by this personally because I wasn’t paying attention to the shape they made together. Instead, when looking for a particular state, I was thinking alphabetical. Maybe user-error on my part, but nonetheless confusing.
With a live feed of its broadcast at the forefront, CNN was placing a lot of weight on its news content, which doesn’t surprise me. With the content on the page broken down into a grid format, it’s scannable, fairly easy to digest, and quick to navigate. But let’s talk color choices. I personally think going with a dark color background was a bold move, especially with a red headline. Legible? Sure because of the size, but I could see some problems with it. I’m assuming the design team took some cues from the broadcast graphics to help finish out the page given the similarities of the two.
FoxNews.com
Let’s talk about everyone’s* favorite news source: Fox News. I’m going to say they took a conservative approach to their design, featuring the standard US map with color-coded wins. However, instead of opting for putting news content first, they displayed the data, broken down fairly elegantly. The subtle use of imagery for each candidate breaks up the duotone color palette in the graphics, and in my opinion, it was easy to consume and understand.
Politico.com
Politico took a massively bold approach in displaying election results. It’s interactive graphics took the full width of the page, however, it took several scrolls down the page to get there. And even when you view the map on a 13" MacBook Pro, you couldn’t view all states at once. I really dug the radial charts for each state’s breakdown, focusing on the key states, however at the same time, it feels a little too busy.
ChicagoTribune.com
Having been a part of the Tribune Company for a number of years (no I will never refer to it as Tronc), I had high hopes for what could have been. However, I honestly feel with ads all over the page (with blue and red in them), the page gets overwhelmed, and not to mention the lack of prominence for news coverage. The interactive graphic was simple and well done, but I wanted more.
NYTimes.com
Let’s face it. In order for news organizations to make money, ads have to be a big part of the actual printed and online versions. However, in the case of the New York Times’ website, I’d say Prudential was the winner. The banner ad ate up most of the vertical space, and then you got a small glimpse of the coverage before moving down the page. I can say the custom branding for Election 2016 is simplistic, and works well, in addition to the other data elements on the page. Keeping with its traditional style of layout, the Times was able to keep content first and foremost while presenting the data in a consumable way.
WSJ.com
What can I say about this. It’s classy af. To me, WSJ.com knocked it out of the park with elegance, content, and key information I was personally interested in. The only concern I had was hiding additional information in the breakdown. See the tabbed navigation above the map? Yeah, I didn’t at first either.
WashingtonPost.com
In my book, the WaPo goes down with having the best layout and visualization of data and information for the night. The structure of the page across the top, featuring the presidential race front and center, surrounded by the Senate and House tallies, makes the page balanced. The interaction when hovering over each state and viewing the breakdown of votes for each candidate was nicely executed. The small attention to details really enhanced the experience for me. Well done.
NPR.org
It took some searching and time to discover where this resided on NPR’s site, but once I got there, I really enjoyed the overall experience of the electoral map. Similar to CNN, it used a map-like appearance, however at a larger scale, it seemed to work better for NPR. The display of each state with regard to its number of electoral votes was nicely portrayed, and not to mention the fantastic illustrations of each candidate. It did, however, leave me yearning for more information. How many more electoral votes were needed to win it all? What states matter most at this point? Just a few things that could have made it even better.
Vox.com
I’ve always been a fan of Vox’s content and overall design, but I felt that it kind of fell flat Tuesday night. It’s news content was definitely at the forefront, while visualizing the data came secondary (actually, nearly impossible to find). And that’s fine. However, it seemed as though this map was the “most read” feature on their site that night, so to me it would have made more sense to bubble it up where users could find it more easily.
Facebook.com
Like a lot of people my age these days, we go to our social networks to find news and information. :( So naturally I gravitated toward Facebook to see what they had to offer, and was pleasantly surprised on both desktop and mobile. Maybe it’s because I had no expectations at all before going there, but I found it easy to use while also getting to drill down into my local races here in Indianapolis by simply entering in my address.
There are several other sources I looked at, took screenshots of, and would love to talk about, but this post is already too long, and I’m guessing most won’t read through it all.
As a designer, it’s great to see some of these outlets taking chances and going bold with their coverage. As a journalist, I really hung tight to the traditional elegance of publications like the Washington Post and WSJ.com. As a consumer of this information, some made it easy to breakdown, digest, and visualize, while others left out some key elements I’d love to have quickly as I was flipping back and forth. As technology changes, I can’t wait to see what’s in store for us this time in 4 years.
If you had a personal favorite, or want to contribute to the conversation, I’d love to hear more feedback about your thoughts. Please feel free to share them.
Beyond the visuals, testing sites for performance is an important aspect of the user experience, especially given the constant changing of the data and numbers. We would have loved to have done some performance testing on each of these to see which sites had the slowest times, who were the quickest when loading new data, if traffic caused issues with updates, and more. While we didn’t prepare for that this go-round, we’ll be sure to next time.
*We know many of you hate Fox News.
