From 3773e2beaabc62e058e234cce047cc60efb009db Mon Sep 17 00:00:00 2001 From: David Hunter Date: Wed, 22 Jan 2025 13:11:14 +0000 Subject: [PATCH 1/5] add hub page examples --- docs/examples/hub-pages/services.njk | 78 +++++++++++++++++++++++++ docs/examples/hub-pages/your-health.njk | 58 ++++++++++++++++++ docs/patterns/hub-page.md | 12 ++++ 3 files changed, 148 insertions(+) create mode 100644 docs/examples/hub-pages/services.njk create mode 100644 docs/examples/hub-pages/your-health.njk create mode 100644 docs/patterns/hub-page.md diff --git a/docs/examples/hub-pages/services.njk b/docs/examples/hub-pages/services.njk new file mode 100644 index 0000000..09d9d8f --- /dev/null +++ b/docs/examples/hub-pages/services.njk @@ -0,0 +1,78 @@ +--- +layout: layouts/example-full-page-mobile.njk +mobile: true +title: Services +figmaLink: +vueLink: +--- + +{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %} +{% from "nhsapp/components/card/macro.njk" import nhsappCard %} +{% from "nhsapp/styles/section-heading/macro.njk" import nhsappSectionHeading %} + +
+
+ +

Services

+

Get care and support to help you stay well.

+ + {{ nhsappSectionHeading({ + headingText: "Your GP services" + }) }} + + {{ nhsappCardGroup({ + stacked: true, + cards: [ + { + title: 'Request medicines', + href: '#' + }, + { + title: 'Contact your GP surgery for a document or update', + href: '#' + }, + { + title: 'Check for available GP appointments', + href: '#' + } + ] + }) }} + + {{ nhsappSectionHeading({ + headingText: "Other NHS services" + }) }} + + {{ nhsappCardGroup({ + stacked: true, + cards: [ + { + title: 'Book', + href: '#' + }, + { + title: 'Request prescriptions', + href: '#' + } + ] + }) }} + + {{ nhsappSectionHeading({ + headingText: "Find health information" + }) }} + + {{ nhsappCardGroup({ + stacked: true, + cards: [ + { + title: 'Book', + href: '#' + }, + { + title: 'Request prescriptions', + href: '#' + } + ] + }) }} + +
+
\ No newline at end of file diff --git a/docs/examples/hub-pages/your-health.njk b/docs/examples/hub-pages/your-health.njk new file mode 100644 index 0000000..aff3135 --- /dev/null +++ b/docs/examples/hub-pages/your-health.njk @@ -0,0 +1,58 @@ +--- +layout: layouts/example-full-page-mobile.njk +mobile: true +title: Your health +figmaLink: +vueLink: +--- + +{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %} +{% from "nhsapp/components/card/macro.njk" import nhsappCard %} +{% from "nhsapp/styles/section-heading/macro.njk" import nhsappSectionHeading %} + +
+
+ +

Your health

+

View your personal records and choices.

