The Keys to Improving Flash Usability

Stop what you are doing. I mean it, stop everything.

Take a look at your desk right there in front of you. Do you see it? It is covered with buttons and letters. It might have a cord that snakes out to the computer, and it may have another cord that attaches to the mouse.

You see it now. It is your computer's keyboard. It is the computer's most frequently used input device, and it holds the keys to making your Flash projects far more usable than anything HTML can offer.

The Key to Usable Interaction

The keyboard has been our number one entry device for interacting with the computer for many years. It allows us to enter both commands and data easily. Even though the keyboard is designed for poor usability (That is, if you are using the QWERTY layout) it is still far more effective than the mouse for interacting with the computer.

Watch any seasoned designer working in Photoshop, Quark Xpress or Flash. Their fingers fly across the keys to execute command after command all through the keyboard. The mouse may just sit there collecting dust until the designer needs it to make a selection or access a command that does not have a shortcut. These keyboard-shortcuts improve the usability of applications on our computers, so why can't they improve our Flash content too?

The Principle of Shortcuts

One of the fundamental principles for designing user interfaces is offering the user both concrete and abstract ways of getting a task done. As a user's experience with a system grows, they build a mental model of the system based on how it works. In time they will be able to predict the outcome of any gesture within any context.

As the user's familiarity with the system grows, there will be less and less need to look and think before making a decision. The user no longer needs all the interface elements that a beginner would need. Instead the experienced user will seek out shortcuts to allow rapid access to more powerful functions.

Think about your drive to a co-worker's house. The first time that you went to the house you probably used directions to get there. Maybe you went online and printed out a driving map to get there. With subsequent trips the need for a map became less and less, and after time you may start taking alternate routes based on your knowledge of the area. You are looking for shortcuts to make the trip easier, and it is the same with your interaction with the computer.

Offering keyboard-shortcuts allows users to manipulate the program/system faster and easier. It removes the cumbersome mousing to access features. They no longer need directions because they know where to go. What the experienced user needs now is ways to make the task faster.

So why do interaction designers (that includes us Flash developers and web developers) seem to ignore the keyboard when they are creating user interfaces for the web?

Blame HTML

Web browsers like Netscape Navigator or Microsoft Internet Explorer have, by default, a very small number of keyboard-shortcuts for interacting with the web. Users can tab from one link to another, or shift-tab backwards, and fill out forms.

By adding JavaScript to HTML pages you can now capture keyboard events (browser era 4.0+). The problem is that HTML jockeys have not adopted or applied this functionality to the web at large. There is no standard, and certainly no popular commercial site is employing keyboard event capturing to improve usability. Because of this web surfing has become a very passive activity for users. When surfing the web, users rarely use their keyboards to interact. This is the exception to the norm, as most programs go out of their way to add a keyboard-shortcut to every single command.

Flash offers CTRL

Flash has the trump card here folks. Flash makes it easy to add keyboard-shortcut functionality to your projects without increasing the file size or knowing gobs of DHTML. Flash can improve the usability of a web site, it offers support for a principle of user interface design that is begging to be used. Flash also offers the benefits of being a stable cross-platform/browser tool that is currently unmatched by other web technology.

By adding keyboard-shortcuts to your Flash content intelligently, the overall usability is increased dramatically. Take for example the recently released Flash site TheyRule. This online Flash application allows users to interact with complex data showing how the Fortune 100 companies are interlinked through their board members. The nature of the subject matter and the power of the Flash app made it a very sticky site, with users spending hours exploring the data.

When the site was originally released the user had to click on a little briefcase or plus sign to expand a menu. From there they had to make a selection from a number of different options, all with the mouse. Because of the size restraints for the menu, it required very precise mouse movements to execute the commands. That was poor usability and it was easy to fix.

I contacted Josh On, the Flash developer behind the TheyRule site about this issue with this feedback:

One usability suggestion to making the system more responsive, could you add KeyPress functionality to the menus? For example, when deleting many people from my map, it is frustrating to click the brief case then click delete. If I could just click the briefcase and press 'Delete' to delete the person it would be so much easier. This type of functionality could work for all the commands, 'X' for expand, 'U' for URL and so forth.

Josh's response was fantastic. He added the functionality to TheyRule that night, and the next morning the usability of the complex system that he had built was dramatically better.

The Key Facts

So, these keyboard-shortcuts look to be a sure-fire way to improve usability but are they really? Bruce Tognazzini, former Apple Human Interface Evangelist and now a member of the Nielsen Norman Group, wrote in his book Tog on Interface that keyboard-shortcuts only allow users to think they are working faster. Tog's user studies found that the process to remember and activate a keyboard combination requires a higher level of cognitive processing. Basically meaning that it will take time for the user to teach themselves to use quick keys.

Well sure, that seems to make a lot of sense. I know it took me some time to memorize all the shortcuts in Flash 5 and integrate them into my work habits, but now, the hard work has paid off. I zoom through commands in Flash. It is also important to remember that they studies that were the basis for Tog's findings were conducted in the '80s and users were less familiar with computers that today's average surfer.

The most important fact to remember about adding keyboard-shortcuts is that users perceive that they are using the computer faster. That is not to say that the studies are incorrect, but instead that perception is everything to the user. Studies have shown that perceived time to load a page is more important than the actual load time.

Letting the User Know

So, you are gung-ho about keyboard-shortcuts, right? You are going to open old FLAs that you have not touched in ages and start going through and adding them tonight. Great, but there is something else to think about. You need to have a strategy for letting the user know that keyboard-shortcuts are available and you need to think about when to implement keyboard-shortcuts.

This is not time to invent something new, it is time to apply existing standards to your system. Take for example the method that Microsoft uses to let users know about keyboard-shortcuts. Throughout Windows applications the menus can be navigated via the keyboard by using the ALT key. Each menu item has an underlined letter to let the user know that pressing ALT-H will bring up the help menu for example. The Mac OS uses a right-aligned notation to let the user know what group of keys will execute what command.

Both of these methods work fine, and users are accustomed to what they mean. By adding this type of visual cue to the users, as they become experienced with the Flash content they will be able to integrate the keyboard-shortcuts into their interaction with the system, and usability is improved.

Some Flash content is not going to need keyboard-shortcuts. Animation, intro movies, small Flash sites and other Flash projects that are not built for long term usage are not good candidates for keyboard-shortcuts. You can add them if you would like, but the real usability benefit from keyboard-shortcuts is not evident unless the user is interacting with the content frequently.

The Final Key

Now that you know about keyboard-shortcuts, there are three things that I want you to remember when applying their use to your Flash content:
1. Use existing conventions: Always try to apply existing interface conventions to your keyboard-shortcuts. Look to common programs like Word or Excel and try to adopt their keyboard-shortcut keys when applicable. Also remember that the OS uses some keyboard shortcts. Do not try to override the common commands like Command-C to copy (or control-C) in your Flash application.
2. Apply with Intelligence: Don't go overboard on keyboard-shortcuts. Add the functionality to the most frequently access commands within your Flash content. Also look for complicated multi-step processes and make them easier to accomplish using keyboard-shortcuts.
3. Tell the World: Don't hide the fact that you have added keyboard-shortcuts to your Flash content. Make it very evident through either underlined letters in the menu or another form of visual cue. Remember that web surfing is generally a very passive activity, mostly mousing and clicking. If you are adding keyboard-shortcuts, tell everyone about it.

Ciao,

CHris

Join the discussion, add your comments about this article.