Form patterns

Asking for name and title

Only ask for name and title if it’s essential.

The format of people’s names can vary. Some do not fit into conventional UK formats. It can be unnecessary and uncomfortable for users to define themselves using a title, or a separate first name — surname format.

Never gather a title to assume gender.

Example

Find out more on how we ask for names and titles.

Asking for gender and sex

Do not ask unless you can justify why you're asking.

As with gathering a ‘title’, some users may feel uneasy giving this information.

If you’re gathering information to use to address the user later, ask what pronoun they prefer - he/him, she/her, they/them. See how Facebook offers gender options.

If you do need to know, ask about a person’s ‘gender’, not their sex. Allow them to tell us in their own words with a text entry field.

But ultimately - if you do not need to know - do not ask.

Validation

Build services that are flexible enough to allow users to give data in a way that they would naturally. For example we should allow users to enter a postcode in upper or lower case, with or without a space.

Validation errors should only be triggered on mandatory fields. They must be factual and help the user move on.

Example

There's a problem

Check the form. You must:

  • Enter your full name
  • Enter an email address

Enter your full name

Enter an email address

Find out more about validation messages.

Address

Know why you’re asking for an address and tell users why you’re asking.

You might need to ask for addresses when you:

  • want to send correspondence
  • want to deliver something
  • need to know for residence purposes
  • need to know for identity purposes

For many people these are the same address, but for some they could be different addresses. Make it clear to users from the start what you’re going to do with that information.

Example

Address

We'll send a copy of this will to this address.

Date of birth

Allow users to enter the date as flexibly as possible, for example, allowing 'Jan' as well as '1', or '01' for a month input.

Use the length of the text input field to indicate the format. If research shows that more clarification is needed, use hint text (static text that sits outside of the text entry field) rather than placeholder text (text that sits within the text entry field).

Do not auto tab between fields — this can be unnerving for some users and can make it difficult to edit mistakes.

Example

Your date of birth

For example: 30 4 1980

Progressive reveals

You might need to ask users for more information because of how they answered a previous question. You can use a ‘progressive reveal’ to do this so you only show the extra form field to the users who need to see it.

Only use progressive reveals to ask for one piece of information. If you need to ask for more than one thing, do so on a separate screen.

Example

What kind of will would you like?

Continue and back

If you're building a multi-page form, allow users to move through it with a ‘continue’ button and a ‘back’ link.

Encourage users to progress through the form by:

  • making the continue button the primary button on each form page (unless you're using a submit button on the final page of the form)
  • positioning the continue button at the bottom left of each page so it’s easier for users to see and become familiar with where it is
  • making the continue button active, always — if a user tries to progress without completing the necessary information, run validation messages to tell your user what the error is and how to fix it

Progress trackers

A progress tracker gives users an indication of how far through a form they are. But they can also get in the way and confuse users.

Only use a progress tracker if you have thorough research to support the decision. If you do, let the Design Team know: email design@coopdigital.co.uk

Feedback

Did you find this useful?