Main topic hub (routing) page

[bencullimore]

What

Information architecture (IA) is the structural design of information environments. 
The organisation and labelling of websites and other digital products to support usability and findability.

Well-structured, tagged content is easier to navigate, search and manage.

In a well-structured website, you'll have a defined hierarchy (parent and children pages) with pages organised at various levels.

The diagram above shows a hypothetical website structure, with parent and child pages and also the levels at which they sit.

At level 1 you'll have the main topic page which routes users to subtopics (level 2).

In the context of health information; Diabetes would be at level 1, Type 1 (diabetes) and Type 2 (diabetes) would be children of Diabetes at level 2, and children pages of type 1 and type 2 (information on treatments, symptoms etc.) would be level 3 and beyond.

This issue relates to the routing page (a page of links) at level 1.

Why

The information architecture team on NHS.UK are working on a new structure for how we organise our health information on the website. We've been testing visual representations of this structure with users and found a need for a hub or routing page at level 1 to help users navigate large topic areas with multiple levels.

Level 1 hub (routing pages) need to

• Give users the context of where they are on the website; if they need to go up a level (homepage) using breadcrumbs https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/6
• introduce the topic area (using a heading, or h1 https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/157)
• if the heading isn't clear enough, or if you have user evidence that you need more context about the topic area, use lede text https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/106
• provide 'quick links' to information/services buried deep within the topic structure using Top tasks https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/253
• allow uses to see a high-level overview of the main topic area broken down into smaller topics using the canonical panel link https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/254
• provide links to related information pages, in case a users mental model of how information is organised doesn't match how we've grouped it (not all users think the same - always good to have a get-out clause). Having 'related links' also help if a user is navigating through the topic area and they've read all the needed to in that section but have a query which is related.

Anatomy of a level 1 hub routing page

User research

IA components, patterns and page templates have been tested in 8 usability lab; 4 in person, 4 remote. We've spoken to 52 users, 32 with access needs a mix of high and low digital and health literacy.

Lab 3

Headline: The hub pages were working well to give people an idea of where to go (they work really well to route people, even several hub layers deep). People returned to them to 'reset' themselves.

U1: Scanned the headings and text to understand the available options. U6: Understood the canons on the pregnancy hub and recognised the difference between them. U2: Remembers the 'Labour & Birth' section on the L1 hub and gets back easily. U3: Understood the L1 diabetes hub would have a route back to the L2 T2D hub. U4: Re-orients using the L1 hub.

Lab 4

Headline: All participants used various levels of hubs to orientate and re-orientate (go back to) during tasks, they remembered that they existed and had an idea of what to expect on them:

User 5: Re-orients using hubs and back button. Gets to right places. A participant describes level 1 pregnancy hub as "main screen" - P1 "Going back to the top" (level 1 hub) - P4 The participant goes to L1 hub - seems aware that different types of diabetes would be in here - P3

Lab 5 Each user navigated the Level 1, level 2 and level 3 hubs using the canon links to understand the content or the area.

[bencullimore]

After consulting with 2 teams on the NHS website working with this template on large topics such as:

Pregnancy Baby Mental health We've agreed to rename the 'Level 1 hub/routing page" template to 'Main topic hub/routing page'

Naming the templates numerically is causing issues with teams who are finding they need more than 2 levels of hub/routing pages. For example, a structure that requires:

1. Level 1 hub page (main topic)
2. Level 2 hub page (sub topic)
3. Level 3 hub page (sub topic)
4. Level 4 hub page (sub topic)
5. Content/Article page

translates to

1. Level 1 hub template
2. Level 1 hub template
3. Level 2 hub template
4. Level 2 hub template
5. Content/Article page

Which causes confusion and added complexity to teams using templates. Renaming the templates reduces potential confusion in the future

1. Main topic hub
2. Sub topic hub
3. Sub topic hub
4. Sub topic hub
5. Content/Article page

We've also agreed on the following rule:

Topics/directories on the NHS website have to start with the main topic hub template. You cannot have a sub-topic hub without the main topic hub.

[beccagorton182]

Mental health findings

We can split our findings into a Main topic homepage e.g. /mental-health and then a main topic hub page e.g. This is because we found a need a homepage for mental health, and that there should be topic hubs to sit beneath it. This influenced the design as the homepage and the hub pages needed to be visually different in order for users to recognise their journey through the IA.

For the homepage:

• We used the tested design referenced above in this issue. We originally chose 2 top tasks, and 8 canonical link panels. We also included an action link at the top of the page to help people reach urgent support quickly.
• Including short general descriptions of the topic and including examples in the canonical links worked well for users when searching for something. We had a high success rate of users finding what they needed when we asked them to find it from the homepage.
• Top tasks were helpful for users, again, we had a high success rate of users clicking on these to get to things quickly. Using longer descriptions on the top tasks were useful for people to understand what was behind the click.

For the topic hubs:

• In order to make the page more visually different, we used the variant of promo component that is used on NHS services.
• The variant we created used bullet point descriptors instead of paragraph text. This was a suggestion from a user with Dyslexia, Dyspraxia and ADHD, and they remarked it would make things easier for them to scan, as body of text could be overwhelming.
• The bullet point promo has been helpful for users scanning a topic page and has been instrumental in their decision making. - We found that having a balance between generic and specifics in the bullet point was the best, as users were concluding through the specific bullets that's all there was, and the generic bullets were not descriptive enough.

[RoseMunro]

From testing on the Pregnancy and Baby hubs, we found that participants often did not notice the 'related links' on hub pages because they did not scroll down far enough when searching for a topic. We tested with 8 participants.

From UR notes:

• 4 participants searched in 'Health and wellbeing' for information related to mental health. They were not likely to see the related link which might take them to this section (currently located elsewhere in the navigation structure)

P3 went to 'Health and wellbeing' first but missed the related link. Subsequently finds it in 'Support'. P5 thought that this would be in 'Health and wellbeing' and missed the related link. P7: It took quite a while for her to see the related link in 'Health and wellbeing’. P8 went to 'Health and wellbeing' and saw the related link after a bit of scrolling. She notes that she 'might not have seen it' and that it was important that she did as mental health was 'quite a big thing right now.'

[bencullimore]

Thanks, @RoseMunro useful insight. Could you let us know what device(s) you tested with and how many key links were on the page?

Related links were born out of supporting multiple mental models/ ways for users to find content - not the only way. If it was the only way of getting to content or the main way the page should be moved into the canon and the link elevated into 'key links'.

The not scrolling is an issue we'll need to keep an eye on, I've reviewed the feedback from the 7 usability labs we've run, multiple first click tests and analytics from the coronavirus hub and haven't found any concerns around users not scrolling/missing links. @beccagorton182 do you have any insight from testing related links in Mental Health?

Whilst you suggest that your four users missed the link on that specific page with one finding it through another avenue, do you have confidence that they would find the information by another means? Or is the page the link appears on the only way they’ll find that specific piece of content?

[sarawilcox]

For NHS.UK teams, there's more guidance in Confluence: https://nhsd-confluence.digital.nhs.uk/display/NP1/Wagtail+CMS%3A+Common+page+templates+and+how+to+use+them.