Help users to Choose alternative contact formats

This pattern provides a consistent way for people to request accessible formats for letters and phone calls. Its aim is to make it as easy as possible to request the formats a person needs.

This pattern is available as a plugin for the GOV.UK Prototype Kit, allowing you to insert the full pattern into a prototype with minimal coding. It includes pages, routes and logic for storing format needs in the prototype session.

This pattern has a working example.

Principles

Services should:

offer accessible formats for written and spoken communications
make it easy to request other formats not included in your list
consider that a person’s needs may change

When to use this pattern

Every service provider should have a way for users to request accessible communication formats.

Section 20 of the Equality Act 2010 says that if your service involves providing information, you should take steps to ensure that it is provided in an accessible format.

Providing alternative communication formats is only part of making a service accessible. For more about building accessible services see the DWP Accessibility Manual.

When not to use this pattern

This pattern is for written and spoken communications from a service to the users of that service (“outbound” communications). To show alternative options for people to contact your service (“inbound” communications), use the Contact a service pattern.

Remember that a phone call or in-person appointment can sometimes do the job of a printed letter; this may be a better way to meet someone’s needs than producing and sending an alternative print format.

How it works

User journey

The basic structure of the pattern is:

Ask about written communications
Collect more detail in nested questions if needed
Ask about spoken communications
Collect more detail if needed
Ask for information about any other communication needs
Check answers

The pattern does not start with a yes/no question asking if the user needs alternative formats. Instead it shows all users the top-level choices for both written and spoken communications. This means they do not have to guess at what is available.

Ask if the user needs anything that is not included in your standard list of ways to communicate. This allows you to understand everyone’s needs and learn about new formats you may need to provide.

Types of alternative contact format

DWP service teams should contact the DWP Citizen Preference service for a detailed list of formats.

Here are some examples of alternative contact formats for written communications and for two-way conversations that would normally take place over the phone.

Written communication

Alternatives or changes to a standard letter might include:

Large print (usually 16-point text)
Bold text
Double line spacing
Coloured paper
Alternative fonts
Audio recording
Braille (Grade 1 or Grade 2)
Signed video with subtitles
PDF, Microsoft Word, ODF or other electronic document format
Email (plain text or HTML)

Spoken communication

Alternatives to a phone call might include:

Text relay services such as Relay UK
Video relay services for live sign language interpreting
Live online chat
In-person translation by an interpreter, for example using lipspeaking or the Deafblind Manual alphabet

Technical guidance

If your service has already collected the user’s email address, play it back to them if you can do so securely rather than asking for it again.

Selected example screens

The working example of this pattern shows how it might be implemented in a DWP service. This is not a definitive list of formats.

Alternative written formats

This is the first screen in the pattern. Because there is no initial filtering question, the option to receive standard letters is included as the first option.

In this example, a large print letter is included as the second option as it is often the most requested alternative format. Other changes to a print letter are next; the remaining options are then listed alphabetically.

Where email addresses are collected the pattern uses the standard GOV.UK pattern.

<form class="form">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="written-format-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
  <h1 class="govuk-fieldset__heading">
    How should we write to you?
  </h1>
</legend>
<div id="written-format-hint" class="govuk-hint">
  <p class='govuk-hint'>Select the best option for you.
  <p>
</div>
<div class="govuk-radios" data-module="govuk-radios">
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="written-format" name="written-format" type="radio" value="Standard letter (12-point Arial text on white paper)">
    <label class="govuk-label govuk-radios__label" for="written-format">
      Standard letter (12-point Arial text on white paper)
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="written-format-2" name="written-format" type="radio" value="Large print">
    <label class="govuk-label govuk-radios__label" for="written-format-2">
      Large print
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="written-format-3" name="written-format" type="radio" value="Letter with changes to font, paper colour, spacing or print size">
    <label class="govuk-label govuk-radios__label" for="written-format-3">
      Letter with changes to font, paper colour, spacing or print size
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="written-format-4" name="written-format" type="radio" value="Audio">
    <label class="govuk-label govuk-radios__label" for="written-format-4">
      Audio
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="written-format-5" name="written-format" type="radio" value="Braille">
    <label class="govuk-label govuk-radios__label" for="written-format-5">
      Braille
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="written-format-6" name="written-format" type="radio" value="British Sign Language video">
    <label class="govuk-label govuk-radios__label" for="written-format-6">
      British Sign Language video
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="written-format-7" name="written-format" type="radio" value="Microsoft Word document">
    <label class="govuk-label govuk-radios__label" for="written-format-7">
      Microsoft Word document
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="written-format-8" name="written-format" type="radio" value="PDF with accessible text">
    <label class="govuk-label govuk-radios__label" for="written-format-8">
      PDF with accessible text
    </label>
  </div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>

{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}

<form class="form">

