Making Flash Usable: Problems and Solutions

Prepared by

Samuel J. Boone-Lutz
Information Architect

BiT Group, Inc.

101 Arch Street

Boston, MA 02110
617-946-0550

w w w . b i t g r o u p . c o m
 TABLE of CONTENTS

1. INTRODUCTION .........................................................................................................2

2. WHY DOES USABILITY MATTER? .........................................................................3

3. PLAN FOR USABILITY ..............................................................................................4

Understand your site goals ..............................................................................................4
Understand your User .....................................................................................................4
Choose the right tool for the job ......................................................................................5
Plan Ahead and Document It ...........................................................................................6
4. PROVIDE FOR ACCESSIBILITY..............................................................................7
Provide Alternative Content ............................................................................................7
Give the User Options .....................................................................................................8
Don't Forget Basic Accessibility Guidelines ....................................................................9
5. TAKE ADVANTAGE OF CONVENTIONS .............................................................10
Emulate traditional forms of Navigation........................................................................10
Avoid Hidden Navigation...............................................................................................10
6. PRACTICE MODERATION .....................................................................................12
Avoid Intro Movies ........................................................................................................12
Avoid Excessive Animation ............................................................................................14
Use Short Transitions ....................................................................................................14
7. PROVIDE USER FEEDBACK...................................................................................16
Utilize non-explicit instruction.......................................................................................16
Keep the User Informed.................................................................................................16
8. THE PERILS OF SOUND ..........................................................................................19
How does sound help this site? ......................................................................................19
Do no harm ...................................................................................................................19
9. DEALING WITH BROWSER NAVIGATION .........................................................21
Don't remove familiar elements .....................................................................................21
Coping with the Back Button .........................................................................................21
Replacing Browser Navigation ......................................................................................22
Bookmarking Strategies.................................................................................................23
10. CONCLUSIONS ..........................................................................................................25

Making Flash Usable Page 1 © BiT Group, Inc.

1. INTRODUCTION

Macromedia Flash has, in recent years, offered designers and developers the ability to
produce web content that is more exciting and interactive than traditional HTML. Flash offers
the capability to deliver a rich media experience to the user, adding dimension to the standard,
static web page.

Unfortunately, Flash has recently been pilloried by usability experts for what are seen as
insurmountable problems. Some of this criticism is warranted, but it should not discourage the
development of new Flash content. Most Flash usability problems are caused by the
developers themselves, and are not a function of the medium itself. Flash can be made usable,
but it is up to Flash developers to make sure that it is.

This is not to imply that all usability problems commonly found in Flash content can be
overcome. There are some issues which are simply the price of using the technology. Flash is
not HTML, and there are some things it just cannot do. However, the potential benefits of
Flash content greatly outweigh the small number of usability problems that cannot be
resolved.

Making Flash Usable Page 2 © BiT Group, Inc.

2. WHY DOES USABILITY MATTER?
Whether you design a site in Flash or traditional HTML, the goals of the site should be the
same. Using Flash is not a license to abandon usability best practices that have become well
accepted with HTML. Flash offers the potential to deliver a more interesting, interactive user
experience. However, if the end-user is unable to use the site to do what they want, the end
result is the same - people won't stick around.

One of Flash's great benefits is its ability to enhance branding, but all too often the experience
is tainted by usability problems. The usability of a site, be it HTML or Flash, can influence
the branding of the site. If the goal is to provide a user experience that says, "this company is
helpful, they understand my needs," a frustrating navigation system will not convey that
message.

Simply put, a more usable site creates a better experience for the user. A better experience
translates into return visits, better impressions, and more effective branding.

Making Flash Usable Page 3 © BiT Group, Inc.

3. PLAN FOR USABILITY

Before you begin Flash development, it is critical that you plan for usability ahead of time.
Usability becomes increasingly more difficult to retrofit once the development process begins.

Understand your site goals

Understanding the end goal(s) of a site is essential to making decisions about usability
techniques. For many sites, the goal is to provide visitors with information. For others, it is
simply to deliver a unique experience that conveys a certain feel. Most are a combination of
the two. The level to which one applies traditional usability practices is directly related to the
proportion of information delivery to branding experience.

For example, there is nothing wrong with using an interesting and unique navigation system
for a site. People may be impressed by the innovation of the design, and associate this with
the company. However, if the primary goal of the site is to provide company information or
access to resources, a strange navigation system may not be the right fit. What may seem
innovative on the first visit may be profoundly annoying by the third visit. Likewise, a site
geared primarily towards communicating a certain feel about a company or product should
not be limited by traditional usability conventions.

This may seem to be common sense, but too often, Flash developers forge ahead with an idea
without considering its appropriateness. Innovation is always welcome, but should be
tempered by the need to produce content that helps achieve the site's goals.

Understand your User

The most common site goal is to give users the content they seek. To serve this goal, it is
imperative that there be a thorough understanding of the typical users of a site. Different user
groups have different tendencies and needs, and these must be accounted for. While any
internet (as opposed to extranet or intranet) site should be tailored for a fairly general
audience, catering to the needs of groups who most frequently use the site will improve the
experience for those users.

With regards to Flash, the most important things to know about users are their reasons for
coming to the site, and what technical specifications they bring with them. User needs will
affect the ease and simplicity of navigation, streaming vs. non-streaming content delivery,
and will determine the proportions of Flash content to HTML content.

