Are you ready for some football (graphics)?

I love September. The crispness of the air. The colors of the fall foliage. And 300 lb. men in helmets smashing into each other while 68,000 fans cheer them on.

That's right, the 2011 NFL season kicks off this week. For the uninitiated, NFL stands for the National Football League (that's American football, not the European flavor). I love the drama of the game, the Olympian feats of athleticism, the strategy of offense vs. defense and, of course, the on-screen graphics.

If you've watched even ten minutes of professional football, you can't miss the on-screen graphics (also known as a score bug or score banner) in the upper or lower quarter of the TV screen. These digital scoreboards are great examples of user experience (UX) design and contain a tremendous amount of real-time information and statistical data. However, they do require a base knowledge of the game and a little bit of deciphering.

The first score bug was created in 1994 by ABC Sports for coverage of NASCAR and the World Cup. Later that same year, Fox Sports introduced their version, known as the "FoxBox," for their coverage of the NFL. Every network and cable channel that covers the NFL has their version of the sports bug or banner. With the advent of high definition broadcasts and wider 16:9 format TVs, on-screen graphics have become more complex in detail and functionality.

In addition to the score banners, there are several graphics that are super-imposed on the field of play such as down-and-distance, line of scrimmage marker and first down marker. Fox Sports is probably the biggest offender when it comes to overloading the screen with graphics; almost to the point of obscuring the game. For this post, though, I'm going to focus mainly on the score banners.

The common denominators among all the score banners are: team names (abbreviated) and team logos, game score, game clock, game period, time outs remaining (for each team) and, of course, the network logo. But there are some subtle differences in the way each banner provides additional information.

Fox and CBS display a small indicator letting you know which team has possession of the ball. However, a quick glance at the actual game will give you that information. Some of the differences among banners are not on display all the time but only appear during certain times or events such as a touchdown, a penalty, or the play clock is about to expire. After good execution by a particular player or if the booth commentators are discussing the play of a team, additional graphics will drop down or slide out from the banner to reveal player or team statistics. The networks seem to be trying to outdo each other with their "touchdown" animations. The entire banner is replaced with a flashing, rotating graphic that's reminiscent of hitting the jackpot on a casino slot machine.

I think ESPN and NBC's graphics for 2011 (they often change from year to year) are the most legible and unobtrusive to the game because they live in the lower portion of the screen. CBS has their banner in the upper portion of the screen where it sometimes visually blocks a high pass or a play that goes towards that side of the field. Their banner also displays the time out indicators on top of its frame where they are obscured by the backdrop of the stadium stands. Fox's score graphic gets lost in the visual clutter of the field and stadium because it's the only one that is still a true "bug" and not a banner. NBC has one of the better designed banners and they place it over a translucent black mask which helps visually ground it on the screen and also makes the time out markers easy to see.

I'm just thankful the NFL hasn't gone the way of Hollywood movies and started issuing 3D glasses so the score banners explode digital schrapnel at you each time a touchdown is made.