Flash Interface Usability

The focus of this tutorial is on the use of Flash as a tool

for creating straightforward, serviceable, functioning

Websites

Looking at Flash

For the last 2.5 years I have been running the Quintus Flash

Index, which is a rather large collection of links to Flash sites. The reason I

started it was simple enough: at the time, there weren't any decent collections

of Flash work on the Web. Yet I wanted to check sites out to see what Flash

could do. So I went searching, exploring the world of Flash. As I explored, I

decided to bookmark all the Flash sites that I came across. I ended up with a

categorized, static list of about 150 links, which I then posted as a Web page,

thinking that others might find it useful. Suddenly, I was getting 150 visitors

a day, which is really not bad for a one-page site. As part of my internship, my

supervisor suggested to implement the thing in ASP, add some ding-dongs, and put

it online like that. So I did - and it took off. Today, the QFI has links to

over 2,200 Flash sites, and (amazingly) over 12,000 visitor comments.

The comments area was just something I added because I

thought it would be a nice feature for people to show their approval or critique

on a site, certainly very useful for the developers. At first I posted a lot of

comments myself, trying to inspire people to follow my example. I focused mainly

on overall impression and user friendliness, not really from an expert point of

view, but rather like a regular user. But the more sites I reviewed, the more I

found similar errors and mistakes that would confuse visitors. Over time, many

other people at my site also helped out the site developers: by indicating what

elements of the sites were unclear, confusing, or even irritating.

Usability: the User Experience

Consequently, I have had the opportunity to learn a lot

about Internet usability and interface design. I found that a lot of the site

critiques on the Quintus Flash Index could be traced back to basic usability

design rules. Not a big surprise, but rather a very clear indication of the

value of some of these rules.

Usability may sound mystifying to some people, and some

best-selling books may champion the obscurity of this subject, but there's

really nothing too complex about it. Usability is the extent to which a system

supports its users in completing their tasks efficiently, effectively, and

satisfactorily - which may also include the experience of aesthetic pleasure. On

the web, this leads to topics like navigation, speed, clarity and readability.

The real trick about usability is the horrible task of letting it seep through

in your design. Usability extremists call out for Websites with barely any

graphics, using only default browser fonts (and default colors), and certainly

no plug-ins.

But the fact is that Flash is one of the best design tools

to effectively break most of those extreme rules of usability - and in a very

short time. This tutorial attempts to steer both beginning and also experienced

Flash designers towards a more responsible use of Flash. While this may sound a

bit loaded, you should realize that, by now, quite a few sites have banned the

use of Flash entirely - simply because they had the unfortunate experience of

having Flash implemented on their behalf, but in the wrong way. Yet, when

Flash is used the wrong way, it creates havoc. But the same might be said of

HTML. (The designers should have been blamed, rather than the tool!) So, to help

Flash designers avoid making the same errors all over again, I've written out

some pointers, highlighting many of the common errors I've encountered when

reviewing Flash sites. I hope these hints will be useful to you.

Flash is a Tool, Not a Platform

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.

Button Hit Area: Number 1 Mistake

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.

Font Size, Font Type: Squint, Ignore

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.

Menu Look and Feel: Is this a Button?

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.

Some pointers based on problems I often recognize in Flash

menus:

• Transitions should be short. It doesn't help if the
  needed segment takes 10 seconds or more to unfold � only to show submenu
  items.

• Try to have the current location highlighted in the menu;
  this visual cue helps people figure out where they are.

• Moving or rotating buttons: even buttons that stop when
  you move the mouse over them are often very confusing. Slow movement is
  sometimes acceptable.

• Button presentation. Sometimes, buttons don't reveal
  their function until they're clicked, which is not user friendly. If a
  square shape takes me to the links page, does the triangle shape mean I can send
  an e-mail? What about the donut? Good practice is to use the right icons, or add
  text to your buttons.

Skip Intro: All the Way

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:

• The visitor wants to wait for the loading of the
  intro.

• The visitor will be entertained for 30
  seconds.

• The visitor will then wait for the first page to
  load.

• The visitor will stay long enough to access your

  information.

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.

Browser Navigation: Back, Help!

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.

Site Statistics: Split up your Movies or Go

Blind

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.

Use of Sound: Music on Demand

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.

Print Option: Will People Understand?

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."

Progress Indicators: What's Going On?

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!

Forms: Better Let them Know

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.

Conclusion: the Flash Experience

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.

Online Reference

This tutorial wouldn't be complete without some interesting links. To ensure

that they will remain current, I've added and area to the Quintus Flash Index,

where you'll find additional information about this subject:

www.quintus.org/use/

Publication Information

This article was written for the Flash 5 Bible published February 2001.