Effective Flash Usability

As a recent FWA winner, Champion’s Hoodie Remix is an engaging, interactive Web site that allows users to design their own Champion-branded hooded jacket. Built entirely in Flash, the rich customizing experience not only looks good, performs well, and markets the product well, but the interface is extremely usable.

Usability

As Flash designers, we tend to be experts in how our Flash products look, and as Flash developers, we all too often concentrate on code logic and functionality. But it’s not just great visuals and great code that makes a dynamite Flash product, there’s also the matter of usability.

Breaking it down

I thought it might be interesting to take a look at a high profile Flash Web site such as Hoodie Remix and highlight areas that demonstrate good, effective usability, and perhaps inspire any Flash designers and developers out there to not only be more aware of Flash usability issues, but also to improve your own usability in your Flash projects.

Preloader

Everyone knows how to code a preloader, right? Most developers can code them with their eyes shut. But have you ever realized how important they actually are? The downside to multimedia content on the Web is that, depending on a variety of factors (mostly how fast you can connect to the Internet), you have to invest some time for it to load before you can enjoy it. The importance of a preloader is to let the user know that something is happening (content is being loaded), and to stop someone from leaving your Flash site the second they see the “Please wait, loading…” message. Successful preloaders employ a way of showing how much content has loaded or is left to load (percentage based) to reassure the user that something is happening and the Web content will be ready shortly.

The first thing you see when you visit the Hoodie Remix (HR) site is the preloader:

What I like about the preloader is not how it looks visually, but the simple text messages that appear to inform the user what they can expect from the Web site. “A Hoodie Design Competition” and “Vote on Your Favorites” for example. By telling users what they can expect to see might stop someone from going away and leaving the site. It’s just a little piece of extra information that may appear trivial, but actually has a purpose and achieves the purpose in a very simple way.

Home page

The home page has changed a little bit since HR first launched as the competition is now over and the finalists have been chosen. So for the purpose of this review, we’ll take a look at what’s on the home page right now.

Firstly, although there is quite a lot of information on the home page (logo, top navigation, login, sign up, information, privacy statements etc…) the three main calls to action are extremely clear:

When you create a Flash site, especially one with a lot of information, it’s important to make it very clear what your main points of entry are. What do you want users to do most of all? What’s the most important content or part of your site? Make your most important information very clear, accentuate or highlight it as well as possible.

The three main sections on the home page are very clearly accentuated:

• Design Now
• Finalists Announced
• View Gallery

Rollovers

What’s great about these three items is what happens when you rollover them. First of all, there is a blur effect which blurs all other items as you hover over another item. Secondly, there are some really interesting and compelling animated effects when you rollover each section. Finally, there is some extra textual information on rollover so the user can learn a little bit more about what will happen when they click on one of these section buttons.

Rollover effects, whether they’re elaborate like the HR site or if they’re just as simple as a color change on a basic button, are very important. A “button”, in the Web sense of the word, is largely defined by it’s appearance and what happens when you roll over it. It’s a visual hyperlink, and to make users understand that you can click on something, it’s important to use rollovers effectively.

Design Now

This is the most interesting section of the Hoodie Remix site. There are lots of clues and ideas in the Design Now section on how to improve the usability of your Flash site or application.

Once everything loads on the page, the color palette, the blank hoodie and the pattern palette, the first thing your eyes are drawn towards is the little message that appears in the center of the screen over the top of the hoodie that says, “Hello… Drag & Drop to begin.” This subtle hint of information to get you started is a really nice way to make using the interface as easy as possible for the user. By making the statement “Drag & Drop to begin” the user does not have to guess what to do or experiment through trial and error to perform a task. The task at hand becomes clear.

Drag & Drop

As the user drags and drops color from the color palette onto the hoodie, notice how there are “hit areas” on the hoodie. Shaded polygons appear to signify where you are about to drop color. This is a nice touch because there are some small areas of the jacket where you can apply color and styles that might become difficult or even frustrating to achieve had there been no hit area visual clues.

Multiple Ways to do the same task

As well as dropping color from the palette to the jacket, there is an alternative way to add styles to the hoodie. If you first left-click a part of the hoodie and then choose a color, the part of the hoodie you selected will change color accordingly. The point to learn here? As well as having interactive elements such as drag and drop, there is a faster alternative available. While drag and drop may be fun at first, the designers of HR realized that to speed up the process, there needed to be a slightly quicker way of designing the jacket, hence the two click process of selected a jacket section and then choosing a color. Boom! Two clicks, totally removing the need to click and hold down the mouse on a color and then dragging it.

Although this is a basic task at hand, the ideology here is synonymous with the way that advanced features are sometimes added to applications for power users. Power users like to have quicker ways of doing things. Consider this notion the next time you are creating a slideshow or gallery or even a heavier application. For example, let’s say you create a really cool Flash shopping cart where you can drag items to your cart. Nice! Some people will love that! But frequent shoppers on your site would soon tire of that repetitive action (that was once fun), so why not add another mechanism such as clicking an item, displaying “Add To Cart” or a plus icon on top of the item, which can then be clicked to send the item to the cart? Multiple ways of doing the same thing. One way because it’s fun or cool, and another way because it’s fast and practical.

Watch Demo

