Patterns

Design patterns - standardised solutions to common design problems.

Usually made up of combinations of components

Addresses

Free Text Box

Use a free text box if you expect a broad range of address formats and you don’t need to use specific sub-parts of the address (for example, street or postcode).

Advantages of a free text box

A free text box:

  • can handle any possible address format
  • allows users to copy and paste addresses from their clipboard
  • means users don’t have to work out which part of the address goes in which field

Disadvantages of a free text box

A free text box:

  • makes it hard for you to separate an address into sub-parts, and impossible to do with 100% accuracy
  • might not be compatible with legacy backend systems that use multi-field addresses
  • can’t help users look up an address
<label class="form-label" for="textarea">Full Address</label>
<textarea class="form-control form-control-3-4" name="textarea" id="textarea" rows="5"></textarea>

Multiple Fields

Only use multiple address fields when you know which regions the addresses will come from and can find a format that supports them all. This can be difficult to know if you’re asking for addresses outside the UK.

Advantages of multiple fields

Multiple fields mean:

  • you can easily extract and use specific parts of an address (for example, street names or postcodes)
  • you can give help for individual fields
  • you can validate each part of the address separately
  • users can complete the form using their browser’s auto-complete function

Disadvantages of multiple fields

Multiple fields have these disadvantages:

  • it’s hard to find a single format that works for all addresses
  • there’s no guarantee that users will use the fields the way you think they will
  • users can’t easily paste addresses from their clipboard

Home address

<form>
	<fieldset>
		<legend>
			<h1 class="heading-medium">Home address</h1>
		</legend>
		<div class="form-group-related">
			<fieldset>
				<legend class="form-label">Building and Street</legend>
				<label for="building-street-f1" class="visually-hidden">Address Line 1</label>
				<input class="form-control" id="building-street-f1" type="text" name="building-street-f1">
				<label for="building-street-f2" class="visually-hidden">Address Line 2</label>
				<input class="form-control" id="building-street-f2" type="text" name="building-street-f2">
			</fieldset>
		</div>
		<div class="form-group-related">
			<label class="form-label" for="town-city-f1">Town or City</label>
			<input class="form-control" id="town-city-f1" type="text" name="town-city-f1">
		</div>
		<div class="form-group-related">
			<label class="form-label" for="county-f1">County (optional)</label>
			<input class="form-control" id="county-f1" type="text" name="county-f1">
		</div>
		<div class="form-group-related">
			<label class="form-label" for="postcode-f1">Postcode</label>
			<input class="form-control form-control-1-4" id="postcode-f1" type="text" name="postcode-f1">
		</div>
	</fieldset>
</form>

Address Lookup

An address lookup (sometimes called a ‘postcode lookup’) lets users specify a UK address by entering their postcode (and optionally their street name or number) and selecting their address from a list.

Advantages of address lookup

Using an address lookup means that:

  • people entering UK addresses don’t have to enter as much information manually
  • there’s less chance of mis-typed UK addresses

If you use an address lookup

When using an address lookup you should:

  • make it clear that the address lookup only works for UK addresses
  • provide a manual option for people with international addresses or addresses that are missing or badly formed in the Royal Mail database
Postcode lookup
For example SW1A 2AA

Find a postcode on Royal Mail's postcode finder

<div class="postcode-search-form" data-module="track-submit" data-track-category="postcodeSearch:local_transaction" data-track-action="postcodeSearchStarted">
	<form method="post" id="local-locator-form" class="find-location-for-service">
		<fieldset>
			<legend class="visuallyhidden">Postcode lookup</legend>

			<div class="ask_location">
				<label class="form-label" for="postcode">Enter a postcode</label>
				<span class="form-hint">
                    For example SW1A 2AA
                </span>
				<input class="form-control form-control-1-4" id="postcode" name="postcode" type="text" aria-invalid="false" value="">
				<button type="submit" class="button">Find</button>
				<p>
					<a target="_blank" id="postcode-finder-link" rel="external" href="http://www.royalmail.com/find-a-postcode">Find a postcode on Royal Mail's postcode finder</a>
				</p>
			</div>
		</fieldset>
	</form>
</div>

Dates

Approximate Dates

