diff --git a/docs/assets/images/help-overlay-example.png b/docs/assets/images/help-overlay-example.png new file mode 100644 index 00000000..59e67ba8 Binary files /dev/null and b/docs/assets/images/help-overlay-example.png differ diff --git a/docs/components/top-navigation.md b/docs/components/top-navigation.md index 1eb2f814..d2f41aed 100644 --- a/docs/components/top-navigation.md +++ b/docs/components/top-navigation.md @@ -24,7 +24,7 @@ On the web browser version of the NHS App, we use an [NHS.UK header](https://ser The top navigation includes: - the NHS logo, which users can select to return to the home screen of the NHS App -- the App help button, which users can select to open help pages hosted on the NHS website +- the App help button, which users can select to [get help while using the NHS App](../patterns/get-help) ![Details of the top navigation menu. Selecting the NHS logo leads to the home screen of the NHS App. The app help button goes to the help and support pages.](/assets/images/using-top-nav.png) diff --git a/docs/examples/header/header-logged-in.njk b/docs/examples/header/header-logged-in.njk index 10722bff..1a5b669e 100644 --- a/docs/examples/header/header-logged-in.njk +++ b/docs/examples/header/header-logged-in.njk @@ -16,11 +16,7 @@ vueLink: classes: 'nhsapp-u-hide-until-tablet', items: [ { - text: 'Help and support', - href: '#' - }, - { - text: 'Account', + text: 'App help', href: '#' }, { @@ -35,32 +31,13 @@ vueLink: text: 'Home', href: '#' }, - { - text: 'Services', - href: '#' - }, - { - text: 'Your health', - href: '#' - }, { text: 'Messages', href: '#' }, { - text: 'Help and support', - href: '#', - classes: 'nhsapp-u-hide-from-tablet' - }, - { - text: 'Account', - href: '#', - classes: 'nhsapp-u-hide-from-tablet' - }, - { - text: 'Log out', - href: '#', - classes: 'nhsapp-u-hide-from-tablet' + text: 'Profile', + href: '#' } ] } diff --git a/docs/patterns/get-help.md b/docs/patterns/get-help.md new file mode 100644 index 00000000..a3dd1f14 --- /dev/null +++ b/docs/patterns/get-help.md @@ -0,0 +1,67 @@ +--- +layout: layouts/pattern.njk +title: Get help while using the NHS App +description: Use the app help button to let users access help information while they use the NHS App. +backlogID: 447 +tags: + - helpUsers +--- + +This helps users overcome problems they experience in the app without having to contact their GP or the app support team. + +![The top navigation menu. The NHS logo is on the left and a button with the text app help is on the right.](/assets/images/top-navigation-2026.png) + +## When to use + +The button is part of the [top navigation]([../components/top-navigation) menu. It can be accessed from almost every screen of the app. + +When a user is accessing NHS App services through a web browser, the help button is part of the persistent [header (web)](../components/header-web) menu. + +## How to use + +Use the button to open a help page hosted on the NHS website. In the mobile app the page opens in a web browser overlay. + +
+ NHS App help content opening in a web browser overlay, on top of the main app interface. +
+ An example of how the current web browser overlay for help pages displays on an Apple phone. +
+
+ +This overlay pattern is being reviewed. We are looking to [improve how NHS website and third-party pages open from the app](https://github.com/nhsuk/nhsapp-frontend/issues/450). + +In the web browser version of the NHS App, help pages open in a new browser tab. + +### Which page to open + +Take users to a help topic menu page that's relevant to where they are in the app. For example, [Help with prescriptions in the NHS App](https://www.nhs.uk/nhs-app/help/prescriptions/) or [Help with appointments in the NHS App](https://www.nhs.uk/nhs-app/help/appointments/). + +If there is not a relevant topic menu page, take users to the main [Help with using the NHS App](https://www.nhs.uk/nhs-app/help/) menu page. + +## How not to use + +Do not route the app help button to a particular article page. Users may need help with something other than the screen they are on in the app. + +Showing users a menu page gives them various options that may be relevant to their problem. + +## Research + +“App help” was well understood as a label. People were consistently able to find and use the button. + +There were some issues with user experience when users were using the browser overlay. Some people: + +- navigated to other parts of the NHS website from within the browser overlay and lost their bearings +- thought they were still inside the app while using the browser overlay + +We have made content changes to make it clearer when users are viewing help information and not acting inside the NHS App. This includes adding an "NHS App help" sub-heading on help article pages. + +We are [exploring how NHS website and third-party websites open from the app](https://github.com/nhsuk/nhsapp-frontend/issues/450). + +## Accessibility + +The button has been tested with visually impaired users. We found it to be accessible for screen readers.