ryan.freebern.org

With two local teams (I’m from New York and now live in New England) on their way to Superbowl XLII in Arizona, football has been on my mind more than usual lately. I’m generally not an avid football fan, but I’ve taken more of an interest this year as the juggernaut Patriots have surged their way past record after record, so I’ve spent a significant number of hours in the past few months watching the televised broadcasts of the games. While the game itself is enjoyable, there’s always one thing that bugs me: the informational on-screen graphics that the various networks use to display the current game state all seem to be missing something.

Score isn’t everything

When I look at the TV and a game’s on, there are a handful of key data points I want to gather as quickly as possible so that I’m up to speed with the game and can pay more attention to the action than to the numbers. That’s the supposed purpose of the infographics: to provide a quick snapshot that I can instantly parse into a game state, to mentally construct a symbolic understanding of the game so far, which I will then use to fully understand the meaning of the teams’ current actions in the larger context of the entire game. These are the data points that I believe any football fan needs to build an accurate mental snapshot:

• Quarter: how far along is the game?
• Time left: are we nearing a break?
• Score: who’s winning, and by how wide a margin?
• Possession: which team has the ball?
• Down and Yardage: is the offense running out of chances to make progress?
• Ball position: how close is the offense to scoring?

Additionally, the graphic needs to be designed to take the following accessibility factors into consideration:

• Obtrusiveness: is there a good balance between readability and screen coverage?
• Contrast: is the graphic readable by viewers with poor vision?

How they do it

The three major networks that broadcast NFL games—Fox, CBS, and NBC—each have their own style of infographic, although Fox and NBC use a similar design, and while theirs are better than CBS’s, they’re still not great. Here’s why.

CBS

CBS chose to go with a shape-shifting graphic that hovers in the upper corner of the screen. Its default layout shows the Quarter, the Time left, the Scores of the two teams (using abbreviated team locations), and Possession is indicated by a tiny yellow dot. Occasionally, a black bar appears at the bottom of the graphic that shows the Down and Yardage, but this information comes and goes seemingly at whim. At other times, a yellow “Flag” indicator appears at the bottom, and sometimes other information about drive length, possession time, individual player statistics and such appear at the bottom or at the end of the “arm” of the graphic. Ball position is never shown. Occasionally, the information-rich arm disappears, leaving only the “NFL CBS” logo. Woe to the viewer who tunes in when that’s the only thing displayed on-screen!

The CBS graphic is somewhat Obtrusive, since it hovers in the corner of the screen, set well away from the edges, obscuring a portion of the camera’s view of the field. However, it does have good Contrast: the text is all white on black or black on white.

One nice subtle touch is that the arm switches direction to indicate the direction of the current offensive drive; unfortunately, doing this requires the graphic to swap from the top left to the top right of the screen, an inconsistency that I think is harmful; consistency is key.

NBC

NBC’s graphic lies Unobtrusively along the bottom edge of the screen. It reads naturally left-to-right in a single line, and you can immediately figure out the Score and the Quarter and Time Left. The section containing the Down and Yardage, however, is dynamic. Sometimes it shows nothing, sometimes the Down and Yardage, sometimes a yellow “Flag”. Nowhere is Possession indicated, which strikes me as a major oversight. The text has good Contrast, however, and the inclusion of the team logos is a nice addition.

Fox

Fox takes a similar approach to NBC, only their graphic stays almost at the top of the screen, and is narrower than NBC’s, making it very Unobtrusive. Contrast is decent, although the small fonts hurt readability. Scores, Quarter, and Time left are all constantly displayed and easy to find, but once again, the Down and Yardage displayed here is in a section of the graphic that is constantly in flux. The rightmost third of the graphic (showing “Playoffs – Divisional”) is unchanging, and could be put to better use providing more contextual information, such as the Ball position. Possession is indicated with a bold, high-Contrast outline, making it easy to tell which team has the ball.

How it should be done

The (fictional, of course) Yin Yang Network takes a similar approach to that of NBC and Fox, but enhances it by adding all the necessary information that the others leave out. On the left, we have the Scores, including team logos and team location abbreviations. Possession is indicated by a colorful highlight around one team (and on the bar above it), and Ball position is listed next to the team currently in possession. In the center is the necessary network logo. On the right is the Down & Yardage, beneath which can appear a conditional “Flag” marker (but never anything else). To the right of that can occasionally appear the play clock, when it is close to running out. And finally, on the far right, we have the Quarter and Time Left, fulfilling all our informational needs.

And as for accessibility, the graphic is thin, partially translucent, and sits at the very top of the screen, making it as Unobtrusive as possible. The fonts are big, bold, and Contrast well with the background, making them easily readable by even viewers with poor vision or colorblindness.

While I have no illusions about any network adopting my design, I figured it was a good exercise to compare what’s being done and see how it could be improved. What do you think? Is my design better or worse than the others? Have I missed any considerations? What would you have done differently?

This entry was posted on Wednesday, Jan 30, 2008 at 8:41 am and is tagged design, information, media. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.