Open bencullimore opened 4 years ago
mikemonteith
commented
4 years ago Could we call it something else? "Canonical link" is already a term commonly used in web development to mean something else, so it could get confusing.
Sorry to be making the first comment on this comprehensive ticket with something fairly minor!
bencullimore
commented
4 years ago Could we call it something else? "Canonical link" is already a term commonly used in web development to mean something else, so it could get confusing.
Sorry to be making the first comment on this comprehensive ticket with something fairly minor!
- Canonical panel?
- Canonical panel link?
- ...?
fair point, name changed to "Canonical panel link" done
beccagorton182
commented
3 years ago We tested these in our main hub page navigation. Users have acted similarly to the way they did in your labs @bencullimore. Users read the short blurbs in the boxes to make their decision on where they expect to find the information we asked them to find. They worked really well on our main hub, and we used 8 on the page. This seems to be an acceptable number.
Propose:
As I described on #260 we believe there is a need for a variant of this component.
For visual difference on our first level deep from the main hub page, we used this variant of the canonical panel link that removes the white background and icon, similar to the design used on the NHS services page lower down.
We think there is strong justification for this variant as users recognise this as visually different, and really helpful in scanning description content in order to make decisions.
BrieWhyatt
commented
2 years ago In a recent round of user research, the IA team have evaluated using a Main topic hub #260 for a potential new symptoms hub. For example:
We found that:
BrieWhyatt
commented
2 years ago Updated the title of this issue to 'Card with arrow'. This reflects a (now fairly old) discussion from this year with content designers and front end developers to simplify the name of the component to help people identify it and use it correctly.
sarawilcox
commented
1 year ago There have been some questions about the placement of the chevron and whether it should be aligned vertically (top right).
The team that led the IA/nav work on the NHS website said that the rationale for putting it centre right was to try to make it clear that the whole box is clickable - not just the link. Our internal guidance says “The arrow element should always sit to the right of the summary text, pointing towards the right. This is to show the direction of travel the user is taking through the content, from less specific down to more specific.” (Perhaps we should add that to the guidance in the design system?)
The chevron moves around based on the content length, and looks a bit uneven on some of our hub pages. But, since the majority of our users are on mobile, it wouldn’t be as obvious there. If it was right aligned to the heading its placement would also vary depending on heading length. (GOV have their chevron aligned to the top.)
For now, we have no evidence that it's causing problems.
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 https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/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 the NHS App's 'Panel link' https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/249, we too needed links that "are visually prominent and obviously clickable." but we also needed a link to visually set expectations for the page it linked to.
The link proposed in this issue is a 'canonical link' - which is essentially the promo box in the nhsuk frontend https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/promo but with added arrow icon and re-naming as 'canonical link'
Why
In creating this structure on a huge website like NHS.UK, you end up with big topic areas such as 'Pregnancy', or 'Cancer', 'Diabetes'. Pages within these big topic areas are referred to as being 'canonical', meaning they're a subset of the main topic area. (see: https://en.wikipedia.org/wiki/Canonical_model)
And 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.
In the example for Diabetes, to have a level 1 hub with two simple text links; one for Type 1 Diabetes, one for Type 2. It doesn't visually represent the wealth of knowledge, the multiple layers/levels beneath a simple text link. Also if we found that the level 1 hub page, users are needing to quickly find out information about how to real blood sugar levels - so we include a shortcut link to this, in the same simple linked text you'll have 3 links, all visually appearing to be of similar importance yet 1 links to a page of information (blood sugar link) and the other two to mammoth topics.
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 'canonical link' component shares similar attributes to the promo link in
BUT! Due hubs needing other types of links (top tasks/shortcuts, related links, external links) we needed some extra flexibility than the promo link provided, so we added an additional arrow icon. This give us extra affordance (clickable) and allows us the possibility to have promo links (without the arrow) alongside 'canonical links on future hubs - dependant on users needs.
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 (including the proposed canonical link) appear to meet users expectations of what lies beneath.
Headlines from user testing are as follows:
People were able to scan hub and content pages to see what was available for them to choose from and selecting the right links to help them answer the questions. Some users were able to go back to hub pages and re-scan for things they were looking for, if they became stuck. (Lab 3)
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 4)
We have validated our consistent design approach. People are able to move up, down and sideways around the content. This is validation that the design decisions we have made are effective in helping people move around to different parts of the site. (Lab 5)
The canonical links have since gone live on the Coronavirus hub https://www.nhs.uk/conditions/coronavirus-covid-19/ alongside top task and external links. From looking at analytics - we've found the visual hierarchy of links working well; users are flowing through the structure, from level 1 to the lowest content page. We've also seen an even spread of clicks and visits - especially on the level 1 hub page - suggesting that the canonical links aren't too prominent, not overshadowing top tasks or external links at the bottom of the page.