Sorry for top post. Blame Outlook.
Since you seem interested to know a thing or two about
usability here are some comments. :)
3. This is assuming that _javascript_ is enabled
right?
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.
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.
5b. What is "Lego is a great example..."? Do you mean
Lego as in the building bricks? How does that relate to web
usability?
6. I couldn't agree more!!
Chris.
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Glen Lipka
Sent: Tuesday, November 14, 2006 9:49 AM
To: jQuery Discussion.
Subject: Re: [jQuery] How to display error/validation messages?
This was an early prototype for what is now currently live on all of
Intuit's websites.
From a UX design standpoint, here are some guidelines:
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.
2. Have a visual indication next to required fields (background color,
asterick, something). Make sure they see it.
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.
4. Allow for keyboard TAB input as well as mouse click input.
Remember, sometimes users cut/paste.
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 "Contraints". 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)
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".
I hope this is helpful.
Glen
On 11/14/06, Chris W.
Parker <[EMAIL PROTECTED]> wrote:
On Tuesday, November 14, 2006 7:35 AM Klaus Hartl <> said:
> Most browsers don't focus a field from
> a link pointing to the field's id, so I usually add a click event to
> explicitly focus the form element. The field to focus is simply read
> from the link's href...
Unless I'm misunderstanding your implementation, your problem is that
you're using the wrong tag. Don't use an anchor+js to link an error
message with its field. You should be using <label> instead.
<label for="">This field cannot be empty.</label>
<input id="first_name" type="text" size="20"/>
You can have as many <label>s as you want pointing to the same field.
This will make the browser put focus is the field where
name="id_of_form_field".
<div id="errors">
<label for="">Error with First Name</label>
</div>
<form ...>
<label id="first_name">First Name</label>
<input id="first_name" .../>
</form>
Both of the above labels will put focus in the first_name field when
clicked. Use CSS to style the label(s) however you want.
Chris.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
