PART II
Chapter 8: User Interface Design for Ajax 401
For example, consider the fish-eye menu popularized by Mac OSX and now being adopted
by a number of Ajax toolkits.What exactly does the fish-eye have to do with Ajax and the problems it introduces? The
fish-eye is useful because it saves space and zooms what you need to use, but that isn’t special
to Ajax. For the sake of brevity, we presented dominantly the UI concepts and conventions
that Ajax powers or encourages: communication of activity, communication of change,
invitation to interact in new ways, and data on demand. While we may have done so within
the light of a few particular widgets, the widgets themselves are not the important part as
such ideas can apply to just about any widget you might imagine.Putting Things Together
To demonstrate the UI ideas of this chapter in practice, we put together a few application
interface demonstrations. The first is the Ajax Emporium (http://ajaxref.com/ch8/
ajaxstore.html). This very basic e-commerce interface demonstrates drag-and-drop for cart
items, click-to-edit to change quantities, and simple animations and transitions when
performing tasks such as adding things to a cart using a traditional button click or checking
out. We attempt to show the use of Ajax here beyond eye candy to have the inventory
checked as you go along. Note that if you try the example and attempt to buy the airline
tickets, the inventory is consulted with an Ajax call and it will report that the tickets have
sold out. Sorry, you just missed the last pair—I got them just before I finished this book. You
can see a visual preview of this example in Figure 8-19.
The next example is the Ajax-based to-do list that we saw many pieces of earlier in the
chapter. Once all the items are brought together into one example, you’ll find that a number
of interface conventions don’t play nicely together. For example, drag-and-drop needs to
look for a mousedown event, which is also the start of a click event, so click-to-edit would
trigger a mousedown event as well. To avoid this problem, the click-to-edit can be moved to
instead be triggered by a click of an icon that appears as delete does. For example, a pencil
icon could be used to invoke edit. However, now a save and cancel system will be needed
as well. Alternatively, a drag handle on the edge of an item could be used instead of making
the whole item triggerable for reordering. We present the partial solution at http://ajaxref.