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.
|
|
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.
Questions for Cameron? Ask them here.
(* You must be a member of XML.com to use this feature.)
Comment on this Article
| Titles Only | Titles Only | Newest First |
- Email address checking badly broken
2007-09-16 07:56:00 leskitchen [Reply]
Overall, I found this article quite informative
about AJAX.
However, I was very disappointed that your
validity-checking code for email addresses
is incorrect. Where did you get the idea that
that RE matched valid email addresses? Have
you ever checked RFC-2822?
First, the "local part" (that is, the part
before the "@") can have many more characters
than just alphanumerics, underscores and hyphens.
The code you give would reject many correct
email addresses (including mine -- which is
why I'm particularly sensitive about it).
Second, according to STD13 and STD66, the
"label" parts of domain names, can contain
only alphanumerics (not underscores) and
embedded hyphens. Your RE would accept
syntactically invalid addresses containing
underscores or with leading or trailing
hyphens.
Putting up incorrect examples like this serves
only to spread broken address checking, when
readers copy your code. I strongly suggest
that you fix it.
- Very usefull
2006-10-26 11:37:22 LaurentG [Reply]
Found it complementary to Ajax hacks with this full client AND server-side commented example. Thank you.
