Digital Web Magazine

The web professional's online magazine of choice.

Flash Usability

Got something to say?

Share your comments on this topic with other web professionals

In: Articles

By Meryl K. Evans

Published on January 22, 2002

Before you roll your eyes at the thought of reading about Flash, think about the possibilities of it putting money into your bank account. Let's put our negative thoughts and artistic principles aside and consider how many people out there think Flash is awesome.. If you don't want to do such work, then someone else will cash in on the opportunity.

Motion on the Web has come a long way from its ever unpopular and unfortunately still in use <blink> tag and animated GIFs. <blink> may not be true animation or motion, but it is not static, though it is annoying and dizzying. Macromedia's Flash has taken motion design to a new level along with new challenges. No doubt, there'll be more pushing the envelope with animation whether with existing products or new and unknown products.

Too often, we see "homemade-style" (not to eschew homemade projects because we always love what our kids make for us) sites that receive accolades because of colorful graphics and things that bounce around. Have you considered that those who praise these sites may not know too much about clean, usable design? They are probably spoiled with a fast connection and no disability challenges.

One Web designer says "Web site awards mean nothing" and he is right because such awarders know little about what makes good design or they're promoting their own site by giving out the awards via a button with a link to their pages. Of course, such people could be your clients and you have to do as you're told even after explaining the disadvantages until you're blue in the face. If the client pays good money for the flashy stuff, then by all means put away your feelings for Flash and consider these guidelines when designing with the tool.

Just the Stats, Jack

As of December 2001, WebSideStory's StatMarket reports that the Global Netscape Plug-in Usage share for Flash, as of 12/10/01: 90.93%, which indicates that 9 of 10 people in your audience are likely to have the Flash plug-in installed. The problem is that they could be using various versions of the plug-in, which makes it challenging for creating Flash-based Web sites.

Then there is speed. Yes, Flash is supposed to keep file sizes small, but just adding sound and video quickly bulks the Flash file. To overcome this, designers create preloaders indicating in various ways that "the page is currently loading, please wait." This is torture for those on 56K and slower connections, so they quickly find the "skip intro" link, if it's available (and it should be whenever including an intro). Be aware that those who connect through cable or DSL also skip the introduction, but not as often. Do you really need that intro?

With the fall of companies specializing in broadband, it's unlikely that we'll see wider use of cable modems and DSL connections anytime soon. Flash has a Bandwidth Profiler to test the speed of the movie. It graphs out how much bandwidth is used throughout the movie. Whenever seeing a jump in the graph, review the impacted frames and try to reduce the amount of data for those frames. That's why knowing your audience is key before designing Web pages.

A Tale of Two Flashes

Sites using Flash either use it as an element or as the entire site itself. Elements include navigation, demonstration, entertainment, advertisement or other small areas of the site. When a site uses 100% Flash, the entire site does everything with Flash. Unless the site is a personal Web site, art, games, or just for fun, it's unlikely to have justification for treating Flash as a platform rather than as a tool.

Those succeeding with Flash usually apply it as an element and mix it with other technologies or images such as streaming audio and video, GIF, JPG, DHTML, and CGI to name a few. Determine what elements you need on your site and study the strengths and weaknesses of each technology to determine which option would work best for each element. You're in good shape if you can use Flash without sacrificing accessibility, readability, navigability, usability, searchability, and ability to update.

Pre-Loaders

Using pre-loaders lets users know that nothing is wrong with the connection and the movie is loading, so stick around for the good stuff. Unfortunately, they don't always stick around even with a pre-loader. Flash has streaming capabilities, so you can offer valuable content for the visitor to read while loading the rest of the movie. This is better use of their time than countdown or percentage completed pre-loaders.

Fonts, especially device fonts, do increase the size of the movie because they display as aliased. To provide instant gratification, choose vector images over bitmap images because they use less memory. Use the Bandwidth Profiler while in the Test Movie mode to ensure your preloader is sleek and fast.

<Silence>

Persons with visual impairments using readers and search tools think there is nothing on a typical 100% Flash enabled page. Few search engines have the ability to scan a Flash site. Those who have hearing challenges may enjoy the animation, but not understand what is going on because they can't understand the audio portion. There are several options to address this:

Macromedia offers a Flash Accessibility Kit and other Flash Accessibility extensions for free downloading. The kit comes with an Accessibility HTML publishing template and examples with source code to demonstrate how to make your Flash content accessible. Consider providing the user with controls such as resizing graphics and / or text, stop, pause, fast forward, rewind, magnify, or replay the Flash movie.

When embedding large amounts of text, consider using other media for presenting it to ensure visitors can read and control the text. Flash's small, anti-aliased text is better for short blurbs or captions. Another option that comes with Flash 5 is Dynamic Text fields, which is aliased and selectable text that's more readable. It also allows the user to copy and paste the text into a word processor, email or clipboard.

Keyboard Vs. Mouse

Not only do users with mobility disabilities use the keyboard to navigate, but also people with repetitive stress injuries (RSI) use them. Such injuries are becoming more commonplace with more tasks requiring using the computer and mouse. Just like the ability to TAB through forms, Flash elements should have keyboard accessibility.

When embedding Flash into HTML, add the ACCESSKEY attribute to the Object tag. This will give the user the opportunity to bring the Flash movie to focus using a key combination. Then, they will be able to tab through it. However, there are problems with using Flash in providing keyboard accessibility. Neither the ACCESSKEY nor TAB works in Netscape (including 6.2) or earlier versions of IE. Here is an example source code that uses ALT-6:

