Help users toStop a service timing out

Also known as: modal window

Creating focus on a single interaction.

An example of a modal window warning the service will time out

When to use this pattern

Modals should be avoided in most cases. They are hard to make accessible and do not work well in mobile views.

Adding content to a new page instead of showing it in a modal should be the default approach.

Modals can be useful when you need to draw a user's attention to something, for example timeout warnings. Please discuss with the wider community or email design@digital.homeoffice.gov.uk before using this pattern.

How it works

If the modal is user-triggered, the content that opens the modal window (for example, a link or button) should explain to the user what will happen.

A modal should:

  • focus on a single task
  • include a heading
  • be accessible

Services using this pattern

  • Employer checking service
  • Passport renewals

Research

More research is needed. If your service uses this pattern, get in touch to share your user research findings.

Accessibility

Read our accessibility guidance on timeouts.

Get in touch

If you’ve got a question or suggestion share it on the Slack channel #ho-design-system, on GitHub or email design@digital.homeoffice.gov.uk.