The 4 layers of a form

In our previous article, we outlined some of the characteristics 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 comprises the:

  • questions
  • answer options or spaces, and
  • notes, tips and instructions

as illustrated in Figure 1.

Figure 1: A question from an application to work with children, showing the components of the Q&A layer.

Each question on your form should attempt to collect information about one and only 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.

Flow can also refer to:

  • the grouping of questions into sections
  • the grouping of sections into steps
  • the grouping of steps into a form.

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

Figure 2: In this diagram of part of the form's Flow, the questions in the "Your details" step are shown, as is the link to the "Contact details" step. Title has grey hashing to show that it is an optional question.

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.

Figure 3 shows some of the Layout elements of our working with children form. We can change the styling of these elements according to things like brand, screen size and device type. But beware: the styling of these elements is not just about aesthetics, but also usability.

Figure 3: Some of the elements that make up the layout of our working with children form.

Process

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

  • who owns the form
  • who has input into its design
  • how users can access the form
  • ways the form can be submitted
  • data entry and/or scanning
  • processing, distribution and use of the resulting data.

Figure 4: The overall user experience is heavily impacted by what happens beyond the physical artefact that is the actual form.

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
  • Co-operative.

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 co-operative as possible. Next we examine the questions for clarity, conciseness, cleverness and co-operativeness, 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.