If you don’t need an exact date and you’re asking for one that users might struggle to remember (for example ‘the date you lost your passport’), make sure you allow them to enter an approximate date, like ‘June 1983’.

If you're not sure tell is roughly when you think you last had it
<div class="form-group">
	<fieldset>
		<legend>
			<span class="form-hint">If you're not sure tell is roughly when you think you last had it</span>
		</legend>
		<div class="form-date">
			<div class="form-group form-group-month">
				<label class="form-label" for="dob-month">Month</label>
				<input class="form-control" id="dob-month" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
			</div>
			<div class="form-group form-group-year">
				<label class="form-label" for="dob-year">Year</label>
				<input class="form-control" id="dob-year" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
			</div>
		</div>
	</fieldset>
</div>

Memorable Dates

To ask for memorable dates, like dates of birth, use text fields for users to complete.

Use 3 fields as it’ll be easier for you to validate each part rather than trying to review a single field.

Don’t automatically tab users between fields because this can clash with normal keyboard controls and confuse people.

Calendar controls (visual calendars which can be used to select dates) aren’t particularly useful for known dates and some users struggle to select date boxes.

Triggering the iPhone numeric keyboard

To trigger the numeric keyboard on iPhones, add a pattern attribute to the input element like this: pattern="[0-9]*"

Date of birth For example, 31 8 1970
<div class="form-group">
	<fieldset>
		<legend>
			<span class="form-label-bold">Date of birth</span>
			<span class="form-hint">For example, 31 8 1970</span>
		</legend>
		<div class="form-date">
			<div class="form-group form-group-day">
				<label class="form-label" for="dob-day">Day</label>
				<input class="form-control" id="dob-day" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
			</div>
			<div class="form-group form-group-month">
				<label class="form-label" for="dob-month">Month</label>
				<input class="form-control" id="dob-month" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
			</div>
			<div class="form-group form-group-year">
				<label class="form-label" for="dob-year">Year</label>
				<input class="form-control" id="dob-year" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
			</div>
		</div>
	</fieldset>
</div>

Email Address

When asking users for their email address, you should:

  • make the field long enough
  • make it clear why you’re asking
  • help users to enter a valid email address

You may also need to check that users have access to the email account they give you.

Make the field long enough

Make sure the field is long enough to accommodate at least 95% of your users’ email addresses.

You can analyse your user data to establish what this is. A good rule of thumb is 30 characters.

Tell users why you want the email address

Make it clear what the email address will be used for so that:

  • users feel confident that you’re not going to abuse it
  • users with multiple email addresses can choose which one to give you

Help users to enter a valid email address

Help your users to enter a valid email address by:

  • checking that what they’ve entered is in the format of an email address allowing users to paste the email address
  • using the type=“email” attribute so that devices display the correct keyboard
  • play their address back to them so they can check and change it

You can also check for common misspellings of popular email providers (for example ‘homtail.com’ instead of ‘hotmail.com’). Warn users if you detect one, but allow them to proceed in case it’s a genuine email address.

Some services ask users to repeat their email address. This adds work for the user and should not be implemented unless your research has shown it to be effective.

<label class="form-label-bold" for="email-address">
    Email address
    <span class="form-hint">
        We'll only use this to send you a receipt
    </span>
</label>
<input class="form-control" id="email-address" type="email" name="email-address">

Gender Or Sex

If you have to ask about gender, you should:

  • list the fields in alphabetical order: ‘Female’, ‘Male’, ‘Unspecified’
  • do research to test that this works for your users

Avoid using pronouns

You should address the user as ‘you’ where possible and avoid using gendered pronouns like ‘he’ and ‘she’.

In some cases you may need to use pronouns, for example if your service allows people to jointly apply for something.

Don’t use titles to guess gender

You shouldn’t guess someone’s gender based on a title because:

  • some titles aren’t gendered (for example Dr, Rev, Major)
  • titles can be changed by deed poll to one that’s different from a person’s gender or sex

What is your gender?

