Help users decide when and where to get care (care cards)

[davidhunter08]

Use this issue to discuss the Help users decide when and where to get care (care cards) pattern in the NHS digital service manual.

[markasrobinson]

I'm not sure I agree with the guidance to "avoid having more than 2 care cards on a page".

Is this open to discussion?

Sometimes there may genuinely be situations where 3 different levels of care need to be signposted.

[sarawilcox]

@markasrobinson, everything is open to discussion :-) Can you point us to any examples of where users may need 3? Copying in @ericlamarca.

[markasrobinson]

Not sure there are any live pages currently that have 3, but there may be some on the way as a result of the 111 care card POC we're working on.

For me though, the main issue is the principle that clinical/user need should probably take highest priority.

Just feels like we shouldn't say you can't use more than 2 cards when there theoretically could be instances when they are all needed (though admittedly this is probably going to be rare). Otherwise we may risk compromising on clinical safety of content.

[ericlamarca]

Yes, that's totally a valid point. Maybe instead of avoid, we could say something like: 'be careful, test with users and share the findings if you try more than 2 care cards in a page'?

[gazjoy]

@ericlamarca we are currently thinking about using care cards for the nhs pensions services. We are thinking of 3. One which lists out things that increase a pension, one which have no effect and one which lists out things that reduce a pension. We are currently thinking of only using the blue style. - Only ideas at this point.

[sarawilcox]

Hi @gazjoy, sorry if this is rather later in the day. The care cards have been designed to help people find get the right treatment at the right time. If you're thinking of using the blue one, would inset text work instead? @davidhunter08, what would you suggest?

[KarinMochan]

@ericlamarca @markasrobinson "Avoid more than 2 care cards on one page" - on many of the live Medicines A to Z pages we need to display more than 2 care cards as a matter of course.

Each page already has the same immediate care card (anaphylaxis). In addition there may also be urgent/immediate care cards for overdose (4. How and when to take) and serious side effects (5. Side effects).

The side effects section may even may have 3 care cards in a row:

• urgent care for one set of serious side effects
• immediate care for another set of serious side effects
• immediate care for anaphylaxis (also a serious side effect)

Some of the pregnancy sections may also have a non-urgent care card. So some pages could have 5 care cards...

[KarinMochan]

@davidhunter08 @sarawilcox Re testing multiple care cards on one page - we observed this in user testing last week. In mobile view, user quickly scrolled past two consecutive care cards (one urgent and one immediate), both related to the serious side effects of a medicine. When questioned, he said he assumed these were generic NHS messages, and not related to the medicine he was reading about. "I was slightly zoning out with these as I think it's just general NHS stuff. I skipped past them... Do you know if these are specifc to this medicine?" When we explained they were both urgent CTAs for this medicine, he said wanted to see the medicine name in the red action bar. User didn't immediately see the difference between the CTA for immediate v urgent care. We had to point it out. He suggested putting the actual phone numbers (111 / 999) in a different colour for better stand-out.

Has anyone else observed similar behaviour to this?

[KarinMochan]

@davidhunter08 @sarawilcox The Medicines Information team is still keen to hear about people's experiences of using and testing care cards. Also the use of other formats for alerts, such as the yellow "Important" boxes. We have user feedback via our online survey that suggests people aren't really noticing these yellow alerts.

[KarinMochan]

@davidhunter08 @sarawilcox

At last week's testing session, we had some feedback on the care cards and their design. The Meds team wondered whether there was any ongoing work on care cards and how they work?

Or should I open a new ticket?

Thanks.

[davidhunter08]

Hi @KarinMochan, please can you share your feedback on here.

There isn't currently any ongoing work but there is a ticket in the service manual (Jira) backlog to review the guidance of the care card.

[KarinMochan]

Hi @davidhunter08 - thanks for that.

I believe my colleague Rose Munro is going to get in touch with you in due course. She is the UR for the medicines team and is collating/analysing all recent feedback from users on care cards.

In the latest round of testing, for example, we observed a few things about care cards:

• Participant did not expect to see the care cards on a page giving info about taking a medicine. Said they looked quite startling/dramatic to her.
• Two participants told us they would have ignored the urgent care card advice (ie to contact 111 about a specific serious side effect.) and gone to A&E instead.

See also my comments here dated 26 November 2019 and 9 January 2020. Following up on my comment about the warning callouts (9 January), we sometimes observe the opposite reaction. For some users these callouts have more stand-out than urgent or immediate care cards.

