A friend of mine and a skilled developer, Marc-Antoine Ross from DevTaxi, did a great review of Web 2.0 forms and I think it's worth reading! So here it goes:
I decided to review the registration forms from most of the sites that made it to the invaluable Web 2.0 Awards.
Most of the registration forms were very disappointing.
- Some will validate on submit, but will display very unclear messaging to the user when an error occurred
- Some look like an entry form to the FBI (Yahoo!)
- Some display the password in clear text in the form!
- Most of the registration forms had no JavaScript / AJAX validation at all.
My Recommendations
- What can be validated through JavaScript should be done on submit or on change (email, password match, password strength)
- What can be validated through AJAX (username availability, email already registered) is a nice to have
- On submit, all errors will be reported at once with invalid fields highlighted, instead of stopping after each error found
- Each field's requirements should be displayed near the field
- Focus should be clearly changed to inform the user of the error to be corrected (focus to the first error found in the form)
- Error messages should be clearly visible. Different colors for errors than positive feedback. Feedback containers should be positioned in such a way the form doesn’t shift down when messages are changed.
- An input’s background and border color should be changed (to red) on error and its border to bold when focused.
- Terms should be "Sign in" and "Register". I find "Sign in" and "Sign up" too confusing. Where do I start again? Oh, that X at the top right
- Use labels in your forms!
A Few Good Examples:
1.Validates inputs on change, suggests improvements / errors. Not visually attractive.
2.Simple and efficient
3.Nicely designed, good level of feedback to the user
4.I like the information provided to the user for each input
Again, thanks Marc-Antoine. Do you guys have any other recommendations or suggestions?
I am still looking for good examples of registration forms!
At my company we have a philosphy of not wanting to lose customers no matter what. Because of this our forms are very easy to use.. and have no error detection. People constantly fill in date fields wrong etc. but we get the maximum number of sales inquiries and our sales staff still sells to those bad form fillers. Sometimes simplicity makes more money.. As for shiny web 2.0 forms https://dojotoolkit.org/ has decent form capabilities, you have to browse through their site to find it, "see it in action" >> "form widgets" >> "Form Tour" or "Form Validation"
I did a nice one for IFILM around January of 2006, but it went away with the old site design. Jeff Veen posted some video of it in action at his blog, though: https://www.veen.com/jeff/archives/000906.html
Two other great modules with many of these same features (one for registration and one for just forms). Modules work with ASP.NET / DotNetNuke and they will see release a web part for SharePoint 2007.
Dynamic Registration
Dynamic Forms
Also here:
https://www.datasprings.com/Products/DNNModules/DynamicForms/tabid/657/Default.aspx
I can not agree about the validation - validation has to be done at the server as well! Otherwise there are serious accessibility problems for users not having JS etc.
Web 2.0 must also care about accessibility.
PS For non-native English speakers, Sign in is sometimes also confusing. Make it simple (or keep it simple stupid / KISS): Login, Register
Much easier to comprehend.
Thanks for the addition dusoft. I agree 100% with you that the validation should be done on the server side AS WELL. Not only for accessibility, but for security too!
Thanks for these informations. Forms seem always simple to create but can take a lot of time to realize and make them easy to use and understandable by the basic users which are more and more numerous.
By the way : "Bonjour de Lille, dans le Nord de la France"
I agree that the info provided on #4 is excellent. Not sure if you have seen the AJAX Login demo at snipgen.com... it could have better info while filling out the registration info but otherwise is really a great example.
This is a great post. It comes just as I start to re-evaluate my registration form. I was actually going through the web 2.0 awards mentioned looking at how they present registration forms and their front pages, and then Marc-André goes and does it all for me.
Cheers!
Great post, on a very interesting subject. Great forms on websites are perhaps one of the biggest keys to create a nice user-experience.
digg here: https://digg.com/programming/Web_2_0_Registrat...
Another one I think is good is the bbc.co.uk sign up forms.