All posts tagged ‘forms’

File Under: UI/UX, Visual Design

Creative UX Designs to Improve Web Forms

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:

File Under: HTML5

Working With Forms in HTML5

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:

File Under: Glossary

Action

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:

<form action="../processor.cgi">

Please process this:

    <input name=food><br>



    <input type=submit>

</form>

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

File Under: Glossary

CGI

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.

File Under: Visual Design, Web Basics

How to Design Form Labels

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?

Left, Right, and Top Aligned Form 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: