Tag

[davidhunter08]

What

Use this issue to discuss the NHS App tag component.

Related

NHS design system guidance NHS design system discussion GOV.UK Design System guidance GOV.UK Design System discussion

Examples on the NHS App

Examples

   

Journeys found on

• Request repeat prescription
• Find NHS services near you
• Prescriptions
• Upcoming and past appointments

Notes

The GOV.UK Design System team have recently made some tag design changes to improve the accessibility and readability of the tag text.

[davidhunter08]

GOV.UK tag component update:

Design changes:

• no longer uppercase
• no longer bold
• remove 1px extra letter spacing
• increase font size to 19px
• change colours to use lighter background colours

These changes are to improve the accessibility and readability of the tag text, and to make the tags look less like clickable buttons.

Here's a preview of the changes.

[davidhunter08]

I asked on x-gov Slack if the background colour of the tag needs a contrast ratio of at least 3:1 against the page background?

The answer...

Non-text contrast only applies to interactive components and graphics necessary to understand the content.

I'd argue that tag backgrounds/borders do not need to meet the 3:1 contrast ratio as they are not interactive elements and the context tags provide is in the tag's text, with the colour being supplemental.

The text should still meet a minimum contrast ratio of 4.5:1 with whatever background colour is in use.

Also note how the gov.uk tag will render in high contrast mode...

Our current tag element does the same using a transparent outline.

In v5 we redesigned the tags and removed the outline, however, as it made the tags look very similar to how buttons are rendered in High Contrast Mode. We've opted to bolden the text instead.

[michaelgallagher]

@davidhunter08 so would that apply to the edges of cards too? (thinking about the "keyline or no?" question)

[growe88]

Have just been looking through a Mural page of research findings from Compass and have found this comment. ->

User believes tag to be a clickable button.

Possible solutions to make this element look less like a button include:

1. Desaturating the background colour: this would reduce the contrast on the white background, and differentiate itself from the saturated green primary CTAs. Side-by-side the new GDS tag colours are slightly dimmer, which sacrifices the small pop of vibrance on the page in exchange for (hopefully) less users mistaking the tag for a button. (https://github.com/alphagov/govuk-design-system-backlog/issues/62)

2. Reducing text weight from bold to regular: This change is also in line with the GDS redesign. This solution seems to lend itself to larger screens, in which larger font sizes can be used (GDS text size is 19pt compared to our mobile size of 14pt). This change would likely require our text colour to be made darker for increased contrast, but will be something in which I will experiment.

[michaelgallagher]

@growe88

1. do we know how often this happens?
2. is the entire card clickable? (it should be) and if so: does this matter? (meaning: if a user thinks the tag is clickable, and the result is that they click it and go to the next page ... well, that is what was supposed to happen, right?)
3. Aligning with the changes rolled out by GDS recently makes sense to me!
4. Does this need to be a tag? Would the words "action needed" in red do the job?

[davidhunter08]

Example from Hackney Council

• sentence case
• font weight normal

https://design-system.hackney.gov.uk/components/tag

[Tosin-Balogun]

Prescription and medicines use tag to tell status of an prescription order

[joejulier-nhs]

As part of their work on a new prescription journey the team ran some usability testing with people who had access needs but did not use assistive technology. The testing included the use of status tags to indicate when prescriptions were ready to collect, part ready to collect or still being prepared.

Across the 5 sessions there were a couple of key findings:

• participants were not sure why the status tags were purple or blue, as these colours had no clear meaning to the participants
• participants expected the use of traffic light style colours for statuses
• participants did not always seem completely clear what information within the card link the status applied too (ie an individual medicine vs the overall prescription)
• participants were unlikely to click into the detailed view of the prescription, this may have been due to the very information rich nature of the card links (with the status tags playing a key role)

Quotes ‘The choice of blue and purple does seem a little random… preparing, is that the first step? Is there something else that it might say?’ ‘I don’t understand why it’s green, blue and then purple, why isn’t it just the same colour?’

Reflection

1. Using purple/blue status tags for different but similar statuses may simply be introducing more complexity for users without much obvious need/benefit.
2. When using status tags it's important to think about exactly what information the status relates to and make sure the connection between those things is visually clear.

[zachrigby-nhs]

As part of our work in N&M we are looking at inbox management features. We have recently done some user testing (moderated and unmoderated) on flagging, along with sending out a survey, to understand how users might mark and more easily find messages they deem to be important.

As a result, we have settled on Flagging as the inbox management feature to meet this user need, for which we are likely going to use an orange tag for. Our thinking for using the orange tag is:

• This colour is commonly used in other experiences where users can flag a message, such as on email services
• It is a colour that stands out on the page, which is key for users who are scrolling through their inbox looking for something important to catch their eye

We did some initial testing with a blue tag but users thought this was too subtle. A few users suggested using green or red for the 'flagged' tag, but for semantic reasons we will be avoiding doing this.

The flag tag will be applied to a message via a link text button at the bottom of the message which acts somewhat as a toggle. Clicking 'Flag message' will apply the orange 'Flagged' tag to the top of the message which will also be visible on the message preview. Once a message is flagged, the link text button label changes to 'Unflag message'.

Interestingly, this might be the first case of a user-applied tag?

[maxrickards]

To be consistent throughout the NHS App we need an aligned approach to tag colours and what the colour represents.

Attached are the tags used by:

GP Services Blue - By phone Purple - In person

Appointments: Red - action needed from user Grey - cancelled Yellow - pending change

Hospital docs & questionnaires: Red - action needed from user Yellow - in progress Green - action complete (document = read, questionnaires = complete)

Prescriptions

Group level:

Item level:

Please add any other screenshots if others are being used - thank you

[anna-rigo]

Rationale & guidance migrated from the NHS App Figma file