<OBJECT
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://active.macromedia.com/flash2
                 /cabs/swflash.cab#version=4,0,0,0"
  ID=cands_intro WIDTH=290 HEIGHT=320
  longdesc="webpage.html" accesskey="6">

Test the order of the tabbing to make sure it goes to the next logical object. IE users can repeatedly press TAB until the Flash section comes to focus without having to use the ALT key combination.

Clicking on Everything in Sight

Creative designers attempt to change the Web browsing features that users take for granted such as blue links, 3D gray-colored form buttons, print option, and go back to previous page by using the browser's "Back" button. We see fewer traditional blue links with the growing popularity of CSS, which gives designers more power to add a diversity of colors and features for links. Users are adapting to the change, but they still see certain "looks" that tell them what it can do.

A few far out sites make it so difficult to know what they do that the user ends up clicking on anything and everything like a blindfolded pilot who can't find the target. CSS makes it possible to change buttons to look like flat squares, but it's easy for the visitor to overlook it without a clear label or indicator.

To overcome clickable confusion, ask people not involved with the design to try out the Flash page and watch how they work. Are they hesitating? Does it look like they're getting what they expected with each click? Any surprises? Are the clickable items big enough?

Obviously, the bigger the target, the harder it is to miss. Many software programs allow users to be a tad off the target and still get a successful click. When using text as the basis for the click, draw a box around the text to expand the target area without touching other text or elements. In conjunction with a larger target area, use Flash's ActionScript to dynamically enhance clickability as the mouse pointer moves closer to the target.

Establish consistency within the Web site by providing distinct visual cues for navigation and for content. This has been a recurring theme throughout the Internet and the Flash-enabled site following this scheme will be more usable than one attempting to shake things.

Back, ACK!

Users have a habit of pressing the BACK button to return to the previous screen regardless if there is a RETURN link on the page. Flash has a little problem with the back button. In most cases, it sends you to the previous Web site instead of the beginning of the Flash movie or another Flash element within the site. There are several remedies:

Pop-ups
Make sure the toolbar is available otherwise the user could close the window thinking there is no other way out. Also, consider providing an option for the pop-up window instead of having it automatically pop-up especially since some people may have disabled JavaScript. Another advantage of this option is making the pop-up screen size smaller, which runs Flash faster than at full screen.

One SWF per page
When creating an entire site in Flash, consider embedding each page of the site into its own HTML page. The BACK button will then work the way it's expected.

Create SWF Back Button
Macromedia has a technote (#14831) describing how to create a Flash BACK button. However, it won't be able to navigate within a SWF that is embedded within an HTML page. This method takes you back to One SWF per page. If there are specific frames that make up a page, then the BACK can be used to go to such frames without having multiple SWFs and HTML pages.

Loony Loop

Animated elements typically receive attention before anything else and deter the visitor from reading or finding the needed information. If the only animated item on a page is the company's logo, then the user's eyes will most likely be directed there first. To avoid having their eyes glued to the logo or getting dizzy, keep the animation brief and turn off looping.

In some cases, it may be effective or required to have an ongoing animation. Instead of something jarring , try subtle or soft movements similar to fade in and fade out in a slide show. It's less distracting and decreases the possibility of the user's eyes being obsessed with looking at the moving thing.

If your job is to create ad banners, disregard everything and rest comfortably knowing we have learned to turn a blind eye to such ads.

Sound Off

Flash is like honey to the bee of music files, it attracts a lot of them. There's nothing wrong with using sound files in Flash movies, but doing so adds more bulk. The good news is that Flash compresses and streams sound files.

To make users happy, offer them the ability to turn off sound. Treat sound as you would a visual presentation. Sound should be seen as an enhancement, not the actual show. Turn off the volume when testing the movie and validate that everything is understood without it. Many corporate offices don't have sound and that's not an audience you want to abandon.

Innovate Not Aggravate

Just because you know how to use Flash doesn't mean you should use it or break the usability rules. Unless you're creating to demonstrate your skills for your portfolio, design for a purpose with substance not to show off your coolness and "with it-ness."

Many designers have fun with it and ignore the usability rules. That's OK when the purpose is to be humorous or have fun.

Hillman Curtis, master Flash designer, admits that he is among those who criticize many of the Flash sites and that Flash is not the right tool for every job. However, when it's done right, it gives you an outlet do innovative things with your creations.

References:

Alternative Formats and Keyboard Access: Accessible Flash

Macromedia's Flash Usability Tips

Macromedia's Flash Accessibility Tips

Reader Comments on Flash from Flash Usability Challenge

W3C Checkpoints for Web Content Accessibility

Got something to say?

Share your comments  with other professionals (0 comments)

Related Topics: Usability, Flash

 

Meryl K. Evans, content maven, is a WaSP member even though she's far from being a WASP. The content maven writes a column for PC Today and blogs for the Web Design Reference Guide at InformIT. Meryl provides the home for the CSS Collection and she's the editor of Professional Services Journal, meryl's notes :: the newsletter as well as other newsletters, so tell all your friends, families and animals to subscribe. Her ancient blog keeps cluckin' since its arrival on the web in 2000.

Media Temple

via Ad Packs