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.


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


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).


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

city am list


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


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

time donut


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


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

economist 1

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


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.


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?

Getting started in Software User Interface Design

All apps rely on User Interface Design to make them easy enough for mortals to understand and use.

In any digital project nowadays you need the skills on your team. People just don’t have time for bad interfaces anymore. So, let’s say you want to become a User Interface Designer. Where do you start?

Here’s what I’d do:

1. Start thinking like a designer

Interface design is really a subset of design. I recommend the course at http://www.hackdesign.org which you can do over via weekly emails in your inbox. Make sure you set aside an hour in your calendar each week in advance of signing up for the email otherwise you’ll not do it!

2. Try lots of software

The more software you use, the more you are exposed to the ways other user experience designers have solved the common problems. Got a problem with Multi tier navigation hierarchies? Check out how leaderboarded.com handles it – would you copy or do it differently?

If you have trouble imagining that there is more than one way to solve the same problem –  try  alternative software: for example, in the personal online profile space, look at all the alternatives to About.me.

3. Get familiar with design patterns

Good user interface design is often a struggle against the temptation to reinvent the wheel. While your client might think a circular navigation system is fresh, the reality is most users want a nav that’s horizontal or vertical. I find the site UI-patterns.com really helpful.

4. Get paid to test other people’s apps

Reviewing software in beta can help you see issues early – you could become a software reviewer for TryMyUI. They will even pay you while you test, not much wrong with that!

5. Read the key books

Everyone knows Don’t make me think but I really liked GUI Bloopers 2.0. I had quite a few head slapping moments reading that I can tell you! There are tons more to choose from.

6. Watch other designers

Keeping tabs on other designers is a great way to track trends. Become a member of Dribbble and search the tags that matter to you.

7. Learn the tools of the trade

Wireframes are a way of laying out how the interface will work but not necessarily how it looks. As a UX designer you need to get really good at wireframe mockups! I like Balsamiq.

8. Get a project

There’s nothing like getting some real client experience – colleagues in other departments and  small businesses always need help with their intranet page or website.

Or, if they’re happy with their web site, then there is always an old Facebook page lying around that needs some Tender Loving Care.   If even Coca Cola with its 89m fans can have a broken tab then so can just about everyone else.