Flash UsabilityBy Meryl K. EvansBefore 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, JackAs 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 FlashesSites 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-LoadersUsing 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. MouseNot 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 SightCreative 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:
Loony LoopAnimated 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 OffFlash 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 AggravateJust 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 |