[davidhunter08]

Thanks @KarinMochan. Could you please add a screenshot of the page you tested or even a link to the page?

[KarinMochan]

Sure, @davidhunter08 . This is the link: https://drafts.nhswebsite-staging.nhs.uk/medicines/letrozole/

Fyi: we were testing our content on letrozole, rather than the care cards themselves. These appear in the same way as on the live pages in the Medicines A to Z.

[sarawilcox]

I notice that @reshmagumani raised a separate issue about care cards and the medicines team in April 2019. I'm copying over her comments in case these are helpful. I'll close the other ticket.

The way we use care cards across NHS.UK is not consistent.

Many have too many CTAs and conditions in the header and are difficult to read.

An audit of medicines A to Z found 7 variations.

We need to edit these care cards so they are consistent and clear. JIRA: [MIB-2190]

Additional note from me (Sara): We agreed some initial wording to add to the Care card component at 18 June Style Council meeting but said that care cards need more work.

[KarinMochan]

The Meds team continues to observe very different reactions from users, either:

• Shocked/scared by the care cards particularly in the side effects section - making them less willing to take a medicine
• Engaged with the care cards and grateful to see the clear CTAs
• Oblivious to care cards ("snowblind"), however serious their content may be - users see them as pop-ups ads and ignore them

[sarawilcox]

Thanks @KarinMochan

[cameronross2]

In the 2020 Medicines product survey, one respondent said they have dyslexia when completing the survey on www.nhs.uk/medicines/lorazepam/. They were asked if any changes could be made to the page in order to make it easier for people with access needs. This respondent answered "less red". In can be assumed this is a reference to the red used in the care card component, since this is the only red on the page. Adding this insight here in case any future research is done on how well care cards meet the needs of people with access needs.

[davidhunter08]

Thanks @cameronross2. I began thinking about revising the care card design after hearing some anecdotal evidence of headings in reverse polarity causing users problems.

Here's where I got to:

Hypothesis is that having the heading inside the box will:

• make the headings easier to scan
• create a better connection between the heading and content
• make the card feel 'less scary' by reducing the amount of colour

The proposed designs are untested so need to testing with users.

Do you know if the medicines team are planning to explore new designs?

[cameronross2]

Hi @davidhunter08 ,

In Meds we have a review of how well Care cards work on our product in our backlog. When we get around to it, I'll be in touch!

[samanthasaw]

Engage consult in NHS App (screenshot from prototype):

[samanthasaw]

NHS App Messages - if user says yes they need urgent advice:

[samanthasaw]

NHS App eConsult:

[sarawilcox]

This is from the coronavirus test booking service when we had a separate journey on nhs.uk. We used it on all our end of journey pages - happy and unhappy paths. We also had something similar on the start page. But not mid-transaction.

[Demotive]

An assortment of examples from 2 urgent care products (currently in pilot and prototype phases):

[Demotive]

We also used the pattern offline for roller banners / info posters:

directions-roller-800x2100.pdf emergency-roller-800x2100.pdf ed-streamer-poster-rev1-a3.pdf

[sarawilcox]

An example of more than 1 call to action in a care card:

Other examples

There are similar examples on these pages:

• https://www.nhs.uk/conditions/elbow-and-arm-pain/
• https://www.nhs.uk/conditions/sprains-and-strains/

It would be good to understand why.

[sarawilcox]

Example of inset text in a care card:

[sarawilcox]

Example of a details element in a care card:

[sarawilcox]

NHS App Messages - if user says yes they need urgent advice:

Hi @samanthasaw, I'm interested to know why you didn't use the immediate care card for call 999?

[samanthasaw]

Hi @sarawilcox I didn't work on this so I don't know but Andrew Duckworth and Rhiannon Smith did, they might be able to help @rhiannonsmith @GrilloPress

[GrilloPress]

It was a very long time ago...

But there was a clinical concern that the charcoal card wasn’t appropriately styled for the transaction and would distract users from the main action which was to call 111 or call their GP

There was a push to use a differently styled component or no component but clinical wanted the care card explicitly so in a transaction page...

can’t say I don’t agree with them that in non-scrolling situations the attention grabbing-ness of charcoal care card wasn’t the right fit. This was the middle ground that satisfies the need/context but doesn’t quite sit with the intent of the component

[sarawilcox]

We'll mention at March Style Council meeting that we're reviewing the guidance and will republish it as a pattern, rather than a component.

