THE ROLE OF WEB DESIGN AND UI IN THE UNFOLDING US ELECTION

THE ROLE OF WEB DESIGN AND UI IN THE UNFOLDING US ELECTION

Whilst many people are discussing the winners and losers of this week’s US election – Here at Brown Box we are assessing the Winners and Losers of UX and UI design of the election coverage.

For the Australians down under, the US election was a complicated process with an electoral system pretty different to our own. Therefore digital user interfaces (UIs) and well designed User Experiences (UX) played a significant role in allowing us Aussie’s to comprehend what was happening on the other side of the world.

Whilst following the election we found ourselves moving between a selection of websites displaying the unfolding progress of the election. We thought we’d take the opportunity to analyse how the story was being told visually across multiple sites.

The sites we looked at throughout the day included The New York TimesPoliticoThe GuardianCNNBBC News, and Associated Press Interactive


 

new-york-times

associated-press


Telling the story visually

Elections are a numbers game, but often numbers are hard to quickly understand. Therefore each of these sites used strong data visualisation tools to communicate the ongoing results of the election, and most did so in a fairly consistent visual manner. The core benefit of displaying data visually is that it becomes easier to break down and quickly understand complex information.

The majority of users don’t often enjoy staring at a bunch of numbers and having to process exactly what is going on. This is where strong data visualisation can increase how easily and effectively that message can be understood. This infographic by Market Domination Media highlights exactly how effective data visualisation is, stating that infographics are 30 times more likely to be read than a text article and with visuals being processed 60,000 times faster in the brain than text! This is why infographics are commonly used to explain rather complicated issues quickly and thoroughly  – so what better tool to use to explain the US election.

 


 

bbc


United States of Design

What we found, in examining a range of these sites, were several strongly consistent UI design elements being used across the board. So we decided to break these elements down, discuss why they were used, and point out the few who did things a little differently, sometimes to their benefit, but other times to their detriment.

1. Colour

All sites harnessed the power of colour in similar ways to display information to users. The majority of users, even those outside the US, are aware that the Democrats are blue and the Republicans are Red. (Interestingly, this colour association didn’t truly occur until 2000 because both parties were reluctant to associate themselves with the colour red, mostly like due to red being previously associated with communism and the Soviet Union). However in the current political landscape, the colours red and blue offered a quick and obvious indication of which party was being referred to.

Grey and and green quickly indicated states where either polling locations were still open, or where votes were still being counted. Most sites used a variation of paler hues of blue and red to depict the party that a state was likely to be called for.

Site to Note:

CNN’s introduction of yellow provided strong visual contrast to the excessive amounts of blue and red. Using yellow to highlight the key battleground states helped to focus users attention on those races.


cnn


 

2. Interactive Maps

The Electoral College system means that there is obviously a strong need to understand election results on a state by state basis. Therefore every site included an interactive representation of a map of the United States. As states were called for each candidate, this was reflected visually on the map.

As is often the case with maps, sometimes they can give a distorted indication of results. Size doesn’t always reflect significance. Some sites chose to tackle this by presenting stylised portrayals of the states (See CNN and Associated Press) to help people focus on the numbers.

BBC’s approach was more of a mash up of both a traditional map with stylised hexagonal markers – a UI decision that didn’t particularly benefit the communication of results.

Most states also displayed broken down data rates and percentages when an individual state was hovered over on desktop, or clicked on via mobile devices. Politico ensured those smaller states could still be accessed for fat thumbs, but pulling them out into a sidebar to the right of the map.

 

3. Bar Graph

In partnership with their maps, each site also displayed a double ended bar graph, showing both Trump and Clinton’s progress towards their much needed 270 electoral college votes.

The results bar was an effective, consistent UI element across each website, at the top of the page. Politco did this in a particularly effective manner by breaking the bar down into each state, allowing users to see what proportion of electoral votes came from each state.

Interestingly each site placed Hillary on the left and Trump on right in all except one case – CNN was the only one to buck this trend. This is an interesting choice when you consider the symbolism of left and right wing politics.

 

 


politico

the-guardian


4. State Breakdowns

Most sites followed their core summary visual with a state by state break down on the proportion of votes for each candidate. This was the Third Party Candidates time to shine. On most mobile devices this resulted in extensive page scrolls to travel through the numerical data for each of the 50 states.

Colour coding and clear typography came into play here to showcase the winners of each state.

Whilst most sites opted for an alphabetical display of the states and their candidates, The New York Times opted to omit the names of the candidates and instead organise the states by their tendency to vote on a scale from much more democratic to much more republican. This placed the battleground swing states in the centre in a way that helped to clearly communicate the tight race that was the 2016 election.

 

The additional stand out UI element, used by The New York Times, were their Live Results Forecast gauges. Whilst the states kept us in suspense, waiting to turn on colour or another, these gauges were constantly moving and adjusting giving users an idea of the deluge of data and information that was pouring in to these reporting outlets, and consequently being processed and presented for users. The movement was a strong reminder of the reality that these web pages were presenting.

screen-shot-2016-11-09-at-2-05-33-pm

Screenshot taken at around 2pm AEST

Conclusion

Whilst the people of the United States may be very divided over the results of this weeks election, these sites were united over the best approaches to displaying complex data to an audience of fascinated individuals. In the progressing digital world, it was great to see these sites understand the importance of ensuring their sites were responsive for mobile devices, to keep people updated and informed wherever they were throughout the day.

Sorry. You must be logged in to view this form.