Developer Center Article

Early in the process of creating Pet Market, the development team decided that the application would not only showcase the Macromedia MX technology, but that it would also focus on the usability of this technology. We wanted to show not only what could be done but also what should be done—that is, the new user interface policies and guidelines that are emerging with the new technology.

To identify what worked well (and what didn't work well) for the Pet Market user experience, we followed an iterative usability testing process with a few twists. First, we identified key objectives and tasks that needed to undergo iterative usability testing throughout the development process. We also identified areas that might violate traditional principals of "good HTML web design" so that we could pay close attention to these during the usability testing process.

Second, because we wanted to put the Pet Market in front of many diverse web users, we decided to take the application to the streets of Boston. We found our diverse population at colleges, libraries, bookstores, car repair shops, and community centers. All told, various versions of Pet Market found their way in front of 30 people, whose feedback drove many changes in the end product.

This article describes some of our user feedback and the changes we made to Pet Market to improve the user experience. Some of what we found surprised us because it didn't agree 100% with traditional principles of usable web design. Most of what we found inspired us because it demonstrated how well Macromedia Flash MX benefits users on a website if designed appropriately.

The first and most obvious use of animation on the Pet Market site is its navigation and browsing experience. When a user initially chooses a category of animals to explore (one of the five colorful images with categories of animals), a new sub-navigation box appears to the left of the main content area. This new box displays specific breeds for the selected animal category. In this case, usability testing showed that adding animation that displayed motion drew a user's attention from the main navigation to the new sub-navigation.

After choosing a specific breed in the sub-navigation box, the website uses animation again to direct the user's attention to the fact that the main navigation bar moves to the bottom left hand corner of the application window. Since moving the main navigation is considered taboo by the usability community, our tests focused heavily on making sure users were able to locate and use the navigation once it had moved. Our studies revealed that the overwhelming majority of users (more than 90%) had no problems finding the relocated navigation bar and sub-navigation.

In early usability testing, we discovered users did not notice that when they clicked on a specific breed of animal in the sub-navigation box on the left, the content changed in the center of the Pet Market application. This problem surfaced often when users attempted to purchase the wrong type of animal. For example, a user who wanted a Great Dane may have ended up purchasing an American Cocker Spaniel.

To address this issue, the development team did two things. First, they moved the sub-navigation box closer to the content area to strengthen the relationship between the two areas. Second, they added an animation effect that indicated that a change had occurred in the content area after choosing a category.

For the most part users did not seem to consciously notice the animation, but they experienced less difficulty in purchasing the correct pet after we added the animation.

In the early prototype versions of Pet Market, one of the most consistent usability issues was when users attempted to add items to the shopping cart. Users would add an item to their cart, but they were unable to judge whether or not the item had been successfully added. This was true despite the fact that the cart showed a change of quantity of items and price.

The development team decided that animation could play a role in solving this problem. The team added a new piece of functionality that used subtle animation to expand the user's shopping cart when adding an item. This small, yet effective animation technique not only solved this usability problem, but also helped users discover that items on the right side of the screen were expandable and collapsible.

One of the advantages of Macromedia Flash MX is that it allows developers to build web applications that provide users with a "one-screen" checkout experience. This is in contrast to the several pages a user must navigate through in a typical HTML shopping cart experience. In theory, these one-screen applications allow users to input information while simultaneously providing feedback regarding the information they have just entered. Usability testing on the Pet Market application, however, showed that this method of collecting information is not always appropriate.

In early rounds of usability testing, the Pet Market application used a version of the one-screen checkout that was similar to those seen on sites like Broadmoor. Early usability feedback showed that users often felt overwhelmed by the amount of information on the one screen and felt as though they didn't know where to begin the checkout process. This confusion led to problems in completing the checkout process.

After noting these difficulties, the development team went back to the drawing board and created a new checkout experience. This new checkout is based roughly on the single-screen method, but also provides the user with a step-by-step process to guide them through the cart. In addition to emphasizing an inherent order to the checkout, the new design also decreased the information overload for the user by revealing the necessary input fields as they became relevant. The change immediately produced positive results in usability testing. Where users previously experienced difficulty checking out with the one screen approach, they now began to step through the process with more confidence and significantly less errors.