If by this point there is a user who still does not understand how to customize their own hoodie, there is a conveniently located button called “Watch Demo”.

A really nice touch here is, instead of throwing the user into a demo and losing any potential time/work spent on the current design, there is a confirmation screen that points out, “If you leave this page your design will be lost”:

The beauty here is in the detail. HR is actually valuing the user’s time with useful cautions such as this. This adds to the experience, prevents any usability disappointment, and one more thing: It cleverly gets users to sign-up to create an account. Bingo! That’s every e-commerce site’s goal – to get you to sign up.

Sign-up form

Rule number one about sign-up forms, no matter whether they’re developed in JavaScript, Java or ActionScript: Keep them short. Users do not want to spend a lot of time inputting their data, and when a user can clearly see that there are only a few steps involved to sign-up or complete form, then they will be much more inclined to do so.

But it gets better! When you register an account on the HR site, look what you get!

So there’s another great tip for Flash developers out there, reward your customers for signing-up. The logic behind that is, you garner more trust and start to build a relationship with your customer by giving something back, just as the customer has given you something. Simple, yet very effective.

Toolbar

What I like most about the design toolbar (pictured above) is the fact that it contains useful tools that help you to “get the job done.” Don’t spend time creating tools just because they are cool or just because you can code them, make them worthwhile to the user. Most of the tools here are self explanatory, such as rotate and reset, but look how rich and useful some of the features are, such as undo, redo and save. Champion really want you to spend some time with your work of ‘art’ and they appreciate that you may want to save your design and come back to it. They also realize that designing the perfect hoodie may be trial and error, which is where the undo and redo buttons come into play.

The zoom tool is very nicely executed. No clicking or scrolling via a scroll bar is required with the navigation once inside the zoom. Instead, the user just pans the mouse cursor up, down, left and right while in zoom mode to navigate around the product. Make a mental note of the “no clicking” functionality. It’s quick, it’s easy, and it’s not cumbersome.

From the user’s perspective, zoom is all about wanting to have a closer look at your design, but from Champion’s perspective, you’re actually giving a potential customer a closer look at your product, perhaps to see garment features or just to see the quality of the item. This is all happening without the user actually realizing it and is a nice psychological way to sell a product.

Sound

Throughout your interaction with this site, (presuming you had your speakers turned on!), you should have noticed some very subtle sounds as you add colors to the hoodie or use the toolbar. Simple audio connected to a user interface is something that you can use effectively to relay information back to the user that “something has been pressed” or “an action has taken place.” You don’t want to over use it and you don’t want to make it annoying either. But most important of all, don’t rely on the use of audio. Users don’t always have their speakers on through choice or because they don’t want to disturb someone else in the same room as them, so using sound is more of a “nice to have” rather than a “must have”. But when audio is used effectively, it can be another weapon in your arsenal.

Gallery

Having saved your design and submitted it, the place to find all submissions is in the gallery. The gallery first opens with an informative preloader (as discussed earlier) telling the user how many hoodies are loading and rendering.

The results are then categorized into Latest Designs, Contest, and My Hoodies. Anything you saved in the design phase appears in the My Hoodies section. My Hoodies is another one of those win-win situations. It’s a win for the user because you can go back and admire, collect and share your designs, and it’s a win for Champion because you’re facilitating even more exposure of your products to a potential customer.

In the Latest Designs section, there are a couple of things I like. Firstly, there is a total number of submissions. At the time of writing there are over 188,000 submissions. Even if each person creates two designs, that’s still over 90,000 users! That sounds like a successful promotional campaign. Secondly, just when you think you’ll never be able to find your friend’s design amongst all those submissions, there’s even a search engine to allow you to find exactly what you want. So the usability lesson to be learned here is, if you have lots and lots of information (perhaps in a database), you should always consider having a search engine. Look where the search is located too – in the most commonly associated position for search – towards the top right of the interface. That’s more good usability.

The power of rollovers is again demonstrated in the gallery where user’s info is revealed when you rollover each hoodie design. Sure, Champion could have listed the hoody designer’s name and location beneath each image without rolling over it, but why do that when you can show off your product in all its glory and then allow user access to extra info via a rollover?! Everything has been clearly thought through and has been done for a reason.

Social Networking & Downloads

It should be noted that by employing downloadable wallpapers of customized hoodies, Facebook integration, e-mail a friend functionality and downloadable desktop widgets, this covers all your bases where marketing is concerned. What a great position it is to be in when you can give your customers the ability to spread the word about your site and products by letting them integrate their customized content into a variety of vehicles and avenues! Isn’t it funny how, if a company sends you an e-mail, it’s spam, but if a friend sends you something to do with a product, it’s not spam?! So by creating a mechanism for your users and customers to spread the word about your products, you’re actually letting other people do the hard work for you, and it’s a cheap and efficient way to market your product(s).

Conclusion

There is much to admire and learn from Hoodie Remix. But learning and understanding about how to make Flash projects more usable does not stop here. In fact, it never ends. As you visit new Flash Web sites each day, think about how usability plays a role in the success or even demise of the site. Are there things on the site that can inspire you? Is there functionality that you could improve upon? Much like the way we evolve as humans, usability on the Web and usability within Flash projects is constantly evolving and we should never stop learning. Make things quick to use. Keep things simple. Make it usable.