Create a Usable Flash Site

Home > Build > Design > Articles > Page View

by Aaron West

Flash receives a great deal of criticism from usability and web standards advocates, and their arguments are usually valid. What the critics fail to understand is that the designers are usually responsible for the lack of usability, not the program itself. Flash has the capacity to create usable sites, but requires that designers follow a few guidelines. That is what I will be discussing here.

Always Use a Preloader

A common problem with many sites is that there is no preloading image or status bar. This causes the visitor to perceive the site has either broken or stalled. Sites often run slow at dial-up speeds, so it is always a good practice to let the visitor know when a movie is loading. This can be a static graphic that informs the user that the content will appear after it is loaded, or a moving status bar that shows how much has been loaded. Without this, there is a chance the visitor will leave the site, never to come back again.

If you want some tips on making preloaders, see this post from our forums:

Splash Screen

Let's face it, not everyone in the world has Flash. Sure, the majority of surfers these days do, but since Flash is a plugin by nature, there is a chance that the casual visitor won't be able to view the site because their browser isn't equipped. In my opinion, it is a good idea to always have an HTML splash screen which informs visitors that the site uses the Flash plugin. A good habit is to place a graphic and a text link that will direct users to the plugin download location.

Many people use javascript to detect the plugin and then, if found, redirect the visitor to the Flash site. I suggest against this, not only because it can cause problems with some earlier browsers, but it also eliminates the user choice. It is recommended that you always have an alternate HTML version of the site, which loads fast and gets to the point. For instance, people might be visiting in order to find some vital information, perhaps contact information for the company. Most people wouldn't want to wait for a lengthy preloader just to get a phone number. Don't take the choice away from the visitor, because they can always choose to close the browser window.

Multiple Pages

Has anyone ever told you about a cartoon, and when asked how to access it they tell you to go to the home page, click there, click here, and then wait for it to load? This will drive users crazy and discourages people from visiting the site. When one Flash movie loads and plays others, it won't have a unique URL. Instead it will have the top level URL that all visitors use to access the site. Try to publish content pages separately, on their own page. You can then publish each movie individually out of Flash, and link to the URL of the page from other movies.

You can generate traffic by placing content on individual pages. If a visitor wants to send the page to a friend, they can cut and paste the exact URL into email. You can submit more pages to search engines, which could result in more pages being listed. This might prolong the development process, but it is worthwhile when it comes to finding information. It is a bad idea NOT to do this.

Intuitive Navigation

There has been a recent trend to use ambiguous images as navigation. These might look 'cool' and might give the site some style, but they don't tell the visitor what your site has to offer. Most people visiting a site, whether it is a Flash site or other, will be there for the content and no other reason. If they can't find it, they will leave rather than spend the time to look for it. Images for navigation buttons are nice, and will enhance the look of the site, but it will help if you provide an explanation of where clicking will take the visitor. This should be done for the same reason that alt text or corresponding text links should be used for images on an HTML site.

Lengthy Intros

So you have a Flash intro that you worked on for days and it lasts over 5 minutes. In your opinion, it's the best piece of Flash animation out there. The intro might even be the prime attraction of the site. Great! Now let the visitor get out of it if they want. This can be done with a simple "Skip Intro" button, which can be created either in the Flash movie or on the published page as a text link. Chances are the visitor will look at the intro the first time they visit the site, and possibly even the second time. The visitor will most likely choose not to wait through an intro they've seen already the next time they visit the site. If you don't give them an alternative, they will likely close the browser window.

When you place a 'skip' link with your intro, make sure you give them access to it before the movie loads or while it is loading. Modem users won't want to wait 20 minutes for the movie to load each time they visit. Put the 'Skip' link either on the preloader or on the published page. If you do this, some first time visitors will miss your intro, but at least you a get a second chance. They will stay on the site and see what it has to offer. If they like the rest of the site, chances are they'll watch the intro when they visit again.

Communicate With the Visitor

The visitor should always know what's and happening or where the site is taking them. This is probably the leading usability problem with Flash sites. The designer, who has an above average browsing literacy, assumes that the visitor will too. Not true. Let the visitor know what's going on at all times. Make sure they're always aware of where they are in the site, and how to navigate elsewhere. Always let them know when they're supposed to wait, supposed to click, or supposed to watch. If they have to guess, chances are they'll click somewhere other than the designer intended, which could cause the movie to fall apart.

After the site is created, find someone who isn't web savvy to test it. Watch as they are navigating and pay attention to where they click, where they hesitate, or anything else that confuses them. This will help in making your site more usable for future visitors. If they can get around the site without a problem, you've done an excellent job.