Design and build digital services for the NHS. Use the service manual to build consistent, usable services that put people first. Learn from the research and experience of other NHS teams.
Home Page: https://service-manual.nhs.uk
License: MIT License
For a short term solution, the cookie consent code was taken directly from other nhs.uk solutions, with a simpler design applied to it.
As the design is simpler and a user controls cookies with the browser (rather than in site settings), a lot of the code isn't required and can be simplified.
The code is also currently compiled by webpack and isn't very readable in this repo. It needs to be changed to the pre-compiled code and assets.
The Slack invite link in the README.md file is no longer active. Can we get a new one, please?
The team have been funded to deliver a piece of work around open source / open ways of working / inclusion.
We will need to start a discovery of this piece to determine the problems we are trying to solve and to establish the goals of the project.
We want to measure the usage of the NHS service manual.
We want to know:
So that we:
To then:
This covers the work that NHS X are planning to do, relating to the NHS digital service manual.
This is to ensure the priorities of the work the service manual team are delivering align with the vision from NHS X.
Plan of action agreed for the next twelve months (21/22) with overview of the issues needed to be supported to align work with complimentary work being planned/undertaken by NHS X teams.
Add guidance for the responsive table component to the design system.
The responsive table component is being released in NHS.UK frontend v4.0.0.
The home link in the breadcrumb on the error page is broken.
The URL is /service-manualindex
I did a search in the codebase and this was the only instance of it I could find.
Also, it might be better to create the breadcrumb for styles, component and pattern pages as a Nunjucks include to reduce code repetition?
Create a multidisciplinary panel of representatives from across NHS digital to make sure that all components and patterns published in the design system are of a high quality and meet user needs.
The design system working group will increase community engagement and ownership by us involving the community with the decision making.
The community backlog for the design system working group and content style council needs to be prioritised.
This exercise needs to be done so that the service manual team and community know the order of items of work that will deliver the most value to the community.
The CSS on the code snippet examples and the JavaScript/assets are being directly imported from the node_modules into pages. These should be compiled within the application via Sass/ES6 modules to give us more flexibility and customisation if we require.
Look at how we can measure the value of the service manual.
NHS Digital need to know how the service manual is performing and the value it is delivering to users.
Document outlining how we can create baseline figures for usage and identify areas to enable ongoing measurement of the value.
On the radio button page we tell people:
If you are asking just 1 question per page as the GOV.UK design system recommends, you can set the contents of the
<legend>as the page heading. This is good practice as it means that screen reader users will only hear the contents once.
But we don't include an example of this.
We should make it easier for people to follow our advice.
The current assets folder has a flat structure and could do with reorganising to make it more manageable as we add new files.
Current state:
Produce guidance on asking questions around sex and gender in the health sector that has been fully user tested.
Sex and gender have specific meanings in Health and can impact on the services provided and therefore are required questions in many services. We need to ensure that questions are asked in a sympathetic manner to ensure the widest range of users of services feel their concerns around these issues have been identified and addressed
On completion of the epic guidance and patterns for asking questions around sex and gender in public facing services will be available within the service manual.
The deployment pipelines can be quite slow to run (averaging about 10-15 minutes to deploy) and sometimes are quite temperamental, they are also locked down behind our current infrastructure restrictions.
This could be an opportunity to use GitHub actions along with Azure Devops. We could also remove the current step of merging to develop then merging to master (requiring 2 pull requests to release), which was previously required due to limitations of the pipelines.
Stages:
Pull requests: deploy to a review environment (which get deleted on merge)
master branch: deploy to the staging environment
git tags: deploy to the live environment
It would be good if a message with the environment URL got posted somewhere for PRs after successfully deploying.
Each stage is just simply: npm install, npm build, npm test and deploy if previous are successful.
Due to the service manual website being heavily cached behind our firewall and with users browsers also caching CSS, we need a way to bust the CSS cache for each release.
The easiest way to do this would probably be to rename the main.min.css file each version, for example main.min.css?v=3.4.1 with the v= parameter being the current version of the service manual.
Further reading: https://css-tricks.com/strategies-for-cache-busting-css/#article-header-id-1
Develop guidance and pattern on asking users for ethnic groups in public facing services.
Ethnicity is a key factor in some health conditions and we need to be able to collect data which users of services recognise as an acceptable representation of their ethnicity from their viewpoint.
Production of guidance on asking questions around ethnicity and a pattern to enable question to be asked. This will need to be tested with users and signed off by the Extended Design Team and Content Style Council.
Create guidance on creating error messages
We've rapidly spun up a number of new services in recent months and we are seeing some inconsistencies in hint text, error messages and "bad luck pages".
Colleagues sometimes ask us for examples of what has and hasn't worked.
We have started to collect examples for review, to compare with GDS examples, and where appropriate include in the service manual.
This issue has been created for test purposes.
On the table page we tell people:
The table component tested well with users on health information pages. The white panel helped users scan the page and find information when it was surrounded by text content.
But we don't include an example of this, as the main table is the simple one, so it's confusing
Based on the conversation here it seems there is a preference to keep the table with a panel with a heading, and the heading needs to be different than the caption so the following then needs updating:
Use the element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
The "page not found" page is being served as a valid http response (200 OK). It should be returning a 404 http code.
The warning callout has been updated so that custom headings get prefixed with <span class="nhsuk-u-visually-hidden">Important:</span> to convey the importance of the message to screen reader users.
Switch the hint component wrapping element from span to div
See frontend issue: nhsuk/nhsuk-frontend#620
The import path for the Nunjucks macros are incorrect, it expects the macro template to be in the folder /components/component-name/ eg. {% from 'components/action-link/macro.njk' import actionLink %} however this requires users to have configured their application to read files from the /node_modules/nhsuk-frontend/packages/ folder when referencing /components/component-name/.
The configuration for this needs documenting or there needs to be some guidance telling users how to import the macros from a different directory.
The paths are also incorrect for the nhsuk-prototype-kit they are imported with {% from 'action-link/macro.njk' import actionLink %} and do not require the /components/ prefix.
Add guidance for the nhsuk-link--no-visited-state modifier in the link styles.
The nhsuk-link--no-visited-state modifier is included in the Frontend v4.0.0 release.
The cookie guidance and pattern is presently being worked on by one of the mission teams and when this work is completed it would be useful to share this work with the wider community in the form of guidance and potentially pattern.
All sites need information on cookie banners and when the NHS UK site has revised it's usage this has been agreed at the highest level within the NHS IG Community and therefore should be used as best practice. This should enabke others to use the agreed wording and styles with minimal IG input as agreed nationally.
Review work undertaken by mission team
Develop appropriate guidance to go alongside the patterns proposed
Undertaken any necessary user research to gauge the impact of the cookie guidance on end users of services.
Implement new guidance within the Service Manual
Cookie Guidance available for use across the NHS domain signed off by senior information governance team within NHS D and available for wider usage outside NHS D.
Add guidance to the service for the new and recently updates styles and components in the NHS.UK frontend.
Not having guidance for the components could result in them being implemented in the contexts they were not designed and tested for.
Add code to the NHS.UK frontend for the:
Release:
Comms:
I'm not sure that this is a best practice. If it is, I'm not sure why it isn't in the HTML example provided https://service-manual.nhs.uk/design-system/components/warning-callout
I'm pretty sure that the aria-label would sound much like:
<h3 class="nhsuk-warning-callout__label">Important: School, nursery or work</h3>
and not provide any additional semantic meaning for screen reader users. Just looking at the definitions & examples here:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
As you probably know, there's lots of discussion about labels here alphagov/govuk-design-system-backlog#71
Add guidance for the card component to the design system.
The card component is being released in NHS.UK frontend v4.0.0.
The guidance is to include:
The checked status from the radios example needs to be removed (on both HTML and Nunjucks examples).
https://beta.nhs.uk/service-manual/styles-components-patterns/radios
We've identified a need for guidance for NHS websites/services, like the GOV.UK standards: https://www.gov.uk/guidance/content-design/url-standards-for-gov-uk. The NHS website information architecture team has done some work on this.
URLs are important, especially in a health information context where users need reassurance that the information is trustworthy.
URLs always need always need to be clear, unambiguous, easy to read, easy to type and easy to share.
nhsuk/nhsuk-service-manual-community-backlog#265
[ ] Review draft guidance and discuss with team how and when we plan this work in
Publish multimedia and image guidance within the service manual as a new item. Ensure the image guidance is inclusive and addresses the issue of using non white skin colours in showing health conditions.
To ensure the information released in the service manual is fully inclusive, guidance is required to provide support to users in developing content including multimedia and images. Recently there has been additional emphasis on producing content to reflect the requirements of the BAME community due to the recognised impact of COVID-19.
More work from the multimedia team community contributor
##Could
Guidance on the use of images within a health context to be available across the digital health development community.
Improved user experience across services by the implementation of standards around the use of images.
The NHS digital service manual needs to use the cookie consent solution to handle and document the cookies that we use. This solution should be self-hosted.
Longer content or words, are breaking out of the width container on smaller screen resolutions. This causes a horizontal page scrollbar and messes with the design of the page.
Example:
https://beta.nhs.uk/service-manual/styles-components-patterns/spacing
On the design examples, the link 'Open in new window' gives no context of what you are opening in a new window.
It's an accessibility issue, especially when there is more than one design example on the page.
Add visually hidden text to the the link.
For example: 'Open this [style, component or pattern name] example in a new window'.
Look at how we can enable community contributions for the service manual.
For the service manual to grow and develop to meet its users' needs and maintain consistent, usable NHS products and services, we need teams to raise and discuss issues they face and tell us how things test with users.
Without regular contributions, the service manual will ultimately fail.
A pattern used to stop people in a transactional service to tell them important information.
When information is understood to be important for people, having a pattern to display this during a transactional service could ensure the information is given full focus to avoid users missing it.
Publish content guidance around skin symptoms on diverse skin tones and other guidance on inclusive language around ethnicity.
Ethnicity is a key factor in some health conditions and we often need to refer to ethnicity in content on health information pages.
In the past, for example, our content has focussed on skin symptoms on white skin but we need to make sure that our content is helpful to people with a diverse range of skin colours.
Tasks to take forward from user research insights, further iteration of skin symptons guidance: -
Review the need for and, if appropriate, publish more form design patterns in the design system.
We published guidance on how to write good questions for forms in 2019 but we recognised at the time that there was also a need for more form design patterns to help interaction designers build forms that are easy to use. Our forms guidance currently focuses on content design.
Research the usage and impact of accessibility guidance and update existing guidance to reflect the feedback from Nomensa.
Take into account recent work on a tool to help NHS.UK comply with WCAG 2.1.
Bring the guidance up to date with WCAG 2.2 (expected publication early 2023) - with a deadline for compliance likely 6 to 12 months after publication.
consider how we can integrate the checklists at: https://nhsdigital.github.io/accessibility-checklist/
The guidance was published around a year ago. We need to know how effective it is and update it to take account of recent audit findings. Also to bring it into line with WCAG 2.2, expected to come into force in 2023.
Also include:
Revised accessibility guidance published as part of the Service Manual
The NHS digital service manual is presently aimed at patient facing services and there is a different group of users that would benefit from the same type of support, this is systems used by professionals in various settings to support the health of patients. This epic is to investigate how the service manual can provide support to teams developing staff-facing systems.
Many of the patterns and styles used to improve the services provided to patients may be relevant to teams developing services for professionals.
Increased use of the service manual across NHS Digital and greater standardisation across healthcare systems.
The social media open graph image doesn’t seem to be working on Twitter. This may to do with the image paths needing to absolute rather than relative.
Example:
The NHS.UK social media team has drafted guidance that draws on their learnings and understanding of best practice for social media in health and care, with a particular emphasis on accessibility.
We believe that this guidance has value for other comms teams and individuals working in the NHS.
Thank you for publishing this entry so quickly.
Currently, you have: "Coronavirus is the virus that causes the illness COVID-19. Coronavirus is lower case." The problem is that the second sentence has Coronavirus in upper case as the word happens to be at the start of a sentence.
My suggestion is to change this so that the second 'coronavirus' doesn't start the sentence, such as:
"Coronavirus is the virus that causes the illness COVID-19. Write coronavirus in lower case."
The 'Get in touch' section on component pages is duplicated across each of the components pages, rather than having the code duplicated multiple times, we could have a single partial view included on each of the pages.
This would save us time having to update each of the component pages if the get in touch details ever changed.
We need to decide if our URLs should always end in a trailing slash or never end in a trailing slash.
Add guidance for the tag component to the design system.
The tag component is being released in NHS.UK frontend v4.0.0.
We should move away from gulp and tidy up some of the dependencies and build tasks we have by using npm scripts.
Use compression dependency to speed up the application.
The NHS website recently had some work done to investigate best practices for open graph metadata (such as which meta tags to use) and new assets produced for the image. These changes should be reflected in the code base for the NHS digital service manual.
Guidance should also be published in the NHS digital service manual about the use of open graph but that will be captured in another issue via the service manual backlog.
https://beta.nhs.uk/service-manual/styles-components-patterns/colour
The colour variables listed on this page are incorrect, the naming convent for colours is $color_nhsuk-white instead of $nhsuk-white. The content will need updating to match the colour variables found in the NHS.UK frontend library. https://github.com/nhsuk/nhsuk-frontend/blob/master/packages/core/settings/_colours.scss
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
