The Information Architecture team on NHS.UK introduced two new page page templates to help users navigate the website. One of these page templates is a 'main topic hub' (an example: https://www.nhs.uk/nhs-services/).Through user testing, we've found that hub (routing) pages are good at breaking down big topic areas such as pregnancy, services and health living into navigable content.
Hub pages are essentially a page of links. Within hub pages we found the need to link to different types of things, and 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. We have found that on the main topic hubs, there are often many sub groups of information. However, not all of these sub groups have the same depth of information beneath, and not all sub groups share the same hierarchy of importance.
Therefore, we are proposing an additional card style that should act similar to the card with arrow component https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/254 , in the way that a sub topic link is presented alongside a description. The secondary card will not have the white background, or arrow icon and this will give it a lower visual hierarchy to the main card with arrow. The secondary card should only be used after the main card with arrow component, to represent information of either less importance, or where there is less information within the sub topic.
This component is already live across several different parts of the NHS website.
An example
Why do we need to create a visual hierarchy and introduce another card variation?
In creating this structure on a huge website like NHS.UK, you end up with big topic areas such as 'Pregnancy', or 'Cancer', 'Diabetes'. In these topic areas, we have multiple categories; Diabetes, for example, you'll have a separation of content between type 1 and type 2 diabetes. And within these areas, you'll have a further breakdown for information on diagnosis, treatment, support etc. This all spreads out like the branches of a tree, through various levels.
As some of these groupings are so big, we need to help users understand where they are most likely to find the information they are looking for. This includes giving a visual indication as to where the most important, or biggest volume of information is within these 'big' content groups.
In our research, we started with just implementing the card with arrow component, but found that this did not help users to understand what the key groupings within each hub of information are. When the secondary link was introduced, it was easier for users to understand that some of the sub topics covered more 'niche' topics, had less information beneath them, and were generally only helpful to few people, compared to the majority of finding the information within the cards with arrows useful.
The proposed 'secondary card' component shares similar attributes to the promo link and card with arrow:
the cards act as a link
having underlined, bold text as the heading for the card
include a summary sentence
The secondary card is different from the other card types mentioned as:
it does not have a white background, giving it a reduced sense of visual hierarchy
there is no arrow, indicating the lower amount of information available within those sub topics
What evidence do you have that it meets the needs of the users of those services?
The hub as a whole including the underlying structures, levels, labels, and visual hierarchy has worked well in our labs in helping users navigate through (up and down, side-to-side). The links on the page appear to meet users expectations of what lies beneath.
The Information Architecture team on NHS.UK introduced two new page page templates to help users navigate the website. One of these page templates is a 'main topic hub' (an example: https://www.nhs.uk/nhs-services/).Through user testing, we've found that hub (routing) pages are good at breaking down big topic areas such as pregnancy, services and health living into navigable content.
Hub pages are essentially a page of links. Within hub pages we found the need to link to different types of things, and 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. We have found that on the main topic hubs, there are often many sub groups of information. However, not all of these sub groups have the same depth of information beneath, and not all sub groups share the same hierarchy of importance.
Therefore, we are proposing an additional card style that should act similar to the card with arrow component https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/254 , in the way that a sub topic link is presented alongside a description. The secondary card will not have the white background, or arrow icon and this will give it a lower visual hierarchy to the main card with arrow. The secondary card should only be used after the main card with arrow component, to represent information of either less importance, or where there is less information within the sub topic.
This component is already live across several different parts of the NHS website.
An example
Why do we need to create a visual hierarchy and introduce another card variation?
In creating this structure on a huge website like NHS.UK, you end up with big topic areas such as 'Pregnancy', or 'Cancer', 'Diabetes'. In these topic areas, we have multiple categories; Diabetes, for example, you'll have a separation of content between type 1 and type 2 diabetes. And within these areas, you'll have a further breakdown for information on diagnosis, treatment, support etc. This all spreads out like the branches of a tree, through various levels.
As some of these groupings are so big, we need to help users understand where they are most likely to find the information they are looking for. This includes giving a visual indication as to where the most important, or biggest volume of information is within these 'big' content groups.
In our research, we started with just implementing the card with arrow component, but found that this did not help users to understand what the key groupings within each hub of information are. When the secondary link was introduced, it was easier for users to understand that some of the sub topics covered more 'niche' topics, had less information beneath them, and were generally only helpful to few people, compared to the majority of finding the information within the cards with arrows useful.
We started with the white box 'promo link' which can be found on https://www.nhs.uk/ https://service-manual.nhs.uk/ and https://www.nhsx.nhs.uk/ homepages (amongst others) and tests well with users.
The proposed 'secondary card' component shares similar attributes to the promo link and card with arrow:
The secondary card is different from the other card types mentioned as:
What evidence do you have that it meets the needs of the users of those services? The hub as a whole including the underlying structures, levels, labels, and visual hierarchy has worked well in our labs in helping users navigate through (up and down, side-to-side). The links on the page appear to meet users expectations of what lies beneath.