Digital Web Magazine

The web professional's online magazine of choice.

Flashes of Brilliance and Use-Centered Design

Got something to say?

Share your comments on this topic with other web professionals

In: Articles

By J. Dawn Mercedes

Published on April 14, 2003

Can Macromedia Flash really add value to a Web site? Or is Flash content on the Web so prone to usability problems that it can never be fully effective? In his October 2000 article Flash: 99% Bad, Jakob Nielsen contends that good Flash design is so rare that the presence of Flash on a Web site “constitutes a usability disease.” Nielsen’s article set the tone for a deluge of Flash-bashing followed by a host of rebuttals. To Macromedia’s credit, the company has made a concerted effort to address usability issues in the latest Flash upgrade (MX). In addition, Nielsen and Macromedia now work together in an attempt to re-educate Flash developers and improve the usability of Flash applications and content. While Flash still tends to discourage usability, good examples of Flash design on the Web do exist and I will discuss a number of specific examples later in this article. Without a doubt, developers have finally realized that Flash has the potential to be effective if it is used in a way that capitalizes on its inherent strengths.

Just A Tool?

Flash, of course, is neither inherently good nor evil. Neither is Flash “just a tool.” All tools have built-in biases. Flash’s programming makes it effective for some applications and ineffective for others. As Doug Peterson notes, “When technology is used to support a task for which it is not well suited, failure is likely.” In the past, the focus has often been on the technology, with limited consideration given to other factors such as the site’s intended audience, or the company’s goals. The thinking went something like this: “Start with Flash, then adjust the Web content to fit the Flash application as needed.” More often than not, poor Flash design resulted from this “cart-before-the-horse” strategy.

What happens if we consider an alternative approach to Web development? John Flach and Cynthia Dominguez coined the term “use-centered design” (yes, “use” not “user”) to describe a construct wherein the focus is on the interactions and relationships among the user, the goals of the user, and the technology. They argue that a focus on “use” rather than “user” leads to a more comprehensive synthesis of factors. Whereas in a “user-centered design” approach, the user is treated as a special, distinct component within the system, the focus from a “use-centered design” perspective is on the whole system, which includes the user. A use-centered approach to Web development would be more likely to succeed because goals, tasks, and objectives are clearly stated upfront, and from there it is determined which technology or set of technologies is an appropriate solution. Indeed, the best uses of Flash today are found on Web sites developed, consciously or not, from a use-centered perspective. So when is Flash the best application for the job at hand? What exactly does Flash do well? Here are some current examples:

Interactive information

Flash is perfect for content that necessitates multifaceted user interaction. Butte College’s Web site features an excellent interactive map of their campus. The Flash movie loads quickly and the interface is straightforward and easy to use. Roll your mouse pointer over any building on the map and the building’s name pops up. Click on any building and a new browser window opens with a screen that displays detailed information about the facility. There’s also a scrollable “Key to Campus Locations” section that functions as a building index, and a number of map locations offer QuickTime VR tours.

As another example, the online edition of the Chicago Tribune features an interactive map of ground zero in New York City. The map presents us with an overhead view of the World Trade Center site along with the surrounding area. Click on any of the buildings in blue and you’re presented with information about each building’s repair and reopening status. Some of the buildings also include links to extras such as video clips and/or photographs of the specific building you’ve inquired about.

Similarly, Flash’s interactive and multimedia abilities are also well-suited to the creation of historical timelines. One of the best examples I’ve come across is a site called “the forgotten,” which is dedicated to the Armenian genocide that occurred in the early 1900s. Click on the “Timeline” feature and the historical record is broken down by year with plenty of explanatory images and text. Personal testimonials from survivors of these horrific events add impact to the presentation of information. The Flash interface is clean and well designed, the focus is on providing users with organized, meaningful content.

Educational applications

Flash was developed with animation in mind. The sophisticated animation features native to Flash are highlighted at Bembo’s Zoo, an online picture book for children. The completely vector-based Flash movie helps children learn the letters of the alphabet. Click on any letter and the letter morphs into an animated creature. The letter “C” for example, morphs into a crab that snaps its claws and then scurries off the screen. The animations are quite entertaining and the sound effects are a vital part of the whole Flash experience.

Simple but effective is the best way to describe the Tangram, a Chinese puzzle that’s cut into 7 different shapes. The object is to take the 7 pieces and reassemble them into another shape. Believe me, it’s much harder than it looks! The Flash interface includes buttons that allow players to easily reset the puzzle, go to the next puzzle, or see a solution to the current puzzle.

One final educational site worth mentioning is the Phonetics Flash Animation Project, from the University of Iowa. The site was developed for, as is mentioned in the site’s introduction, “students of phonetics, linguistics, and foreign language.” Use the “Quick Links” in the upper right hand corner to access either the Spanish or English sounds library. Each library is a Flash movie that truly demonstrates the power of Flash to seamlessly integrate a variety of media. Choose from a list of sounds and an animation appears, showing how the tongue, lips, and throat work together to make the sound. A video clip in QuickTime format offers a close-up of a woman’s nose, throat, and mouth as she makes each of the sounds. Extra audio files supplement the pronunciation lessons.

Visual explanations

Likewise, sites that utilize Flash to provide us with a visual explanation also take advantage of Flash’s animation capabilities. Rubbermaid’s online home products catalog offers visual descriptions of how its products work. Visitors can view and interact with a 360 degree representation of many of the company’s products. For instance, under the “Products” category, click on the “home organization” link, then click on “step stools.” Rubbermaids’ “Folding Two-Step Step Stool” is shown with a link to a 360 degree view. In the 360 view, a potential customer can rotate the step stool and use a “slider-style” navigation system to open and close the product. Extra navigation features allow a customer to zoom in and take a closer look at special product features. This type of interactive presentation would be difficult to produce in any application other than Flash. The technology employed clearly suits the objectives and tasks at hand.

Another good use of Flash technology in this category comes from Pergo, a company that manufactures laminate flooring. On the right hand side of the screen, click on the “design a floor” graphical link. A new browser window opens and the Flash movie loads. The screen is divided into two sections. On the left side, select a pattern, tile color, and accent square color. The Flash movie is programmed to instantly build your custom laminate floor on the right side of the screen. The functional Flash interface makes it easy to print out a copy of the floor you’ve just designed. As an added feature, click on the “Shopping Cart” icon to promptly order a sample of the flooring.

Finally, I encourage you to visit one other site that uses Flash extensively and effectively to explain procedures in a visual manner. In this case, it’s the Illinois Bone and Joint Institute’s site, specifically its patient education section, where Flash animations are utilized to describe, in (painful) detail, hip and knee replacement procedures. Even the squeamish will be impressed by the high quality of the Flash imagery and the clarity with which Flash is used to convey information.

Games

Its high-level scripting capabilities make Flash the ideal tool for many types of interactive games. Play an old fashioned game of air hockey at flash-game.net and don’t be surprised if the computer wins most of the time! To take a “Perilous Voyage,” one of several dozen games available from Orisinal, click on the second icon from the left in the third row. For something completely different, try the Lemonade Stand, a game created by Geoffrey Noles. Lemonade Stand is an educational game geared toward children that teaches economics and accounting principles. The object of the game is to see how much money a player can make selling lemonade over a period of 30 days. Each player starts out with a fixed amount of assets and is provided with “cost per glass” information. The player must then decide how much of those assets to spend on advertising and how many glasses of lemonade to make. The Flash application keeps track of total assets, expenses, and profits as the player goes along. Straightforward, clean, and effective Flash design.

Database and other commercial applications

Flash is an increasingly popular application for database-driven sites. Flash’s backend programmability makes it a practical solution for sites that require unique and sophisticated features. For example, SonyClassical.com uses Flash to implement their online listening stations, which must be updated on a weekly basis. Flash is a good solution for SonyClassical.com because it is well-equipped to handle content that must change frequently. As Manech Ibar, Director of New Media explains, the use of Flash technologies saves production time and makes the site “more interactive and sticky,” while it also gives developers permission to be creative without being restricted by the technology.

Mindseye, Inc. developed the FAO Schwarz site where Flash is used for its shopping cart application and other database-driven specialty features. According to Mindseye, Flash allows for “versatile product creation and merchandising controls,” in other words, it facilitates quick and accurate updates for a variety of the site’s features, such as FAO’s animated “Product Parade,” located at the bottom of the site’s index page. Mike Cawley, a partner at Mindseye, says his company chose Flash for the FAO site because it was the best tool with which “to showcase as much product as possible without interfering with the user’s particular requirements.” Product performance factors and widespread market acceptance were additional considerations. Overall, Cawley states, Flash was the best way to meet and exceed the client’s branding and creative requirements. Clearly, Mindseye took a holistic, integrated approach and considered a variety of factors before deciding that Flash would be the best solution for this client’s particular needs.

Lastly, California wine and spirits retailer Beverages & More and London-based International Guild of Professional Butlers both use Flash solutions from Broad Daylight, a Santa Clara, CA software developer that builds what they call “web self-service software.” More specifically, Broad Daylight provides online customer service solutions that enable companies to answer questions from customers, partners, and employees on a 24/7 self-service basis. Flash is an optional component of Broad Daylight’s software, allowing organizations to choose whether it’s a good fit for their specific goals. John-Paul Saunders, Broad Daylight’s Director of Web Development, describes the company’s Flash-based web applications as “Eye-candy with real value . . . fully automated, easy to customize, can deploy on any website and is supported by the majority of internet users.” As an example, look at the left side of the Butlers Guild page. The scrolling text provides a list of clickable “Top Questions.” Through this Flash interface, there’s access to a database of information pertinent to the professional butler. Once again, a use-centered approach was employed to determine the most appropriate technological solution for the task at hand.

As these examples demonstrate, Web developers are beginning to understand that Flash content can be effective when the focus in the development process is not on the technology, but on the relationships among the user, the goals of the user, and the technology. Usability suffers when Flash is used to perform a task for which it is ill-suited. Fortunately, developers are moving away from a “Flash for its own sake” mentality, towards a development model that considers the inherent strengths of the program. As a result, developers are better able to personalize and manage content, more thoroughly integrate multimedia elements, program complex levels of interactivity and animation, and customize an environment for each individual user. Flashes of brilliance are feasible if we utilize new approaches to Web development.

References

Flach, J. M. & Dominguez, C. O. 1995. Use-centered design.

Ergonomics in Design, 3 (3), 19-24.

Got something to say?

Share your comments  with other professionals (0 comments)

Related Topics: User-Centered Design (UCD), Flash

 

J. Dawn Mercedes, Ph.D. is an artist, educator, and author who is currently an Assistant Professor of Art & Graphic Design at Oakton Community College in Des Plaines, IL (USA) where she teaches a variety of Web design classes.

Media Temple

via Ad Packs