diff --git a/docs/assets/images/error-pages/confirmed-prescriptions-1120.png b/docs/assets/images/error-pages/confirmed-prescriptions-1120.png new file mode 100644 index 0000000..9df53c8 Binary files /dev/null and b/docs/assets/images/error-pages/confirmed-prescriptions-1120.png differ diff --git a/docs/assets/images/error-pages/connect-to-app-1120.png b/docs/assets/images/error-pages/connect-to-app-1120.png new file mode 100644 index 0000000..714a887 Binary files /dev/null and b/docs/assets/images/error-pages/connect-to-app-1120.png differ diff --git a/docs/assets/images/error-pages/log-in-1120.png b/docs/assets/images/error-pages/log-in-1120.png new file mode 100644 index 0000000..8876acc Binary files /dev/null and b/docs/assets/images/error-pages/log-in-1120.png differ diff --git a/docs/assets/images/error-pages/no-appointments-1120.png b/docs/assets/images/error-pages/no-appointments-1120.png new file mode 100644 index 0000000..acb202b Binary files /dev/null and b/docs/assets/images/error-pages/no-appointments-1120.png differ diff --git a/docs/components/error-pages.md b/docs/components/error-pages.md new file mode 100644 index 0000000..fcdacc6 --- /dev/null +++ b/docs/components/error-pages.md @@ -0,0 +1,68 @@ +--- +layout: layouts/component.njk +title: Error pages +description: Use an error page to tell users there is a problem. Explain what has happened and what they can do about it. +--- + +## When to use + +Use an error page when: + +- something has gone wrong +- users cannot continue to the next page + +## When not to use + +Do not use an error page when users make mistakes while completing forms. Instead, follow the NHS service manual guidance for in-page validation error messages, to help users understand what they need to do in context. + +## How to use + +The content of error pages must tell users: + +- what has happened +- what they can do next + +### Describe the problem + +Use the main heading to describe the problem. + +Write the heading using the active voice. Starting with “We” or “You” can help make clear where the issue comes from. For example: + +- “We could not connect you to the NHS App” +- “You need to update the NHS App” + +### Explain the next steps + +You should primarily use the body of an error page to explain what users can do next. + +Use a secondary button to provide the main action on the page. This should be the main step users can take to overcome the error. + +![Error page example](/assets/images/error-pages/log-in-1120.png) + +Sometimes, you may need to use the start of the body text to give more detail about the problem. In this case, use the sub-heading “What you can do” to clearly separate the problem from the solution. + +![Error page example](/assets/images/error-pages/connect-to-app-1120.png) + +### Explain what to do if the problem continues + +Sometimes users may need to contact the NHS App team if an error keeps happening. Use the sub-heading “If the problem continues” to provide this information. + +#### Give alternative actions + +You can use secondary card links to give users alternative actions they could take. This could be a link to a related service. + +Use the sub-heading “Other things you can do” to give alternative actions. + +Use the sub-heading “Find out more” to include supplementary information pages uses might find it helpful to read. + +![Error page example](/assets/images/error-pages/confirmed-prescriptions-1120.png) + +### Give medical signposting + +If the error may be stopping a user from accessing particular medical help, it may be relevant to include signposting to a health service. This could be to their GP surgery if the error occurs while accessing a GP service, or to 111 online. + +Use [inset text](https://service-manual.nhs.uk/design-system/components/inset-text) at the bottom of the page to give 111 signposting. + +Medical signposting is not always needed. There is a risk of users thinking health services can help with technical problems. Check with the clinical team if you need guidance. + +![Error page example](/assets/images/error-pages/no-appointments-1120.png)