Webmonkey » forms

Creative UX Designs to Improve Web Forms

Scott Gilbertson — Tue, 23 Aug 2011 15:49:26 +0000

Extra options in Gowalla's login form

We’ve looked at how the new HTML5 form tags improve the process of building web forms, but you don’t need to wait for better browser support to improve your forms today. Luke Wroblewski, web developer and co-founder of Bagcheck (which was recently acquired by Twitter), has a great post over at Smashing Magazine detailing various ways of improving the ubiquitous login form.

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.

See Also:

Working With Forms in HTML5

Scott Gilbertson — Mon, 15 Nov 2010 18:37:09 +0000

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.

The new forms spec is essentially designed to replace any JavaScript validation tools you might be using now — for example, ensuring that required fields are filled in or that a tel field actually contains a telephone number.

Lamouri has written a good basic overview of how to use HTML5 forms in Firefox 4, one of the few browsers that supports most of the Forms spec. WebKit browsers are a little behind but still support some of the spec.

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.

See Also:

Action

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

Action is a Form attribute that communicates with the common gateway interface (CGI) program to process.

For example, if you entered “bananas” to the following form:



Please process this:

The HTML form would send the input “bananas” to the cgi script. To the cgi script, the action would look like: ../processor.cgi?food=bananas

CGI

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

Common Gateway Interface (CGI) describes a server-side program that receives and processes information sent from a web form.

CGI programs are the most common way to exchange and process information between a web page. They can be written in any practically any programming language and are run on web servers.

How to Design Form Labels

Adam Duvander — Wed, 06 Aug 2008 01:05:01 +0000

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.

How do you align your labels?

Yahoo’s Luke Wroblewski (you can call him LukeW) is the preeminent form expert. He has performed usability studies and come up with some good information about form label alignment.

Sadly, Luke won’t tell us which is best, because it depends on the situation. Here’s a summary of the pros and cons.

Alignment	Pro	Con
Top	Users fill out form fast Label close to the field	Takes up a lot of vertical space
Left	Easy to scan the labels More vertical space	Labels sometimes far from fields Takes users a long time to fill out
Right	Label close to the field More vertical space	Hard to scan labels

Once you decide which to use, Sitepoint has a nice tutorial.

What comes after your label?

A colon after a label is fairly common (though strangely absent from LukeW’s examples above). This may be a remnant of command line days. Though common, many are adamantly against the practice.

Christian Watson read up on the studies and reports that it doesn’t matter. So stop bickering, and just do what feels right, brother.

What else about labels?

There’s probably so much more we could talk about labels. Like how you should be using the for attribute, for example. What other issues do you run into when you label your forms?

[Label mockup courtesy of Luke Wroblewski]

See also: