Many usability experts have criticized AJAX by pointing out cases where it hurts usability. Although it is possible for AJAX to have that effect, I don't think AJAX inherently hurts usability; it's just that many developers have the wrong focus when adding AJAX to their sites. Focus on buzzwords and the latest technology results in nice demos but not necessarily in easy-to-use sites. Web development should always be user focused; adding AJAX to the mix shouldn't change that.

As you use AJAX, keep the following guidelines in mind, and you'll end up with a highly usable site or Web application:

• Keep the user's expectations in mind
• Provide feedback to actions
• Maintain the user's focus when adding content
• Keep the ability to undo actions
• Know if you are developing an application or a Web site
• Only use AJAX where it has the greatest effect
• Have a plan for those users without XMLHttpRequest

The following subsections cover each of the points in more detail.

Keep the User's Expectations in Mind

Keeping the user's expectations in mind is a broad guideline, but it is also an important one. At the simplest level, it means not changing how things operate without letting the user know. In most Web pages, buttons are used to submit forms, so having some other action, such as the clicking of a hyperlink, to submit a form can be confusing to users. This rule comes into play in any place where you redefine the standard way a Web site works.

One area in which you'll have a hard time meeting expectations is with bookmarking and the Back/Forward button operations; in many cases, these will no longer work, and you'll need new ways to support bookmarking within your application. This guideline doesn't mean that you have to change how the user interacts with your site; it just means that you need to work to provide the user with enough feedback so that he or she knows what is going on.

Provide Feedback to Actions

The next guideline focuses on providing feedback that an AJAX action has taken place. With this feedback, users know that some action has happenedeven if it doesn't work as expected. In a basic Web application, the page reload shows that something is happening. In an AJAX application, we remove the reload, so we need to replace this feedback. This feedback mechanism ranges from a loading message in the corner of the screen that is similar to the waving flag that Internet Explorer uses to visually highlight the sections of the page that have changed. In many cases, you'll want to use multiple approaches, such as showing a standard loading box while the new content is being transmitted and then highlighting the part of the page that was updated. Providing feedback keeps your application from feeling broken. When someone clicks a link, he or she expects something to change; without the feedback, it's easy to miss what happened.

Maintain the User's Focus When Adding Content

As you add feedback to your AJAX application, avoid disturbing the user's focus. This usability guideline is especially important when using popup messages; they should never be used except in areas where immediate action is required.

Here are some items to watch out for when thinking about maintaining a user's focus on one area:

• Actions that move the focus of a cursor. Such actions will cause the user to type in the wrong input box or have to take the time to figure out the current cursor location.

• Actions that cause page reflows. If a user fills out a form and an error message causes the form to move down half an inch, the effect can be disorienting.

• Distracting message styles. Blinking red text can steal the user's focus just as easily as a popup can.

As a user interacts with your site, remember that he or she controls the interaction, not you; if your message isn't important enough to require immediate action, don't push it into the user's focus prematurely.

Keep the Ability to Undo Actions

Many AJAX applications try to outthink their users by automatically saving data as needed or submitting a form without clicking a button. When this is done well, it can be effective, but you must keep the user's expectations in mind when applying these techniques. Users are used to a forgiving Web environment where they can simply reset a form if the current input is incorrect. As you add AJAX, you must keep that level of forgiveness; operations should always be undoable. Autosave is one of the worst offenders in this area, but it is easily fixable by adding a Reset button on an autosave form or exposing the history of the saves.

Know If You Are Developing an Application or a Web Site

As you develop with AJAX, it is important to know if you are creating an application or a Web site. If you are developing an application, focus on having it act like a native application; following the human-interface guidelines of the target operating system is often a good idea. If you are developing a Web site, strive to have your work fit the standard feel and interaction model. This focus helps set the user's expectations and will make your interface more learnable because the user will have a correct frame of reference against which to compare it.

Only Use AJAX Where It Has the Greatest Effect

AJAX is a powerful tool, but it should be only a part of your Web development arsenal. Always make sure not to overuse AJAX. It should be used in areas where its extra capabilities provide enough benefits to overcome its drawbacks. An example of such an area is the breaking of bookmarking within a page. AJAX is a great tool to update part of a pagejust load the changed contentbut it should not be used to load an entire page. Normal pages work just fine and are going to be just as fast as reloading the page with AJAX. When you are deciding on using AJAX, look for a problem that needs solving, not just for places where it might be possible to use AJAX.

Have a Plan for Those Users Without XMLHttpRequest

The last usability guideline is to have a plan for users whose browsers can't perform AJAX operations. No matter how usable an application is, if the user can't run it, it's useless. For internal applications, this is seldom an issue because a specific browser can be required, but that's not always a great idea for a mass market Web site. If you're using AJAX just to enhance slow tasks, an easy solution is to keep support for the slower non-AJAX operation. However, if much of your site depends on AJAX, you will need either to create a non-AJAX version or to keep non-AJAX users out of your site. Users who use browsers that don't support AJAX should always at least get messages that some actions won't work for them. As you add AJAX, make sure to understand your audience. Although AJAX is widely supported, it won't work in all browsers (especially mobile ones), and you don't want to lock out any part of your audience without addressing the consequences.