Designing Web Forms – Label Placement & Primary vs. Secondary Actions

As previously mentioned, user experience practitioners often rely on common sense, convention and past experience when making design decisions. Usability research may seem like overkill, but even when you’re sure of your assumptions, it’s always good to double check.

For instance, Luke Wroblewski once wrote an article in which he provided some very sensible guidelines for Web Application Form Design. Matteo Penzo and the folks at UX Matters decided to run some usability tests on the subset of those guidelines that dealt with label placement. The findings were not entirely in line with Wroblewski’s assumptions – a discovery which he apparently took to heart, since he later performed his own usability tests regarding primary & secondary actions. These tests were preparation for his recent book, Web Form Design: Filling in the Blanks (which I will probably have to purchase now that I notice how interesting it looks). What follows is a results summary for both of the aforementioned studies, for quick reference.

Label Placement

• Place labels above the input fields where ever possible. Leave adequate spacing between each label-field pairing.
• If you must place labels beside (to the left of) fields, right-align them.
• Make sure the visual weight of your labels does not compete with that of your fields (bold labels conflict with the default field styling).
• Drop-downs are distracting. Place them after more important fields. Use the default item in the list as the field’s label.

Primary & Secondary Actions

• You can minimize form completion time by aligning primary actions with input fields.
• When you have a form with a primary action (ex. “Submit”) and a secondary action (ex. “Cancel”), style the secondary action with less visual weight.
• Users prefer error prevention over decreased form completion time.
• Don’t include secondary actions on a form unless you actually need them.

One thing I wish they would have tested in the label placement study is putting labels inside the form fields. These labels would disappear when a user clicks to input data in that field. Ideally they would reappear if the field loses focus and is not yet populated with data. This technique saves screen real estate and makes for a cleaner design.

The primary & secondary actions study revealed an interesting preference on the part of users: they’d rather be prevented from making errors, even if it means sacrificing a bit of time. This could be a point in favor of inline validation/contextual help. Usability research on these techniques would likely yield highly valuable results. One question that immediately comes to mind is whether real time or on-submit validation is preferred.

Do you know of any recent studies about compact form labeling or inline validation? Have you discovered or conducted any usability studies of interaction design topics? What topics in user experience do you want to learn more about?