Tag

[beccagorton182]

Use this issue to discuss the tag in the NHS digital service manual

What

Tag is a component that provides supporting situational information to a label such as a status, state or background information. Primarily used with labels containing a name. E.g. 'Service Name 1' [Good capacity], Service Name 2 [Telephone Only].

Why

These have tested well for e-referral service, providing users with context of a service without having to navigate on to a new page to find it. The information displayed by tags is important to our users in their decision-making on whether or not to proceed in their journeys with particular services. Users time is saved as the information is displayed immediately to them.

This component doesn't currently exist in the service manual.
GOV.UK and other NHS services use these for phase banners
https://design-system.service.gov.uk/components/tag/

Anything else

The research has shown that users understand that the tags are providing supporting information, and these labels influence the decision of whether or not to proceed with the service in the referrals journey.

Shown in our style guide, and in situ

[beccagorton182]

alphagov/govuk-design-system-backlog#62

[samanthasaw]

Tags in the 'Submit your electronic declaration' service

Why they're used and where
Submit your electronic declaration uses tags to help users understand their progress:
http://nhs-edec.herokuapp.com/submit-your-edec/tags/index

The service uses:

• practice level tags http://nhs-edec.herokuapp.com/submit-your-edec/tags/practice-level
• section level tags http://nhs-edec.herokuapp.com/submit-your-edec/tags/section-level

Design hypotheses

If we use tags to let users know the status of their practices and sections
Then users will know at what stage they're at with each section and practice
We'll know this works when users understand which sections and practices are complete and which need to be completed

If we use tags to let users know the status of their practices and sections
Then users who work on their electronic declaration and then come back to it at a later date will be able to see which sections and practices they've completed and which they haven't
We'll know this works when users can easily work on their electronic declaration at different times without having to remember which section they left off at or which practice they need to work on now

If we let users know the status of their electronic declaration
Then we will give users a sense of progress when completing their declaration
We'll know this works when users understand the progress they are making when they complete their electronic declaration

If we use a practice level tag called 'Ready to submit' instead of leaving the status as 'Started' when users have completed all the sections for a practice
Then this is more helpful to users as it tells them that their electronic declaration is ready to submit
We'll know this works when understand when they're able to submit their electronic declaration and that they still need to do this in order to complete the declaration

If we use the word 'submitted' for practices instead of 'completed'
Then we will help users to differentiate between section status and practice status
We'll know this works when users understand which tags let them know the status of a practice and which tags let them know the status of a section

User testing
These tags have not been tested with users.

What we'd like to validate

• Do users understand when a section or practice's status has changed?
• Do completed and submitted tags make users think they cannot go back and amend details?
• Do users think the tags are clickable? Is this confusing?

Screenshots

Practice level tags

Section level tags

[chrimesdev]

We use the 'tag' component on the NHS digital service manual, for marking components as experimental. We used the GOV.UK tag component with the NHS.UK frontend colour palette. We're still testing the experimental label and will feedback.

https://service-manual.nhs.uk/design-system/components/summary-list

[devansXD]

Other services incorporating the 'Tag' component:
NICE: https://nice-digital.github.io/nice-design-system/components/tag/
HMCTS: http://hmcts-design-system.herokuapp.com/components/badge
MOJ: https://moj-design-system.herokuapp.com/components/tag
DWP: https://dwp-design-examples.herokuapp.com/example/tags
ETR: https://ets-alpha.london.cloudapps.digital/app/dashboard

[davidhunter08]

GOV.UK's additional Tag modifier classes for different colours

[davidhunter08]

I've created a Tag component with modifier classes for different colours based on GOV.UK's Tag component.

This Tag component has not yet been tested in an NHS service. We are looking for teams willing and able to test this approach in user research (or in their service)?

Guidance can be found here:
https://tag-174.herokuapp.com/
u: tag
p: test

Code is at:
https://github.com/davidhunter08/tag-test

[chrimesdev]

We recently used this component in a GOVUK service that we helped build. This usage could be useful for an NHS service.

This is how it looks in NHS styles (we used a 1px border using the same colour as the tag text due to the grey page tint)

[davidhunter08]

Example of tags with a 1px border:

[samanthasaw]

Tags in the NHS App - Prescriptions

Why they're used and where
• The NHS App will use tags to help users understand the status of their prescription orders.
• We have evidence that with our current design for showing users their prescription orders, users could not identify the correct order when prompted and miss rejected orders as they always appear at the bottom of the list
• The tags are only used for EMIS patients.

The NHS App uses 3 tags:
• Requested (orange)
• Approved (green)
• Rejected (red)

Design hypotheses

If we use tags to tell users what the status of their prescriptions are​
Then users are less likely to miss when the status of their order has changed​
We'll know this works when users can tell when the status of their orders has changed

If we use lowercase text on the tags ​
Then users will still be able to tell the status of their orders​
We'll know this works when understand and notice the status of their orders

Visually hidden text
I've included visually hidden text on the tags.
Example:
<h2 class="nhsuk-heading-xs"> 27 April 2020 <span class="nhsuk-u-visually-hidden">The status of this prescription is</span> <span class="nhs-app-message__date nhsuk-tag nhsuk-tag--orange">Requested</span> </h2>

User testing
Tested with 2 disabled students
Key findings:
• Both users understood that their order was requested and the order they'd made yesterday had been rejected​
• The blind user understood the visually hidden text on the tag

Quotes:
User 1
[Can you see the order you’ve made:] “Yeah it’s at the top, and it’s differentiated with the requested [tag]” ​
[On the tags] “Those 3 colours are pretty recognisable for most people I think”

User 2
“So the status [of my prescription] is requested” ​
“So this one I ordered yesterday, that one is a rejected order”

