[jQuery] How to display error/validation messages?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2>3. Sure. We make a lot of assumptions when building
websites. But the important thing about those assumptions is when things go
wrong how will it affect the user? Someone has a black & white screen? Well
they wouldn't see the colors anyway. Not a BIG deal. They know they're monitor
doesn't work with color already. Website is wider than the screen size? Kind of
annoying because the user now has to scroll to see your content. A bit of an
inconvenience and probably unexpected but it's livable. User can't navigate to
another page because they have an old version of a screen reader and your
navigation uses a dropdown with an onchange event? Not good at all. You've shut
that user out almost completely. You've also shut out search
engines.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2>My original point of that question (as I stated in another
email) is that of data security. Relying on js for data validation is a big
mistake. The same validation steps need to be taken on the server side. If
you're relying on js in a form for validation already you might as well take the
validation from the client-side to the server-side and submit the form through
AJAX (showing the results on the return call).</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2>4. Agreed.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2>5. I find this strange. Do you have any public studies
you can cite?</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2>Thanks,</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=378570321-14112006><FONT face=Arial
color=#0000ff size=2>Chris.</FONT></SPAN></DIV><BR>
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <B>On Behalf Of </B>Glen
Lipka<BR><B>Sent:</B> Tuesday, November 14, 2006 11:47 AM<BR><B>To:</B> jQuery
Discussion.<BR><B>Subject:</B> Re: [jQuery] How to display error/validation
messages?<BR></FONT><BR></DIV>
<DIV></DIV>
<DIV>I organized the answers inline. This probably breaks email
ettiquette. - Glen</DIV>
<DIV> </DIV>
<DIV>
<DIV>1. Bigger text fields. Many (most?) users have sketchy vision and
flickering monitors. Make the text boxes bigger and they will be
happier. Same goes for the submit buttons.</DIV>
<DIV>2. Have a visual indication next to required fields (background color,
asterisk, something). Make sure they see it.</DIV>
<DIV>3. Do not submit the form if the required fields are not filled in.
(Click sign in on mine to see sample interaction.) Light up the error
fields. Turn them back to normal when the user focuses on them.</DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>3. This is assuming that
javascript is enabled right?</FONT></SPAN></DIV>
<DIV><SPAN><FONT color=#990000 size=2>Yes. Although, at this date, I
actually believe in forcing the user to have javascript on. I am making
alot of assumptions. Color monitor, screen resolution, modern browser that
understands CSS. I do believe in delighting 96% of the audience even at
the expense of the 4%, but you have to know your audience and
circumstances. I don't think you should ignore accessibility just because
the disabled are small, for example. Hmm, I guess there is some to think
about here. </FONT></SPAN></DIV>
<DIV><SPAN><FONT color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV> </DIV>
<DIV>4. Allow for keyboard TAB input as well as mouse click input.
Remember, sometimes users cut/paste.</DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2><SPAN><FONT face=Arial
color=#0000ff size=2>4. When would tabbing not be allowed? Also, the tabbing in
your sample form is all out of whack. I think it's best to not adjust the
tabbing order. </FONT></SPAN></FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#990000 size=2><SPAN>Yes, it's out of
whack. But it SHOULD work. Use tabIndex specifically when
the default order doesn't make sense to the user. My example was made
a little too quickly. :) I think keyboard interfacing is pretty common and
should be encouraged. Gmail allows for control-s to save, for example.
</SPAN></FONT></SPAN></DIV>
<DIV> </DIV>
<DIV>5. Give inline errors in red when they screw up (Put an invalid email in
the email field and then click on the next field. This falls into the
design principle called "Constraints". Lego is a great example of how to
do this right. Never allow the user to do something incorrect.
Always disallow bad entry. (Garbage In-Garbage Out) </DIV>
<DIV>
<DIV dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff size=2>5a. When I
put in my email address incorrectly (on purpose) and tabbed to the next field I
received an error (I like your implementation). But I also saw that the data I'd
entered was removed. How annoying! What if I simply forgot to put a period in my
long email address? Now I have to type the entire thing over again and possibly
make the same mistake. </FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN><FONT color=#990000 size=2>That was a concern, but
we looked at usability tests and concluded that the more "power-user" the person
was, the more they found it annoying, and the more "newbie" the person was, the
more they found it helpful. But power users don't get frustrated and quit,
while newbies do, so we erred on the side of helping the newbie.
</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN><FONT color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff
size=2>5b. What is "Lego is a great example..."? Do you mean Lego as in the
building bricks? How does that relate to web usability?</FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN><FONT color=#990000 size=2>Its about
constraints. Don Norman relates this in his book, The Design of Everyday
Things (DOET). He talks about how Lego makes all of their products in a
way that it is near impossible to use incorrectly. Make your web forms
impossible to use incorrectly. Help the user by creating interaction that
limits his behavior. </FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN><FONT color=#990000
size=2></FONT></SPAN> </DIV></DIV>
<DIV>6. Eliminate instructions. Users NEVER read instructions, so you
might as well get rid of it and focus on getting them through the process
without it. Users will read phrases and words, but not sentences. As Don
Norman (Godfather of Design) says, "A door that -requires- a sign that says
[Pull] is a porrly designed door". </DIV></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>6. I couldn't agree
more!!</FONT></SPAN></DIV>
<DIV><SPAN><FONT color=#990000 size=2>Woo Hoo!</FONT></SPAN></DIV>
<DIV> </DIV>
<DIV><SPAN class=sg></SPAN><SPAN class=e id=q_10ee7ad79b9b25e0_2><FONT
color=#990000>My profession is a UX Designer. jQuery is a great tool for
the UX Designer because it allows more design principles to be implemented
quickly in a prototype. This, then, is easier to hand off to more
programmatic folks in the engineering dept. Often I find, that the
engineers don't want to include the interactivity because they don't see the
value and don't want to "write all that javascript code". jQuery
eliminates that problem and actually makes them EXCITED about javascript.
</FONT></SPAN></DIV>
<DIV><SPAN class=e></SPAN> </DIV></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/