10 ways to skin a leaderboard – essential UX tips gleaned from coverage of the UK general election

Nothing is as fascinating for the leaderboard specialist as a general election when all the different media outlets showcase their preferred way to show the leaderboard of results as they are declared.

I’ve highlighted the different approaches the main media outlets used to show the election results as they happened.

BBC.co.uk

The well funded BBC has the greatest variety of leaderboard visualisations. From a standard leaderboard below, showing off party colours…

bbc lbd

to a bar chart with a clear ‘goal line’ (Chuck Coonradt would be proud).

bbc 3

There is  even a summary leaderboard widget for the home page

bbc 1

Mirror.co.uk

Contrast this with the visualisation employed at the Mirror of a horse race, now the goal line is shown with a Number 10 door image and we can see the party logos to add a bit of spark.

mirror 1

daily mail 1DailyMail.co.uk

The Mail go on to show the faces of the leaders in their leaderboard (we all love faces after all).

Cityam.com

While City AM keep it simple with a clean leaderboard design:

city am list

Skynews.com

Our friends at Sky like things bright and bold – they insert the results in boxes of colour and rotate the sub leaderboards (share of vote) on an animated cycle.

sky 1

This is then transposed into a permanent sticky header leaderboard widget as you scroll down the page so you never need to lose track of the current results.

Screenshot 2015-05-08 10.39.26

TheTimes.co.uk

The Times went with hollowed out doughnut style pie charts for each seat.

time donut

Guardian.com

While the Guardian went for a horizontal proportional bar graph showing the left / right divide as a tug of war with a goal line in the middle.

guardian horiz bar

Economist.com

Not to be outdone. the economist went for the an area graph which never really works in my opinion.

economist 1
Telegraph.co.uk

And somebody had to use a pie chart and well done to the Telegraph who used one for the share of vote leaderboard.

Screenshot 2015-05-08 10.50.23

On the plus front they produced an animated video leaderboard (you watch it build line by line) for the main seat winners:

Screenshot 2015-05-08 10.47.25

Ft.com

And finally well done to the Financial Times who managed a coloured squares leaderboard, but with the addition of some dots to show which party lost seats to who.

ft

Which do you prefer?

Of the visualisations above, which did you find best?

Did you prefer efficacy over verbosity, entertainment over utility, numeric over visual? Do you know why you liked it most?

What can we learn as designers?

So, what can we learn from all these different ways to visualise a leaderboard?

1. Design for your audience

You know what they will respond to best. The Guardian wanted to highlight left / right divide in politics, the Mirror wanted it to feel more like a race while City AM kept it simple and straight forward. The rich variety of news publications in the UK  has given rise to a rich variety of leaderboard designs.

2. Keep it simple

If in doubt, keep it simple. Sky’s leaderboard widget banner that sticks to the top of the page is arresting and clear.  I have a pet hate about ‘sort buttons’ on leaderboards (they make it unclear  what the real order is) or visualisations that try to display two leaderboards in one go (share of vote and seat winners – that’s two leaderboards not one)

3. Create widgets for different contexts

Many of the widgets were available for the content managers to use in different contexts – whether it’s a small space on the home page or a full page spread. Making sure your leaderboard widgets are available in different shapes and sizes means your content managers can place them appropriate the the page context.

What else did you learn?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s