Designing with data for the US election

In this tumultuous year, the historic Trump vs. Biden US election has been one of the most captivating yet challenging topics for citizens to understand. Designing with data is a key tactic for publications – but through UX analysis, how did their infographics fare?

I’ve previously written about the opportunities our data-rich world offers businesses and people to make decisions based on real insights. There’s no topic where this is more important than politics. 

I believe every democratic citizen deserves to understand the key topics that will affect their day-to-day lives. What if you could take a complex topic like the US elections and simplify the ‘understandability’ of who is winning and also reduce the complexities around understanding the electoral college system? During the election the stakes are high and users are on their toes! Data has never been more important.

The Power of effective data design

Visualising content effectively can help. A team of neuroscientists at MIT discovered that the human brain can process entire images it sees in as little as 13 milliseconds. Designing with data can simplify user learning and reduce the cognitive load, thus amplifying how users process information. Infographics are my favourite. 

One of the founding data visualisation scientists and statisticians, Edward Tufte declared that above all, that designers need to “show the data”. Yet many interfaces lose users because of too much information and poor choices about what to show at any given moment in time. 

Many visualisations are bombarded by large graphics, weak proximities of data points and poor placement decisions on the screens. This causes an incredible data overload for users and defeats the point of visualisation.

This is where UX comes in – and first, it’s best to turn to the Nielsen Norman Group. Lexie Kane’s rules are fantastic:

1. Use design to convey meaningful information about the dataset 
2. Present data clearly and truthfully, particularly with regards to scale
3. Choose fonts that are readable, not decorative, with clear hierarchy
4. Limit the colour palette to prevent users from becoming overwhelmed
5. Use simple, clean illustrations that keep a user’s focus on the data

Allowing interactivity with data infographics is even more complex. That’s why they’ve become so popular to help us understand the live picture of the US election results. I asked my colleagues Hagai Frid and Sofia Breg to assess all the leading data visualisations and we thought it would be helpful to run some UX heuristical analysis based on the principles of the power of persuasion (PoP). This is a model that we use at Cyber-Duck to assess whether an interface conveys the right balance of information, emotion, trust and clarity. 

Analysing the US election infographics

My main criteria for heuristically rating the interfaces was:

1. Informative – Can the user enrich their knowledge?
2. Cognitive load – Does the user become overwhelmed?
3. Interactivity – Can the user explore the data to dig deeper?
4. Emotions – Did the look and feel make a memorable impression?
5. Trust – Was trust at the forefront, if not why?

Each criteria will receive up to 5 points and the top score is 25 points

ABC News - Overall PoP result: 15 points

• Informative - The result is clearly explained at the top of the landing page, with updates on the right (4 points).
• Cognitive load - The pop up window is clean and big; it could use some more colour to quickly help the users understand the information presented (2 points).
• Interactivity - When enlarging the counties, the national map button and close button didn’t function the way I expected. (3 points)
• Emotions – The infographics and colour balance felt sterile yet representative. It all felt quite generic (3 points).
• Trust – ABC have live updates, which provides trust, although I am unsure where the updates are coming from at a glance (3 points).

BBC - Overall PoP result: 21 points

• Informative - There is a clear headline explanation at the top of the page with more graphs below. The content is quite small (4 points).
• Cognitive load - The pop-up window broke down the info into state and county in an intuitive way (5 points).
• Interactivity – The detail of content is excellent but when enlarging the state and then county the two pop-ups overlap (4 points).
• Emotions – The visual imagery was more dramatic. There is a good explanation below the map for the colours (3 points).
• Trust – The BBC is showing live feeds. It is clear they have live reports on the ground which provides trust (5 points).

CNN - Overall PoP result: 20 points