Understanding the needs of users will provide essential background information to help make
decisions about using Flash as a solution.

Making Flash Usable Page 4 © BiT Group, Inc.

Choose the right tool for the job

Flash is a tool. HTML is a tool. They both have different strengths and weaknesses. HTML,
for example, is a much better format for delivering large volumes of textual information.
Flash is much better for animation and rich media delivery. Understanding the strengths and
weakness of each is critical to delivering the right solution for the site needs.

Should you use Flash at all?

Once you have an idea about what the goals of the site are, you should seriously consider how
to meet those goals, and whether Flash is even a good option. Many examples of poor Flash
usability come as a result of Flash being used where it really shouldn't. Flash may be the
perfect fit for a site. It might also be completely wrong, and the end result will be poor
usability.

Proportional Usage

The potential of Flash as an integrated part of an HTML site is something that is often
overlooked. Using Flash and HTML together in ways that emphasize their respective
strengths is often extremely effective.1 This approach can provide an excellent compromise to
those sites that seek to convey a particular branding experience, but are also extremely content
heavy.
Version Selection

Beyond choosing whether or not to use Flash, or in what proportion, the developer must also
choose which version of Flash to employ. This, again, is a question of understanding the
capabilities and drawbacks of your tools. At present, one issue facing developers is whether or
not to author Flash content in version 5 or version 4. The first things to consider are current
penetration statistics2:

Flash 4 Flash 5
US 89.5% 54.6%
Canada 92.6% 59.0%
Europe 90.9% 64.6%
Asia 88.3% 62.6%
South America 92.5% 66.4%

At present, Flash 4 is the format of choice for those seeking to have their content available to
the greatest number of people. However, this should not immediately disqualify Flash 5
development from consideration.3
1
A fine example of this concept is Macromedia's own site, http://www.macromedia.com/ which uses HTML for
content delivery, but Flash to display interactive navigation elements.
2
December 2000 study, by NPD Research
3
Consider the following:

Making Flash Usable Page 5 © BiT Group, Inc.

While the wide variety of Flash penetration statistics available from Macromedia and other
parties can be misleading, it is still critical that developers familiarize themselves with the
potential percentage of users who will be unable to view their content.

Plan Ahead and Document It

These basic suggestions about initial planning mirror some fairly common practices of
traditional information architecture.4 With any large project, it is foolhardy to jump in without
a plan. Flash, in particular, can be a difficult environment in which to make significant
revisions once development is underway, so it is extremely important that many decisions be
made prior to development.

An important part of this planning process is producing documentation to define

specifications and direction for the development process. While it is beyond the scope of this
paper to discuss methods for visual description of Flash movies, Flash developers should at
least develop documentation noting their solutions to potential usability problems, so that
these may be incorporated into a larger development plan.

• 54.6% penetration shows a reasonably high rate of adoption, considering the player was only released in
August 2000.
• The player is now bundled with all primary browsers, so any new releases or updates will result in player
adoption.
• Subsequent releases of Flash authoring applications will author Flash content that is much more similar to
Flash 5 than Flash 4. Flash 4 content will quickly become obsolete.
• The Flash 5 plug-in is fairly small and can be downloaded in roughly a minute via 56k modem.

In addition, developers should consider the development time involved in development of a large Flash project,
and what the likely penetration statistics will be at that time.

Flash 5 also offers considerable development advantages over Flash 4, and these savings in time and resources
may be worth the potential lower penetration rates.
4
If Information Architects are available as a resource, they should be consulted in the initial planning stages.
While they may not be familiar with Flash specifically, their expertise in traditional HTML usability and
producing documentation about site purpose and audience can certainly be applied to the medium.

Making Flash Usable Page 6 © BiT Group, Inc.

4. PROVIDE FOR ACCESSIBILITY

One of the biggest criticisms of Flash is that it provides poor alternatives for those with
disabilities. These people may use non-standard applications to view web content, and these
applications are usually designed to deal with HTML content. Criticism of Flash in this regard
is warranted, since Flash content is self-contained within the movie and can't presently be
accessed by anything other than a standard player. However, as with most Flash usability
problems, there are things that a conscientious developer can do to overcome them.

Provide Alternative Content

Regardless of which version of Flash is used, or even the proportion of Flash to HTML, there
should always be some sort of alternative content provided for those who may not be able to
view Flash content.5 This should be a fairly standard practice for most Flash developers, but it
cannot be stressed enough.

For sites which are entirely Flash-based, an HTML version of the site must be part of the
development plan.6 This will add work, but better that more time be spent by the developer
than the user. Flash 5's ability to read XML7 formatted content can be employed to make this
task easier,8 but it will still take additional time to develop the alternative content.

HTML content should be designed for maximum accessibility. Carefully review the W3C
recommendations on accessibility and make sure that the HTML version takes advantage of
every possible feature. The theory is that the HTML version caters to anyone unable to view
the Flash content, and that encompasses a wide variety of special circumstances.

You may wish to include some particular HTML files that act as a synopsis for sections of the
flash movie, beyond merely displaying the same content. For example, if your movie includes
pertinent spoken text, that information should be available to read. A simple description of
the movie itself may prove useful if for no other reason than to entice people to download the
plug-in and view it.

