Open samanthasaw opened 4 years ago
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!”
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.
More feedback from the NHS app sourced from Hotjar and App stores that the current Prescription hub design does not work with a button:
The panel link now features on the NHS Give Blood app: https://www.blood.co.uk/the-donation-process/the-nhsgiveblood-app/
Thanks @samanthasaw we have a few variations, I will update here with some more examples
@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.
Requested in part by https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/386
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.
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
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.
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.
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.
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
NHS App NHS App uses: • primary service panel links • panel links with paragraph![localhost_2001_app_prescriptions_v7_your-prescriptions-11-no-pkb(iPhone 6_7_8) (6)](https://user-images.githubusercontent.com/38656667/84520213-1e01e280-accb-11ea-88de-d5b516b18e22.png)
NHS.UK Coronavirus hub @bencullimore![www nhs uk_conditions_coronavirus-covid-19_(iPhone 6_7_8) (1)](https://user-images.githubusercontent.com/38656667/84520234-278b4a80-accb-11ea-8ba6-d160185c0784.png)
Home page![www nhs uk_(iPhone 6_7_8)](https://user-images.githubusercontent.com/38656667/84520253-2d812b80-accb-11ea-8f26-f0896d7f1094.png)
Covid-19 tracing app Covid-19 app support page![image (25)](https://user-images.githubusercontent.com/38656667/84520270-340fa300-accb-11ea-8200-b44173f40068.png)