JavaScript is required

Layout of forms - digital guide

How to approach form layout.

How to approach layout

Form usability is greatest when the layout of the screen is clean, simple and clear. To achieve this, start with a blank screen and think carefully before adding each visual element.

Only add elements if they help communicate with the user. For instance, colour should be used sparingly, and only to convey brand or to highlight (for example, main action buttons and error messages).

Remember, each visual element you add has to be processed by the form-filler’s eye and brain, increasing cognitive load and error rates while decreasing completion times and user satisfaction.

Vertical path to completion

A form will not only be aesthetic, but also be filled the fastest, if there's a single vertical path to completion. This is when the left edge of all the fields, and the main navigation button, is consistent:

Forms design diagram showing vertical path to completion

Edges

Another way to ensure the layout feels clean, simple and clear is to minimise the number of 'edges' in the form. Edges are created by all form components but especially:

  • questions
  • text fields
  • buttons
  • margins and padding

Minimise edges by:

  • aligning elements vertically (for example, making sure questions are all vertically aligned)
  • minimising the number of different widths for form components

Below is a form that has been laid out in this way; main edges are marked. Even with good alignment and no more than four different text field widths, there are still nine edges on the screen.

Forms design. An example of form with too many alignments.

For more information about alignment and widths, see Fields – overview in Layout of forms - key components

Slick pipeline

Once a form-filler enters a multi-step form process, we want to do everything we can to help them get quickly and successfully to the finish. This includes minimising distractions and the chances of accidentally leaving the form. The term 'slick pipeline' refers to the creation of this streamlined view of the form, to help propel the form-filler from the start to the end.

How to achieve the slick pipeline:

  • Start from the first data entry screen after Introduction and Eligibility (see Layout of forms - key screens for guidance)
  • Remove these site-wide page components:
    • navigation (in header and primary)
    • search
    • breadcrumb trail
    • login buttons and links
    • footer
  • Keep the following site-wide page components:
    • logos for business unit, for example, Department of Justice & Regulation and Government of Victoria
    • business unit tagline (if any)

For example, don’t do this:

Forms design Example of what page elements not to leave on the page

Do this:

Forms design; Example of what page elements to leave on the page.

Editing

In a form, answers can have 1 of 2 states:

  • editable
  • not editable

Editable answers are answers the form-filler can change. In the body of a form, standard form fields are in their editable state. The opposite is answers that are not editable. This includes answers presented back to the form-filler at the review stage, or other data that can't be changed. Present editable answers via standard form widgets in their default state, with a white background.

Present not-editable answers as:

  • read only text (remove the label element from any form labels)
  • without any form widgets
  • with bold font
  • with tighter vertical spacing
  • with the same background colour as the rest of the page

Question styling shouldn't change, regardless of whether or not the answer is editable.

An editable single choice question:

Forms design: example of editable single choice question

A not-editable single choice question:

Forms design: example of non-editable single choice question

An editable address question:

Form design: Example of an editable address field.

A non-editable address question:

Forms design: example of non-editable address question

Pre-population

In some cases, answers may be provided for the form-filler. This is 'pre-populating' 1 or more form fields. A field may be pre-populated with information already provided by the form-filler (for example, current address) or a default selection (for example, state of 'VIC').

When possible, pre-populate forms with information already provided by the form-filler. For best practice guidance, see Defaults (see Q&A in forms for more information). Pre-population shouldn't change the styling of a field in any way.

Structure of the screen

Every form screen has the same overall structure, as illustrated below.

Form design Example of every form screen has the same overall structure

A progress indicator and a step heading will be present only for multi-step forms. Examples of each of the screen components is shown below:

Forms design: Progress indicator and a step heading will be present only for multi-step forms

Note: on mobile/small screens, the progress indicator should be a simple heading indicating which step the user is on, and the total number of steps in the form, for example 'Step 1 of 5', 'Step 2 of 5', etc.

On mobile/small screens, contact information should appear below the form title. On larger screens, the container for the whole structure — but not necessarily the individual components — should be centred on the screen.

Tab order

The tab order for the form should be set to reflect this visual order (with contact information coming between form title and progress indicator).

Help

What makes for effective help

Effective help is timely, useful and complementary.

Timely

Place help at the point where it's needed, no sooner and no later:

  • help relating to a question goes with the question
  • help relating to a section goes at the start of that section
  • help for a whole step goes just under the step heading
  • help for the whole form goes at the start of the form

Using this approach, there should be no or minimal need for separate help files or FAQs, 2 notoriously unusable interactions.

Useful

Help must provide information useful to the form-filler, while attempting this specific task.

Do explain:

  • what format data should be provided in (if restricted)
  • unfamiliar concepts
  • unexpected forbidden characters
  • legal jargon

Don't:

  • repeat content provided elsewhere (including in the question)
  • include help that could be generic to any form
  • explain how to interact with the form. If you feel explanation is needed, the design probably needs more work to make it intuitive

Complementary

Research repeatedly shows that in a huge number of cases, instructional and help text is not read. Because of this, help should assist the form-filler, but not be necessary to complete the form. Sometimes assisting the form-filler is about reassuring them, for example, if a question is likely to seem strange, intrusive or offensive.

Presentation

Form, step, and section-level

  • use the form’s default typeface, font size and weight
  • facilitate scanning through use of headings, short paragraphs and bullet points
  • set flush left

Question level

All question-level help must go after the question and before the field, so it's available exactly when needed. Question-level help must be shown at all times (that is, not just when focus is on the corresponding field).

Use a grey text dark enough for sufficient contrast with the background of the form — including zebra striping — but light enough to be sufficiently distinct from the black used for field labels. A suitable grey would be #646464.

There are three types of question-level help:

  • additional information
  • formatting instructions
  • character counters

Additional information

Additional information is a supplement to the question, that is, does not need to be read in order to answer (but may be useful for some form-fillers, especially edge cases). Visually, put extra information under the field label:

Forms design:  Example of extra information under the field label.
Forms design:  Example of extra information under the field label.

If the extra information is long, show an introductory statement or two and then follow with a link to more detail (the link opening a modal window):

Forms design:  Example of explanatory information under the field label.

Formatting instructions

Formatting instructions include:

  • specifying how dates, phone numbers etc must be typed into text fields (if restricted)
  • listing unacceptable characters likely to surprise form-fillers

Formatting instructions only differ from additional information in their placement. Formatting instructions must be located above the relevant field:

Forms design: Formatting instructions located above the field.

Character counters

Character counters must be shown before all multi-line fields, as follows. Character counters must always be on a separate line from any other formatting instructions. Putting the counter before the field means all form-fillers, including those using screen readers, know about the limit before they start to provide their answer. Use the aria-live property to announce with screen readers when the limit has been reached.

Initially:

forms layout character counter

After some characters have been entered:

Form design: Example of showing how many characters are left.

When the form-filler has gone over the character limit:

Form design: Example of when the form filler has gone over the character limit.

Don't automatically truncate, as this behaviour may not be seen by the form-filler (especially if they are pasting text from another source).

The character limit must be set high enough so the vast majority (for example 95%) of form-fillers will never reach it.

Updated

Join the conversation on digital

Get advice and share your insights with other digital practitioners. Join the Single Digital Presence Community of Practice(opens in a new window).