Flash Interface Design: Bud Greenspan's 10 Greatest Winter Olympians
Sports broadcasters CNNSI (Cable News NetworkSports Illustrated) teamed with sponsor General Motors (GM) to offer an Olympicsflavored sweepstakes in the days leading up to the 2002 Winter Olympics in Salt Lake City. Visitors to a special Web site could register to win a trip to the 2004 Summer Olympics in Athens, Greece. At the same time, they could participate in another GM-sponsored promotion: the naming of the ten greatest Winter Olympians of all time, as determined by Bud Greenspan, a sports historian and documentarian who would announce his own top ten at the Olympic games.
The site's first screen (which Thoughtbubble calls the "prologue") sets the scene. Here, visitors are introduced to Bud Greenspan and told about the two activities on the site: entering the sweepstakes and voting for their top ten Winter Olympians.
For Thoughtbubble, the challenge was how to bring the site's separate goals together into a coherent presentation. "'Sign up here to win a trip' doesn't tell a great story," says Jonathan Heck, Thoughtbubble's chief development officer and co-founder. "We made a case to our client that they had a significant opportunity here to capitalize on their relationship with the visitors to the site."
The resulting site did indeed gather names for its sponsors, but that wasn't the main event. Instead, visitors were drawn into the electronic equivalent of a coffee-table book on historic Winter Olympians, with an added interactive element: They could register their opinions about the athletes by voting for their own top ten.
A Complex Task
When Thoughtbubble analyzed the task before it, the company found that the site needed to accomplish three distinct jobs: It needed to introduce Bud Greenspan and draw an audience to his announcement of his own top ten Winter Olympians. It needed to let users vote for their own top ten choices. And it needed to promote the sweepstakes. The trick would be to meet these goals in a way that wouldn't be confusing to the site's users.
As the introduction loads, a screen advises users that audio is on the way. "It was a way of letting people know how to get the most of what's coming up," says Dave Carroll, Thoughtbubble's director of multimedia. Even users without sound get the information, though, thanks to the text of Greenspan's narration that is displayed over the photos.
"It was a complicated scenario in that users voted for their top ten and then Bud Greenspan had his own top ten. And there wasn't a direct relationship between voting on your own favorites and being concerned with Bud Greenspan's," explains Dave Carroll, Thoughtbubble's director of multimedia.
The twofold answer to the problem hinged on carefully layering information as the user enters the site, and meticulously planning the layout and interactivity of the site's main screen.
One, Two, Three
Entry to the minisite was carefully paced. Most visitors would arrive from a banner ad promoting the sweepstakes. When they clicked the banner, the site would pop up in a new window that contained the prologuea page introducing Greenspan and the chance to cast your vote for the top ten athletes, in addition to entering the sweepstakes. "The prologue was a way of forcing people to find out about the complexity," says Carroll.
When you click Enter the Site from the prologue, a montage featuring Greenspan's voice and stylized scenes from past Olympics fills the same screen. The images, accented by falling snowflakes along with Greenspan's nostalgic narration, create a somewhat elegiac mood. Here's where the site begins to build a relationship with its visitorswith all the emotional capital of the Olympics brought to bear. When the montage ends, the screen fades away, to be replaced by the interaction screen, on which all of the promised activities take place.
"The introduction presents Bud Greenspan as the authority on Olympian biographies," explains Heck. "His name carries a lot of currency in the sports world and in the documentary world."
Focus on the Athletes
Once you've arrived at the main screen, the site homes in on individual athletes. After a short load time, two photos and a text block featuring one of 24 preselected athletes slide into the center of the screen.
The Thoughtbubble team admits that the focus on the athletes rather than the sweepstakes was a bit controversial. (An invitation to enter the sweepstakes appears at the top right of the screen.) In the first layouts, where the call to enter was at the bottom of the screen, the client objected that it needed to be more prominent. In the end, though, everyone was happy with the result, with the sweepstakes text in the top-right corner. "We made the font a little brighter and a little larger, but we didn't want the first thing in your face to be 'Give us your information,'" says Kevin Cavallaro, Thoughtbubble's art director and lead designer. "We felt that the more we give the user something to engage in, the more they'll look for." And, the team reasoned, visitors would already be on the lookout for the entry information, since they got to the site by clicking an ad promoting the sweepstakes.
On the main screen, the information comes into view dynamically, focusing the visitor's attention on one item at a time. First, photos of the athlete slide in (top and middle), then the athlete's story appears (bottom).
The presentation is elegant and efficient. Two photos of the athletea longer shot, of the athlete in action, and a close-up, in reposethen a short text biography move from right to left in layers, offering a full view of each photo before it is overlaid by the next piece of information.
By using time and space thoughtfully, the studio achieved all three site goals without causing confusion. The two screens that introduce the site let the visitor understand what's going on without getting in the way of the main action. The layout of the main action screen reflects the designers' view of what's most important (the athletes). The dynamic presentation of the key information there (skillfully paced introduction of photos and text, followed by instructions on how to use the page) lands the visitor softly in what might otherwise be a confusing landscape.
Managing the Assets
Marc Goldleaf, the project's producer, laughed ruefully when I complimented the team on the effectiveness and economy of showing each athlete in long-shot and close-up views. "I lost that battle," he says, explaining that Cavallaro felt strongly about having multiple photos of each athlete, but that he resisted, thinking of the complicated task of managing all the photos. "We were working with assets from 50 years ago, and a limited number of images were available," Goldleaf explains. And once the images were found, they needed to be approved by the surviving athletes, GM, CNN, and the athletes' national Olympic Committees.
Finding, getting permission to use, and then giving a coherent look to photos that ranged in quality and over 50 years of styles called for careful art direction and Photoshop work.
The work didn't end when the images were finally authorized. "It was a lot of work making them look the way they do," says Cavallaro. "There aren't a lot of images there that don't have at least an hour of art direction involved."
To give the imagesranging over 50 years of styles and qualitya clean and coordinated look, the team had to change the photos' backgrounds and airbrush out competing logos, "even entire people," Goldleaf says. Thoughtbubble had to collect releases from everyone in an imageor from their estates, if they were no longer alive. If releases weren't available, that person had to go.
Dynamic Exposition
After the bio and images are in place, text begins to appear below the photo. Under the title "Vote for Your Top 10 Athletes" are just two lines of instructions: "Roll over colored rectangles to browse through athletes. Click to view. Drag and drop the athlete's color rectangle into an open slot below to vote."
A Flash animation that types the instruction text one letter at a time is a simple but effective way of drawing eyes to what would otherwise be just another block of text. "In writing classes, they always say you need to make your exposition dramatic," laughs Heck. Flash makes it possible to do that, literally.
Carroll says he got the idea for typing out the text from futuristic screen interfaces portrayed in films like 2001: A Space Odyssey. "The screens in those films look eerily like Flash interfaces," he notes. However, Carroll says, screen interfaces in films are typically a lot more active than those on our own computers. "In movies, it has to be engaging," he says.
Managing the Vote
Thoughtbubble put a lot of thought into the deceptively simple voting process.
The need to present a level playing field for the athletes resulted in a number of decisions. For one, the first athlete name you see changes each time the site is loaded. Carroll created a RandomAthlete function to select a number between 1 and 24 and an ActionScript LoadMovieNum function to load the correspondingly numbered athlete's movie.
The need for parity also legislated the horizontal layout of the tiles that represent each athlete, as well as the use of rollovers to show the athletes' names. "Putting crucial information in a rollover is generally risky," says Carroll, because users may simply never see it. Here, though, the designers found it the only way to avoid a stacked layout that gave precedence of position to one athlete or another. In the horizontal layout, the tiles are organized alphabetically by last name, but users won't necessarily scroll through the names from the beginning; they're just as likely to choose an interestingly colored tile or one next to the current tile.
Colored tiles represent each athlete. The currently chosen one is indicated by a dot on his or her tile (top). Rolling over other tiles displays the name of the athlete represented by each one. Clicking a tile calls up that athlete's info. Users vote by dragging an athlete's tile into position in the voting bar. When all ten slots are filled, the Submit Vote button is activated (middle). When Submit Vote is clicked, the text changes to a label, Submitted Vote (bottom), and a list of the current popular vote standings is displayed, along with another call to enter the sweepstakes (right).
"We had the intuition that drag and drop was the way to go for the voting," says Cavallaroan intuition that was confirmed as the team designed the implementation. In the final design, you drag the athlete's tile into one of ten voting slots to create your personal top ten.
"There were a lot of nice things that happened by accident," says Carroll. Because each tile is positioned on the stage dynamically with ActionScript, and each is assigned the properties of the athlete it represents, the chip's behavior is the same whether it sits in the navigation lineup or in the voting slots. You can still click them to call up the athlete's information, or drag them out again into the roster in the same way you dragged them in. (The tile snaps back to its original position in the line.)
The Thoughtbubble team says that all the comps it showed included some version of drag and drop. "One design had you drag the photo into a ballot box," says Cavallaro. "It took the idea really literally."
"When we were putting together the drag-and-drop interface, we were concerned whether people were going to get it," says multimedia designer Paul Gomez. The typed instructions were designed to make the interface clear. But he also points out that you can get a lot out of the site without even getting to the voting. Carroll agrees: "We wanted to introduce next-generation interactivity but not make it necessary for using the site."
Hidden Significance
Heck believes that the design of the voting system owes its success to the way it mimics users' thought processes. "What we're asking the users to do here is somewhat complex," he says. "Consider 24 possible choices, evaluate the individual merits of each, and then keep all those facts and opinions in their heads long enough to choose their ten favorites."
The tiles, he says, serve as useful aides-memoire. "Each colored tile represents everything the user knows about the individual athlete, whether learned from the site or from previous experience," he explains. The voting mechanism allows the users to organize each of those individual ideas, compare them, group them, and sort them. It's a process, he says, "that mimics the countless cognitive evaluations and comparisons that go into every decision we make." Users are able to reevaluate and reconsider their choices by rearranging the tiles as much as they want before committing to a final vote. The information about each athlete remains associated with its tile no matter how the user organizes it, just as a host of associated information and ideas connects to an item.