Pulling examples from Gowalla, which helpfully provides your user id photo, Quora, which immediately offers to create an account if your e-mail isn’t found, and his own Bagcheck, which is experimenting with a drop down list of usernames as you type, Wroblewski’s post is an excellent tour of some of the best UX login forms on the web.
There is one important qualification for these forms — the assumption is that your site has public, searchable profile pages, otherwise exposing user data (like username or photo) would be a privacy no-no. Of course it’s worth considering that, while exposing usernames in the login forms might not actually violate anyone’s privacy (any more than a public profile already does), that doesn’t mean your users won’t perceive it as a privacy violation.
For those worried about security the same caveat applies. If your site already has public profile pages then you’re not exposing any data that can’t be found with a simple Google search. Provided your backend security protocols are built correctly, making a more usable login form won’t make your site any less secure.
The HTML5 specification adds a new set of tools for handling web forms. Generally referred to as HTML5 Forms, the new tools enable browser-side form validation.
It’s important to understand that HTML5 Forms are not meant as your sole means of validation. You still need to do server-side validation and, of course, sanitize the user’s input before you store anything in a database.
In fact, HTML5 form validation is less validation and more, as developer Mounir Lamouri puts it, “like an adviser guiding you in filling the form.” In other words, HTML5 forms provide a quick means of very basic validation to let users know about errors before they submit the form.
Obviously, with very limited browser support at this point, HTML5 forms aren’t ready for prime time. But if you’d like a glimpse of what’s coming, Lamouri’s overview makes a great introduction. If you’d like to experiment with the tools outlined in Lamouri’s post, you’ll need to grab a copy of Firefox 4 beta 7.
For further reading on HTML5 forms, be sure to check out the forms chapter in Mark Pilgrim’s Dive into HTML5, available for both online and offline browsing.
Sometimes it feels like the whole web is made of forms. Other than simple links, forms are the most common way to get information from the user. One of the recurring issues I have is deciding what to do with the form labels. That’s the phrase that tells users what you expect to go into an input field.