Flash: The User's Best Friend?
-
Last week I got an interesting request for a Featured Review on Flazoom.com. Macromedian Mike Chambers asked me to take a look at Macromedia's proof-of-concept Pet Market application (more info here). The idea of using a pet store has been a sort of proving ground for online application development technologies. First developed by Sun as a blueprint for creating web applications using Java, the Pet Store example has since been adopted by Microsoft to show off their .NET technology with their own Pet Shop. Now, with the release of Flash MX, Macromedia has entered the fray with their own version that shows off the Rich Internet Application developed
using the Macromedia MX products.
The sample version that I was asked to review is a Flash MX/ColdFusion MX application, but Macromedia has also practiced what they preach and released Flash MX 'skins' for the Java Pet Store and the .NET Pet Shop applications. Of course, the technology back end for these applications is the least of the user's worries. What user's care about is how easy the interface is to use.
- Java Version : http://interstagedemo.fs.fujitsu.com:8000/petstore/main.screen
- .NET version: http://rdaestore.itflightplan.com/rdaestore/
The MX Pet Market
- Before I began looking at Macromedia's Pet Market app I wanted to take a look at both the .NET and Java implementation of the application. These two versions are not part of the usability review, but they both certainly show off the limitations of HTML based interfaces when it comes to interactivity. Both applications work fine, and certainly a user would be able to order products and check out with the minimum confusions, but user-experience wise, both interfaces seem more designed to appeal to programmers than to the average web user.
Macromedia's Pet Market is another story. I've long held that Flash can be used to create a better user-experience on the web, and the Pet Market is proof of that. The interface is easy to use and fairly straight forward. Design wise, it is certainly more pleasing then either of the implementations above.
The Shopping Experience
- The home screen is fairly straightforward. I would not expect any but the most inexperienced web user to have too much trouble understanding the basic interactions required to begin interacting with the interface. My main issue with the home screen is that the five pet type buttons could stand to look a little more like buttons. Also the copy on the home page could be used to provide instructions to users unsure where to begin. The font selections for the interface are all easy to read and displayed large enough that the less than ideal contrast is not that great an issue.
The ordering process is a breeze to understand. Click on the pet type, select a breed of pet, choose the pet size/sex and click to add to the cart. As soon as the user adds a pet the shopping cart is updated to reflect the new addition and the sub-total and quantity are also automatically updated. The usability of the application is improved through a number of secondary interactions available to the user. Increasing the quantity of a specific pet can be accomplished by three different methods; the user can continue to click the 'Add to Cart' button, the user can adjust the quantity in the shopping cart window or the user can click and drag more pets into the cart. These interactions are not always described to the user, but the intuitive nature of the interactions means that more experienced users will be able to choose the interaction method that best meets their needs. By any method though, the Pet Market makes the process straightforward and easy to use. I can't find many faults with the 'add to cart task' except the use of scroll bars in the Dogs selection. The scroll box hides three options from the user.
Usability hot spots
- The biggest usability issue that occurs through out the site is the choice of colors, especially when text is involved. Too often the colors are too light for the white text or too dark for the black. While just about all of the text is selectable (fantastic!), white text on a black background provides no feedback to the user once it has been selected. The visual feedback of selecting text in Flash is to turn the text white and the background black. When text is presented white on black, the selection feedback is invisible to the user.
Supporting Features
- Supporting the main task of ordering pets is a number of secondary features that work to improve the overall functionality of the application. The first of which is the history feature. This feature tracks the products on the site that the user has viewed. When minimized the History feature shows up to 13 little boxes that represent different screens of information that the user has viewed. Each little box also provides a 'tool-tip' like delayed pop-up that provides the user with further information about their interactions with the site. If more detail is needed, users can expand the History feature to see a listing of the screens they have seen.
The only issue that I have with the History feature is that it does not actually show the true history of the user's movement through the site. Instead it shows the user's history of the order in which they viewed the 30 different pet types on the site. If a user first looks at the Clown Fish then no matter how often they visit it again, it will still remain as the first entry in their history. The site does feature a new fully-compatible back button method though, so user's can retrace their steps using that method.
Searching is another secondary feature that the Pet Market application offers to users. The implementation of the search is very elegant and robust. I tried a number of search terms such as 'yard', 'hair' and 'toddler' and each time the application was able to find the requested word. The results interface is easy to use and reinforces the structure of the content through the use of the color-coded squares from the History feature.
There are a few other features of this system that are not immediately evident. One that impressed me, and I am sure will impress potential customers of systems like this, is the use of cookies. When I first looked at the application on Friday of last week, I added a few fish and a dog to my cart. To my amazement, when I returned to the site on Monday my shopping cart was still as I left it.
Conclusion: Wow!
- Macromedia and the design firm Popular Front have crafted a very elegant interface for the Pet Market application that extends the user's interactions past what is normally expected on the Internet. The additional secondary interactions, such as drag-n-drop cart additions, allow users to interact in a way that suits their needs instead of only providing one interaction option. The application also communicates actions, results of actions and system status very clearly and concisely. Overall, the Pet Market application is a great example of how Flash can improve the user's experience on the web.
Recommended Usability Triage Suggestions:
- Generally I recommend a number of changes that should immediately be made to improve the usability of the Flash sites that I review. In the case of the Pet Market application, I can only make suggestions. Macromedia and Popular Front did extensive user testing on the interface to make sure it was right and it shows. There's not a lot that can be improved, and if you've read other Featured Reviews on Flazoom.com you'll notice that the recommendations I've made are fairly nit-picky.
- Make the initial screen more intuitive by making the buttons look a little more like buttons. Beveled edges or drop shadows would assist with this.
- Change the interactivity of the Dog breed selection box from using a scroll-bar to dynamically resizing to show all options at once. This solution will not work if there is a large number of potential products, but for this particular interface it will provide the user will all the options at once.
- Refine the color choices to improve the contrast between text and backgrounds. Text that is white on black may need to be reconsidered due to the method that Flash uses to provide feedback on selected text.
- Rename the History feature or reprogram it to provide an accurate history.
- If this were a real application used for online shopping, I would also suggest implementing an HTML version for users without the latest Flash plug-in or users on slow modems. As it is a demo version to show off Flash MX features, this suggestion can be ignored.
If you would like a usability review and triage suggestions for your Flash content, please contact Chris MacGregor.
Chris MacGregor is an Interaction Designer with MacGregor Media in Houston, Texas. He consults with clients across the world to improve the usability of their Flash projects. In addition to his award-winning work, MacGregor is recognized as a leading proponent of Flash and Usability. He is the publisher of Flazoom.com, a popular Flash critique site and author of a number of articles focusing on Flash and Usability. In 2001 Macromedia published MacGregor's Flash usability white paper entitled "Developing User-Friendly Flash Content." MacGregor is currently hard at work on a forthcoming Flash Usability book from Friends of Ed.