nhsuk / nhsuk-service-manual-community-backlog

This is a place for digital teams in the NHS to work together and develop the NHS digital service manual.
https://service-manual.nhs.uk/community-and-contribution
62 stars 5 forks source link

Key links #257

Open bencullimore opened 4 years ago

bencullimore commented 4 years ago

What

The Information Architecture team on NHS.UK has been working on a number of components and page templates to help users navigate the website alongside restructuring the architecture that underpins the content of the website.

Through user testing, we've found hub (routing) pages to be good at breaking down big topic areas such as pregnancy, cancer of COVID-19 into navigable content.

Hup pages are essentially a page of links. Within hub pages we found the need to link to different types of things; in-canon hub links, related (off-canon) links, Top task/shortcut links #253, links to external charities etc.

To help users visually understand the new architecture we needed to introduce a visual hierarchy to links, trying to give users a flavour of what lies beneath

Similar to 'related links', we needed links that "are visually prominent and obviously clickable." but we also needed a link to visually set expectations for the page it was linked to and to work alongside other link types (see Top Task https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/253 and canonical links https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/254) and also work in the context of a user journey through multiple layers of hub pages

Example of 'key links' on https://www.nhs.uk/conditions/coronavirus-covid-19/self-isolation-and-treatment/ image

Key links are essentially a list of linked text that feature on a level 2 hub (parent) which link to child pages.

Key links must not link to content pages outside of the topic/parent in other canons. We use 'related links' for this. Problems will arise when mixing child (non-canon) links with canon links - we lose consistency and navigational elements - 'other' canon links with have different breadcrumbs and side to side (bottom) nav. Not having a consistent thread will become disorientating for users when researching around a topic. If a page is in another section, we have to be upfront and tell them this.

They differ from canonical links in that they commonly to a page of information, not another hub page. They also differ from standard linked text in that they're not a random bunch of links - they're links related to a sub-level of the topic.

Attributes of key links being; bold text, underlined and slightly bigger than body text.

Why

The fundamental organising principles of Information Architecture are:

We need visual elements, components to support the organising principles - to help users navigate through the NHS website, help them understand where they are and where they want to go.

Having the same style of link across the site for hub pages, information pages, main navigation, top tasks, related pages, external websites wouldn't provide users with enough visual hierarchy - an indication of where they are in the structure and what kind of thing they'll find when they click.

Research findings

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. (Lab 3)

Up, down and sideways nav is working well across top nav, hubs and content pages, even with the additional non-canonical links. (lab 4)

We have validated our consistent design approach. People are able to move up, down and sideways around the content. We saw people successfully navigate using Hubs. (Lab 5)

People were easily able to navigate and move around the hub. People were using breadcrumbs and sibling nav to move to different levels of hubs and go back to pages they had seen previously. (Lab 7)

Key links also feature on the coronavirus hub in live https://www.nhs.uk/conditions/coronavirus-covid-19/testing-and-tracing/ - looking at the analytics, we're seeing a good spread of users navigating through the hub pages (including Level2 hub pages with key links) which we can take that the key links are working as part of a wider IA strategy.

BrieWhyatt commented 3 years ago

The breast screening content transformation team have recently tested content in the new structure. This is a smaller section of content than has been tested in this structure previously. screencapture-localhost-3000-breast-screening-topic-1620892349136 From 5 users we found that:

BrieWhyatt commented 2 years ago

The breast screening hub was launched without any related links on the sub-topic hub page, so the page just contained the 'key links' to each of the pages within the section.

Group 8

Since the transformed content has gone live, the click through rate from an onsite search result had improved to over 85% - suggesting the new content is appearing higher within results. Plus, thanks to the re-ranking that occurs within our onsite search, the individual pages within the hub are also being prominently featured with the page about how to book an appointment being 1st in the results.

Plus, bounce rate from within the topic has decreased by around 30%, suggesting users are finding what they need within the content.