Layout of forms, key screens - digital guide

Adding an introduction to a form

Regardless of whether a form is single- or multi-step, it should have an introduction. The exception is if the introduction — with content as outlined below — would be almost as long or longer than the form itself. In such cases, an introduction is optional.

The introduction should be located before the first data entry. For most forms, the introduction will need to be a standalone screen but for very simple forms or forms with very brief introductions, the introduction and data entry can be on the same screen.

If the introduction is on its own screen:

it is this screen that should be indexed and shown in search results, never the first screen of data entry
unless it includes eligibility, the introduction screen will be part of the informational site, rather than part of the transactional environment

What a form's introduction must include

About this form

Ideally one, but no more than two, lines explaining what the form is for and who should complete it.

What you will need

a bullet point list of any external sources (people or documents) the form-filler will need in order to complete the form, especially ID or reference numbers. Briefly explain where ID or reference numbers can be located on artefacts that are likely to be at hand (for example, drivers licence)
if the form-filler will need a printer, a credit card, or some other equipment to complete the form, and what to do if they don't have this

How long it will take

An estimate of how long completing the form will take, to the nearest 5 minutes and accurate for roughly 80% of cases. As soon as possible, adjust the initial estimate to reflect from actual metrics.

Saving a partially completed form

If save and resume functionality is provided, one line explaining that the form can be saved and finished within <x> days from starting.

Privacy

You may need to provide a collection notice if your form is collecting personal information. Refer to protect privacy - digital guide for more information.

This introductory text should be followed by a highly prominent button for starting the form (see also Submit and start buttons on Layout of forms-key components). If appropriate, the button can be repeated (for example, at the top and the bottom of the page). In multi-step forms, the introduction is not part of the slick pipeline, nor should it be included in any progress indicator.

Eligibility

'Eligibility' is about identifying whether or not the person who comes to fill out the form actually has the right to do so. Eligibility must happen before the form proper, because access to the form should only be given if the form-filler is eligible.

'Tailoring' is about changing the content of the form to match the particular situation of the form-filler. Tailoring usually involves showing or hiding questions, sections or steps, based on the answers given to one or more trigger questions (see Conditional fields on Layout of forms-key components).

Tailoring says nothing about access to the form. As such, if not all form-fillers will be eligible, eligibility has to be established before any tailoring occurs. After that, tailoring can, and often does, happen at any point in the form.

Tailoring does not need to be done all at once. In fact, a better user experience often results from asking trigger questions in context rather than as a group at the start of the form (context makes question answering easier). However, if the content of the form may change significantly in response to tailoring, it may be preferable to ask at least the key triggering questions up front, to avoid a disjointed user experience.
The navigation buttons for eligibility screen should be the same as for the form proper (see Buttons and navigation on Layout of forms-key components), except the 'Next' button should be labelled 'Check eligibility'. This applies even if the eligibility questions are on the same screen as the introduction.

The navigation buttons should always show, even if the form-filler gives an answer that means they are not eligible (for more information, see Process of forms).
Answering an eligibility question 'in the negative' means giving an answer that shows the form-filler is not eligible for the form. Answering in the negative does not necessarily mean the answer is 'no'. For instance, a birth can only be registered once, so responding 'Yes' to the question shown in the example below would be answering in the negative.

All eligibility questions should be shown on the screen even though answering one question in the negative would mean there is no need to ask the remaining eligibility questions. All questions are shown because in the majority of cases, all questions will be applicable. We want to minimise the number of form-fillers who are exposed to a frequently changing screen.

When a form-filler answers a question in the negative, immediately show a message indicating their ineligibility. This message should follow the warning message style (see Messages on Layout of forms-key components).

Screen initially:

Screen after answering in the negative:

If the form-filler uses the 'Check eligibility' button despite giving a negative answer, this should lead to a message very similar to the standard validation error message:

The message heading is 'This form does not apply to you', a clear yet diplomatic indication that the form-filler cannot continue

The first sentence in the body of the message describes the negative answer that the form-filler gave (without passing judgement), so the form-filler knows what triggered the message

Next, the content of the inline warning message is repeated

The message ends with two links:
- one link to go back and change answer (in case it was a mistake)
- one link to a suitable page on the informational website, such as the home page or a section landing page
Otherwise, this message follows the styling of an error message summary. In particular, the message should show at the top of the screen and take focus.

Declaration

'Declaration' includes:

confirmation of acceptance of terms and conditions (if needed)
agreeing to ways the information in the form may be used statutory declarations (which is essentially a simple declaration with more form fields)

If the form contains a declaration, it should be:

labelled 'Declaration' or 'Statutory declaration'
set in the default font size, weight and colour, and flush left
follow the relevant guidelines for presentation and behaviour of form fields (although if the declaration text is more than two sentences, it can be set full width of the form body)
made easier for scanning through the use of bullet points, short paragraphs and/or sub-headings

