UIEtips Article: Web Application Form Design

Jared Spool

June 26th, 2007

UIEtips 6/26/07: Web Application Form Design

Web-based applications are quickly becoming critical components of the strategy of many organizations. In our research at UIE, we’ve seen that creating usable forms is essential to the success of these applications.

Forms are crucial for users to complete many online transactions, ranging from sign-up forms introducing new customers to your site to checkout forms finalizing your users’ purchases. However, until recently, the knowledge and skills to design a great form was still only available as scattered lore.

In this week’s UIEtips, we’re publishing an article written by Luke Wroblewski, a Principal Designer at Yahoo!, where he discusses how form layout and visual elements can have a real impact on users’ success with your web applications.

Read today’s UIEtips article.

Do you have any best practices for designing forms? What usability problems have you encounted with your web forms? As always, I’d love to hear what you’re doing. Join the discussion below.

[If you find this article interesting, you’ll definitely want to attend the User Interface 12 Conference this November 5-8, where Luke Wroblewski will present Site Seeing: Communicating Successfully with Visual Design. This in-depth seminar will provide you with practical insights and strategies for boosting your site’s visual appeal and delighting your users.]

8 Responses to “UIEtips Article: Web Application Form Design”

  1. Jana Steiger Says:

    My form usability story is really more of a wizard story. We have a rather lengthy e-mail alert creation process that used to live in a bunch of really long forms, and a couple of years ago we compacted these into a 5-step wizard. It’s nested inside our site navigation, so to prevent users from losing their work we added the requirement that a user who clicked a tab before their process was complete would be informed that their work was not saved, and given the choice to complete their alert or navigate away from it.

    Well, our developers *hated* this requirement. They said it made no sense, was not a web behavior, was next to impossible to implement, and amounted to putting our users in wizard jail. No matter what rational arguments, best practices research, threats, cajoling, beer or tears we tried, we got nowhere, and this requirement was never built.

    To this day, we refer to this battle of wills as “the Azkaban issue.”

  2. blog.dsetia.com» Blog Archive » UIEtips Article: Web Application Form Design Says:

    […] UIEtips 6/26/07: Web Application Form Design Luke Wroblewski discusses how variations in the alignment of input fields, labels, calls to action, and their surrounding visual elements can support or impair different aspects of user behavior. Source: [Link] […]

  3. Michael Zuschlag Says:

    I’m inclined to agree with Wroblewski that shading is a too “heavy” solution for the problem of visually associating left-aligned labels with fields, but I’d like to see it tested empirically before making any final conclusion. As for alternatives, there’s one ancient solution from the era of dead tree media: leaders.
    Label . . . . . . . . . . . [Field1]
    Longer Label . . . . . [Field2]
    Even Longer Label: [Field3]
    I’d like to see an experiment involving that too. Anyone out there looking for a senior thesis topic?

  4. Joseph Selbie Says:

    In all enterprise web applications we’ve designed over the years (e.g. Cisco, KPMG, Cartus) vertical space is always at a premium, making the placement of the label in the same horizontal alignment as the form field a necessity.

    We’ve designed using labels aligned left and aligned right against the form fields, and our users have consistently prefered the aligned right style. To overcome any difficulty in scanning, as Luke suggests is the disadvantage of the right alignment, we’ve always limited the number of label/field combinations to 3 to 6 in any one sector or grouping within a form.

    We have found that the logical grouping of label/field combinations — and giving that group a name and sub-head within the form — is more important than anything else to promote usability, efficiency, rapid scanning and lack of eye strain for users of large form screens.

    Once you create groups of labels/fields make sure you align them consitently on a grid. This makes for a lot less “eye ping-pong” for your users.

  5. Jermayn Parker Says:

    Very good points and to be honest I have never thought about those reasons but it makes sense.

    However a few things I would like to raise:
    1) I dont agree with Michael as I think the …… makes the form to cluttered.
    2) In the comment section you have the fields on the left and the field titles on the right. That could work nicely. Or do you think its messing with what we know too much?
    3) Another option could be to keep the field titles in the actual field itself.

    However in saying all that I do like the background solution.

  6. tmthai.com All you need for the Website!!!!» Blog Archive » Web Application Form Design Says:

    […] Send us your thoughts on this article on the UIE Brain Sparks blog. […]

  7. Personal Injury Attorney WebLog » Blog Archive » Integrate QuickBooks into a Customer Self-Service Portal Says:

    […] UIEtips Article: Web Application Form Design » UIE Brain Sparks … on users’ success with your web applications. Read today’s UIEtips article . Do you have … from your own site. 5 Responses to “ UIEtips Article: Web Application Form Design http://www.uie.com/brainsparks/2007/06/26/uietips-article-web-application-form-design/ […]

  8. Roly Says:

    Luke Wroblewski article does provide some guidelines to the ‘labels’ on a form but unfortunately it does not provide any guidelines on the alignment of the form fields ie the characters within the fields. Should they be aligned to the left or the right? Is there a difference if all the field types are numerical? I researched about 50 website and the jury is still out with 50% aligning numerical form fields to the left…..Has anyone come across any evidence that these should be aligned to the left or the right?

Add a Comment