Flash sites are either sites with Flash elements or 100% Flash sites. The latter is a very decent option for small sites, like personal sites, or sites that are meant purely for entertainment by animation and sound. But you may want to develop a more elaborate site with features like a forum, chat room, response forms, user registration, content management or a search option. While doing this strictly in Flash is certainly a great technical challenge, it’s not a very wise decision. The fact is that Flash is just a tool that offers a means for designers to turn their ideas into reality. It is not a platform on which to build a Website.

The best sites out there combine Flash with other techniques and formats like DHTML, streaming video, MP3, Java, the common image formats like JPG and GIF, as well as any other medium that will offer the needed content in the most appropriate way to the visitor. The magic rule is to consider every possible medium for each element you want to develop. If you understand the strengths and weaknesses of Flash, you can apply it where it is suitable, or decide when it may not be the best solution.

The single most common error should be mentioned first. When a text button is created, it is essential that the hit area frame of the button be filled with a solid shape in roughly the same size as the button text field. The effect of an empty hit area frame is a very jerky reaction of the mouse pointer. Often, such buttons require surgical precision to simply use the button. The best thing to do when creating any button is to choose a filled shape that covers the maximum dimensions of your button and put it in the hit area frame of the button.

On many occasions designers choose to use a Flash movie to display textual content in their Website or presentation. Whenever large pieces of static text are involved, you should question whether Flash is the best medium to present this information to your audience. The downside of embedding large text areas in your Flash movies mostly an issue of legibility, but also concerns further processing of the information by the viewer. Often, users aren’t prepared to read through pages of small, anti-aliased text, and will usually choose to skip this information - which may be vital. One technique to solve this problem in Flash 5 is offered in the form of Dynamic Text fields.

Dynamic Text fields are presented as aliased, selectable text, which not only increases the legibility of small fonts, it also provides a more useful way to present the text. That’s because this technique enables users to select an area of text and copy it to the clipboard. This is more user friendly, since it provides better access to the information. Many visitors will want a way to extract specific pieces of information. This technique allows them to store this information wherever they want, exactly like copying text from HTML pages.

For large amounts of text, Flash is usually not the best medium, and other media like HTML, plain text, Adobe Acrobat, or word processor documents should be considered. Think twice before you start pasting long passages of text into your Flash movie.

To hang a painting you need a hammer and a nail (and a wall), to water the plants you need a hose. How about this one: to find a phone number, you need to start reading each page in the phone book from page 1, until you reach the page where the wanted name is listed. No? To view your favorite TV show, you zap to the right channel, watch 30 seconds of a creepily familiar introduction video clip, and then the show starts. If you change the channel, but then come back again, you get to watch the introduction all over again… Does that sound right? When you take the elevator, you just press any of the new symbols that are displayed on a huge array of buttons, and see what each one does. You keep pressing them, one by one, until you reach the right floor. Oh, and the buttons look like chewing gum stuck to the wall. In fact, some of the buttons aren’t even buttons: that is gooey chewing gum that you just stuck your finger in! Getting annoyed yet? Well, you’re not alone.

Usability is all about offering people something they are looking for. That means offering it quickly, correctly, and with maximum accessibility. On a Website, accessibility depends on factors like loading times, user requirements and navigation. Navigation breaks down into buttons, structure, and guidance. Flash offers wonderful tools to create menus, navigation tricks, and really exotic buttons. Everybody that is starting to work with Flash will be thinking about things like an interactive phone for a menu, or a tree, a remote control, body parts, cubes, balls, subway maps, giant fruit baskets, planetary models - but remember, no matter how cute or cool or ingenious your interface might seem to you, it doesn’t work if it doesn’t work.

Not Many People Think, "Gray, Square Buttons…"

Yet, the gray, square buttons are what people know and understand, just like blue, underlined text. Not very exciting, so we’ll need to work out how to merge our galaxy model (or fruit basket) with the users’ idea of a menu, and motivate them to navigate through the Website with it. A solution might be to reconsider your ideas and shape them into a more recognizable menu scheme, making your menu items look a bit more like classic buttons and placing them on the top, side, or bottom of the screen. A less drastic solution might be to have people test your interface. This way, you could see how (or if) they figure out that those thingies are functional buttons, and then make design improvements based on that information.