An additional benefit of creating the HTML version of the site is that it addresses Flash's
search engine deficiencies. At present, search engines cannot spider the content within a Flash
movie . By providing a traditional HTML version, your site will be reachable via search

6
Alternative content for sites that use flash to enhance HTML pages will likely not need a non-Flash version.
For these sites, it should be sufficient to use JavaScript detection to display the appropriate content. For example,
if your site uses Flash for navigation buttons, a detection script would provide an HTML/GIF/JPEG version for
non-Flash users.
7
Incidentally, choosing to employ XML with Flash 5 might alter your penetration statistics. The reason is that
the initial release of the Flash 5 player does not handle some XML-related methods. Use of these methods is
often unnecessary, but it must be considered in the development process.
8
The idea is that your content lives in one XML file (per page, most likely), and you build two stylesheets to
display that content: A flash stylesheet (your movie), and an XSL transform to deliver HTML content.

Making Flash Usable Page 7 © BiT Group, Inc.

engines. You may want to indicate to users arriving via search engine that there is Flash
content that they may prefer to view.

Give the User Options

Often, the diligent Flash developer provides an HTML version of their Flash movie and
employs a redirect script to shunt users to one version or the other. Those lacking the Flash
plug-in will receive the HTML version. This may seem like a good solution, but it neglects
other factors that can make Flash content difficult to view.

Flash movies can download slowly over a low bandwidth connection.9 Users with disabilities
may have the Flash plug-in, since it comes bundled with all major browsers, and be unable to
access the more disability-friendly HTML version. For these reasons, it is much more helpful
to present the user with options on how the content is delivered to them.10
Typical Construction
To provide these options,
Invisible redirect page HTML
an initial splash screen
HTML
should be used. This screen Barrier between
different versions

should inform the user HTML

of the same content.
Users are only able
to see one of the two
which versions are index.html
Flash
versions.

available and perhaps list

A javascript plugin detection sends
circumstances that might users down one path or the other.

make one choice preferable Preferred Construction

to another.11 For example,
Visible splash screen page HTML
note that those without
HTML
Flash, on a low-bandwidth This barrier is now
semi-permeable,
connection, or needing to since users may
choose which path
HTML
use special accessibility index.html
to follow.
Flash
applications should use the Users are given the choice between
HTML and Flash versions of the site
HTML version. content. Javascript plugin detection
makes them aware of which choices
are available.

An added bonus for users

might be the choice between having the Flash movie delivered full-screen, normal-size, or in
a pop-up window. This may entail additional development, but the end user will appreciate it.

The goal is to help the user make an informed choice based on their particular circumstances
so that the content they receive will be as useful to them as possible.

9
Developers should always strive to make Flash movies as slim as possible, but all reasonably efforts may still
produce a significantly large file.
10
This is not the case for sites with embedded Flash content in HTML pages. These sites may not necessitate an
entirely different version to display content. Instead the detection if performed on the fly and embedded content
pieces are delivered based on browser capabilities. However, it is not a bad idea to consider allowing users to
toggle between the embedded Flash or the alternative version on a site-wide basis.
11
An excellent re-application of the traditional redirect script might be to check whether or not the Flash plug-in
is available, and display either the option of viewing the Flash movie or obtaining the Flash plug-in.

Making Flash Usable Page 8 © BiT Group, Inc.

Don't Forget Basic Accessibility Guidelines

Flash is not an excuse for abandoning traditional accessibility best practices. From a visual
design standpoint, it is important to remember factors such as color contrast and visibility and
how these things affect some users' ability to view your content. Those with bad eyesight and
the color-blind may find your site unusable depending on creative choices you make.

Font Usage

One particular issue regarding readability in Flash is that of fonts. Flash anti-aliases fonts
when it displays them, which at small sizes can make words blurry and difficult to read. One
solution is to not use tiny fonts, or at least not for anything of critical importance. Another
solution is to use pixel-fonts, designed to be legible at small sizes. These fonts typically have
no curves in them and are designed to be used at a specific size. When displayed at this size,
they give the appearance of being aliased, even though they are not.

Regardless of which fonts you choose to use, they should be tested for legibility. Print a
considerably smaller sample of the font to see if it is legible. The smaller size will compensate
for the much higher resolution of printed text. Also, consider what it might look like to
someone with less than perfect eyesight. That may involve unfocusing your eyes a bit, or
asking someone with poor eyesight to review it for you.

Make sure you are using sans-serif fonts (such as Arial, Verdana, or Helvetica) for most
content, especially for anything small. Studies have indicated that these styles are more
legible on the screen.

Making Flash Usable Page 9 © BiT Group, Inc.

5. TAKE ADVANTAGE OF CONVENTIONS

There a number of standard interface conventions for the web. Taking advantage of these can
greatly improve the usability of your Flash site. Building things that people are familiar with
will decrease the amount of time it takes for them to learn your interface, and to find what
they are looking for.12 There is nothing wrong with bucking convention and building
something unique, but it is important to consider the effect this will have on the users of a site.

Emulate traditional forms of Navigation

If your primary concern is that people be able to access information quickly and easily, you
should consider employing a traditional navigation scheme. Listing primary navigation items
in a list along the side or across the top of the screen, for example, is a common convention.
Extending this convention to show secondary and tertiary navigation elements as indented
sections of this list another convention. It may seem boring, but if users already understand
the relationship and meaning of items displayed in a certain way, they spend less time
thinking about it and more time finding what they want.

