Remote Scripting with AJAX, Part 2
by Cameron Adams | Pages: 1, 2, 3

Tip #5: Provide Interface Feedback

Creating a seamless web application can let you explore new functionality that hasn't already been seen in a browser, but in doing so, we must still remember the foundations of usable interface design. One such foundation is the provision of interface feedback: letting the user know what they can do, and what they have done.

In Example 1, it's not entirely clear that users can click on the thumbnails of ecard graphics. This is easily counteracted if we give a grey outline to the image over which the cursor is positioned at any given time.

Figure 5.

The :hover pseudo-class will be familiar to anyone who has used CSS. It allows an object to change its an appearance when the cursor is moved over that object. Although mouseover effects can theoretically be achieved through CSS alone, current versions of Internet Explorer do not allow :hover effects on any element except an anchor tag. To achieve a hover effect on the image elements, Example 2 attaches onmouseover and onmouseout event handlers:

var cards = document.getElementById("ecardSet"). 
  getElementsByTagName("img"); 
  
  for (var i = 0; i < cards.length; i++) 
  { 
 cards[i].onmouseover = onmouseoverCard; 
 cards[i].onmouseout = onmouseoutCard; 
  }

Those event handlers can then change the class of each image and allow us to provide visual feedback using CSS:

function onmouseoverCard() 
  { 
 this.className = "hover"; 
  
 return true; 
  } 
  
  function onmouseoutCard() 
  { 
 this.className = ""; 
  
 return true; 
  }

Changing the cursor to indicate its "clickability" can also help to provide feedback to the user. This can be done using a simple rule in CSS:

img.hover 
  { 
 cursor: pointer; 
  }

Conclusion

After making all of these changes to Example 1, Example 2 becomes a much more helpful and usable application.

Figure 6. Click for full-size image

The common theme among the tips offered here is always to make the user feel comfortable and in control. If users don't possess the information they need in order to understand what's going on, they will view your application with apprehension, and its performance will suffer as a result.

Although this article focussed primarily on the process of remote scripting and its usability concerns, there are also points of accessibility that should be taken into account as you create a seamless web application. Example 3 is a much more complex version of the ecard application, which uses more powerful scripting and degrades accessibly for users without JavaScript or without XMLHttpRequest. Once you've mastered the techniques described above, you might want to have a look at this final example and start to make your applications really robust.

---

---

2. Email address checking badly broken
   2007-09-16 07:56:00 leskitchen
4. Very usefull
   2006-10-26 11:37:22 LaurentG