Recently we were asked to provide advice on alignment in forms.
This was far from a rare event: questions about alignment seem to come up regularly. Unfortunately, the resulting debates are all too often based on personal preference and speculation, when there is actually considerable research providing clarity on the issue.
In this article we summarise the research to give specific and easy-to-use recommendations on this important aspect of a form’s design.
Different types of alignment
There are a number of different dimensions to the issue of alignment, namely:
- how questions are aligned with respect to each other;
- how question text is aligned (e.g. above or to the left of the answer field);
- in closed questions with multiple response categories, how these response categories are aligned; and
- how many ‘edges’ of different alignment there are altogether in the form.
Let’s look at each of these dimensions individually (and with some illustration to make the whole thing clearer). But before we do, please note that the recommendations in this article:
- Are for forms in an English-speaking or equivalent — in terms of reading pattern — context. The recommendations would need to be appropriately modified for cultures that do not read top to bottom, left to right.
- Provide a default approach for forms design. There are always exceptions to the rule, and it is important to adjust for your specific context as necessary.
How to align questions with respect to each other
Given that people work from top to bottom of the page or screen, its best to have questions appear one beneath the other, rather than side by side. This creates a consistent vertical rhythm and contributes to a “clear path to completion”, as Luke Wroblewski calls it.
Figure 1: Questions vertically aligned, as highlighted by the blue arrow.
There is often the temptation to squeeze a question or two in beside another, so that less vertical space is required. However, this usually results in some parts of the form having the whole line taken up by just one question, while other parts of the form have multiple questions on a line. This inconsistency:
- hinders any learning the form-filler might otherwise make about the way to move through the form, thereby slowing them down; and
- increases the risk that the form-filler will fail to see — and therefore answer — one or more applicable questions.
Figure 2 shows a form that has questions sequenced horizontally where possible. It is very likely that some of the fields that are towards the right hand side of the page will be neglected, especially if the form-filler does not happen to fill the preceding field to its rightmost edge.
Figure 2: Questions horizontally aligned.
A better way to improve the usage of space on the form is to divide it into two columns (see Figure 3). If the page is divided into two columns, the alignment of questions applies within each column. That is, questions should run from the top to the bottom of the first column, then from the top to the bottom of the second column, then on to the next page. Note that for reasons which we’ll cover in another article, it is usually unwise to use multiple columns in an electronic form, particularly a Web-based one.
Figure 3: Page from a two-column form.
How to align question text
By default, the best location for question text is above the answer field(s), as illustrated in Figure 4.
Figure 4: Question text positioned above the answer field.
This approach is recommended by the respected (late) Australian forms designer Robert Barnett and has recently been shown to perform better, in terms of completion times and rates, than placement of the text to the left of the answer field (see “Label placement in forms” by Matteo Penzo).
Placing the text above the field has two other considerable benefits. Firstly, it simplifies translation of the question text into other languages, as it doesn’t matter how short or long the translated text is. Secondly, it avoids the problems that people with dyslexia, screen readers or cognitive disabilities may encounter with text placed to the left of the field. (We will discuss more below.)
The one key disadvantage of placing the question text above the answer field is that it markedly increases the amount of vertical space the form requires. For paper-based forms this means more pages in each print run and for electronic forms, more scrolling and thus weaker user orientation. Therefore, in some cases it may be more appropriate to have the question text placed to the left of the field, provided the proper text alignment is used…
The four options for aligning text are flush left, flush right, justified and centred (see Figure 5). Note that the terms “ranged” and “ragged” are often used in place of “flush” to describe text alignment:
- flush left = ranged left = ragged right; and
- flush right = ranged right = ragged left.
Figure 5: Four key methods of aligning text.
When the question text is placed above the answer field, it should be flush left because it:
- is consistent with, and the established best practice, for most reading material;
- is, in general blocks of text, more readable than flush right or centred;
- is as readable as justified text, but requires no manual intervention to fix word spacing issues; and
- reinforces the vertical path to completion.
When the question text is placed to the left of the answer field, the (perhaps counter-intuitive) recommendation is to have that text be flush right. The aforementioned research by Matteo Penzo has shown that flush right performs markedly better than flush left. It seems that the advantage of having the text close to the answer field outweighs the disadvantage of the ragged left edge (although for people with dyslexia, this may unfortunately not be the case, which is why the ideal approach is placing the label above the field).
Figure 6: Question text that is left of the answer field, and flush right.
Some people argue that the text should be flush left rather than right as this makes it easier to scan quickly down the form. This may be true, but the predominant task that we are trying to support with our design is filling the form in, not scanning the question text looking for a particular word or phrase. As such, we want to choose the design approach that best supports the primary goal, namely flush right.
It is also important to note that having the text flush left makes associating it with its corresponding answer field especially difficult for people who use a screen magnifier or have cognitive difficulties. This is because the different lengths of question text will mean in some cases there is a large gap between the end of the text and the start of the answer field.
This is apparently at least part of the reason that the ISO 9241-12:1998 (Ergonomic requirements for office work with visual display terminals part 12: presentation of information) and the American National Standard HFES 200 (Human Factors Engineering of Software User Interfaces, August 2008) recommend question text generally be flush right unless all lines are of a similar length.
How to align response categories
(If you’re unfamiliar with the concept of response categories, you might want to check out this other article of ours: “Closed question response categories“.)
Response categories should be vertically aligned — i.e. category B comes below category A — for the same reasons that this recommendation was given for whole questions.
Figure 7: Response categories vertically aligned.
As for questions, there is often the temptation to place response categories beside each other, especially when their labels are short. Questions about title (e.g. “Mr”, “Mrs” etc) are often the prime candidates for such alignment, because a considerable amount of vertical space could often be saved by aligning the response categories horizontally.
As we saw when discussing questions, placement of more than one item on a line is likely to slow the form-filler down and lead to higher error rates. There is an additional problem when considering this approach for response categories, namely the weakened association between the response category label and its corresponding field.
This is easily illustrated in Figure 8. In both cases, the space between the label and the field is exactly the same. However, it is much more obvious which field is associated with which label when the categories are vertically rather than horizontally aligned.
Figure 8: It is easier for the form-filler to associate response category labels with their corresponding fields when using vertical alignment (on the right) than horizontal alignment (on the left).
This problem can be mitigated somewhat by adjusting the horizontal spacing, and in some cases it will be necessary to take this approach. However, the problem can usually be alleviated altogether, and with much less work, by aligning response categories vertically rather than horizontally.
Text alignment for response categories
As per the question text, we also have to decide whether the labels for the different response categories (also called “captions”) should be flush left, flush right, justified or centred. This is often one of the most discussed and debated aspects of a form’s design, partially because the common practice for Web forms is different from the established print domain.
When it comes to paper-based forms (including electronically distributed print-and-fill and fillable PDFs of existing paper forms) the evidence is pretty clear that the best approach is to have the category labels:
- placed to the left of their corresponding fields; but
- flush right.
Figure 9: Response category labels to the left of the field, and flush right.
Over 25 years ago Patricia Wright showed that this approach performed the best and Robert Barnett’s finding over decades of user testing have been consistent with Wright’s findings.
Of course, when it comes to designing for the real world, the answer is rarely this simple. In the case of question of alignment for response category labels and fields, complexity is introduced because of the Web.
Forms on the Internet have historically placed the label to the right of the field — as per Figure 7 at the start of this section — partly for programmatic reasons. In particular, it is difficult, on the Web, to make the response fields across multiple questions align vertically (something we recommend in the next section).
Although these things are difficult to quantify, it’s probably reasonable to say that this approach to label placement has become a convention by default, much like the Microsoft approach to desktop software design has become a convention by default.
For these reasons, response category labels on Web forms are likely to continue to appear to the right of their corresponding fields. As such, expect some interesting times as the historical dominance of paper-based forms clashes with the rising popularity of transacting electronically.
The number of ‘edges’ in the form
The final aspect of alignment we are going to consider is the number of ‘edges’ of different alignment that the form has as a whole.
The start or finish of a block of text or white space creates an ‘edge’. This edge may be the end of an answer field, the boundary of a column or the indentations applied to all question text.
Compare the Figures 10 and 11 below. Figure 10 shows a form with many edges while Figure 11 shows a form with relatively few edges. Which one do you prefer?
Figure 10: A form with a high number of edges.
Figure 11: A form with a low number of edges.
There is evidence that designs with fewer edges are not only more aesthetically pleasing but also easier to use, when compared to designs with a greater number of edges (Tullis et. al.). As such, we recommend that consistent elements are consistently vertically aligned. That is, text answer boxes of the same length should start and finish at the same vertical point, all questions should start at the same vertical point and so on.
To summarise, the default approach for alignment recommended by Formulate Information Design is:
- Questions vertically aligned.
- Question text above the answer field, and flush left.
- Response categories vertically aligned.
- For paper forms: response category labels to the left of their corresponding fields, and flush right.
- For Web forms: response category labels to the right of their corresponding fields, and flush left.
- Minimise the number of vertical ‘edges’ on the form.
Barnett, R. (2005). Forms for People. Robert Barnett and Associates, Canberra.
Snooks & Co (editors) (2002). Style manual for authors, editors and printers. 6th edition. John Wiley & Sons, Australia.
Tullis, T.S., Connor, E., LeDoux, L., Chadwick-Dias, A., True, M. & Catani, M. (2005). A study of website navigation methods. Paper presented at the Usability Professionals Association 2005 Conference.
Wright, P. (1980). Strategy and tactics in the design of forms. Visible Language, Volume XIV, Number 2.
Wroblewski, L. (2008). Web Form Design. Rosenfeld Media, New York.
Label left or right align?. Discussion on the Interaction Design Association website. Retrieved 20 November 2008.