Besides, people (in most cases) don't visit a site to look Conventional Hierarchy Relationship
at your navigation. They come for content. Navigation's Primary Navigation Element
primary role is to allow exploration of the site and to Secondary Navigation Element

help users find what they're looking for. Making it Secondary Navigation Element

difficult to use quite obviously detracts from this Tertiary Navigation Element

Secondary Navigation Element

purpose. Primary Navigation Element

Primary Navigation Element

The obvious criticism of this approach is that your end Primary Navigation Element

product is a Flash movie that looks a lot like an HTML Primary Navigation Element

This is another example of a visual convention which many

page. While this may be true, keep in mind that HTML people will be used to because of its frequent appearance on
pages are what people are used to. A good goal would the web.

be something that functions like an enhanced HTML
page – using Flash to make the user experience more
interactive and dynamic, but not producing something
wholly unfamiliar to the average user.
In this case, different levels of depth are communicated via
indentation to indicate nesting of sections. Another
convention, that of highlighting the current section, allows
the user to position themselves relatively within the site.

Avoid Hidden Navigation

Buttons without any self-evident function are a common usability problem throughout the
internet. What a button does should be evident by looking at it. If this means the button needs
to be labeled, then label it. Requiring the user to investigate the buttons just to see where they
go is a trick that will quickly wear out its welcome.

12
Examples of these conventions include the list of primary navigation on the left or top of the page, as well as
the use of the logo as an unstated 'home' button.

Making Flash Usable Page 10 © BiT Group, Inc.

There is nothing wrong with developing a Self-Evident
navigation scheme that requires user Function Hidden Function
interaction, but this should be in addition to About Us
navigation items that are well-labeled and easy Locations
to find. Users don't want to poke around to find
Jobs vs.
the right button, they simply want to get where
they're going as fast as possible.13 A site with Search

an interface that hides the site's content will not Contact

received many repeat visitors. This illustrates the benefits of self-evident navigation elements over
"mystery meat" navigation. The buttons on the right require user exploration
to reveal their function.

An example: you want to search for something. The navigation on the right
would most likely involve exploration of at least three 'wrong' buttons before
you found the one for search. Contrast this with the amount of effort and
thought required to use the navigation on the left.

13
In general, when developing a navigation scheme it is a good idea to consider how useful the navigation would
be to someone who comes to the site frequently.

Making Flash Usable Page 11 © BiT Group, Inc.

6. PRACTICE MODERATION

Flash is a powerful tool, and there are lots of things that can be done with it. Unfortunately, it
takes skill to use this power effectively, and it is quite easy to produce something that is
profoundly unusable with little effort on the part of the developer. Most of the content fueling
the current criticism of Flash suffers from overuse, if not outright abuse of Flash.

The Flash developer must constantly question the purpose of things (particularly behaviors) in
a Flash movie: "Is this element necessary? Why are we doing this?" Flash for Flash's sake
more often than not results in a movie that looks cool, but is difficult to use. Once the initial
'wow-factor' wears off, you're often left with something that simply doesn't work very well.
So, be mindful of overusing Flash, particularly in some key problem areas:

Avoid Intro Movies

When it comes to generating criticism about Flash usability, there is no greater offender than
the 'intro movie'. Typically a theatrical-style trailer, the stereotypical intro movie usually
attempts to set a specific mood, using a combination of animation and sound. When Flash first
came onto the scene, 'intro movies' were the primary type of Flash content being authored. As
a result, many people have come to associate Flash primarily with intro movies. As most intro
movies are detrimental to site usability, these movies have contributed greatly to the
perception that Flash causes usability problems.

It should be noted that the prototypical 'intro movie' is not necessarily the same as an opening
transition sequence. These sequences, provided that they follow the recommendations for all
transition effects, do not suffer from the same problems as intro movies, and are much
preferred.

What's Wrong with Intro Movies?

The typical intro movie is essentially a lengthy commercial for the site which users are forced
to sit through prior to accessing the site. The result is a long pause between the arriving at
your site and when they actually access content. This is not exactly the type of practice that
encourages new users, let alone people who find they would like to visit the site frequently.

Making Flash Usable Page 12 © BiT Group, Inc.

 Time Costs Associated with Intro Movie Use
User has first opportunity to
locate content themselves.
(Time elapsed: 110 seconds)

With loading...(20s) playing intro movie... (60s) loading... (30s) movie...

0 sec. 20 sec. 40 sec. 60 sec. 80 sec. 100 sec. 120 sec.

User has first opportunity to

locate content themselves.
(Time elapsed: 30 seconds)

Without loading... (30s) main movie...

0 sec. 20 sec. 40 sec. 60 sec. 80 sec. 100 sec. 120 sec.

The point of this diagram is to illustrate the impact that an intro movie can have on the users ability to locate the content they are looking for. In
the first example, a one minute intro movie (perhaps longer than the common intro movie being produced currently, but not outside the realm of
possibilities) precedes the actual main movie. In the second, the intro movie has been removed. Download times are estimated for a reaonably
slow bandwidth connection (the point of the diagram is not to accurately gauge dowload times, but rather to show the additional time required of
the user on a site with an intro movie).

In this fictional example, the bottom example gets users to the content they want 80 seconds faster than the other example. Consider the arrow
an indicator of the point at which the user starts receiving content that they want. Consider also that until this point arrives, users become
progressively less interested in waiting for that point to arrive (ie; the longer they wait, the more likely they are to leave).

