Chapter 19. Usability Patterns

Up until now, all the patterns we have covered have been Ajax-enabled OOP (object-oriented programming) patterns, which occur in the background code and are never visible to the user. This chapter will differ by focusing specifically on visible design elements, the usability principles that occur in the design of an Ajax web applications interface, and the interactions that occur on the client side in the graphical user interface (GUI). The usability patterns we will be discussing are designed to provide a more intuitive user experience and eliminate all the annoying JavaScript dialogs that have existed in many applications over the years. The GUI should be free of questions and uncertainty. Most of all, though, it should definitely be free of obtrusive JavaScript dialogs by providing an extremely integrated method of error, warning, and feedback handling to the user.

As a software developer, I am well aware it is not always easy to display these errors in such an apparent interface design, but with all the capabilities that Ajax provides our applications, we should be taking on the responsibility and forging new paths in web application development, design, and interaction. There are a number of ways to integrate errors and feedback seamlessly into an application through Ajax and DHTML. Providing this feedback opens up a whole new realm of possible interactions that have not yet existed, leaving us at the forefront of something that is exciting and fun to be a part of.

A couple solutions that we will cover in more detail throughout this chapter are highlighting elements when the content or data has been updated, and displaying errors and feedback as inline messages. When I say inline messages, I mean a message that displays within the current page and connects messages to the elements to which they correspond. Errors and feedback should be helpful information to the user. However, abruptly throwing JavaScript alerts or confirmations at a user is not the best solution because they are usually pretty startling to a user and should be eliminated from all web applications. We are going to learn how to create graceful messages that leave users comfortable about their decisions and ultimately keep them involved and engaged in our web applications without hindering their experience and workflow. Keeping users actively involved provides life to our web applications and, if they can efficiently solve a problem with our web application, they will continue to use it. The message handling that we will be covering in this chapter could and should ultimately be applied to all forms of web applications, but they integrate most beautifully with Ajax because of JavaScript and its easy access and manipulation of the Document Object Model (DOM).