Labels and questions in forms

A label is the text that tells users what to answer for each field in a form. You can use a description to help users understand difficult terms, or explain why they need to answer. Some call labels question text and descriptions help text.

It is especially important to think about how you ask questions in public services, because users are often afraid of answering incorrectly.

Unable to parse html

const WithRowsEn = () => {
  return (
    <Textfield
      label='Last name (This is a label)'
      description='If you have more than one last name, type only the very last. If you have a hyphenated name, type your whole last name. (This is a description)'
      multiline
      rows={4}
    />
  );
};

render(<WithRowsEn />)

Only ask for information you need.

Consider

• whether you can reuse information you already have about the user
• why you need the information
• what you will do with the information

Think of the text as a conversation

When we address users directly with “you” and “I”, the content feels less technical and more like a conversation. It also makes it easier for users to understand what to answer.

Check that the answer options can be read as a logical response to the label. Consider including answer options users can choose if they do not know what to answer, for example “I am not sure” or “I do not know”.

Write short and precise labels

Users prefer short texts, especially when they are stressed, busy or reading on a small screen. Use established wording when you can to keep labels as short as possible.

Choose between established wording, descriptive prompts or questions.

These three ways of writing labels work best in slightly different situations.

• Use established wording when users are not in doubt about what the answer is, for example National identity number and Marital status.
• Use questions when the topic and answer options are less familiar to users. Questions also make the tone feel more approachable.
• Prompts can help make the label shorter and more precise compared to questions.

Questions often lead users to answer briefly. If you need a more detailed answer, a prompt may be better, for example “Describe what you need help with during a day”.

Use closed questions when you can

Closed questions are easier to answer than open questions. Users have to formulate the answer themselves when the question is open. A closed question can often be answered with Yes or No, or with obvious answer options. For example, “Which municipality do you live in?”.

Avoid questions with negations

Questions with negations can be difficult to understand. These are often sentences with “not” or “never”.

Give all relevant information before users answer

Users should not have to try and fail, so give them all relevant information before they choose an option or fill in a field. Avoid guidance text inside the input itself, also known as placeholders. Placeholders disappear when the field is filled in, and may conflict with accessibility requirements.

Sometimes descriptions, also known as help text, are useful for explaining something difficult, such as legal terms or specialist language.

Only use descriptions where they are needed, to reduce cognitive load.

Build trust by explaining why we ask

It can be useful to briefly explain why we ask for something, to build trust and openness. One way to do this is with an expandable description.

Unable to parse html

const WithExpandableDescriptionEn = () => {
  const [open, setOpen] = useState(false);

  return (
    <Field style={{ width: 'min(100%, 26rem)' }}>
      <Label>National identity number</Label>
      <Details
        open={open}
        onToggle={() => setOpen(!open)}
        style={{ background: 'transparent', borderBlockWidth: 0 }}
      >
        <Details.Summary
          style={{
            background: 'transparent',
            minHeight: 'auto',
            padding: 0,
          }}
        >
          Why do we ask for this?
        </Details.Summary>
        <Details.Content
          style={{ marginBlockStart: '0.5rem', marginInline: 0 }}
        >
          We use your national identity number to find the correct information
          about you and make sure the application is registered to the right
          person.
        </Details.Content>
      </Details>
      <Input inputMode='numeric' />
    </Field>
  );
};

render(<WithExpandableDescriptionEn />)

Contributors

• Dorte Drange (Digdir)
• Marianne Røsvik (Digdir)
• Gørild Døhl (Digdir)
• KS
• Skatteetaten
• Nav
• Helsenorge
• Lånekassen
• Oslo kommune