Panel link

[samanthasaw]

What

A component that the NHS App uses to make links more prominent.

Why

We use panel links in the NHS App. We now have 700,000 NHS App users who are interacting with panel links.

In use by:

• NHS App • NHS.UK website • Covid-19 tracing app

We would benefit from a consistent approach to panel links.

• What evidence do you have that services across the NHS need it?
• What evidence do you have that it meets the needs of the users of those services?

Panel links are visually prominent and obviously clickable. They help users quickly get to a service and help users know what services are available to them.

Using panel links to route users to different services reduces the cognitive load. We know that combining service start points with data is confusing for users. We have observed NHS App users struggling with this consistently since summer 2018.

• Have you checked that it doesn't already exist in the NHS digital service manual?

The panel link relates to the list panel component which is currently in the NHS frontend.

However the panel link is specifically a link that works on hub pages to help users get to the right service.

Anything else

If you can, include links to any examples, research or code to support your proposal. Examples of panel links:

NHS App NHS App uses: • primary service panel links • panel links with paragraph

NHS.UK Coronavirus hub @bencullimore

Home page

Covid-19 tracing app Covid-19 app support page

[samanthasaw]

NHS App research findings

Why we explored panel links:

Users missing the green button

Our hub design features a green call to action button at the top of the page, to Order a repeat prescription or Book an appointment. We observed users missing the green button, seeing the data below as more significant, such as prescription order details. This means that users could miss the start point for important services, and can cause clinical safety issues.

Usability testing findings: July 2018: When arriving on the ‘My repeat prescriptions’ page, most users were observed clicking on the medication they needed to reorder, instead of clicking the ‘Order a repeat prescription’ call to action [button]. Users wanted to select individual prescriptions/medication from the ‘My repeat prescriptions’ page.

Users explained that they thought clicking ‘Order a repeat prescription’ would order all three of the drugs listed in ‘My Repeat Prescriptions’.

“I thought that would order all three, I just wanted to select one.” “So, is that my full prescription?” “If I didn’t want to order all 3 there’s no way to select just one.” “I need to see which one I am ordering.”

October 2019: On the appointments landing page some users were unclear about the content and tried to press the upcoming appointments before the Book Appointment CTA.

July 2019: One user did miss the CTA to order repeat medication and scrolled down too far.

December 2019: User 1 and user 3 missed the green ‘Order a repeat prescription’ button initially and looked at the card (past prescription orders) below instead.

User 4 associated the green button with the medicine listed on "Your repeat prescriptions". The content on "Your repeat prescriptions" shows your previous orders, not your current repeat prescriptions.

"I'd assume as it only says Omeprazole I can only order that [if I click the button]"

June 2020: “But my wife has had one [a problem ordering a prescription]. Not being very technological, she had difficulty, she found it difficult to differentiate between the stuff that she’d ordered and stuff that she wanted to order”

Hotjar feedback: “I often miss the book appointment button!”

[bencullimore]

I've written up a variant of the promo/panel component called a 'canonical' link. Based on the needs of the NHS website information architecture work https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/254

I feel the canonical link differs from the panel link in that it forms part of a wider link strategy and works alongside other visual types or links on the website - so it looking clickable is just one part of it, it also helps visualise the size of information behind a link.

[samanthasaw]

More feedback from the NHS app sourced from Hotjar and App stores that the current Prescription hub design does not work with a button:

• Can’t find anything, So how do you do a repeat prescription. Takes you to the page but where do you order it (view order page)​
• Cannot get beyond previous prescriptions​
• Unintuitive to click "Order Presecription" to find prescriptions already ordered; maybe change category to "Prescriptions" and leave sub-categories as is. ​
• Difficult ordering repeat prescriptions. Shows them but how do you order?​
• App isn’t displaying tick boxes for medication, due for re-order. This has been reported before. Online website does show the tick boxes​
• this NHS app under my prescription section only shows what I have ordered but I can’t see how to place an order​
• Trying to order repeat meds. It shows me them but there seems to be nowhere to actually order repeat.
• How do you order a repeat prescription?​ I can only see two things - change your pharmacist, and see your repeat orders.​ But how do you order a repeat prescription?​
• Repeat prescriptions. Not easy. The app only gives two options - see your repeat prescriptions and change your pharmacist. But what about a repeat prescription??​

​

[samanthasaw]

The panel link now features on the NHS Give Blood app: https://www.blood.co.uk/the-donation-process/the-nhsgiveblood-app/

[paulfourniercarey]

Thanks @samanthasaw we have a few variations, I will update here with some more examples

[paulfourniercarey]

@samanthasaw Some more examples from the new give blood app, using panel link and appointment booking card from nhs app.... We are currently treating the "appointment booking card" as a bespoke pattern/component, be good to get some time with NHSD to see what you think.

[GrilloPress]

Requested in part by https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/386

[nancyhalladay24]

I have introduced a panel link to 111 online, where the user is asked to select a pharmacy they want to go to, after starting a pharmacy referral journey. So far we have tested this with 12 users and no one has had any problems understanding how to continue.

[davidhunter08]

Material design name this type of component 'Lists'

https://m3.material.io/components/lists/overview

• Use lists to help users find a specific item and act on it
• Order list items in logical ways (like alphabetical or numerical)
• Three sizes: one-line, two-line, and three-line
• Keep items short and easy to scan
• Show icons, text, and actions in a consistent format

[davidhunter08]

NHS App accessibility audit - Feb 2023

Heading level markup was used for panel links (inside the list markup) but the accessibility audit advised not to do so...

• Where there is a list of items, there is heading level markup.
• However, these headings are not conveyed by screen readers.
• Part of the reason is that an aria-label has been added to the parent anchor link.
• This is causing any following content not to be conveyed.
• While having heading markup here may be useful for some users, as there is already a list of items, it may be best practice to remove the heading markup.
• The links can keep the same look and may help users understand the content better.