What can be done?

The easiest way to deal with this problem is to abandon the intro movie altogether. The mood
set by the intro should be something that can be communicated, albeit perhaps more subtly, in
the main movie itself. Unfortunately, there may be occasions when clients insist on an intro
movie.

If an intro movie has to be used, it must include a 'skip intro' button to allow users to bypass
the movie. This button should be present throughout the intro, including any preloading
sequence, since users who don't wish to view the intro movie certainly won't want to
download it. Additionally, it's an excellent idea to use cookies to allow repeat users to bypass
the intro movie.
Preferred Intro Movie Architecture
An excellent compromise is to incorporate an Javascript looks for invisble cookie. Skip Intro
button pressed.
intro movie in the main movie itself, as the If found, goes directly to main movie.
If not, a cookie is set, and the intro
movie is loaded.
content area of the initial screen. This is not
as easy, since the two must integrate visually, HTML
but it gives users the additional option of Entry Page Intro Movie Main Movie

going directly to content, since the navigation This diagram shows the preferred architecture for sites which must use an intro movie. A cookie is used

elements will be present. New users who are to send repeat viewers directly to the main movie, and first-time users have the option of skipping the
intro if they want to. Note: the ability for repeat users to view the intro movie at their discretion, or disable
the cookie would need to be included in the main movie.
interested in watching the movie can stick
around and watch it play, and everyone else can just get to the content without having to wait
for an additional movie to load.

Making Flash Usable Page 13 © BiT Group, Inc.

Avoid Excessive Animation

Well known usability expert and Flash critic Dr. Jakob Nielsen wrote in a 1995 article:

Moving images have an overpowering effect on the human peripheral vision. This is a survival instinct
from the time when it was of supreme importance to be aware of any saber-toothed tigers before they
could sneak up on you. These days, tiger-avoidance is less of an issue, but anything that moves in your
peripheral vision still dominates your awareness: it is very hard to, say, concentrate on reading text in
14
the middle of the a page if there is a spinning logo up in the corner.

He makes an excellent point – motion is distracting.

Flash is an excellent animation tool, and can produce some amazing effects. However,
(returning again to the vice of Flash for its own sake) excessive amounts of animation simply
make it hard to get to information. Making things fly around the stage or tween madly may be
interesting to watch, but ultimately that's not why people are coming to the site.15 Special
effects are cool, but they shouldn't detract from the content.

If the purpose of the animations is to play in the background and provide an interesting look
and feel, make sure that they do not overwhelm the content. Likewise, interactive playthings
and other garnishes should remain secondary in prominence to the actual content of the site.

Done correctly, animation can be quite effective in communicating a certain message or

creating visual interest. Done incorrectly, it can distract and confuse your user, which does
little for the overall usability of the site.

Use Short Transitions

Transitions are one of the most effective visual effects Flash can produce. Transitions
between different sections help to tie those sections together visually for the user much more
than loading a new page or movie. However, as with any animation effects in Flash, they
should be approached with care.

Transition effects must be quick. They need to be fast enough that they don't become
obnoxious (particularly for a site with many sections, where the transition effect will be seen
repeatedly), but slow enough that they achieve their desired effect. Many Flash sites employ
complex transition effects that take many seconds, sliding/moving/unfolding/revealing by
stages. These may be visually impressive, but they put a sizeable wait between the user's

14
Jakob Nielsen, "Guidelines for Multimedia on the Web", December 1995,
http://www.useit.com/alertbox/9512.html.
15
Unless the site is of the experimental variety and the animation is the content.

Making Flash Usable Page 14 © BiT Group, Inc.

request and the actual display of content.16 The annoyance factor of a lengthy transition is
likely to compound over time.

16
An additional benefit is the filesize savings when lengthy transition effects are removed. This is less a factor
when transition effects are Actionscript driven, but manually animated transition effects can take up sizeable
chunks of filesize.

Making Flash Usable Page 15 © BiT Group, Inc.

7. PROVIDE USER FEEDBACK

One of Flash's greatest potential benefits as a medium for content delivery is its ability to
allow interaction between the user and content. An important part of this interaction is the
Flash movie's ability to provide users with feedback on their actions to help them make more
informed choices. Subtle feedback can greatly assist users in finding what they're looking for,
improving their overall experience and the site's usability.

Non-explicit instruction

Many sites, particularly HTML sites, offer explicit instruction on how to use interface
elements. This is less effective than it sounds. Consider what happens when you purchase
something that needs to be assembled. Do you spend time reading the instructions, or do you
plunge ahead and start putting things where they look like they should go? This may not be an
exact parallel to the process of learning a site's interface, but it is similar.

Consider that the person who just arrived at your site would like to find what they're looking
for as fast as possible. They're more likely to start stabbing away at buttons than they are to
take the time to read instructions . For this reason, it is important to utilize visual cues to
communicate function.

The most frequent example of non-explicit Visual Feedback Elements

instruction on the Internet is the use of rollover
and hit states for button elements. The change of
appearance combined with the button label is
HONG KONG, China -- China has welcomed a U.S. expression of
regret over the loss of a Chinese pilot after a collision with a U.S. spy
plane but is keeping up calls for an apology.
Arrows are an
A top Chinese official said on Thursday that a U.S. expression of
"regret" was a "step in the right direction." He suggested the United
overt indicator of
additional content.
States might be allowed a second meeting with the 24 crew of the U.S.
Navy spy plane being held on a southern Chinese island.

