Section headings should be concise and provide a full description of the fields in the section, eg Certificate holder’s details
Under the section heading you should provide a sentence of explanatory text that summarises what we are asking for in the section, eg Enter the details of the certificate holder at the time the certificate was issued.
Fields
The field labels should also be concise, and appear above the field, with no punctuation at the end of a label. Use sentence case with no full stops.
The length of the field should be appropriate to the input, eg a full name should be long enough for many characters.
Hint text
Hint text is provided to clarify more complex questions.
Use sentence case with no full stop. Use a comma after ‘For example,’ if using.
It should appear under the field label and not in the field itself. Using placeholder text as hint text in this way is not accessible to users with visual and cognitive impairments, and makes it difficult for users to remember, check and correct which information belongs in a field. Read more.
Hint text should always be in grey and should not be too long. The point is that hint text clarifies things rather than makes it more complex!
Free text fields
Using free text fields rather than dropdowns can allow more flexibility. Use free text fields for the following:
- Full name – allows for different naming conventions
- Date of birth – dropdown fields are inaccessible
- Country of birth – so you don’t have to use an expansive and inaccessible dropdown menu
- Address – so you don’t have to use an expensive address generator
In certain scenarios, you may need to deliberately limit the values that a user can in put to a field. For example, our Citizenship service only searches for certificates between 1949 and 1986 – so we introduced dropdown menus rather than a free text field here to prevent users from requesting certificates that we don’t hold.
Optional and mandatory fields
Aim to have as few optional fields as possible – you should only be asking for the information you really can’t do without. This was taken from gov.uk guidance.
Rather than marking mandatory fields with an asterisk or similar, denote optional fields with ‘(optional)’ after the field label.
When a whole section is optional, you can add ‘optional’ after the section heading so that users are getting the information upfront.
‘(optional)’ should appear in the same grey as the hint text.