The 4 layers of a form

In our previous article, we outlined some of the charactistics that make forms or questionnaires good or bad, from a user's point of view.

This is all good and well, but where should a designer start when faced with a blank page or existing form? What's needed is some way to break the form up into manageable components that can be worked on one at a time.

Breaking the form into layers

We have found that it is immensely useful to think of a form or questionnaire as having 4 layers:

• Questions and their corresponding answer formats, which we call “Q&A”.
• The relationship between the questions in the form, which we call “Flow”.
• Physical layout of the form, be it paper or electronic, which we call “Layout”.
• Workflow and activity surrounding the form, which we call “Process”.

Q&A

The Q&A layer of a form is the question, answer options and notes/tips/instructions, as illustrated below.

Each question on your form attempts to collect information about one concept. Therefore, it is the smallest (practical) unit that a form can be broken up into.

Flow

Flow refers to the relationship between questions on the form.

The most common relationship between questions is conditional branching, where the answer to one or more earlier questions will determine what later questions are presented to the respondent. For example, questions collecting credit card information should only be asked if the respondent has chosen credit card as their payment method.

Form Flow is often documented via a flow diagram, such as the one shown below. In such a diagram, the elements are individual questions and the links between the elements describe their relationship.

Layout

The third layer of a form is layout and visual design. This layer is all about the overall structure of the page, and includes things like:

• Margins and spacing.
• Typography.
• “Page furniture”, as Caroline Jarrett calls it (logos, headers, footers etc).
• Hierarchy and cues.
• Progress indicators and page numbers.

This figure shows some of the Layout elements of a tax form.

Process

The final layer of the form is the biggest: process. It's about everything that happens outside the actual form, including:

• Who owns the form.
• Who has input into its design.
• How people access the form.
• Ways the form can be submitted.
• Data entry/scanning.
• Distribution of resulting data.

Using the layers

Generally, we find it is best to design or review a form in the following order:

1. Process
2. Q&A
3. Flow
4. Layout

Process comes first because it will heavily influence the design of the other layers. For example, knowing how the form data is going to be captured (e.g. Optical Character Recognition) will influence how the form is to be laid out.

More often than not, exploring the characteristics of the process with stakeholders will also highlight gaps or differences in their thinking about the form. Filling these gaps and resolving these differences is best done at the early stages of design, to prevent rework and/or disappointment with the finished product.

After bedding down the process, the designer can jump down into the detail and work on the Q&A. Here the focus is on getting the right wording so that the question collects data that will best meet the research need. Note that the Flow usually emerges naturally as part of the Q&A process.

Finally comes Layout. This may come as a surprise, as it is the opposite to what many (maybe even most?) people do when designing forms, namely start by drawing the form up.

Putting Layout last, however, is the most efficient approach. If layout is done first, or at the same time as question design, then changes to questions require changes to layout as well. Separating the questions out into their own, earlier, layer means that by the time it comes to design the layout, the questions are finalised, halving the work required.

Similarly, the Flow is likely to influence the layout, as it will determine the best break-up into sections, pages and screens.

Putting the layers and the 4 Cs together

We can use the layers to help implement the 4 Cs of a Good Form, which were:

• Clear
• Concise
• Clever and
• Contextual.

This is done by applying the 4 Cs to each layer, one by one. For example, we can begin by ensuring the process is as clear, concise, clever and contextual as possible. Next we examine the questions for clarity, conciseness, cleverness and context, and so on.

A journey of 1000 miles begins with the first step

Approaching forms design or review in this systematic way makes a daunting task more manageable. The framework that this approach provides is also very useful for communicating a proposed design, or problems with an existing form, to stakeholders. Together, the 4 Cs of a Good Form and the 4 Layers of a Form therefore give not only an approach for maximising the quality of design, but also managing the project that is the design process.