{{ govukRadios({
name: "written-format",
fieldset: {
legend: {
  text: "How should we write to you?",
  isPageHeading: true,
  classes: "govuk-fieldset__legend--l"
}
},
hint: {
html: "<p class='govuk-hint'>Select the best option for you.<p>"  
},
items: [
{
  value: "Standard letter (12-point Arial text on white paper)",
  text: "Standard letter (12-point Arial text on white paper)"
},
{
  value: "Large print",
  text:  "Large print"
},
{
  value: "Letter with changes to font, paper colour, spacing or print size",
  text: "Letter with changes to font, paper colour, spacing or print size"
},
{
  value: "Audio",
  text: "Audio"
},
{
  value: "Braille",
  text: "Braille"
},
{
  value: "British Sign Language video",
  text: "British Sign Language video"
},

{
  value: "Microsoft Word document",
  text: "Microsoft Word document"
},
{
  value: "PDF with accessible text",
  text: "PDF with accessible text"
}

]
}) }}

{{ govukButton({
text: "Continue"
}) }}
</form>

Other print sizes, fonts and colours: more detail

Unlike other screens in the pattern, this screen uses checkboxes because multiple formatting changes can be chosen.

The large print option is repeated here for people who need large print alongside other formatting changes.

Some options lead to further detailed questions, for example on paper colour or preferred font.

<form class="form">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="non-standard-letter-options-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
  <h1 class="govuk-fieldset__heading">
    What changes do you need?
  </h1>
</legend>
<div id="non-standard-letter-options-hint" class="govuk-hint">
  You can choose more than one option. We will ask for more detail if necessary.
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
  <div class="govuk-checkboxes__item">
    <input class="govuk-checkboxes__input" id="non-standard-letter-options" name="non-standard-letter-options" type="checkbox" value="A different font">
    <label class="govuk-label govuk-checkboxes__label" for="non-standard-letter-options">
      A different font
    </label>
  </div>
  <div class="govuk-checkboxes__item">
    <input class="govuk-checkboxes__input" id="non-standard-letter-options-2" name="non-standard-letter-options" type="checkbox" value="Bold text">
    <label class="govuk-label govuk-checkboxes__label" for="non-standard-letter-options-2">
      Bold text
    </label>
  </div>
  <div class="govuk-checkboxes__item">
    <input class="govuk-checkboxes__input" id="non-standard-letter-options-3" name="non-standard-letter-options" type="checkbox" value="Coloured paper">
    <label class="govuk-label govuk-checkboxes__label" for="non-standard-letter-options-3">
      Coloured paper
    </label>
  </div>
  <div class="govuk-checkboxes__item">
    <input class="govuk-checkboxes__input" id="non-standard-letter-options-4" name="non-standard-letter-options" type="checkbox" value="Double line spacing">
    <label class="govuk-label govuk-checkboxes__label" for="non-standard-letter-options-4">
      Double line spacing
    </label>
  </div>
  <div class="govuk-checkboxes__item">
    <input class="govuk-checkboxes__input" id="non-standard-letter-options-5" name="non-standard-letter-options" type="checkbox" value="Large print">
    <label class="govuk-label govuk-checkboxes__label" for="non-standard-letter-options-5">
      Large print
    </label>
  </div>
  <div class="govuk-checkboxes__divider">or</div>
  <div class="govuk-checkboxes__item">
    <input class="govuk-checkboxes__input" id="non-standard-letter-options-7" name="non-standard-letter-options" type="checkbox" value="Standard letter (12-point Arial text on white paper)" data-behaviour="exclusive">
    <label class="govuk-label govuk-checkboxes__label" for="non-standard-letter-options-7">
      Standard letter (12-point Arial text on white paper)
    </label>
  </div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>