A menu design can often be improved by adding pointers, like small pop-ups with your buttons, or a help function that delivers a quick explanation. You should expect that Website visitors aren’t very patient, so make sure that a minimal effort is required to use your brilliant interface.

Finally, you won’t really be testing your navigation with people if you help them, as this will make this a useless test - unless, of course, you also have an ingenious plan to be there to help everyone that visits your site. If you want to design usable Websites, you must be hard on yourself - because your visitors will certainly be unforgiving of your self-indulgent design lapses.

Animated Flash introductions: if you really want one, start it with a SKIP button. In general, don’t make intros. They can be interesting for some entertainment sites, or designer agencies, but it’s not right to assume that:

Intelligent, clear, user-friendly employment of Flash on your Website is a much better reference than an indulgent intro that takes too long to load. Furthermore, if that visitor decides to return to your site, it’s not very useful to force them through that intro again.

The only fully justified intro is a light one that entertains the visitor while the main Web site loads. But visitors with fast connections should still be able to skip it - all of it. I could take the next ten pages to tell you the long long story about how the Flash Intro phenomenon started, but it’s not very useful, either. But if I were to tell that story, at least you’d have the mechanism - by turning the page - to move on to the real content. The best advice on this subject is to consider what, if any, added value an intro animation will give to your site.

Finally, here’s one option that’s not really used often enough. If you really feel driven to create animations that delight and amaze, why not create a separate area of your site for Flash experiments? In such an area, there is no reason to hold back because in that context, your animation IS the content, rather than an impediment to content.

It doesn’t seem likely that Flash will ever be well enough integrated into the browsers to eliminate this problem: using the browser navigation buttons is disastrous! When someone’s found their way to the information they needed from your Flash site, and then decides to hit the Back button to return to the previous segment, they’ll usually end up somewhere unexpected.

A similar annoying result occurs when a visitor attempts to bookmark a particular moment in your Flash movie - the bookmark will only return the visitor back to the start of your Flash movie.

Although a self-made Back button can be included in your Flash movie, visitors aren’t likely to get used to such features very quickly. Your regular visitors may get the hang of it, seeing two buttons with the same label (that is, the browser’s Back button, plus your own Back button) may confuse first timers.

To facilitate bookmarking of specific parts of the Flash content drastic measures would be required: split up your movie into several segments, and distribute them over web pages that can be individually bookmarked. Usually this effort is worth the extra work, since it has additional advantages. Of course, it saves visitors the drag of navigating back to the point of interest every time they visit the site. But it also helps improve the speed of your Website. Plus, if you update just one of the movies, you’ll be working on a less complex .FLA. And, finally, when the update is completed, caching can still be used to retrieve the other pages. Only the changed page will have to be reloaded from the server.

The method indicated above, which facilitates the bookmarking of your Flash pages, can also solve the analysis problem of fully Flashed sites. Since a single movie is grabbed from the web server, it’s virtually impossible to tell what people are doing inside your site. What segments attract most visitors, what are the common exit points, and which pages are never viewed? Website statistics are a valuable developer tool for Website improvements and visitor analysis. Complex schemes can solve this problem, involving database logging and/or posting to forms from within your Flash movies, which I will not discuss. The easiest, if somewhat crude, way to generate proper statistics is by splitting up your movie into segments that reflect the structure of your site. This enables you to use classic tools to view the statistics of your site, since every segment sits in it’s own HTML page. Furthermore, this solution, when coupled with Metatags, can also ensure that your Flash site is properly represented among the search engines.

With every release, Flash delivers better support for sounds and music. With Flash 5, the new support for MP3 import makes it even easier to balance quality sound with streaming and small file sizes. Sounds can be used to add effects to navigation elements, create cool background music loops, or to offer sound samples to visitors. But, because the Internet is still viewed by a lot of people without audio available on their systems, the best way to incorporate the sounds with your web creations is to make it passive. Even if your guests have sound on their system, it may not even be turned on. If the experience of your movie depends on the sound effects and music that come with it, tell everybody that they need to turn on their speakers. If you use stuff like a background loop, it’s thoughtful to make the sound optional before your visitor starts loading the (often large) music files into your Flash. That way those with sound-challenged systems won’t have to wait for it to download even though they have no way to enjoy it.