• Informative - Above the map, the headline results are visible; the map was larger than the BBC but not big enough (4 points).
• Cognitive load – Like the BBC there is a good balance around the info but the battleground area was information overload (4 points).
• Emotions – A good colour legend and the “battleground” in yellow made CNN a pleasurable viewing experience (4 points).
• Interactivity – The filters on the left-hand side of the map were unique empowering the user to drill into the data (5 points).
• Trust – When landing on the page there was a lack of clarity between CNN’s prediction and the real results (3 points) 

Fox News - Overall PoP result: 24 points

• Informative – The full screen approach was a masterpiece of UI design with a top bar summarising results with no map (5 points).
• Cognitive load – With minimal pop-ups only and a separate and clear Senate and House interface, this was very easy to digest (5 points).
• Emotions – A great colour balance, clear fonts, spacious graphics and authentic photos made this UI highly pleasurable (4 points).
• Interactivity – There was great interactivity with a toggle view of past years and a drill down into detailed state info (4 points).
• Trust – Despite the controversy with this outlet, Fox news had a “last updated” feature which made us trust the data (5 points).

NY Times - Overall PoP result: 25 points

• Informative – Like Fox a great map size and use of font and colour. The right hand side live feed was very novel and intuitive (5 points).
• Cognitive load – Very easy on the eye. The top bar lacked detail but this was compensated by the Electoral vote visualisaiton (5 points). 
• Emotions – A unique logo, lots of space, dark colours, a sticky nav and photos of reporters helped to convey a sense of ease (5 points).
• Interactivity - The pop-up window for states allowed an easy zoom with several complimentary data visualisation options (5 points).
• Trust – This interface felt very authentic, the live updates with the photos of journalists really helped authenticity levels (5 points)

Financial Times - Overall PoP result: 23 points

• Informative - A leader board bar on top shows real time results, together with the House and Senate (5 points).
• Cognitive load - A very clean, unique and modern look almost everywhere but we felt the news feed was not in the right place (4).
• Emotions – The title ‘What’s next for America’, a full screen approach and the overall art direction made this UI memorable (5 points)
• Interactivity – No interactive map but this was compensated by clear graphics and the ‘states yet called’ interface (5 points).
• Trust – The unique illustrations, infographics and FT.com colour paIlete as well as the last updated data reassured the user (4 points).

Google (by AP) - Overall PoP result: 14 points

• Informative - The bar on the top of page shows real time results. Below that users can see the states with no results (3 points).
• Cognitive load – There was not a feeling of being overwhelmed but not enough data either compared to the others  (2 points).
• Emotions – If a user were to have visited NYTimes, Fox news there would be little to make Google’s look and feel distinctive (3 points).
• Interactivity – The map is very small, with a clean look. There’s clear information below the map with options to expand.  (4 points)
• Trust – As this is Google, it is known 'as the place to search for the worlds information' but data was syndicated by AP. Was it up to date? (2 points)

Summary

Last week users had to deal with an incredible amount of data. It was imperative for the outlets to make the visualisation logical and trustworthy, while striking an emotional and memorable accord as part of the UX. Overall, I was impressed how some of the outlets utilisted the screen real-estate and limited footprint to present compelling data about such a complex topic during the tensest election in decades. If anything the better outlets below managed to educate users on the different concepts like the Electoral Vote which isn't straight forward to understand if a user is not American.

The New York Times was the clear winner due to the immersive experience, Electoral Vote visulisation, use of photography and easy zoom features as well as the right hand side ‘sticky’ live feed widget which added tons of authenticity. Fox News came second with a top notch UI system and great levels of interactivity. It was also the most accessible in regards to the amount of content presented and its weight. Coming in the third was the Financial Times. The distinctive art direction and novel way for having static graphics on the map meant “less is more”. 

Designing with data is a balancing act and it is important to research different education levels and understand what data users want to see and why through user centred design and user research. At Cyber-Duck we wrote an article on how to ‘design with data’. We are also big fans of David McCandles book ‘Information is Beautiful’. David talks about how effective data visualisation empowers all of us to be effective data detectives. Ultimately the better we design our products, the more time we save for our users and the better we make everyone feel!