{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

<form class="form">
{{ govukCheckboxes({
name: "non-standard-letter-options",
fieldset: {
legend: {
  text: "What changes do you need?",
  isPageHeading: true,
  classes: "govuk-fieldset__legend--l"
}

},
hint: {
text: "You can choose more than one option. We will ask for more detail if necessary."  
},

items: [
{
  value: "A different font",
  text: "A different font"
},
{
  value: "Bold text",
  text: "Bold text"
},
{
  value: "Coloured paper",
  text: "Coloured paper"
},
{
  value: "Double line spacing",
  text: "Double line spacing"
},

{
  value: "Large print",
  text: "Large print"
},
{
  divider: "or"
},
{
  value: "Standard letter (12-point Arial text on white paper)",
  text: "Standard letter (12-point Arial text on white paper)",
  behaviour: "exclusive"
}
]
}) }}

{{ govukButton({
text: "Continue"
}) }}
</form>

Alternative spoken formats

This screen lists the high level options for spoken communication, presented as radio buttons. More detailed options are available after each choice.

<form class="form">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="spoken-options-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
  <h1 class="govuk-fieldset__heading">
    How should we contact you if we need to speak to you?
  </h1>
</legend>
<div id="spoken-options-hint" class="govuk-hint">
  We usually contact you by phone if we need to speak to you. Select the best option for your needs.
</div>
<div class="govuk-radios" data-module="govuk-radios">
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="spoken-options" name="spoken-options" type="radio" value="Standard phone call">
    <label class="govuk-label govuk-radios__label" for="spoken-options">
      Standard phone call
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="spoken-options-2" name="spoken-options" type="radio" value="Relay UK">
    <label class="govuk-label govuk-radios__label" for="spoken-options-2">
      Relay UK
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="spoken-options-3" name="spoken-options" type="radio" value="Textphone">
    <label class="govuk-label govuk-radios__label" for="spoken-options-3">
      Textphone
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="spoken-options-4" name="spoken-options" type="radio" value="Signing or lipspeaking">
    <label class="govuk-label govuk-radios__label" for="spoken-options-4">
      Signing or lipspeaking
    </label>
  </div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>

{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}

<form class="form">
{{ govukRadios({
name: "spoken-options",
fieldset: {
legend: {
  text: "How should we contact you if we need to speak to you?",
  isPageHeading: true,
  classes: "govuk-fieldset__legend--l"
}
},
hint: {
text: "We usually contact you by phone if we need to speak to you. Select the best option for your needs."  
},
items: [
{
  value: "Standard phone call",
  text: "Standard phone call"
},
{
  value: "Relay UK",
  text: "Relay UK"
},
{
  value: "Textphone",
  text: "Textphone"
},
{
  value: "Signing or lipspeaking",
  text: "Signing or lipspeaking"
}
]
}) }}

{{ govukButton({
text: "Continue"
}) }}
</form>

Signing or lipspeaking: more detail

In-person services such as lipspeaking, hands-on signing and Deafblind Manual alphabet are included in this category.

<form class="form">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
  <h1 class="govuk-fieldset__heading">
    What signing or lipspeaking service do you need?
  </h1>
</legend>
<div class="govuk-radios" data-module="govuk-radios">
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="signing-lipspeaking" name="signing-lipspeaking" type="radio" value="British Sign Language (BSL) interpreter">
    <label class="govuk-label govuk-radios__label" for="signing-lipspeaking">
      British Sign Language (BSL) interpreter
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="signing-lipspeaking-2" name="signing-lipspeaking" type="radio" value="Deafblind Manual alphabet">
    <label class="govuk-label govuk-radios__label" for="signing-lipspeaking-2">
      Deafblind Manual alphabet
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="signing-lipspeaking-3" name="signing-lipspeaking" type="radio" value="Hands-on signing">
    <label class="govuk-label govuk-radios__label" for="signing-lipspeaking-3">
      Hands-on signing
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="signing-lipspeaking-4" name="signing-lipspeaking" type="radio" value="Lipspeaking">
    <label class="govuk-label govuk-radios__label" for="signing-lipspeaking-4">
      Lipspeaking
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="signing-lipspeaking-5" name="signing-lipspeaking" type="radio" value="Sign Supported English">
    <label class="govuk-label govuk-radios__label" for="signing-lipspeaking-5">
      Sign Supported English
    </label>
  </div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>

{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}

<form class="form">
{{ govukRadios({
name: "signing-lipspeaking",
fieldset: {
legend: {
  text: "What signing or lipspeaking service do you need?",
  isPageHeading: true,
  classes: "govuk-fieldset__legend--l"
}
},
items: [
{
  value: "British Sign Language (BSL) interpreter",
  text: "British Sign Language (BSL) interpreter"
},
{
  value: "Deafblind Manual alphabet",
  text: "Deafblind Manual alphabet"
},
{
  value: "Hands-on signing",
  text: "Hands-on signing"
},
{
  value: "Lipspeaking",
  text: "Lipspeaking"
},
{
  value: "Sign Supported English",
  text: "Sign Supported English"
}
]
}) }}

{{ govukButton({
text: "Continue"
}) }}
</form>

Do you need any other help when we contact you?

This option enables people to tell you about communications support that might not be included in your standard list.

<form class="form">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="other-help-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
  <h1 class="govuk-fieldset__heading">
    Do you need any other help when we contact you?
  </h1>
</legend>
<div id="other-help-hint" class="govuk-hint">
  This might include another way to write or speak to you, or help with understanding information we send you.
</div>
<div class="govuk-radios" data-module="govuk-radios">
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="other-help" name="other-help" type="radio" value="yes">
    <label class="govuk-label govuk-radios__label" for="other-help">
      Yes
    </label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="other-help-2" name="other-help" type="radio" value="no">
    <label class="govuk-label govuk-radios__label" for="other-help-2">
      No
    </label>
  </div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>

{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}

<form class="form">
{{ govukRadios({
name: "other-help",
fieldset: {
legend: {
  text: "Do you need any other help when we contact you?",
  isPageHeading: true,
  classes: "govuk-fieldset__legend--l"
}
},
hint: {
text: "This might include another way to write or speak to you, or help with understanding information we send you."  
},
items: [
{
  value: "yes",  
  text: "Yes"
},
{
  value: "no",
  text: "No"
}
]
}) }}

{{ govukButton({
text: "Continue"
}) }}
</form>

Check answers

This screen summarises the user’s choices and gives the option of changing them.

Check your answers

How we will contact you

When we write to you: Standard letter (12-point Arial text on white paper); Change how we write to you
When we speak to you: Standard phone call; Change how we speak to you
Do you need any other help?: No; Change if you need any other help

<h1 class="govuk-heading-xl">
Check your answers
</h1>
<h2 class="govuk-heading-m">
How we will contact you
</h2>
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
When we write to you
</dt>
<dd class="govuk-summary-list__value">
Standard letter (12-point Arial text on white paper)
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> how we write to you</span></a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
When we speak to you
</dt>
<dd class="govuk-summary-list__value">
Standard phone call
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> how we speak to you</span></a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Do you need any other help?
</dt>
<dd class="govuk-summary-list__value">
No
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> if you need any other help</span></a>
</dd>
</div>
</dl>

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

<h1 class="govuk-heading-xl">
Check your answers
</h1>

<h2 class="govuk-heading-m">
How we will contact you
</h2>

{{ govukSummaryList({
rows: [
{
key: {
  text: "When we write to you"
},
value: {
  text: "Standard letter (12-point Arial text on white paper)"
},
actions: {
  items: [
    {
      href: "#",
      text: "Change",
      visuallyHiddenText: " how we write to you"
    }
  ]
}
},
{
key: {
  text: "When we speak to you"
},
value: {
  text: "Standard phone call"
},
actions: {
  items: [
    {
      href: "#",
      text: "Change",
      visuallyHiddenText: " how we speak to you"
    }
  ]
}
},
{
key: {
  text: "Do you need any other help?"
},
value: {
  text: "No"
},
actions: {
  items: [
    {
      href: "#",
      text: "Change",
      visuallyHiddenText: " if you need any other help"
    }
  ]
}
}
]
}) }}

Accessibility

Because this pattern is built for users with access needs, it is particularly important that you test the accessibility of this pattern in the context of your own service.

The pattern uses only standard components from the GOV.UK Design System.

For more about building accessible services see the DWP Accessibility Manual.

Research

This pattern is based on research and development work for services including:

Apply for New Style Jobseekers Allowance
Apply for Pension Credit
Apply for a National Insurance Number
Apply for PIP
Apply for help arranging Child Maintenance

Using the term “alternative formats”

One service tested this and found that users with access needs were familiar with the term from other contexts and services, and understood what it means.

Where to ask about alternative formats

In one service, asking for this information on a contact details screen along with address and phone number led some users to believe that the application would then be continued in their alternative format. In fact their choices were only used for later communications once the application was complete.

Contribute

If you use this pattern, please let us know so we can make it better for everyone. There is an open discussion for this pattern on GitHub where you can share your results or anything else you think might be useful.

Research questions

The following questions need research: please test them if you can.

Compared to a design with a yes/no filtering question:

do people make more or less use of the Back / standard letter options on the second screen?
are people still able to successfully navigate the journey?
how confident do people feel that they understand what the question is about?

Compared to designs with a) no “other” option and b) with “other” options on every screen:

how do people who need a non-standard format experience the journey?
what do they expect will happen at the end of the journey?
how confident are they that their needs will be met?

Contributors

Thanks to all the people and teams who helped develop this pattern, including:

Citizen Preference Team
Customer Equality and Accessibility Team
Preferences, Evidence and Notifications Team
DWP Legal Advisers, Government Legal Department

Apply for PIP
Attendance Allowance
Child Maintenance
New Style Employment and Support Allowance
New Style Jobseekers Allowance

Discuss Choose alternative contact formats on GitHub

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk

Cookies on the DWP Design System website

Help users to Choose alternative contact formats

Principles

When to use this pattern

When not to use this pattern

How it works

User journey

Types of alternative contact format

Written communication

Spoken communication

Technical guidance

Selected example screens

Alternative written formats

How should we write to you?

Other print sizes, fonts and colours: more detail

What changes do you need?

Alternative spoken formats

How should we contact you if we need to speak to you?

Signing or lipspeaking: more detail

What signing or lipspeaking service do you need?

Do you need any other help when we contact you?

Do you need any other help when we contact you?

Check answers

Check your answers

How we will contact you

Accessibility

Research

Using the term “alternative formats”

Where to ask about alternative formats

Contribute

Research questions

Contributors

Get in touch