Always consider if Flash is the best way to offer your music items. In many cases, for example if you want to present a streaming video clip or offer downloads, other techniques may have better support.

Another thing that deserves mention is the volume of your sound clips. Test the audio elements in a movie with normal system volume, to ensure that it’s not too low, but on the other hand to ensure that it doesn’t cause hearing discomfort.

It’s tempting to use sound bytes as a way to improve navigation. For example, a button that tells you all about it’s functionality would be nice to add extra clarity to a menu. But, although this technique might be very useful (and impressive), don’t rely on it too much. As mentioned before, much of the Web population relies purely on the visual part of Websites.

Flash offers a great way to embed specific content into your Flash movie that can be sent directly to a users printer. A common example for this technique is a small Flash banner that sends a full-page advertisement to the printer when the user hits the print button in the movie. It’s a nice way to avoid cluttering web pages with sundry advertisement details, but it’s also a way to offer any single- or multi-page document (poster size images, spreadsheets, background details) with the click of a small button.

Unfortunately, Flash Printing is a functionality that’s quite new on the web, and it’s a functionality that can’t be properly explained with one or two words. So, if you choose to use this feature, make sure to give a clear indication of its function, with button text like: "Send the details of this product to my printer" or "Print a full-page version of this image."

This topic is easily dealt with. It comes down to this: even though loading bars aren’t a pleasant sight to look at (a funny or informational preloader is much better), some movies give no indication what’s happening during download. "Are we there yet?" For modem users, this can be especially frustrating, because there is no way of knowing whether the movie has ended, or the connection was lost, or the last bit is being loaded in the background. (A blank or frozen screen is not very entertaining either.) Progress bars are not the most aesthetic solution, if they are designed properly, they’ll at least provide clarity about loading time. Many good tutorials can be found online to help you create a reliable progress indicator.

Obviously, the best loading scheme is one that goes unnoticed. But for heftier movies (or really slow connections) a loading scheme and a progress indicator are needed. A great solution is a small game or animation that also indicates progress (percentage). In case you’re wondering, yes, Pong has been done, just like Memory, Simon Says and Tic-Tac-Toe. But you just can’t beat the classics!

Flash offers reasonable support to embed forms. Many elements, like dropdown lists and the use of the ‘Tab’ button, don’t respond as they do in classic HTML forms. To get around these problematic defaults, some clever ActionScript is needed.

But another problem worth mentioning is that forms in Flash aren’t always easily recognized as forms. This is attributable to the two issues: the design of the form is rarely that of a classic web form, and users are not (yet) used to Flash forms. So some help is required. Try putting a blinking cursor in the first entry field, or better yet, something like a big arrow that says Please Use This Form, will reduce the chance people will leave the page mystified.

There aren’t many examples on the Web where Flash forms really use the specific advantages of the Flash medium. Good examples are chat room applications with interactive characters and interactive games that require keyboard input. One clear advantage of Flash is its ability to make form posts without (re)loading a page. This is a feature that can be exploited in clever ways, but consider the visitors’ expectations (based on classic HTML forms): give clear feedback about post results after submission, or they’ll wait forever for a form to submit.

This tutorial has addressed only a few of the many topics that are relevant to Flash developers who care about the user friendliness of their creations. Although some may be very obvious, this is no guarantee that they aren’t easily overlooked. Flash has become so versatile that it’s hard to tell people how they should use it, certainly because it is used for so many different goals. The focus of this article has been on the use of Flash as a tool for creating rather straightforward Websites. These are sites that want to inform, entertain and maybe even educate their visitors.

The most important thing to realize about Flash is that it really is just a tool. If you need to create something, first think about what you want to make, and think about how you’re going to realize it afterwards. It's bad practice to assume that Flash is such a cool program that it will be a good way to create anything you might conjure up. If the project has elements that would benefit from the features Flash offers, use it the best way possible - again, that doesn’t mean using all the imaginable tween effects you can think of, but it does mean thinking about the user experience you want to create.

That user experience is dependent on overall impression, entertainment value, ease of navigation, loading times and the sense of control by the visitor. These criteria pose quite a challenge to the best designers and developers. At times, it may be boring or frustrating to address these criteria, but in the long run it will make your Flash masterpieces more durable and appreciated.