Accessible Form Layout Essentials

There are several different ways in which you can lay out a form. The method you choose depends upon how long the form is, its purpose, how often it will be used by each person who has to fill it out, and, of course, the general aesthetics of the web page.

It’s generally considered most efficient to have one form element per line, with the lines stacked sequentially one on top of the other, as most Western-language web pages are designed to scroll vertically rather than horizontally. This allows users to follow the path to completion easily and focus their attention on entering one piece of data at a time.

For each form element in a left-to-right reading system, it’s logical to position the corresponding label in one of three ways:

  • directly above the form element
  • in a separate left column, left-aligned
  • in a separate left column, right-aligned

Each of these approaches has its own advantages and its own look, so consider these options when you’re deciding how to lay out a form for a particular page.

Labels that are positioned directly above a form element have been shown to be processed most quickly by users. The compact grouping between label and element reduces eye movement by allowing the user to observe both simultaneously — here’s an excellent article published by UXmatters. However, this type of positioning is rather utilitarian, and isn’t the most aesthetically pleasing layout. It also has the disadvantage of occupying the most vertical space of the three layouts, which will make a long form even longer. Generally, top-positioned labels work well for short forms that are familiar to the user — see the comment form in the image below, which is from a previous incarnation of the Dress For Dialogue web site.

position-labels-top

Labels that are positioned in a column to the left of the elements look much more organized and neat, but the way in which the text in those labels is aligned also affects the usability of the form.

Right-aligning the text creates a much stronger grouping between the label and the element. However, the ragged left edge of the labels can make the form look messy and reduces the ability of users to scan the labels by themselves, as Luke Wroblewski argues in his article on the subject. In a left-aligned column, the labels instantly become easier to scan, but their grouping with the associated form elements becomes weaker. Users have to spend a little more time correlating the labels with their elements, resulting in slower form completion. An example of left-aligned labels can be seen below.

position-labels-left

The right-aligned column layout shown below allows for quicker association between label and element, so again it’s more appropriate for forms that will be visited repeatedly by the user. Both layouts have the advantage of occupying a minimal amount of vertical space.

position-labels-right

What good examples of accessible forms have you seen recently? Add them in the comments.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://twitter.com/nathj07 Nathan Davies

    There are times when a form is needed and there are times when a form is simply there due to lack of imagination. A great example of the later is the often unnecessary sign-up form. Just let folks interact with your site and use a process of gradual engagement (http://www.alistapart.com/articles/signupforms). You want folks to join so don’t put up barriers.

    In terms of comments forms they are so short that usability becomes a simple factor to consider and the overall design can take precedence. When talking about very long data gathering forms I think the idea of splitting the form into a number of sub-sections or even smaller forms is smart as it allows users to focus their attention on one set of data at a time. The key here is to give clear indication of progress.

    In both cases the instructions must be clear and the labels obvious in meaning. Any ambiguity will cause people to give up, a negative response – such as a missing mandatory field that wasn’t marked at such – will frustrate users.

    • http://designfestival.com Design Festival

      Hi Nathan,

      Thanks for your feedback on Design Festival, it will always be welcomed.

      I have forwarded this on to our development team.

      Thanks,

      JP Toral
      Customer Support Officer
      sitepoint.com

  • http://twitter.com/cjforms Caroline Jarrett

    Thanks for tackling one of the most-discussed topics in forms design, and bringing together some of the arguments for and against each arrangement.

    I’d like to ask you to correct one error. You quote Matteo Penzo’s 2006 article in UXmatters, which is indeed well worth reading, but you introduce it with this sentence: “Labels that are positioned directly above a form element have been shown to be processed most quickly by users”. You then go on to say, correctly, that his article showed that for the forms he tested, eye-movements are reduced when the labels are above the forms. Your error is to equate eye-movements with processing.

    Processing the label, which I believe means ‘making sense of it and thinking of the answer to the question’ is a more complex and lengthy task than simply moving the eyes over it.

    There is no evidence in Matteo Penzo’s article to suggest that processing the label is quicker with top-aligned labels.

    There is more recent evidence that the problem is more complex, even for simple forms such as a ‘contact us’ form. For example, Das, McEwan and Douglas (2008) “Using eye-tracking to evaluate label alignment in online forms”, (NordiCHI08: Proceedings of the 5th Nordic conference on Human-computer interaction: building bridges) found no difference between top-aligned and right-aligned labels.

    For complex forms, where the labels themselves may be complex, there’s a strong argument for making the labels left-aligned because that makes them easier to read.

    Finally, it’s crucial to remember:
    1. What the labels say / ask about is more important to users than where they are positioned, provided that…
    2. Each label is clearly and unambigously associated with the field it belongs to, both visually and using the ‘label’ attribute (for people using assistive technology).

    Best
    Caroline