[davidhunter08]

From @Demotive

The piloting A&E streaming tool has used care cards sparingly as "loud" or "high contrast" elements at the start or end of transactions.

We've not tried incorporating such elements mid-transaction, and it's hard to think of a use case where something like this is the most appropriate method.

Research shows that the style and language of the care cards can convey "levels of concern" to users appropriately.

In an urgent care setting, the occasional user reaction of "that's quite alarming" gives a good indication of how and when to use such elements - ie in some cases it's appropriate for the user to have a sense of urgency.

See the examples

[nancyhalladay24]

Whilst on the app we also tested the urgent care card at the start of a form. We found that users were skim reading and missing urgent advice however, once we utilised the care card all users noticed the advice 👍

Acute/non-repeat prescription requests through this service can take a few days to process. We were concerned that users would attempt to request emergency prescriptions this way and therefore needed to signpost to the appropriate services.

[davidhunter08]

Rewrite care card component as a pattern

[davidhunter08]

Example from Clifton Court Medical Practice:

[davidhunter08]

An example of customised care cards on the Every Mind Matters site:

[sarawilcox]

@davidhunter08 In this example/possible redesign:

https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/8#issuecomment-733735931 What's the distinction in heading size?

With my poor vision, the examples on the right are much clearer. But I don't know to what extent that's a function of heading size.

[sarawilcox]

Rewriting the care care component as a pattern

The service manual team has worked with a group of designers, content designers, and clinicians and others to review the above and other examples of care cards in use.

We've also rewritten the care card component as a pattern. The draft has been through several iterations and has now been approved by the Design System Working Group (DSWG).

Rationale

The care card component was designed to solve a particular problem in the context of health information on the NHS website but it's been used in a wide range of other contexts with mixed results. We believe that rewriting the component as a pattern will make it clearer that it's intended to help users get the care they need, so that it's implemented as intended and as tested.

Comments from DSWG members

Approve 10, rejected 1.

"Need to look at recommendation not to use more than 1 of each care card type on a page - this has been necessary in some cases, and tested with users (e.g. sepsis)". Action: We've agreed to add some wording to explain when you might need more than 1. Draft wording as follows: "Only include more than 1 of each type where you can show a clear clinical or user need. For example, where you need to tell users about 2 different medical emergencies on 1 page."

"How are we managing the process where people use it in unintended ways? It also says there’s a need not being met in the base components if people need something to call out things." Action: something for the service manual team to consider.

"Would like to see more guidance around the use of care cards for mental health occurrences rather than purely medical." Action: we've agreed to include an example of the emergency care card in a mental health context. However, its use in mental health is not so well tested as in other health conditions. Please share examples, esp of non-urgent and urgent care cards in mental health.

1 rejection with a comment to the effect that using it as a pattern might lead to people putting more content in care cards. Other patterns are v specific - this feels too loose. Also service finders are there to help users get the right care. The pattern is too broad. Maybe the guidance needs tightening up. Action: Given that other members of DSWG voted to release the pattern, we'll publish now but monitor for evidence of the above.

[sarawilcox]

We've had 2 comments that the title of the pattern is too broad (one in the post above) so, after further consultation with @markasrobinson and @deanvipondNHS, we're changing the title to: "Help users decide when and where to get care".

We're now ready to release the pattern, probably early next week.

[sarawilcox]

Key changes when we reworked the care card component and republished it as a pattern:

• we're clearer about when to use and when not to use care cards
• we've included an example of when you can have more than 1 care card of each page
• we renamed the "immediate care card" "emergency care card"
• we include a mental health example

[sarawilcox]

Do people still expect to find care cards under components, I wonder? A content designer asked today: "why does this page say 'we no longer have care cards' when they're detailed on here?"

[markasrobinson]

Just logging some feedback from an autistic user on the issue of whether it's clear care cards mean "take this action if all of these bullets apply" or "take this action if any of these bullets apply":

User feedback: "In the box about "Call 999 if..." on this page - nhs.uk/conditions/chest-pain/ - I am writing making what may appear to be a pedantic enquiry although this probably arises from myself being on the autism spectrum that means what I am reading is not precisely clear to me. It talks about the first two bullet points, but then says "also started with shortness of breath, sweating and feeling or being sick" and then it says "lasts more than 15 minutes". Does this mean all four bullet points have to be met before this sudden chest pain qualifies for calling 999?"