Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

Flash Interface Design: Bud Greenspan's 10 Greatest Winter Olympians

CNNSI had three goals for a minisite running in the weeks before the 2002 Winter Olympics: to gather names for a sweepstakes, to make sure the Olympics audience knew about Bud Greenspan, and to let users vote for their favorite all-time Winter Olympians. Thoughtbubble Productions used Flash to accomplish all those activities in a single page.
This chapter is from the book

Sports broadcasters CNNSI (Cable News Network–Sports 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.

example 1The 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.

example 2As 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 prologue—a 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 visitors—with 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.

example 3On 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 athlete—a longer shot, of the athlete in action, and a close-up, in repose—then 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.

example 4Finding, 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 images—ranging over 50 years of styles and quality—a 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 image—or 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.

example 5Colored 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 Cavallaro—an 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.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020