The agree/disagree question that appears after the declaration text should be prominent, and visually separated from the text. Ideally the question will have a 'yes/no' radio button answer option
(for example, 'yes/no' or 'agree/disagree'), rather than a single checkbox, to make it absolutely clear what answer the form-filler is giving.

If the declaration text is long, the declaration should be a separate step in the process. Otherwise, include it as the last component on the last data entry screen.

Review

Whenever a form has more than one screen of data entry, it should have a review step.

The review screen should:

contain every question that was shown to the form-filler (that is, include optional questions but not conditional questions that were hidden)
present the question and the form-filler’s answer in the same order as they appeared in the form, with the same section and/or step heading'
have a button labelled 'Edit <H>' located after the last row of information in a given section or step, vertically aligned with the heading for that section/step, where <H> is the section or step heading
have sufficient white space between sections and steps, to help visually associate edit buttons with the right section/step
present the questions in the default font size, weight, colour and alignment
present the answers in the same font size and colour as questions, but in bold and with the same alignment as fields in the form
for any optional questions that weren’t answered, leave blank the place where the answer would be shown
if data has been manipulated after entry by the form-filler — for example, translation into UPPER CASE — and this manipulation has been done because of system or business constraints, present the data in the manipulated format, and include a note along the lines of 'Our systems require this information in a certain format, so your answer has been automatically changed to <x>.' <x> describes the manipulation on the data, for example, 'upper case'. The note should be displayed in the equivalent location to Question-level help. No message is needed for manipulation into a consistent, more readable format that doesn’t change the substance of the answer (for example, chunking phone numbers)

Changing answers from Review

Once they reach the Review screen, the form-filler should have two methods of changing an answer:

Method one for changing answers

Method: Use the 'Edit' button for the relevant section or step

Action: The chosen step is loaded, anchored to the relevant section (if applicable)

Method two for changing answers

Method: Use the 'Back' button at the bottom of the screen

Action: Load the immediately preceding step.

Both methods should retain all the data provided by the form-filler.

If there are no cross-step dependencies in the form — that is, changing the answer to a question in one step has no impact on other steps — then change the navigation options at the bottom of the step being edited.

The progress indicator must not be used for navigation, including allowing edits from review.

From:

To:

Save changes button and discard changes button

As the labels and help text for these buttons suggests, the buttons take the form-filler straight back to the Review step, once they have made their changes to the current screen. This results in a streamlined experience, and is possible because there are no cross-step dependencies.

There is no 'cancel' link because of the confusion this may cause when present with a 'Discard changes' button.

In all other cases, the navigation on the screen remains the same and the form-filler must then use the 'Next' button to move forward through the form, one step at a time. This allows the form to adjust to the new answer(s), and the form-filler has the opportunity to review later answers in light of this change.

Completion

As with the introduction, every form should have a completion screen, no matter how many steps the form has. The completion screen appears after the form has been submitted and must:

convey that the submission has been successful
indicate whether a confirmation, summary or full copy of the submission has been emailed, and to which address
explain what will happen next
provide contact details for any enquiries about the submission
very prominently display the reference number (if any) for the submission, and explain that this number should be quoted when enquiring

For multi-step forms, if a full copy of the submission has not been emailed, the completion should also provide the functionality to print a copy of the form fields and the responses given. This printed copy should be formatted to support reading and scanning, and styled to suit a black and white, A4 page.

Form feedback

Ideally, feedback should be gathered from form-fillers at the end of each online form, especially multi-step forms. The feedback is gathered after the form has been submitted, so as not to impact on completion of the form.

A highly reliable and valid measure is the Single Ease Question (SEQ):

Overall, completing this form was...(optional) - scale from very difficult to very easy

Note this is the only time radio button response options are presented horizontally. The exception is made because this is the layout validated by statisticians (for more information, visit 10 things to know about the Single Ease Question - MeasuringU website).

After the rating question, present an open text field for the form-filler to provide comments:

Both questions are optional.

For submitting the feedback, a button with secondary styling should be used (to convey the lower importance relative to the form itself):

The rating and comments provide a measure of Satisfaction. As per the relevant international standard, the other two components of usability — and appropriate measures — are:

efficiency: time from load of first form-filling page to load of Completion screen
effectiveness: number of successful completions as a proportion of number of attempts (where attempts is measured as answering at least one question on the first form-filling page)

For more information, visit Ergonomics of human-system interaction -- Part 210: Human-centred design for interactive systems - International Organization for Standardization (ISO) website.

An example Completion screen — including gathering feedback from form-fillers — is shown below:

Green box with green tick and text: success! Your complaint has been received by Consumer Affairs Victoria, and a copy has been emailed to David.Kim82@gmail.com.

Governance

Updated 5 July 2023

On this page