+ + {{ nhsappCardGroup({ + stacked: true, + cards: [ + { + title: "GP health record", + href: "#" + }, + { + title: "View and manage prescriptions", + href: "/pages/your-health/prescriptions-p9" + }, + { + title: "Upcoming and past appointments", + href: "/pages/your-health/upcoming-and-past-appointments-p9" + }, + { + title: "Test results and imaging", + href: "#" + }, + { + title: "COVID-19 vaccine record", + href: "#" + }, + { + title: "NHS COVID Pass", + href: "#" + }, + { + title: "Your health choices", + href: "/pages/your-health/your-health-choices-p9" + }, + { + title: "Care plans", + href: "/pages/your-health/care-plans-p9" + } + ] + })}} + +
+
\ No newline at end of file diff --git a/docs/patterns/hub-page.md b/docs/patterns/hub-page.md new file mode 100644 index 0000000..b7a06f3 --- /dev/null +++ b/docs/patterns/hub-page.md @@ -0,0 +1,12 @@ +--- +layout: layouts/pattern.njk +title: Hub page +description: ... +backlogID: 69 +tags: + - pattern +--- + +{% example "hub-pages/services.njk" %} + +{% example "hub-pages/your-health.njk" %} From 345cc42844bdc313c7e1e76babe2cf8403f84477 Mon Sep 17 00:00:00 2001 From: David Hunter Date: Wed, 22 Jan 2025 13:23:16 +0000 Subject: [PATCH 2/5] add hub logic to mobile examples --- .eleventy.js | 3 +- .../layouts/partials/bottom-nav-native.njk | 40 +++++++++++++++---- .../error-pages/problem-with-service.njk | 1 + docs/examples/hub-pages/services.njk | 1 + docs/examples/hub-pages/your-health.njk | 1 + 5 files changed, 37 insertions(+), 9 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index a3c4558..2e2c827 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -88,7 +88,8 @@ export default function (eleventyConfig) { figmaLink: data.figmaLink, vueLink: data.vueLink, mobile: data.mobile, - mobileHeader: data.mobileHeader + mobileHeader: data.mobileHeader, + hub: data.hub } return nunjucksEnv.render('example.njk', templateData) }) diff --git a/docs/_includes/layouts/partials/bottom-nav-native.njk b/docs/_includes/layouts/partials/bottom-nav-native.njk index ceca2e8..69bd15e 100644 --- a/docs/_includes/layouts/partials/bottom-nav-native.njk +++ b/docs/_includes/layouts/partials/bottom-nav-native.njk @@ -4,26 +4,50 @@ diff --git a/docs/examples/error-pages/problem-with-service.njk b/docs/examples/error-pages/problem-with-service.njk index 4f617db..f040e8f 100644 --- a/docs/examples/error-pages/problem-with-service.njk +++ b/docs/examples/error-pages/problem-with-service.njk @@ -1,6 +1,7 @@ --- layout: layouts/example-full-page-mobile.njk mobile: true +hub: Services title: Problem with services figmaLink: vueLink: diff --git a/docs/examples/hub-pages/services.njk b/docs/examples/hub-pages/services.njk index 09d9d8f..c3f2006 100644 --- a/docs/examples/hub-pages/services.njk +++ b/docs/examples/hub-pages/services.njk @@ -1,6 +1,7 @@ --- layout: layouts/example-full-page-mobile.njk mobile: true +hub: Services title: Services figmaLink: vueLink: diff --git a/docs/examples/hub-pages/your-health.njk b/docs/examples/hub-pages/your-health.njk index aff3135..8010dc5 100644 --- a/docs/examples/hub-pages/your-health.njk +++ b/docs/examples/hub-pages/your-health.njk @@ -1,6 +1,7 @@ --- layout: layouts/example-full-page-mobile.njk mobile: true +hub: Your health title: Your health figmaLink: vueLink: From 2f67a81a8eb213baa4f16b15b61a03e89f981aba Mon Sep 17 00:00:00 2001 From: David Hunter Date: Wed, 29 Jan 2025 11:16:33 +0000 Subject: [PATCH 3/5] update hub page example and add page description --- docs/examples/hub-pages/services.njk | 32 ++++++++++++++++------------ docs/patterns/hub-page.md | 2 +- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/docs/examples/hub-pages/services.njk b/docs/examples/hub-pages/services.njk index c3f2006..c5f487a 100644 --- a/docs/examples/hub-pages/services.njk +++ b/docs/examples/hub-pages/services.njk @@ -47,11 +47,11 @@ vueLink: stacked: true, cards: [ { - title: 'Book', + title: 'Check if you need urgent medical help using 111 online', href: '#' }, { - title: 'Request prescriptions', + title: 'Find NHS services near you', href: '#' } ] @@ -62,18 +62,22 @@ vueLink: }) }} {{ nhsappCardGroup({ - stacked: true, - cards: [ - { - title: 'Book', - href: '#' - }, - { - title: 'Request prescriptions', - href: '#' - } - ] - }) }} + stacked: true, + cards: [ + { + title: "Browse NHS health information", + href: "#" + }, + { + title: "Browse NHS medicines information", + href: "#" + }, + { + title: "Find COVID-19 guidance", + href: "#" + } + ] + })}} \ No newline at end of file diff --git a/docs/patterns/hub-page.md b/docs/patterns/hub-page.md index b7a06f3..9f0c313 100644 --- a/docs/patterns/hub-page.md +++ b/docs/patterns/hub-page.md @@ -1,7 +1,7 @@ --- layout: layouts/pattern.njk title: Hub page -description: ... +description: Hubs pages are the main menu pages in the NHS App. Each hub is a grouping of related links. From a hub, users can follow links to start particular journeys or move deeper into the app to lower menu pages (sub-hubs). backlogID: 69 tags: - pattern From 074e9c7962cce38462acf37406d409cb646c2ff3 Mon Sep 17 00:00:00 2001 From: David Hunter Date: Wed, 29 Jan 2025 11:28:51 +0000 Subject: [PATCH 4/5] add draft guidance --- docs/patterns/hub-page.md | 42 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/docs/patterns/hub-page.md b/docs/patterns/hub-page.md index 9f0c313..8a3ae5c 100644 --- a/docs/patterns/hub-page.md +++ b/docs/patterns/hub-page.md @@ -7,6 +7,46 @@ tags: - pattern --- +{% example "hub-pages/your-health.njk" %} + +## How to use hub pages + +Hub pages are used at the highest level of the NHS App structure. They should always be accessible from the header or footer bar (the global navigation). + +### The structure of a hub page + {% example "hub-pages/services.njk" %} -{% example "hub-pages/your-health.njk" %} +#### Page heading + +This page heading is the name of the hub. + +#### Page description + +This short description is placed below the main heading. It gives users context about what each hub contains. On main hubs this text should be as concise as possible and fit into one line. + +#### Card links + +Use [card links](/components/card-links) takes users to a sub-hub or to the start of a specific journey. + +If a hub page includes a long list of card links (more than 5 is a good guide) you should consider using [section heading](/components/section-heading) to group card links together. + +This can help to divide and organise a page. It makes the page easier to scan and reduces the cognitive load on users. Research shows that users can be overwhelmed by long lists on NHS App pages. + +#### Back buttons + +Back buttons are not used on hub pages, as they are the starting point for different journeys. All journeys or sub-hubs accessed from a hub page will have a back button. + +## Adding journeys to hub pages + +For help with adding journeys to hub pages, see our guidance on adding a new journey to the NHS App. + +## Research + +In our research into hub labelling, users correctly understood that ‘Services’ relates to future care and support. ‘Your health’ was correctly associated with ongoing healthcare, health records and personal choices. Iterative adjustments were made to the hub labels throughout the research, including the transition from 'Medical Support' to 'Services’ based on user feedback. + +### Hub icons + +The hub icons on the header and footer bars were well recognised. The 'Your Health,' 'Messages,' 'Home,' and 'Account and Settings' icons were universally associated correctly by 100% of participants. + +However, the 'Services' icon displayed varied associations, with 60% linking it to 'Your Health,' 20% directly to 'Services,' 13% to 'Help and Support,' and 7% to 'Switch Profiles.' From e88462d3a8fc2378efd14d3713c8f11ca3d49172 Mon Sep 17 00:00:00 2001 From: David Hunter Date: Wed, 29 Jan 2025 11:35:48 +0000 Subject: [PATCH 5/5] update guidance --- docs/patterns/hub-page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/patterns/hub-page.md b/docs/patterns/hub-page.md index 8a3ae5c..7a6faf0 100644 --- a/docs/patterns/hub-page.md +++ b/docs/patterns/hub-page.md @@ -39,7 +39,7 @@ Back buttons are not used on hub pages, as they are the starting point for diffe ## Adding journeys to hub pages -For help with adding journeys to hub pages, see our guidance on adding a new journey to the NHS App. +The Navigation and Onboarding Team maintains and updates the hub pages. For help with adding journeys to hub pages, please contact the team. ## Research