Scoreboard Usability

Allow me to introduce myself. I am Mike and I have been working on the Scoreboard at Emirates Old Trafford cricket ground for 20 years now. When I started, the scoreboard was an old-fashioned wooden scoreboard that was run a series of ladders, washing lines, ropes, levers, hooks and metal plates.


In 2009, the old scoreboard was replaced with an electronic screen. As a code-monkey, a web developer who had an interest in usability and someone with enough graphics design knowledge to be dangerous, I was in my element


The inspiration for this comes from hearing talk of the ECB’s new 100 ball competition and the need to simplify cricket scoreboards. My answer to that is that scoreboards do not need to be simplified per se, but just designed better.


In this hugely self-indulgent blog, I’m going to give you 9 tenets which we have tried to follow when using designing and setting up our scoreboard over the years. I’ve leant heavily on Jakob Nielsen and his usability guidelines and I’ll mostly talk about how they apply to stats heavy games like cricket and their scoreboard but having been thinking about this and looking at scoreboards on TV and from other sports, these apply equally across all of them.

What are the most important things?

What do you need for the game to go ahead?

Although it sounds obvious, the starting point for in ground scoreboards should be thinking about what needs to be there to make sure the game goes ahead.  In most cases, this is a lot less than you’d actually think. In soccer, for example, there’s no need for anything to be displayed as the game can easily go ahead without any in-ground information at all – and it does at the lower levels.

What does someone who has just turned on or walked in need to know?

Picking out the prime information, which may be different the information above, is the next step.  This information should be central to any design and be the most prominent and easiest to pick out.  The idea with this level of information is that it would help answer ‘Who’s winning?’.  For example, in most sports, a simple score or leader-board answers this question easily.

What will improve people’s understanding of what is going on?

The next step is to move onto thinking about what bits of information can you add that will help people enjoy their viewing experience and help give a deeper understanding of what is going on in the game.  The more “stat-heavy” the sport, the more information this is likely to include and as this information is not absolutely vital to the outcome of the game, it can take a lower priority in the hierarchy.  This is the sort of information that can be used to educate and inform fans and provide more detail about the position of the game.  This level of information is also the sort of information that doesn’t always have to be present, which leads nicely onto the next section.

How can video be used?

If the event has live video, or replays available for use, then consideration needs to be given as to how that fits into a seamless display.   Depending on the way in which the sport’s regulations govern video, there may be restrictions on which games and events can be shown and this should lead into the layout.

What doesn’t need to be on?

With a wealth of statistics and information that can be put on a scoreboard, it can be a difficult decision on what to leave off, especially for replay screens where space is at a premium.  Older scoreboards that couldn’t alter their layout often suffered from containing too much information.  The example below shows a large proportion of the scoreboard that is not used regularly and often contains un-needed or out of date information.  When thinking about what isn’t needed, I tend to ask three questions

What is implied?

A good example of this, for an in-ground scoreboard, would be indicating which teams are playing.  It can be assumed that if someone is attending the match within the stadium, they should know who is playing.  I would argue that with some knowledge of the fixture and the teams they are watching, their uniform colours and the players on each team they should be able to understand who is doing what.  However, this would not work for a television viewer who has stumbled upon the game whilst channel surfing.

What can be calculated?

When information can be calculated from two pieces of information that is already shown on the scoreboard, does the third figure which is calculated from the first two need to be displayed?

Unless it is integral to the game there is little need to show information that can be calculated.  For example, it is important to show something like “Runs to win” when both the first innings score and the current score is shown, but it is less important to show strike rate when the batters runs and balls faced ae shown

What can be shown at down times or in rotation?

What comes under this question is often includes historic information, rather than about what is happening now.  When a game is ninety percent complete, is there anything to be added by telling the people watching what happened at the very beginning of the game?

This is the sort of information can be useful though, especially to the supremely geeky.

One way to make sure that it is displayed is to show it during some downtime in the action.  If a game has a natural break in it then this would be the ideal time to display the information.  A good example of this would be to show the entire scorecard from an innings at the break between play in a cricket match.

Another way of getting around this and displaying interesting but not important information is to rotate statistics around.  Bearing in mind what was discussed in the first section about key information needing to be displayed all the time, some areas of a scoreboard can show different statistics depending on the game position.  This is discussed more later on.

Keep it simple stupid

 

JUMPED	THE		THE
OVER	LAZY		QUICK
	DOG	BROWN
		FOX

 

Having full control over the layout of every element and decide where things belong and should go allows the creation of simple and easy to understand layouts.  Above is an example of an old layout used by an electronic scoreboard in the UK, using the words to display the most important bits of information.

Thankfully their current layout is much easier to read and looks a bit like this:

THE	LAZY	DOG
JUMPED	OVER
THE	QUICK
BROWN
FOX

 

Don’t make it jumbled

Put information in lines, from left to right and put the key information across the top will help the learnability of a scoreboard.  It should allow someone who has never seen it before to decipher exactly what is going on and allow them perform simple tasks like answering the question of “What is the score”.

Use lines and blocks

Using lines to create sections for similar types of information can help users cluster together linked statistics and show how the layouts fit together and if certain numbers are to be grouped together, they should line up with each other in the same section.  Another useful tool to keep designs simple and easy to learn is to include words, common abbreviations and symbols to explain what numbers are being shown where.  Words are especially useful when the numbers, or sequence of numbers are often said in a logical manner – eg 123 for 5 off 42 overs.

