Open beccagorton182 opened 4 years ago
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:
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
Screenshots
Practice level tags
Section level tags
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
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
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
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)
Example of tags with a 1px border:
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:
Example of tags with a 1px border using sentence case:
Comparing tag styles:
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.
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!
@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 :)
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.
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:
Requirements:
Design Decisions:
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:
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.
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