Wednesday, August 15, 2012

A few Olympic Web design tips for NBC

I wrote an earlier post on the production and direction of NBC's Olympic coverage. That note focused primarily on the production of their video content, but we also noted a few Web site production problems like broken links, slow response time and screen blackouts during transitions to commercials.

Many of these glitches depended upon the network as well as the Web design, but they should be able to improve both of those based on their experience this year.

In addition to fixing those problems, they can take some interface ideas from the BBC's Olympic Web site, which was more interactive than theirs. NBC was more like television -- the viewer watched the video passively, and NBC producers popped up extra information like standings and scores on the screen when they decided to do so. (They also popped up commercials -- something the BBC or Tour de France producers did not have to deal with).

The BBC gave the user more control. If the user clicked on Extras after hovering over the bottom of the screen, they could display information about the athletes and the game. They could also control playback using a chapter-oriented time line.


In the example shown below, the video timeline is divided into "chapters." In this case, the chapters correspond to pre and post-game material and quarters or parts of quarters of the game action. The user is watching the second video chapter (yellow) and has displayed the game statistics of one player, Carmelo Anthony. The chapter-oriented timeline and Extra choices gave the BBC user more control than the NBC user had.

The folks on the NBC Olympic crew can also borrow from their Tour de France team. For example, I really liked the 15-second instant replay button on Tour videos. Again, this example shows a way to give control directly to users, who can replay as much or little as they wish.


The user interface shown above was BBC's default, but they offered two optional user interfaces. The accessible player had text-oriented controls that were designed for keyboard and screen reader access. They also had a pop-out player for people who wanted to keep the action streaming in a small window while the worked on something else.

This is not to beat up on the NBC Olympic team. The Tour de France team had a simpler event to cover -- a single race comprised of stages that all followed the same format. Furthermore, they had previous experience covering the Tour and neither they nor the BBC crew had to deal with commercials.

That being said, I am sure NBC will look back at what they and their competitors did this year, and improve their site design.