Using all the space available vs Being too busy

There’s a fine line to walk between including all the data you want to display and making the layout too busy.  Keeping designs simple mean that blank space needs to be included, over-busy designs end up being confusing and hard to read.  However, the need to keep the design well-spaced and clear needs to be weighed up against including lots of information.  The decision between what goes in and what doesn’t is not easy.

Fonts and colours

Along with a simply put together human-readable layout, one of the other ways that information can be put across is to use fonts and colours.  Varying the sizes and colours of fonts can be a good tool in displaying information and as mentioned above with the simple layout colours can also be used as backgrounds to highlight and section information.

What to consider with font sizes

1. The most important information should be the largest and the boldest.
2. Similar numbers should be, where possible, the same font, size and colour.
3. For stadium screens, make sure that every number is readable with the human eye from the furthest possible distance in the stadium.  If the words and numbers are too small you may need to reconsider the layout
4. Not everyone has 20:20 vision so can the key numbers still be seen by those people, testing with a wide range of people can help identify these issues.

What to consider with font style

1. To help with layouts and with spacing, a monotype font is a good choice.  This makes sure that any word with, say, 8 letters, is the same length no matter what letters are in it.
2. A good rule to follow is to check each letter and number that is likely to be used and make sure that they cannot be mistaken for anything else.  For example, if numbers are being used, make sure that ‘zero’ is easily distinguishable from the letter ‘0’ and from the number 8.
3. Handwriting and italic fonts are not as legible from a distance as they are from close up and should be avoided.

What to consider with colours and backgrounds

1. Can colours, or blocks of colours, be used to indicate something words could be used for and thus save space?  For instance, rather than displaying team names, using a colour can help distinguish which team is which.
2. Do they offer a good contrast?  Although not a hard rule, it is good practise to check the contrast between foreground and background colours using something like https://webaim.org/resources/contrastchecker/ which shows if the colours meet the standards laid out in the web accessibility guidelines.  If the background and foreground do not offer a high level of contrast, it is worth changing one or the other
3. Although nothing can replace testing the design with real people, screenshots of any colour used, should be passed through filters to simulate colour blindness.  This can also show places where contrasts are not at their highest.

What happens when major things occur

In ground scoreboards and TV score-bugs have the ability to react and change when things happen and to highlight them to fans.  Events like these are things that you could predict would happen within normal gameplay but are exceptions to the way in which a game proceeds.  Good preparation and thinking about what will help fans enjoy their experience is important.  Here are some ways in which these events can help:

1. If someone was brand new to the sport, has something happened that needs explaining.  For example, in a sport such as Rugby, where multiple offences can be committed with different punishments, a simple graphic to explain what has happened will help fans understand
2. Does a player or a team need recognition for reaching a milestone or doing something spectacular and if so, this should be highlighted at the next possible opportunity
3. Are there regularly occurring events, such as a change of bowler at cricket or a corner at football, which offer the opportunity to identify these events have occurred and use them to update the crowd.

This sort of planning should include thinking about unusual events.   There are always events that are uncommon but will need explaining or special representation, examples being super-overs and penalty shoot outs.  These sort of events, however uncommon, need thinking about as they require different layouts and different information being displayed.

Know the software

All software has idiosyncrasies and understanding how they work will allow much better presentation within a ground.  There are two things that need to be looked into

What order do things happen in?

To make a seamless presentation inside the ground, it is important to understand when things happen and can be displayed.   For example, in cricket, understanding the order in which things happen when a wicket falls – which is a multiple step operation – will allow a seamless presentation.  When a batter is out, does the ‘how out’ update straight away?  Does it record the delivery as complete?  Where is the dismissed batter’s name put?  What happens when the new batter comes in?

What happens when the limits are reached?

Edge testing is vitally important for all software.  However unlikely it is, thought needs to be given to what happens when someone reaches those limits.

Here are three examples outlining the sort of questions that need to be asked in this are:

1. Although it is unlikely that a team will score ten goals, what happens when they do?  How does that get displayed?  What if all ten goals are scored by different people?  How does that fit onto the display?
2. It is unlikely that more than seven bowlers are used in a match – but what happens if eight are used?  Or more?  How can this be accommodated – or does it need to be?
3. What happens if someone with 8, 10 or 12 letters in their name is in a team?  What happens if someone with more than 12 is in the team?  How does the display look?

What to do with adverts

With full control over the output and layout of scoreboards and video screens, it gives an opportunity for grounds to use the space as a way of promoting their partners, sponsors and events and to stream live video and replays of the action.

When requesting adverts or logos from sponsors, it is important that the requirements are laid out to their marketing departments.  As the dimensions of the scoreboard may be different to video, print and web ads, it is important that content is provided in that same aspect ratio to avoid images having to be resized and squashed.  Another key point to highlight is that images are likely to be displayed as part of a rotation of similar adverts or likely to be glanced at, so images should be large, simple and easy to digest.  An example of this would be to avoid adverts that require terms and conditions, contact details or website addresses as they may appear too small or too briefly to be useful and instead these adverts are much better used to promote general brands and products.

Test, review, change and test

As with any design or piece of software, testing and reviewing should be built into the processes.

Getting feedback on what works and doesn’t work from people who actually look at the scoreboard from the stands, or on the television, can help identify issues that may not be obvious to designers.  Learning from these issues, making changes and improving should be part of the process to make everything better.