How ESPN’s new bug for college breaks some common design principles

Photo courtesy of Wade Denniston/USU Athletic Media Relations

Working as a Designer causes me to recognize all around me. I am delighted when I find something that truly shines, and conversely, I’m annoyed when something is not quite right. I’m sure every UXer out there is similarly cursed.

I am also a huge football fan, and during the game I can’t help but notice the UX of the game. Television football has been making strides in the last decade to improve it’s experience. The yellow first-down line, for instance, has been a huge success. It gives the viewer a clear picture of the goal the players are trying to accomplish, taking out guesswork and ambiguity. Exactly what great UX should do.

Now, let’s talk about ESPNs new heads up display (or score bug, as it’s known is the broadcasting world) for college football. This is the small box or bar on the screen that gives the viewer some key stats and game management information, such as the score and time. There have been dozens of iterations of these score bugs for football. In fact, it seems to change every year.

An ESPN score bug from a previous year.

ESPN itself runs multiple different bugs each year. Monday Night Football has a completely different layout than does their broadcasts for college football. I don’t know what drives the change or the use of one score bug over another. But I have noticed some significant UX problems with their latest one this year.

This year’s score bug

Let’s take a look:

Example of the new scoreboard bug on ESPN. Go Aggies!

Some score bugs run a bar along the bottom or top of the screen, with the information laid out in a line, others use a vertical set up, with the box lined up on a side of the screen. This year’s model is a hybrid vertical and horizontal bug, using elements of both.

Before we talk about the flaws, let’s go through a quick refresher about the jobs the score bug needs to accomplish.

What the score bug should do

With a quick glance, the bug is used to help the user answer the following questions:

  • Who is winning?
  • How much time is left in the game?
  • What quarter is the game in?
  • What is the current situation (down and distance)?
  • How much time is left on the play clock?
  • How many time outs does a team have left?

There are more pieces of information on the bug that answer other questions such as what is each team’s record and who has the ball. For the purpose of this article, I want to focus on the jobs listed above.

Some of these the bug handles very well. Who is winning? Easy. The score is in big numbers below each team. No problem there. How many time outs does a team have left? A little harder. Time outs are represented by dots at the bottom of each team section. This format (sometimes they use lines as well) has been used for a number of years so seasoned fans recognize it pretty easily.

The rest are where I think the new bug fails. Current situation, quarter, time left and play clock are extremely hard to make out in a quick glance. I can figure it out if I spend a few seconds looking at it, but in a fast-paced game, I want to just glance and get back to watching the game and eating my nachos.

UX principles at play

There are a few basic UX principles that I believe are being broken by the new score bug and that, if fixed, could greatly enhance it’s usability.

  • Similarity: Items that appear similar in style are perceived as part of a group.
  • Proximity: Items that are close together are perceived as part of a group.
  • Common Region: Items that share a common border are perceived to be related.
  • Hicks Law: The time to make a decision increases with more options.

What this year’s score bug gets wrong

Separating time and quarter

Knowing that grouping things together helps the user perceive them as similar or related, ESPN’s choice to separate the quarter and the time is the biggest problem with the new bug. In the context of the game, time is very heavily related to the quarter. For instance, the last minute of the first quarter is handled very differently than the last minute of the second quarter. The first quarter end is more of a break that doesn’t stop possession. Halftime does. So being able to quickly see what quarter it is and how much time is left is key to understanding the situation. When trying to see how much time is left in the game, the viewer must read the time, skip the down and distance, and then read the quarter. This is especially hard when the thing the viewer needs to skip over is very similar to the item they are looking for. More on that in the next point.

Quarter format

ESPN uses the format “1st”, “2nd”, “3rd”, and “4th” to convey the quarter. The problem with this is they also use this format to display the down. For instance, in the example above, you have the term, “2nd” twice and at a quick glance it is hard to know which is which. The viewer is forced to spend more time to process the information. This could be quickly fixed by using “1Q”, “2Q”, etc. for designating quarters, or something similar. This situation is further made difficult by the proximity of the two items. If the quarter designation was listed next to the game time, then it would be easier to determine what it means.

How to get it right

I’m not going to spend time redesigning the score bug because I think it has already been done, and oddly enough, by the very same broadcast company:

ESPN’s Monday Night Football Score Bug

The Monday Night Football score bug does a much better job of adhering to the principles of Similarity, Proximity, Common Region, and Hicks Law. Notice how the quarter and the time are grouped together, with the play clock also located nearby. The play clock timer is displayed slightly different, and even turns red when it gets low. The down and distance is grouped together in a common border with its own color and away from the other information. There is not chance of confusing that with the quarter.

Another great thing about this score bug is that it can be read left-to-right and gives a great summary of the game. Let me demonstrate by typing out how a person would read the score bug. Imagine someone is trying to explain to you by talking or texting the current state of a game.

Atlanta 17, Tampa bay 14, 4th quarter with 9:26 left, with 4 seconds on the play clock. First and ten.


Utah State 21, BYU 7, 29 seconds left, 2nd and 10, in the 2nd quarter with 40 seconds left on the play clock.

I think the verdict is clear. Obeying proven design principles enhances usability, even in football.

Source link


Please enter your comment!
Please enter your name here