Glen Lipka wrote:
Exciting!
Here would be my (humble) suggestions:
1. Required fields. As a general rule, you should have a * asterisk
to the left or right of the input field in a straight vertical line to
indicate required. Bold is ok, but it's not quite enough to let the
user know.
2. When the user clicks submit, it puts all these words on the right
in red. Its sort of overwhelming. Highlighting the input field is
more important than red to the right. Red to the right makes more
sense as Inline errors. Like email or password format.
Gonna work on that, though with a different example.
3. It still could use something at the top. Like "You missed X
field(s). They have been highlighted below. This implies you should
scroll to the top of the form when submit with this kind of error.
Think of a long form, where the user clicks submit and missed the very
first field. It would be offscreen otherwise.
That is something the error container should be good for.
4. When doing it right, the checkbox is a nice touch, but I would make
it a little more subtle. Additionally, use Swiss Design techniques.
This means everything lines up. So all the checks line up vertically.
I konw the Swiss army knife, but hadn't heard of "Swiss Design". Its
mostly a CSS/layout issue, but nonetheless important.
5. As a general rule, I usually make form fields taller. Users have
terrible fine motor skills. A big box is easier to input. Check out
the username and password fields in Wordpress.
http://www.commadot.com/wp-admin
Yeah, those are hard to miss.
6. Onblur of the password field. it's usually good practice to erase
the field once you have a mismatch. It's near impossible to try to
fix it with the stars there. Maybe that could be an option in the
setup? like errorClearInput: false; or whatever.
I don't like that clearing for other fields, but I agree that its good
for password fields. Thats the behaviour most users should be used to
anyway (eg. OS login, PIN numbers)
7. Looking at the setup. I like the {0} to represent the number, but
what if the number is 1. Then it would say, Enter at least 1
characters. Singular vs. Plural. It's a nitpick to be sure, but it's
good grammar. if you could say minLength: String.format("Enter at
least {0} character{"s"}") or whatever...something to say greater than
1 gets this otherwise, default. It's not critical, but its a nice to
have.
Tricky, but not impossible. I see what I can do about it.
I recently just launched a form that I tried, but couldn't use the
validation plugin..
Check out the form. I actually have some issues with it, but its ok.
http://app.marketo.com/signup/signup/code/standard
<http://app.marketo.com/signup/signup/code/standard>
Gonna take that as the base for the next example to work on.
Notice the tooltip on the password. I used hoverIntent. Cool
plugin. That would be a kickass addition to your validator.
Like have a "hint" declaration which would insert a questionmark with
hover attached. And if hoverIntent exists, then it could use that
instead?
I really have to check how to build a nice tooltip plugin on top of
hoverIntent.
Anyway, I hope this helps out some. :)
Thanks again, Glen!
--
Jörn Zaefferer
http://bassistance.de
