The Super Bowl and Information Design?
Posted Monday February 18, 2008
Like a few other people I know, I watched the Super Bowl yesterday two weeks ago. Unlike a few other people (okay, everyone), what intrigued me most was not the game (nor the commercials, this year), but the game’s ‘ScoreBar’. Yes, this:
A little background:
So that you know where I’m coming from: I am not a red-blooded, meat-eating, football-watching American. I do tune in once a year for the Super Bowl, but more for the commercials and the halftime show. And because I feel it’s my duty as a citizen of this fine country. Lest I be lynched, my attitude (and aptitude) has changed over time, as I’m starting to appreciate football—just a little. In fact, this year, I was the first one to call my dad to discuss the New England Giants upstart (he was surprised by my call, to say the least). So football, not my thing. One of the things I do get excited by is good information design. And I was fascinated by the latest incarnation of the ScoreBar (anyone know what this is really called?).
What’s the big deal? the ScoreBar contains all the vitals we need to stay in the know. So what? Here’s what I saw:
Efficient delivery of information
For starters, did you notice the persistence of the information. In years past, we’ve frequently seen information appear (and disappear) at random times. So, someone passing through the room might have no idea what the latest score is. Or, if the game is not in play, who’s got the ball, how much time is remaining on the clock, and so on. Typically, there’s only so much real estate you should allocate for this information, and with team logos and such, it’s easy to see why this information has been served up in a revolving fashion. Not so with this year’s Super Bowl. Everything you need to know (stats wise) is always displayed, in a compact fashion that doesn’t distract from the game.
One clean bar. All the information you need.
Clear information hierarchy
One of things that drives me nuts is when there is no thought put into a navigation schema or things are thrown up with no reason. Not so here. There is a clear time-based sequential hierarchy:
The ‘hierarchy’:
- the NFL on Fox logo is seasonal
- the teams playing each other (and the score) are for the duration of this game
- time remaining in this quarter lets you know where we’re at within this game
- these are followed by different kinds of real-time information, most often being the current down/yards to go but also including time-sensitive information such as time outs remaining, touchdown, or flag
- ...and there is the Super Bowl 42 identification
Two quick comments:
First, the Super Bowl identification should technically follow the NFL Fox logo, but that would result in a visually unbalance presentation, which gets into visual considerations. Positioning this on the far right balances things out aesthetically, and allows the vital information to be centered on the screen.
Second, this design favors the utilitarian communication of information over unnecessary graphics or visually interesting layouts. Contrast this clean, ordered layout with versions from previous years (or other countries):
Subtle visual indicators:
You know at all times who has the ball. The indicator? A simple bar above the team with the ball:
Though not as iconic as the familiar football icon, this is just as effective at conveying this information. And more efficient.
Context aware:
In the UX world, we put far too much of a premium on consistent (read: immutable) interfaces. In contrast, I’m intrigued by things like adaptive, conversational interfaces or rhetorical navigation, things that change in the moment. Those thoughts apply in this situation, to the presence of the ScoreBar— it’s only there during normal game play, when it’s needed.
During instant replays or quick interviews, it disappears.
There’s a clear pattern to when it is present and when it is not. Again, contrast that with previous years when you might have to wait on some random interval to see the information that should be displayed at all times.
Context dependent information
Real time information is incredibly context dependent: seconds left before play, down/yards, number of time outs, flag, and so on.
The interesting thing to note here is that this kind of real-time information is relevant for a moment, and then updated with new information. You don’t need to see multiple pieces of real-time information at the same time. This follows the time-based hierarchy I described above.
Color is used to communicate
And if all that wasn’t enough, notice the nice change in background color to signify critical events:
Obvious (or understood) information is removed
With information design, what’s not there is as important as what is there. Too many projects suffer from multiple stakeholders who all believe their bit of the world needs to be represented, in the manner they would like. Notice here that someone (effectively) convinced the teams marketing departments to not only drop the team logo, but also abbreviate the team names. This removes the gratuitous (logos) and removes the obvious — complete spelling of the team names. From a ‘user’ perspective, it can be reasonably assumed that most folks will know the names of the two teams playing each other.
Visual design is aesthetically pleasing
The ScoreBar is not unattractive. There’s some subtle gloss on the bar. Some light 3-D effects. But subtle visual treatments. I mention this only because there is a perception that good information design comes at the expense of being visual interesting—that information design is boring. Perhaps, perhaps not. Whether or not an unnecessary, gratuitous use of graphics can, at the expense of communicating information, actually create an overall greater experience— I’ll save topic for another day. I just wanted to comment on the fact that bar is nicely designed, graphically.
So what?
The truth is, really effective design should leave people wondering what the big deal is. Here’s the irony, clients expect things that cost lots of money and take lots of time to seem like they did. To look complex or shiny. But the really great designs, the ones that break through and solve the real problems, will often be the most underwhelming. If there are lots of fancy bells and whistles and animations, be very concerned. That’s probably novelty. Not good design. Look at the iPod, basic box, right? However, the simplest designs are often the most difficult to design. How many sites get the basic things wrong? I love this quote from John Maeda.
To make what appears to be less can sometimes be more work
To truly appreciate the elegance of this bar (and why I spent far too long writing this post), you’d have to contrast it with the last 40+ years, where we’ve had everything from random displays of information to gratuitous visual noise that began to look like an all day news broadcast, complete with scrolling marquis and unnecessary logos.
I think someone got it right this year.
Thank you for the excellent analysis of the “ScoreBar”. I have also observed with enthusiasm this improvement in information presentation for televised sporting events in recent years.
My only complaint with Fox’s ScoreBar is that they consider the number of timeouts remaining as contextual information, but I think it is game level (or, more accurately, “half” level) information. ESPN includes three yellow lights beneath each team’s name throughout the game, one being lit up for each timeout remaining.
(You can view this by looking at the highlights from this year’s OU-Texas game on YouTube. Boomer Sooner!)
— Randy Feb 19, 05:12 AM