typically enough to communicate both what the But in a clear sign the latest words are not enough to end the five-day

element does and where it leads. Cut-off text provides subtle

indication of additional content.

This example of visual feedback shows how different elements can

Another example is the use of arrows or partially communicate a message quickly without relying on overt text.

revealed elements to indicate that additional In this case, the message to be communicated is that there is more
text to this content area than there is space on the screen, and
content requires scrolling. scrolling is necessary. Two different methods have been employed,
and they vary in subtlety.

In either case, adding text saying "these are buttons" or "you need to scroll" would not
communicate this information as quickly as the visual indicators.

Keep the User Informed

Have you ever found yourself waiting for a delayed flight and thinking, "I wish they would
just tell me what's happening." Why? Information about the delay won't get you on the plane
any faster. And yet, if people are informed, they are less frustrated. This principle can easily
be applied to Flash movies. Visual feedback can help to answer questions as well as keep the
user more actively immersed in the site.

Making Flash Usable Page 16 © BiT Group, Inc.

Use Preloaders

Unless it is visually distracting,17 a preloader should be used for any Flash movie that takes
more than a few seconds to download. Not doing so is grossly negligent, as it leaves the user
in limbo, wondering what has happened to the page they were looking for. When a new
HTML page is loaded, there is feedback on the loading progress displayed by the browser. No
feedback usually means something is wrong, and this user perception can easily carry over
from HTML to the Flash movie.

The preloader is particularly important to hold the attention of impatient users. If the user
clicks on a link and nothing happens, they may assume the movie is broken and leave. This is
particularly true of large downloads. A movie without a preloader that takes a minute to
download may look similar to an application crash, and the user might assume that you've just
crashed their browser – an effect which cannot help user perceptions of the site.

The message that the preloader sends is that the movie is downloading, and that they should
be patient. More advanced preloaders which indicate the percentage completed are even
better, since they give users more feedback on how much longer they have to wait.18 If a user
is short on time and doesn't want to wait, they can make an informed decision, back out, and
instead enter your low-bandwidth, HTML version.

