Pattern for app help

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)
 

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: '#'
       }
     ]
   }

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.
+
+<figure class="nhsuk-image" style="text-align: center;">
+  <img
+    src="/assets/images/help-overlay-example.png"
+    alt="NHS App help content opening in a web browser overlay, on top of the main app interface."
+    width="300"
+    style="display: inline-block;"
+  >
+  <figcaption class="nhsuk-image__caption">
+    An example of how the current web browser overlay for help pages displays on an Apple phone.
+  </figcaption>
+</figure>
+
+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.