Forms

We aim to ensure that our customers can complete any online transaction the first time unaided. It is important that any online forms are high quality, accessible, easy to use and built around customer needs

This document outlines the design standards and design patterns to use when designing a new form or assessing an existing form.

Form structure

  • Know why you're asking every question (why does the service need that information, who uses it and what for, how will you check the information is accurate, how will you keep it up to date)
  • Design for the most common scenarios first (order of questions, most users should have a simple, quick path, use branching to hide questions)
  • Start with one thing per page (one piece of information, one decision to make, one question to answer)
See https://www.gov.uk/service-manual/user-centred-design/resources/patterns/form-structure.html

Design patterns

Use GDS recommended design patterns for commonly occurring data such as name, dates, addresses etc

  • Form questions - Names, Dates, Addresses, NI numbers, Email addresses, Gender and sex, Help text)
  • Account management – Usernames, Create a user account, Create a username, Create a password, Email confirmation loops, Knowledge-based authentication, Transaction flow
  • Progress indicators - Start pages, Check your answers pages, Confirmation pages, Feedback pages
See https://www.gov.uk/service-manual/user-centred-design/resources/patterns

Form elements

Keep forms as simple as possible. Follow GDS form elements advice when using the following form elements;

  • Optional and mandatory fields
  • Labels
  • Form fields
  • Form focus states
  • Hint text
  • Spacing
  • File upload
  • Fieldsets
  • Select boxes
  • Radio buttons
  • Checkboxes
  • Conditionally revealing content
See http://govuk-elements.herokuapp.com/form-elements

Design using the Local Government Digital Service Standard

  • Use the Local Government Digital Service Standard as a method of working
  • Check design against the 15 points of the standard
  • Use framework to help assess compliance of the design
  • Ensure the user is at the heart of the design
  • Incorporate feedback
  • Make use of good practice and ideas
See http://localgovdigital.info/localgov-digital-makers/outputs/local-government-digital-service-standard

Best practice as identified by Mando

In 2014 we asked Mando to help us improve our online forms. They tested each one and also undertook user testing on a representative sample. The outcomes of this were captured in a guidance document to assist us and developers that work with us to create great digital services.

Download the guidance document

Use best practice identified by Mando in their Web Forms Redesign Guidance Document where it does not contradict GDS advice.

Remove form distractions

  • Remove unnecessary navigation and text
  • Keep the form simple and clutter free

Validation

  • Implement server-side and client-side validation. Consider using script to track user input so it can be validated as they type so the user gets immediate feedback
  • Provide validation error messages for information that is incorrect or blank using colour, usually red, and visual aid iconography such as an or warning sign beside where the error occurred
  • Provide validation success messages to alert the user to correctly completed input providing instant feedback and validation. Emphasize success messages through colour, usually green, and visual aid iconography such as a

Unnecessary data capture

  • Keep questions within the scope of the form
  • Only ask for information that is absolutely necessary
  • Avoid excessive steps
  • Reduce field lengths and group information logically
  • Group related information such as personal details to help the flow of questions

Field labelling

  • If the purpose of a label is simple, such as name or email address, then a word or two will be fine. However a phrase or sentence might be necessary to eliminate ambiguity on some of the more complex fields
  • Order the labels logically, reflecting the natural flow of a conversation
  • Ask personal questions towards the end
  • Sentence case is easier to read than title case and never use full uppercase

Unnecessary copy on forms

  • Choose appropriate language for the forms
  • Remove superfluous text
  • Instructions and text on pages should be kept to a minimum making it succinct and easy to read

Map location selector

  • It should be clear and obvious for the user to add a postcode as a starting point for the map selection. If the user does not know the postcode then they should be able to clearly locate the area on the map by a pin
  • If the user is entering the postcode then a pin should automatically feature on the map in this location which the user can adjust. Should the user need to drag the pin then instructions and pin should be clearly visible to aid the user

Postcode Finder

  • Postcode look-up should accept entries with and without spaces
  • Address fields should be auto hidden to reduce the amount of fields shown to the user unnecessarily. There should also be a link directly next to, or under, the 'find my address' button called ‘enter address manually’. Clicking this should display the necessary fields
  • Once users have entered their postcode and chosen their address, the form fields should be auto populated to confirm their chosen address

Date picker

  • A date picker should be implemented with caution, and tested well, on a mobile site
  • Recommendation that the date picker is removed for mobile and replaced by a simple text entry field, featuring a format hint such as dd/mm/yyyy
  • For the desktop, a format hint should be applied to the label and excessive date selections should be removed

Contextual help

  • Use a help icon, such as , next to an input field that the user can click on (when necessary) to request help or further information
  • Make it succinct and easy to read
  • Make sure that a user can tab through these help icons to aid accessibility and screen readers

Incorrect use of form fields

  • Provide the appropriate type of input field based on what is being requested. Each type of input field has its own characteristics, which users are accustomed to. For instance, use radio buttons if only one option of several is permitted, and check boxes if multiple choices are allowed
  • Important address capture should not be provided by free text entry but aided by postcode look up solutions

Design techniques

Look at:

  • Designing using wireframes – you can use software packages to help with this
  • Develop prototypes before building
  • Do user testing on the public
  • Act on customer feedback to make improvements

Monitor, iterate and improve

  • Test a range of performance improvement initiatives and monitor to see which work well
  • Implement the best performing solutions widely and then repeat this process relentlessly
  • Monitor and act upon user feedback
  • Carry out A/B testing
  • Use an iterative approach to increase the pace of improvement and minimise the risk of failure

If you're unsure, check with the Digital Development Team for advice.