Online Forms Design Standard

 

Introduction

This guide presents the standard for designing online forms — or digital services and transactions — so your resulting forms are highly usable and accessible.

On behalf of the Department of Justice and Regulation (DJR), Formulate Information Design prepared this standard between May and September 2014. The work drew upon industry standards and approaches, specialist knowledge, and form-design best practice. The standard takes into account the Victorian Government context and constraints.

The guide is now the Victorian Government's Online Forms Design Standard.
 

Who should read this guide

This document is for anybody working in or for Victorian Government involved in creating online forms:

  • business units within departments and agencies
  • developers
  • designers
  • communications teams
  • vendors

The aim is to provide instruction and best practice guidance on the approach for all common form design problems. This frees up all parties to focus on more challenging or unique form design issues.

We envisage the guide can be used in the vast majority of situations. In some circumstances, a new situation or overriding business justification may mean taking another approach.

Scope

We based this standard on three forms we believe are current best practice for online forms. These prototypical forms were:

  • 'Birth Registration Statement Online' ('BRS') belonging to Births, Deaths and Marriages (BDM)
  • 'General complaint' belonging to Consumer Affairs Victoria (CAV)
  • 'Change of details' within MyCheck, belonging to the Working With Children Check Unit (WWCCU)

Together, these three forms cover the 'linear data entry' and 'portal' form types (see table below). Within the digital space, these are the two most relevant and important form types for the Victorian Government.

Type of forms and examples:

  • Portal - BRS, CAV complaint forms & WWCCU application form
  • Search - Find a JP and Probate Advertisement Online Search
  • Helper wizard - WWCCU’s Do I need a check?
  • Checklist n/a - At the time of writing, there were no online checklists built to these standards

For the initial project, at least, search, helper wizard, checklist and survey form types were out-of-scope.

Complex, highly regulated form interactions were also out-of-scope. This includes payments and other financial transactions, as well as authentication and identification (except for general principles for registration and sign in).

How to use this guide

The guide is divided into four main sections, corresponding with Formulate’s four layer model for understanding forms. This model states every form, no matter what the subject matter or design, consists of four ‘layers’:

  • questions and their corresponding answer options ('Q&A')
  • the order of and relationship between questions ('Flow')
  • the presentation of the Q&A and flow on the page or screen ('Layout')
  • everything that happens around the form but impacts on data collection overall ('Process')

Each of these four layers is described in more detail below. To use this guide, you'll need to understand the distinction between the layers.

The four layers of every form

Q&A

Q&A refers to ‘questions and their answer options’.

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

As illustrated below, the Q&A layer includes:

  • the question (1), and any sub-questions it might have (2)
  • the answer options or spaces that are given (3)
  • any question-specific instructions or notes

Form design: Example of questions and sub questions structure.

For more information, view the Q&A in forms page.

Flow

Flow refers to the relationship between questions on the form and includes things like:

  • the order in which questions appear
  • grouping questions into sections or steps
  • conditional questions, sections and/or steps, which are dependent on the answers to earlier questions, sections and/or steps

Form design: Diagram of the element of forms validation.

For more information, view the Flow of forms page.

Layout

The third layer of a form is visual design, that is the presentation of the elements on the screen. The layout layer includes things like:

  • margins
  • spacing
  • rules
  • typography
  • alignment
  • logos
  • colours

For more information, refer to Layout of forms page.

Process

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

  • who owns the form
  • who has input into the form’s design
  • how form-fillers can access the form
  • ways the form can be submitted
  • manual processing and error correction

For more information, view the Process of forms page.

Multiple layers

Some form components cut across multiple layers. For example, when we discuss progress indicators, we may refer to their Layout (size, shape, position and other styling) but also the fact that they illustrate Flow (that is the grouping of questions into steps).

In this guide, components are discussed in the layer that they most relate to, for example progress indicators are discussed in the Layout of forms page, not the Flow of forms page.

Other standards and guidelines

This guide should be used in conjunction with, rather than instead of, other applicable standards and guidelines. This includes relevant Victorian Government and business unit style guides, as well as the Whole of Victorian Government ICT strategy, standards, and these How-to guides. 

Related How-to guides

How to manage security

How to design and develop a digital presence

How to make websites and content accessible

How to test an online product or service

How to manage privacy

How to do online financial transaction

Join the conversation on digital

Get advice and share your insights about this topic with other digital practitioners on the WoVG Digital Group on Yammer (VPS access only).

Can’t access Yammer? Contact us by email: contact@dpc.vic.gov.au. (We may post your comment on Yammer for general discussion. Please tell us if that’s not OK.)