<form>
	<div class="form-group">
		<fieldset>

			<legend>
				<h1 class="heading-medium">What is your gender?</h1>
			</legend>

			<div class="multiple-choice">
				<input id="radio-1" type="radio" name="radio-group" value="Female">
				<label for="radio-1">Female</label>
			</div>
			<div class="multiple-choice">
				<input id="radio-2" type="radio" name="radio-group" value="Male">
				<label for="radio-2">Male</label>
			</div>
			<div class="multiple-choice">
				<input id="radio-3" type="radio" name="radio-group" value="Unspecified">
				<label for="radio-3">Unspecified</label>
			</div>

		</fieldset>
	</div>
</form>

Help Text

Expanding Help Text

Expanding help text is a short link that expands into more detailed help when a user clicks on it.

Use expanding help text to make your page easier to scan, but don’t hide help if a majority of users will need it.

Make sure the link text is written so that users can quickly work out if they need to click on it.

Where fo I find my registration number?

It's on the first page of the confirmation letter we sent you, in the top right corner.

<details>

	<summary><span class="summary">Where fo I find my registration number?</span></summary>

	<div class="panel panel-border-narrow">

		<p>It's on the first page of the confirmation letter we sent you, in the top right corner.</p>

	</div>

</details>

Inline Help Text

Inline help text is short, clear text positioned immediately next to the part of the page it relates to.

Use inline help text for help that’s relevant to the majority of users.

You should place inline help for form fields between the label and the field so sighted users and screenreaders can read it before they get to the field itself.

<label class="form-label-bold" for="nationality">
    What is your nationality
    <span class="form-hint">
        As shown on your current passport
    </span>
</label>
<input class="form-control" id="nationality" type="text" name="nationality">

Names

Make sure fields are long enough and support all the characters needed to accommodate 95% of the names you need to capture

Use a single name field where possible

Use a single name field because it can accommodate the broadest range of name types and requires less effort for users to understand.

The problem with multiple name fields

Multiple name fields mean there’s more risk that:

  • a person’s name won’t fit the format you’ve chosen
  • users will enter their names in the wrong order
  • users will try to enter their full name in the first field

Labelling name fields

For single name fields, use ‘Your full name’.

For multiple name fields, use:

  • ‘First name’
  • ‘Last name’

If you can’t use a single name field and many of your users aren’t from the UK, use these labels:

  • ‘Given names’
  • ‘Family name’

Don’t use a ‘middle name’ field unless you have to, and make sure it’s optional. You don’t need to mark it as optional.

Make it clear whether you need someone’s common name or their full legal name.

Avoid asking for people’s title

You shouldn’t ask users for their title.

It’s extra work for users and you’re forcing them to potentially reveal their gender and marital status, which they may not want to do.

There are ways to address people in correspondence without using title, for example by using their name.

If you have to use a title field, make it an optional free-text field and not a drop-down list. Predicting the range of titles your users will have is impossible, and you’ll always end up upsetting someone.

Remember to deal with the name data sensibly in any resulting correspondence.

<label class="form-label" for="full-name-f1">Full name</label>
<input class="form-control" id="full-name-f1" type="text" name="full-name-f1">

National Insurance Numbers

Use a single text field labelled ‘National Insurance number’, like this:

You should also:

  • allow for 13 characters - National Insurance numbers are often spaced in pairs
  • avoid using ‘NINO’ or ‘NI number’ as the label
  • avoid using ‘AB 12 34 56 C’ as an example (it belongs to a real person) - use ‘QQ 12 34 56 C’ instead
<label class="form-label-bold" for="ni-number">
    National Insurance number
    <span class="form-hint">
        It's on your National Insurance card, benefit letter, payslip or P60.
        <br>
        For example, ‘QQ 12 34 56 C’.
    </span>
</label>
<input class="form-control" id="ni-number" type="text" name="ni-number">

Progress Indicators

First, test your service without any progress indicators. Many services are simple enough that users don’t need them.

Try improving the order, type or number of questions before adding a progress indicator.

If people still have problems then try adding a simple step or question indicator.

This approach is compact and usually enough to give people the confidence to continue.

Only include the total number of questions if you can do so reliably. If the total number changes as the user continues through the service, make sure you update the indicator.

Question 3 of 9 Your details

<h1 class="form-title heading-large">
	<span class="section-progress">Question 3 of 9</span> Your details
</h1>