For long downloads, it is highly recommended that the preload sequence be disguised in some
way. You should retain the progress information, but many developers have experimented
with including simple games, or interface instructions (if they're warranted) during the
preload sequence. The idea is to deliver content to keep the user interested enough to continue
waiting for your movie to finish loading.19 Think of it as a functional version of an intro
movie.

Don't abandon confirmation messages

It has become fairly standard procedure with traditional HTML sites to deliver confirmation
messages after users complete a task. The most common example is form submission. After
you submit a form, you are typically given a message that at the very least lets you know your
submission was processed by its processing script. Even better are confirmation screens that
remind you what information you submitted.

17
Such as when the Flash movie is being used as an embedded navigation element in an HTML page. In these
cases, the movie is typically no larger than a standard image, and it should be an acceptable option not to include
a preloader that may confuse or distract.
18
Returning to the airline metaphor, imagine how frustrating it would be to be delayed, but not even given an
estimated time of departure. The phrase, "Your flight will take off eventually," would not be encouraging.
19
Developers should be careful not to rely on this time to display critical content. Remember that those on high-
bandwidth connections may not see all the content that plays during the preloader, depending on how it is
constructed.

Making Flash Usable Page 17 © BiT Group, Inc.

Flash has the ability to emulate Common HTML Form Process
traditional HTML forms.
Unfortunately, many developers have
omitted some of the finer points of HTML javascript
CGI HTML
confirmation
form script
HTML forms, to the detriment of page

1 2 3
their usability in Flash. It may not be User Fills Validation script Processing script

as easy to build a confirmation screen out form. checks form fields

and either submits or
records information
and outputs
provides feedback on confirmation page.
with a Flash form as it is in HTML, error correction.

but that won't matter to the user.
Likewise, providing users the ability
to revise their submissions prior to
confirmation, and even simple effects
like setting the mouse focus and tab
order to allow the user to tab among
form fields are all things which are
commonly omitted.20
Common Flash Form Process
This example shows the additional steps
and user feedback that is commonly used
in even the simplest of HTML forms, but is
form
CGI
script
not applied to the Flash equivalent. The
additional feedback provided in the HTML
1 2
example can and should be provided in the
Flash version. After all, the end user doesn't
User Fills Processing script care about what technolgy you use -
out form. records information. all they want to do is fill out the form.

20
Admittedly, these things can be technically difficult to reproduce in Flash, but better the developer have a
difficult time than the user.

Making Flash Usable Page 18 © BiT Group, Inc.

8. THE PERILS OF SOUND
Another of Flash's capabilities is the ability to integrate sound into presentation in ways that
are infinitely more useful than traditional HTML. The use of sound, however, can be a risky
endeavor. Sound can greatly enhance the user experience, but it can also quickly ruin it.

How does sound help this site?

Sound provides a way to heighten the experience and mood conveyed by the visual
information. It can also be used to give emphasis to certain elements in much the same way as
visual rollover effects do. However, people are used to the silence of traditional HTML, so
not using sound in a Flash movie is perfectly acceptable.

Do no harm

If you cannot use sound without hurting the overall effect of the movie, you shouldn't use it at
all. Sound can ruin the presentation of content in one of two ways: either by inflating filesize
or simply being obnoxious. Both of these problems can be solved or at least reduced:

Make it small

Just like images need to be optimized for traditional HTML pages, sound needs to be
optimized for use with Flash. Does the sound need to be as high quality as possible? Probably
not. At the same time, if the sound is extremely poor quality, it may sound terrible. The
delivery method is also important: lengthy sounds, such as musical accompaniment should be
streamed to the user. Short sounds which occur often should probably be downloaded (not
streamed) with the rest of the movie.21

Make it optional

Sound can be obnoxious to some users. The single worst offender in this regard is the looping
sound track used as background music. There is a reason that most music isn't composed
entirely of a repeating 5-10 second loop – it's annoying. Only in rare cases does a looped
music clip avoid becoming profoundly distracting.22 Even if you use a streaming music clip,
there is the possibility that the user simply won't like your taste in music. Or, perhaps they are
at work and would prefer not to subject their co-workers to the noises your buttons make.

21
To make sound a truly integral and useful part of a Flash movie, the services of a professional sound designer
can be invaluable. Someone who understands the intricate details of sound design, optimization and delivery has
a much better chance of applying sound correctly than most Flash developers do.
22
Most frequently this involves the technique of layering different loops in contrasting combinations to create
the illusion of non-repetitive music.

Making Flash Usable Page 19 © BiT Group, Inc.

For all these reasons, users should be given the option of muting the sound. A simple,
intuitive button usually functions adequately, so long as it is easy to locate. An added benefit,
easily accomplished with Flash 5, might be to provide volume control as well, even if it can
be controlled via the operating system.23

A final option to consider with sound is to develop a version of your Flash movie that does
not use sound at all. The Flash movie should be designed to communicate effectively
regardless of sound, so development of this version shouldn't take very long. The benefit is
that users who may not have speakers, are deaf, or simply uninterested do not have to
download the sound files, and can obtain their content that much faster.

23
Volume is an aspect of sound usage that should also be considered from a basic design standpoint, as it can
add or detract to the effectiveness of the sound.

Making Flash Usable Page 20 © BiT Group, Inc.

9. DEALING WITH BROWSER NAVIGATION
Flash content is almost always delivered via a web browser of some sort. As a result, Flash
developers need to deal with the interface that accompanies the browser, and the interaction
between this interface and their Flash movie. There a variety of things that can be done to
make integration between these two competing elements as smooth as possible.

Don't remove familiar elements

For reasons of both presentation and environmental control, many Flash movies are presented
in pop-up windows which have had their navigation elements removed. From a developer's
standpoint, this seems like an excellent solution to a variety of problems, and allows designs
to be built for a fixed size window. Unfortunately, this common technique can be
disconcerting for users.

Studies have shown that the single most clicked button on any web page is the back button in
the browser interface. Beyond that, people are used to the browser interface, and removing it
gives the impression of removing their ability to control what is happening.

Coping with the Back Button

The most common technical reason for removing the browser's own navigation is to prevent
users from backing out of the flash movie.24 The back button is used extremely often, and any
time a user ends up in a section of your movie that they don't like, they're extremely likely to
attempt to back up in much the same way they would in an HTML site. Hitting the back
button will, of course, not produce the result they were looking for, since the entire movie
lives on a single HTML page, and the movie will start playing again from the beginning.

A more technically demanding solution to this problem is to provide a warning to those who
attempt to use the back button. Using a combination of framesets and javascript, it is not
difficult to cause a warning message to appear in the event that a user attempts to back out.
Again, the solution is to inform the user of their available options and let them make the
decision, rather than forcing them to down a single route.

24
This, naturally, would not be a concern for a site that involved Flash as part of an HTML page, or a site that
used the technique discussed later of segmenting a large Flash movie into smaller ones.

Making Flash Usable Page 21 © BiT Group, Inc.

 Handling the Back Button

*Javascript checks counter variable

*If 0, then the redirect takes you to top3.html and sets counter to 1
*If 1, an alert appears warning you that the movie will disappear
*If user selects cancel, redirect takes you back to top3.html and movie continues
*If user selects accept, redirect takes you back to splash screen page

User presses 'back' button

HTML Meta redirect HTML HTML

top1.html top2.html top3.html
HTML
Javascript sets counter
splash screen Counter set to 0 to 1 and redirects.
page top frameset

Flash movie plays unmolested

in its own frameset.

bottom frameset
main frame page
This diagram attempts to describe the method for providing a javascript alert to prevent users from accidentally 'backing out' of a Flash movie. The
effect is accomplished by wrapping the Flash movie (actually the HTML file the Flash movie plays through) with a set of Frames. The movie itself lives
in one frame, while the other frame uses javascript and a sequence of three simple HTML pages to detect attempts to use the back button.

Of course, this technique may be impractical for large sites that employ the technique of segmenting the main movie to allow bookmarking. However, if
a traditional Flash movie architecture is used (ie; main movie that loads separate content movies), this technique may be used instead of removing the
actual browser controls, which many users may find disconcerting.

Note: in actual implementation, the frameset containing the three files would be so small as to be undetectable.

Replacing Browser Navigation

In the event that you do choose to remove the built-in browser navigation, there are some
things that can be done to alleviate user anxiety. The best way to do this is to build your own
version of the familiar navigation elements in more or less the same location as the
originals.25

By programming these replacement elements to emulate the functions of the browser

navigation, you can circumvent most of the problems caused by controls designed for HTML
pages. Most notably, the back/forward buttons can be set up to allow users to actually move
within the Flash movie in the manner they are accustomed to.26

25
If this method is employed, it is important that the new navigation elements be visually similar to those of the
browser. Otherwise the bonus of familiarity will be lost.
26
Even if the entire selection of browser navigation elements is not recreated in the Flash movie, it is always a
good idea to provide a back button, since it is by far the most commonly used navigation element. Placing it in
the upper left-hand corner is also a good idea, since users will expect to find it there.

Making Flash Usable Page 22 © BiT Group, Inc.

Bookmarking Strategies

Flash is not a bookmark friendly medium for transmitting web content. This is unfortunate
and hopefully future changes to both Flash and Browser capabilities will help alleviate this
problem. For the time being, however, there are several things that can be done to make it
easier for users to bookmark Flash content.

Strategy 1: Do Nothing

Inelegant, but not necessarily ineffective. If your Flash movie does not require a lengthy
download time, and the content is organized so that it is easy to access, there may be nothing
wrong with allowing all bookmarks to result in users beginning from the front of your Flash
movie. Sites without a great deal of content to begin with, such as "brochureware" sites, may
be well served by this technique.

For sites with a large amount of content, no matter how well the content is organized, users
will want to skip multiple steps in order to return to their content.

Strategy 2: Link to an HTML Version

For a site that is Strategy 2: Link to an HTML Version

entirely Flash based,
HTML
there should be an
HTML
HTML alternative Individual section movies link to the

available, as corresponding HTML pages in the

parallel, non-flash version.
HTML
discussed earlier. index.html
Flash
HTML content is
perfectly suited for
This diagram illustrates the concept of linking the two versions of the content together. This technique makes it easier for
bookmarking. The users to access printable and bookmarkable HTML versions of content from the corresponding Flash movies.
Flash developer
should consider providing a link to the HTML version of any content that might be
bookmarked.27 Care must be taken to make sure that users are made aware of what is going
on, but done correctly this technique can alleviate Flash's inability to bookmark specific
chunks of content.

Strategy 3: Segment your Movie

An all-Flash site traditionally uses a single Flash movie as the architectural framework into
which other movies are loaded. This allows everything to take place in a single HTML page
in a relatively smooth, integrated fashion.

27
Incidentally, this technique might also be employed for printing, since the HTML version of sizeable content
will almost always be more suitable for printing than the Flash version.

Making Flash Usable Page 23 © BiT Group, Inc.

An alternative, which is more bookmark friendly, is to segment this master Flash movie into
individual movies. Basically, you remove the framework movie, and simply place each
content movie on its own HTML page. The end result is a collection of HTML pages that
permit the bookmarking characteristics of a traditional HTML page, but retain the enhanced,
rich-media capabilities of Flash delivery.

There are two obvious downsides Non-Segmented Construction

to this approach,. The first is that
Individual content section movies
information is downloaded load into the main framework movie

section by section, as in the

traditional HTML model, as
opposed to being more or less
downloaded entirely at the Individual content section movies
are each located within a different

outset.28 Depending on how the
movie is structured, this may or
may not be a concern.
HTML file. Each content movie will
also include the interface elements
of the original framework movie.
Each movie now links to the HTML wrapper of other sections. Section
movies are no longer loaded into a framework movie.

This diagram shows the difference between a more typical, non-segmented site architecture, and
The second is that the transition the segmented model. The advantage of the segmented construction is that the advantages of the
traditional HTML, mutiple-page site structure can be maintaned. This site will be easy to bookmark
effects that make Flash an and provide relevant information for search engines.

attractive medium in the first The downsides are a reduced ability to provide meaningful transitions between sections, and greater
load times for each section, since additional HTML must be loaded each time, and the each Flash
place may not work correctly.
Because an entire page is being
loaded for each section of content, a smooth transition between sections is impossible.
Transition effects may still be employed, but they will not be as clean as in a self-contained
Flash movie.

28
Of course, if you are using separate movies to hold content, you are effectively reproducing the traditional
HTML model, by loading a new movie every time a new section is requested.

Making Flash Usable Page 24 © BiT Group, Inc.

10. CONCLUSIONS

Flash is a powerful tool. This cannot be emphasized enough. Flash gives the developer the
ability to add the power of rich media to the presentation of content. This can potentially
make the user experience much more interesting and enjoyable. Unfortunately, it can also
make a site entirely unusable if necessary precautions are not taken.

It is essential that the Flash developer be mindful of Flash's capabilities. Knowing the
advantages and drawbacks of Flash content will allow Flash to be applied correctly as a
solution. Flash is only one of many tools available to deliver content to the user, and knowing
when to use it and when not to is critical to using Flash successfully.

Flash has many critics, and this continued criticism will only make it more difficult to
convince others that Flash can be an effective means of content delivery. In order to quiet
these critics, Flash developers must take steps to make their content more usable. Tangible
examples of effective and usable Flash content are the only way to prove to critics that Flash
can and should be considered a viable alternative to traditional HTML content.

Making Flash Usable Page 25 © BiT Group, Inc.