244CHAPTER 6

The user experience

{duration: 5.0} );

}

}

The Effect object takes care of some of the plumbing work for us, and we no longer need to manage our own timeouts. The age() function can be removed altogether. We simply invoke the constructor of the Pulsate effect, passing in a reference to the DOM element to operate on, and an associative array of any options whose defaults we wish to override. By default, the Pulsate effect runs for 3 seconds. We have modified it here to 5 seconds, in keeping with our previous example, by passing a duration parameter into the options array.

The same styling techniques could be applied to other events affecting the data, such as updates originating from the server. To prevent any clashes between effects, we check first for any effect that is already in progress, and cancel it. (As of version 1.1, all Scriptaculous effects respect a standard cancel() function.)

This kind of styling provides instant feedback to the user at the point at which his attention is already focused, unlike the status bar and dialog notifications, which are better suited to more general information. Taken together, these visual feedbacks can do a lot to improve the user experience.

6.7 Summary

In this chapter, we’ve looked at a number of topics that add a professional feel to an Ajax application. At the outset, we defined responsiveness, robustness, consistency, and simplicity as key factors in providing that sense of quality.

The majority of the chapter has been dedicated to looking at ways of providing the user with feedback while she works. Along the way, we developed several implementations of visual feedback mechanisms, including a status bar, a pop-up dialog, and inline highlighting of data. Going the extra distance to add these features can enrich the user experience considerably, and wrapping the functionality up as a reusable framework as we have done here removes a lot of burden from the developer. Having developed the frameworks, we showed how to easily integrate them with some of our previous code examples. We added status bar notifications to provide feedback on the progress of our server requests and inline highlighting of recently updated data in the ObjectBrowser that we use to view data about planets in the solar system.

Resources 245

That’s enough glamour for now, though. The next two chapters look at topics that help the usability of an application from behind the scenes, namely security and performance.

6.8 Resources

The Scriptaculous Effects library can be found at http://wiki.script.aculo.us/scriptaculous/list?category=Effects.

Additional icons for the notifications examples were taken from the Nuvola icon set developed by David Vignoni (www.icon-king.com/).