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

Accessibility

When a time limit, like a session timeout, is set ensure a user is informed, especially if this may result in a loss of data. See the timeouts guidance for more information.

If your service uses this pattern, let us know of any insights you have on accessibility considerations.

Research

This pattern is used by:

  • Employer checking service
  • Passport renewals

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

Help us improve this pattern

This pattern needs improving. We need evidence about:

  • how to write for this pattern

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.