Remote usability lab 8 April 2020
Key findings:
All 6 users understood that the order they'd made was requested and that the order they'd made yesterday was rejected

Quote examples:
User 1 - "It says on it it's been requested, it's awaiting approval"​
User 3 - "It's says it's been rejected, that request" ​
User 6 - “So it says requested, [it means] pending, they’re [GP surgery] in the process of authorising it”

Screenshots:

[davidhunter08]

Example of tags with a 1px border using sentence case:

[davidhunter08]

Comparing tag styles:

[beccagorton182]

We tested this component as part of the vaccination booking service.

The scenario:

A user needs to cancel their existing appointment before they can rebook, therefore, before they cancel they are able to view a snapshot of the overall availability of their current vaccination site, so that they can make a decision on whether or not to cancel their appointment. The assumption being users would feel more confident there was something they could book once they'd cancelled their appointment.
We used the tag to tell the user if the site had availability or if it was limited availability.

Findings:
8/13 users tried to click on the tag component, thinking that it would take them to a rebooking journey (which would not be the case) and therefore got stuck on the page. This was in addition to the continue button being futher down the page too.

Further iterations will explore removing the tag element all together and just using the words 'Good' or 'Limited' to describe availability, with no added design treatment.

[henocookie]

There was a design-a-thon organised by the GOV.UK design system team on Thursday 16th September 2021 focusing on the task list and tag. The design-a-thon ran for 4 hours in the afternoon and had a full agenda.

Around 30 people joined from a range of areas across Government and the public sector to discuss challenges, ideas and present new thinking.

The format seemed to be engaging and could be useful for the NHS digital service manual.

---

The session split into groups for 2 and a half hours of focused research, design ideation and exploration. I was in the group looking closer at tag designs and how they fit within task lists. We are continuing this work asynchronously and are using a Google Jamboard to keep ideas and tasks organised.

@beccagorton182 has there been any more research or design thinking done within the national booking service?

And has anyone else done any recent work around the tag component? It would be great to feedback!

[beccagorton182]

@henocookie we retested the design above with no tags and it tested much better. I think it would be useful to have a session about updating the guidance now that we've done some testing in a different context to what has already been done :)

[beccagorton1]

We have used tags in our service NHS Volunteering; to highlight to users what status their role listings are in on their dashboard. Our users have to create role listings to recruit volunteers into their organisations. There are 3 states their listings could be in; draft, live and closed.

We used blue, yellow and grey tags to indicate different statuses. We know through empathy testing tools that this colour combination is easier to distinguish for users who have deuteranopia and tritanopia.

Users were able to distinguish the difference between each status easily in research sessions.

[growe88]

Proposed updates to the Tag Component for NHS App

Hello everyone,

We've been working on refining the Tag component to better suit our NHS App-specific needs. We've taken into consideration the size, form and appearance of the tags, as well as maintaining accessibility standards. Importantly, our redesign has been guided by research and work conducted across NHS and Government Design, as well as limited research we've done ourselves. We plan to conduct more research in the future to further validate and refine our design decisions.


*GDS update: the Government Design System recently updated their recommendations for tags. Some of these changes included: sentence case text, removing the borders and tweaking the colours. These changes have helped differentiate Tags from buttons (a common trope in research which props up a fair bit throughout these threads) and visually update what was becoming a dated component. Our changes have been inspired by their work, and tailored to fit our specific requirements

Here's a summary of our rationale and the design decisions made:

Rationale for change:

1. Size of tags: Our current tags are too large for the App since they were designed for desktop. This affects the hierarchy of information and limits real estate on mobile screens.
2. Form of tags: Bold borders make tags resemble clickable buttons (through user mental models - not necessarily NHS buttons). This is exacerbated by the large size of them.
3. Appearance of tags: The dull colours and hard borders age the component. With the work our team has been doing to visually uplift the look and feel of the App, tags are beginning to look out of place within the context of pages.
4. GDS update: Aligning with up to date research and recent GDS recommendations for tags.

Requirements:

1. Accessibility: Retain AA+ contrast between tag background and text (strive for AAA).
2. Improve hierarchy of lockups featuring tags, by reducing tag prominence.
3. Differentiate tags from CTA buttons to limit user confusion.

Design Decisions:

1. Tag colours: Slightly brighter, more vibrant and less saturated colours have been used to align with the visual uplift, whilst achieving AAA contrast internally. Colours have been established using the NHS colour palette, then tweaked slightly to enhance contrast upon both potential backgrounds they could sit on (White or NHS Background Blue).
2. Border removed: No border to update the appearance in line with GDS. The tag/page backgrounds do not require WCAG level contrast meaning the border was not necessary to meet accessibility needs.
3. Radius added: A 2px radius helps reduce the perceived size of the tag without further reducing text size or making the background colour lighter. We deemed this radius subtle enough that the tag maintains visible distinction from a CTA, but effective enough to reduce the perceived size of the tag.
4. Text and tag size reduced: 14pt, regular-weight, sentence-case text for improved readability and enhanced hierarchy when used in common usage patterns.


We believe these changes will improve the overall user experience and enhance the Tag component to best suit our intended use-cases for the NHS App. Both myself and @davidhunter08 look forward to hearing your thoughts and feedback on these updates.

Image description: Our tag redesigns beside the legacy designs, sat on both the white card background and NHS primary grey/blue background.

Image description: 3 sets of work in progress NHS App screens, with both the legacy design and redesigned tags, showcasing the differences they make to hierarchy and the feel of the pages.

A few references:

• Tag alphagov/govuk-design-system-backlog#62
• Tag design changes alphagov/govuk-frontend#3502
• https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

[frankieroberto]

Looks good to me!

For context, the GOV.UK tags have never had borders I think, but in Tag design changes #3502 we updated the colours, dropped the bold, increased the font size, and no longer UPPERCASED the text.