Designing an Online Entertainment Experience

February 27, 1997

Nadja Vol Ochs

The following article was originally published in the Site Builder Network Magazine "Site Lights" column. (Now MSDN Online Voices "Design Discussion" column.)

Film Noir

The Site: Suspect, Dead Birds Don't Sing, Episode 2

The URL: http://www.electravision.com/suspect/ (optimized for Microsoft Internet Explorer)

The Creator: Electravision, San Francisco, California

What separates the Web wonders from the Web uglies?

That's the exploration we'll make together in this new, monthly column for designers, programmers, and authors who care about what makes a great Web design work. Also in the MSDN Online Voices, Microsoft's Robert Hess discusses some of the traps site builders fall into when they unwittingly create "Web Ugly" pages; our job in this column is to check out Web Beautiful.

Round up the un-usual suspects

In Suspect, Electravision presents episode two of an online murder-mystery serial, set in a Prohibition-era speakeasy. The story line: Lola, a singer and (rumor has it) part-time squeeze of Chicago mob boss Joe Toro, lies dead in her dressing room at the Four Aces club, her throat cut. It is your job to help detective Nick Bane solve the murder.

Electravision has designed a well integrated experience, with rich imagery, audio, and content for all browsers, featuring Macromedia® Shockwave™ , the HTML Layout Control , and Surround Video™ . More than just a game, Suspect pushes into the realm of the online entertainment experience.

One secret to the success of the Suspect project is the clever, yet simple, integration of creative content and technology. You begin the experience with a slickly produced, narrowcast introduction, presented as a Shockwave file. This is a very effective way to set the scene and introduce the detective.

Take 'Em Downtown and Mouse Them Over

As an automatic transition to the site's next level, a colorful cross-navigation bar loads at the lower edge of the screen, unveiling icons of the suspects (Detective Nick has narrowed down the list for you). As you mouse over the icons, the name of each suspect appears, an effect accomplished with the HTML Layout Control.

You then navigate through effectively designed Surround Video scenes, each scattered with clues and audio narration to help you narrow the suspects down to the "Who dunnit." The scene appears above the cross-navigation bar in a Surround Video format. Cursor changes instigate left-right navigation through the scene.

Also note the subliminal advertisements integrated into the scenes. A very clever way to get advertising revenue without that conventional boxy ad banner--a nice way to get out of the box!

Nadja Vol Ochs is the design consultant in Microsoft's Developer Relations Group.

Entertaining with style

Tips for creating effective online entertainment experiences, courtesy of Lisa Lopuk, co-founder and creative director of Electravision, and designer of Suspect:

Work backward from an online experience or story-game structure you have in mind. An online experience could, for example, be a multi-player exploratory environment. Then brainstorm ways to make that experience possible, both technically and from a user-interface perspective. From that skeleton, begin to focus your content ideas, creating stories, characters, and scenarios that work. As a bonus, your underlying structure can usually be extended to support a whole series, creating a franchise of Web entertainment.

Use specialists throughout. If you're not a writer, don't assume you can create a concise, compelling story by yourself. For the development of Suspect, Electravision created an interactive story framework and the basic story premise before turning it over to a professional pulp-fiction writer.

Get feedback from your audience by whatever means you can devise. In Suspect, the only way a user can find out if the case has been solved correctly is to enter some basic feedback and personal information.

Photo Credit: Michael Moore/Microsoft Corporate Photographer