From 64f87bde0a75cd5ec3c50ea676bc17499bbe5160 Mon Sep 17 00:00:00 2001
From: John-Henry Barac <johnhenrybarac@mac.com>
Date: Thu, 4 Jul 2024 15:10:55 +0000
Subject: [PATCH] Deployed 0e9fa43 with MkDocs version: 1.4.2

---
 index.html               |  38 ++++++++++++++++++++++++++------------
 search/search_index.json |   2 +-
 sitemap.xml.gz           | Bin 195 -> 195 bytes
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 0178ad9..3eaf0c2 100644
--- a/index.html
+++ b/index.html
@@ -274,8 +274,8 @@
 </li>
         
           <li class="md-nav__item">
-  <a href="#3-using-colours" class="md-nav__link">
-    3.   Using colours
+  <a href="#3-accessibility" class="md-nav__link">
+    3.   Accessibility
   </a>
   
 </li>
@@ -408,6 +408,13 @@
     Time
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#other-numbers" class="md-nav__link">
+    Other numbers
+  </a>
+  
 </li>
         
       </ul>
@@ -546,22 +553,27 @@ <h3 id="1-core-colours">1. Core colours</h3>
 <p><p class="inline-container">White<span class="colour-rect" style="--colour: #FFFFFF; --txt_clr: black">#FFFFFF</span> Use this for labels on buttons, NHS logo, headings on NHS blue</p></p>
 </li>
 </ul>
-<h3 id="2-type-sizes">2.   Type sizes</h3>
-<ul>
-<li>the FDP uses type sizes Small, Medium and Large. We believe that the “small” size is unreadable for many users, therefore would recommend only using Medium and Large</li>
-<li>if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px.</li>
-</ul>
-<h3 id="3-using-colours">3.   Using colours</h3>
 <p>Users think that when colour is used it is trying to convey information, so make sure the use of colour is intentional and consistent. Don't use colour just for decoration.</p>
 <ul>
 <li>see the section on Guidance on use of colour - to ensure consistent experience for users across all products </li>
 <li>a proportion of users cannot differentiate different colours. To communicate with people who cannot see well or distinguish colours, you may need to: <ul>
 <li>ensure that the contrast between colours is high enough using a colour tool</li>
 <li>word things differently</li>
-<li>use more than one visual cue, for example, text and an icon as well as colour </li>
+<li>use more than one visual cue, for example, text and an icon as well as colour</li>
 </ul>
 </li>
 </ul>
+<h3 id="2-type-sizes">2.   Type sizes</h3>
+<ul>
+<li>the Workshop uses type sizes Small, Medium and Large. We believe that the “small” size is unreadable for many users, therefore would recommend only using Medium and Large</li>
+<li>if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px.</li>
+</ul>
+<h3 id="3-accessibility">3.   Accessibility</h3>
+<ul>
+<li>In the UK, almost 1 in 5 people have a disability of some kind. Many more have temporary or situational disabilities, like an illness or injury. When you're working on NHS internal services, think about how people with different needs might use what you're making.  </li>
+<li>set up automated accessibility testing and fix issues you identify</li>
+<li>use the NHS <a href="https://nhsdigital.github.io/accessibility-checklist/">accessibility checklist</a> to carry out an initial WCAG evaluation</li>
+</ul>
 <h3 id="4-headings">4.   Headings</h3>
 <ul>
 <li>make them meaningful, let readers know where they are/ what they are looking at </li>
@@ -663,11 +675,13 @@ <h3 id="dates">Dates</h3>
 </ul>
 <h3 id="time">Time</h3>
 <ul>
-<li>"5:30pm", not "1730hrs"</li>
-<li>"midnight" not "00:00"</li>
-<li>"midday" not "12 noon", "noon" or "12pm"</li>
+<li>check what time format the users and Trust use, but it's likely to be 24 hour clock</li>
 <li>"6 hours 30 minutes", not "6.5hrs" </li>
 </ul>
+<h3 id="other-numbers">Other numbers</h3>
+<ul>
+<li>when showing the age of a patient it is important to be accurate and express the age in years and months not decimals</li>
+</ul>
 <h2 id="images">Images</h2>
 <h3 id="informative-images">Informative images</h3>
 <ul>
diff --git a/search/search_index.json b/search/search_index.json
index f3a9ba9..b4e5daf 100644
--- a/search/search_index.json
+++ b/search/search_index.json
@@ -1 +1 @@
-{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Build user centred products for the Data Platform How to use this guide By using this guide, you can ensure that the user of your product encounters a familiar and easy-to-use interface, and will find it similar to other platform products they use. It\u2019s important to ensure that all products can be used as intended and that end users understand the interface and can get the outcome they need easily. This guide contains clear and consistent guidelines on core design elements, including colour palettes, typography, and layout structures. In the final version you will also find screengrabs of templates to be used in Workshop - with annotations to explain which Workshop widgets to use. Top five things to consider 1. Core colours NHS Blue #005EB8 Use this for logos, straps White #FFFFFF Use this for labels on buttons, NHS logo, headings on NHS blue 2. Type sizes the FDP uses type sizes Small, Medium and Large. We believe that the \u201csmall\u201d size is unreadable for many users, therefore would recommend only using Medium and Large if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px. 3. Using colours Users think that when colour is used it is trying to convey information, so make sure the use of colour is intentional and consistent. Don't use colour just for decoration. see the section on Guidance on use of colour - to ensure consistent experience for users across all products a proportion of users cannot differentiate different colours. To communicate with people who cannot see well or distinguish colours, you may need to: ensure that the contrast between colours is high enough using a colour tool word things differently use more than one visual cue, for example, text and an icon as well as colour 4. Headings make them meaningful, let readers know where they are/ what they are looking at use \u201cSentence Case\u201d for headings make proper use of the Semantic page structure used in Workshop to make it readable by screen-readers 5. Links links should open in the same window. There are 2 exceptions to this: for instructions or other help with filling in a form (for example, a date picker) if a user has logged into a secure site and the link would take them away from it make links meaningful, do not say \u201cclick here\u201d. Provide context where it will take the user when a link will open a new tab for the user, add the words \u201copens in new tab\u201d (or window) to the line Guidance on use of colour Users find colours indicative of meaning, therefore, we need to use colour intentionally and consistently Accessibility: make sure that what the colour is \"saying\" is available in other ways. To communicate with people who cannot see well or distinguish colours, you may need to: word things differently use more than one visual cue, for example, text and an icon as well as colour Core colours NHS Blue #005EB8 Use this for logos, straps White #FFFFFF Buttons Button colour #007F3B Secondary button colour #4C6272 Button labels #FFFFFF NHS blue-grey background Page background #F0F4F5 Error state Error state colour #D5281B RAG colours (Red Amber Green) Red colour #DA291C Amber colour #ED8B00 Green colour #006747 Link colours Link colour #005EB8 Hover link colour #7C2855 Visited link colour #330072 Active link colour #002F5C Border Border colour #D8DDE0 Form border colour #4C6272 Written Content Use plain language. Research has shown that most people prefer to read plain English, and that the more specialist a person's knowledge is, the greater their preference. Our content is factual, neutral and unambiguous. We do not use metaphors - we say what we mean. spell out abbreviations and acronyms when first used don\u2019t use jargon, rather than saying \u2018free text\u2019 say \u2018notes\u2019 use short sentences - up to 20 words, and short paragraphs - up to 3 sentences write descriptive headings and subheadings do not assume our audience will be familiar with the topic When to use Capital letters use \u201cSentence Case\u201d for headings (capital letter at the start of the sentence only, except for proper nouns e.g. names, company names) use \u201cTitle case\u201d for the names of organisations, training programmes, schemes, and specialties (Capital letters for each word in a title) Tone of voice use the active voice - \"find a pharmacy\" rather than \"a pharmacy can be found\" there\u2019s usually no need to say \"please\" or \"please note\" there\u2019s usually no need to say thank you say \"sorry\" if something serious has gone wrong - for example, the service has stopped working completely Numbers, Dates and time we use numerals for numbers (including 1 and 2) for numbers over 999, use a comma for clarity (for example, 1,000) always start with zero for values less than 1 (for example: 0.75 not .75) ensure negative values are indicated by a minus sign (for example: -65) we spell out \"one\" when it means \"a\" or to avoid repeating a word Dates always use UK format for dates, do not use American format use this format for dates: 6 August 2018 if you need to include the day of the week, use this format: Wednesday 6 August 2018 short dates should be formatted DD/MM/YYYY Time \"5:30pm\", not \"1730hrs\" \"midnight\" not \"00:00\" \"midday\" not \"12 noon\", \"noon\" or \"12pm\" \"6 hours 30 minutes\", not \"6.5hrs\" Images Informative images do not use text in images provide alt-text when images convey meaning or information. keep alt-text to around 125 characters or 2 sentences if there's important information that you cannot fit in 125 characters (for example, you're describing a complex chart), include this information in the alt-text or consider linking to more information for screen reader users. Decorative images avoid them in data products unless they convey useful information if an image is decorative, give it a null text alternative like this: (alt=\"\") Product tiles if there is a need to add an image to a product tile, ensure that it is a copyright free image that is meaningful to users, and not a screengrab of a product page Data Visualisations every chart or other visualization must have a title. This benefits all users, and particularly those using a screen-reader. [type size medium] keep axis titles as short as possible [type size medium] category names on a chart axis or in a legend should be clear and concise [type size medium] for data from two or more time periods, put the older values before the newer values always include some written explanation for the chart and an accompanying table for those who cannot use the data visualisation include a source so that a user can track back to the original data Chart colours We recommend to stick to no more than five different variables (colours or tints) on a graph or other chart type, otherwise your visualisation will be confusing. If you need to plot more than 5 variables, you should consider alternative ways to visualise this information. For any reasons, if we have to use more than five colours in a visualisation then use the colours listed below, in this order: One colour chart #005EB8 Two colour chart #41B6E6 Three colour chart #4C6272 Four colour chart #FFB81C Five colour chart #AE2573 Six colour chart #00A499 Seven colour chart #E317AA Eight colour chart #007F3B Nine colour chart #9A6324 Ten colour chart #78BE20 Eleven colour chart #ED4F00 Twelve colour chart #880FB8 Templates and Widgets This is a sample of an annotated image of a template. There will be guiddsance here on use of widgerts and templates in Workshop, and where possible, direct links to the templates. The templates, widgets and code will be accessed in Foundry as usual Further information Accessibility W3C accessibility pages NHS Design guide accessibility pages Content design NHS Content Design guide","title":"Home"},{"location":"#build-user-centred-products-for-the-data-platform","text":"","title":"Build user centred products for the Data Platform"},{"location":"#how-to-use-this-guide","text":"By using this guide, you can ensure that the user of your product encounters a familiar and easy-to-use interface, and will find it similar to other platform products they use. It\u2019s important to ensure that all products can be used as intended and that end users understand the interface and can get the outcome they need easily. This guide contains clear and consistent guidelines on core design elements, including colour palettes, typography, and layout structures. In the final version you will also find screengrabs of templates to be used in Workshop - with annotations to explain which Workshop widgets to use.","title":"How to use this guide"},{"location":"#top-five-things-to-consider","text":"","title":"Top five things to consider"},{"location":"#1-core-colours","text":"NHS Blue #005EB8 Use this for logos, straps White #FFFFFF Use this for labels on buttons, NHS logo, headings on NHS blue","title":"1. Core colours"},{"location":"#2-type-sizes","text":"the FDP uses type sizes Small, Medium and Large. We believe that the \u201csmall\u201d size is unreadable for many users, therefore would recommend only using Medium and Large if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px.","title":"2.   Type sizes"},{"location":"#3-using-colours","text":"Users think that when colour is used it is trying to convey information, so make sure the use of colour is intentional and consistent. Don't use colour just for decoration. see the section on Guidance on use of colour - to ensure consistent experience for users across all products a proportion of users cannot differentiate different colours. To communicate with people who cannot see well or distinguish colours, you may need to: ensure that the contrast between colours is high enough using a colour tool word things differently use more than one visual cue, for example, text and an icon as well as colour","title":"3.   Using colours"},{"location":"#4-headings","text":"make them meaningful, let readers know where they are/ what they are looking at use \u201cSentence Case\u201d for headings make proper use of the Semantic page structure used in Workshop to make it readable by screen-readers","title":"4.   Headings"},{"location":"#5-links","text":"links should open in the same window. There are 2 exceptions to this: for instructions or other help with filling in a form (for example, a date picker) if a user has logged into a secure site and the link would take them away from it make links meaningful, do not say \u201cclick here\u201d. Provide context where it will take the user when a link will open a new tab for the user, add the words \u201copens in new tab\u201d (or window) to the line","title":"5.   Links"},{"location":"#guidance-on-use-of-colour","text":"Users find colours indicative of meaning, therefore, we need to use colour intentionally and consistently Accessibility: make sure that what the colour is \"saying\" is available in other ways. To communicate with people who cannot see well or distinguish colours, you may need to: word things differently use more than one visual cue, for example, text and an icon as well as colour","title":"Guidance on use of colour"},{"location":"#core-colours","text":"NHS Blue #005EB8 Use this for logos, straps White #FFFFFF","title":"Core colours"},{"location":"#buttons","text":"Button colour #007F3B Secondary button colour #4C6272 Button labels #FFFFFF","title":"Buttons"},{"location":"#nhs-blue-grey-background","text":"Page background #F0F4F5","title":"NHS blue-grey background"},{"location":"#error-state","text":"Error state colour #D5281B","title":"Error state"},{"location":"#rag-colours-red-amber-green","text":"Red colour #DA291C Amber colour #ED8B00 Green colour #006747","title":"RAG colours (Red Amber Green)"},{"location":"#link-colours","text":"Link colour #005EB8 Hover link colour #7C2855 Visited link colour #330072 Active link colour #002F5C","title":"Link colours"},{"location":"#border","text":"Border colour #D8DDE0 Form border colour #4C6272","title":"Border"},{"location":"#written-content","text":"Use plain language. Research has shown that most people prefer to read plain English, and that the more specialist a person's knowledge is, the greater their preference. Our content is factual, neutral and unambiguous. We do not use metaphors - we say what we mean. spell out abbreviations and acronyms when first used don\u2019t use jargon, rather than saying \u2018free text\u2019 say \u2018notes\u2019 use short sentences - up to 20 words, and short paragraphs - up to 3 sentences write descriptive headings and subheadings do not assume our audience will be familiar with the topic","title":"Written Content"},{"location":"#when-to-use-capital-letters","text":"use \u201cSentence Case\u201d for headings (capital letter at the start of the sentence only, except for proper nouns e.g. names, company names) use \u201cTitle case\u201d for the names of organisations, training programmes, schemes, and specialties (Capital letters for each word in a title)","title":"When to use Capital letters"},{"location":"#tone-of-voice","text":"use the active voice - \"find a pharmacy\" rather than \"a pharmacy can be found\" there\u2019s usually no need to say \"please\" or \"please note\" there\u2019s usually no need to say thank you say \"sorry\" if something serious has gone wrong - for example, the service has stopped working completely","title":"Tone of voice"},{"location":"#numbers-dates-and-time","text":"we use numerals for numbers (including 1 and 2) for numbers over 999, use a comma for clarity (for example, 1,000) always start with zero for values less than 1 (for example: 0.75 not .75) ensure negative values are indicated by a minus sign (for example: -65) we spell out \"one\" when it means \"a\" or to avoid repeating a word","title":"Numbers, Dates and time"},{"location":"#dates","text":"always use UK format for dates, do not use American format use this format for dates: 6 August 2018 if you need to include the day of the week, use this format: Wednesday 6 August 2018 short dates should be formatted DD/MM/YYYY","title":"Dates"},{"location":"#time","text":"\"5:30pm\", not \"1730hrs\" \"midnight\" not \"00:00\" \"midday\" not \"12 noon\", \"noon\" or \"12pm\" \"6 hours 30 minutes\", not \"6.5hrs\"","title":"Time"},{"location":"#images","text":"","title":"Images"},{"location":"#informative-images","text":"do not use text in images provide alt-text when images convey meaning or information. keep alt-text to around 125 characters or 2 sentences if there's important information that you cannot fit in 125 characters (for example, you're describing a complex chart), include this information in the alt-text or consider linking to more information for screen reader users.","title":"Informative images"},{"location":"#decorative-images","text":"avoid them in data products unless they convey useful information if an image is decorative, give it a null text alternative like this: (alt=\"\")","title":"Decorative images"},{"location":"#product-tiles","text":"if there is a need to add an image to a product tile, ensure that it is a copyright free image that is meaningful to users, and not a screengrab of a product page","title":"Product tiles"},{"location":"#data-visualisations","text":"every chart or other visualization must have a title. This benefits all users, and particularly those using a screen-reader. [type size medium] keep axis titles as short as possible [type size medium] category names on a chart axis or in a legend should be clear and concise [type size medium] for data from two or more time periods, put the older values before the newer values always include some written explanation for the chart and an accompanying table for those who cannot use the data visualisation include a source so that a user can track back to the original data","title":"Data Visualisations"},{"location":"#chart-colours","text":"We recommend to stick to no more than five different variables (colours or tints) on a graph or other chart type, otherwise your visualisation will be confusing. If you need to plot more than 5 variables, you should consider alternative ways to visualise this information. For any reasons, if we have to use more than five colours in a visualisation then use the colours listed below, in this order: One colour chart #005EB8 Two colour chart #41B6E6 Three colour chart #4C6272 Four colour chart #FFB81C Five colour chart #AE2573 Six colour chart #00A499 Seven colour chart #E317AA Eight colour chart #007F3B Nine colour chart #9A6324 Ten colour chart #78BE20 Eleven colour chart #ED4F00 Twelve colour chart #880FB8","title":"Chart colours"},{"location":"#templates-and-widgets","text":"This is a sample of an annotated image of a template. There will be guiddsance here on use of widgerts and templates in Workshop, and where possible, direct links to the templates. The templates, widgets and code will be accessed in Foundry as usual","title":"Templates and Widgets"},{"location":"#further-information","text":"","title":"Further information"},{"location":"#accessibility","text":"W3C accessibility pages NHS Design guide accessibility pages","title":"Accessibility"},{"location":"#content-design","text":"NHS Content Design guide","title":"Content design"},{"location":"images/","text":"","title":"Images"}]}
\ No newline at end of file
+{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Build user centred products for the Data Platform How to use this guide By using this guide, you can ensure that the user of your product encounters a familiar and easy-to-use interface, and will find it similar to other platform products they use. It\u2019s important to ensure that all products can be used as intended and that end users understand the interface and can get the outcome they need easily. This guide contains clear and consistent guidelines on core design elements, including colour palettes, typography, and layout structures. In the final version you will also find screengrabs of templates to be used in Workshop - with annotations to explain which Workshop widgets to use. Top five things to consider 1. Core colours NHS Blue #005EB8 Use this for logos, straps White #FFFFFF Use this for labels on buttons, NHS logo, headings on NHS blue Users think that when colour is used it is trying to convey information, so make sure the use of colour is intentional and consistent. Don't use colour just for decoration. see the section on Guidance on use of colour - to ensure consistent experience for users across all products a proportion of users cannot differentiate different colours. To communicate with people who cannot see well or distinguish colours, you may need to: ensure that the contrast between colours is high enough using a colour tool word things differently use more than one visual cue, for example, text and an icon as well as colour 2. Type sizes the Workshop uses type sizes Small, Medium and Large. We believe that the \u201csmall\u201d size is unreadable for many users, therefore would recommend only using Medium and Large if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px. 3. Accessibility In the UK, almost 1 in 5 people have a disability of some kind. Many more have temporary or situational disabilities, like an illness or injury. When you're working on NHS internal services, think about how people with different needs might use what you're making. set up automated accessibility testing and fix issues you identify use the NHS accessibility checklist to carry out an initial WCAG evaluation 4. Headings make them meaningful, let readers know where they are/ what they are looking at use \u201cSentence Case\u201d for headings make proper use of the Semantic page structure used in Workshop to make it readable by screen-readers 5. Links links should open in the same window. There are 2 exceptions to this: for instructions or other help with filling in a form (for example, a date picker) if a user has logged into a secure site and the link would take them away from it make links meaningful, do not say \u201cclick here\u201d. Provide context where it will take the user when a link will open a new tab for the user, add the words \u201copens in new tab\u201d (or window) to the line Guidance on use of colour Users find colours indicative of meaning, therefore, we need to use colour intentionally and consistently Accessibility: make sure that what the colour is \"saying\" is available in other ways. To communicate with people who cannot see well or distinguish colours, you may need to: word things differently use more than one visual cue, for example, text and an icon as well as colour Core colours NHS Blue #005EB8 Use this for logos, straps White #FFFFFF Buttons Button colour #007F3B Secondary button colour #4C6272 Button labels #FFFFFF NHS blue-grey background Page background #F0F4F5 Error state Error state colour #D5281B RAG colours (Red Amber Green) Red colour #DA291C Amber colour #ED8B00 Green colour #006747 Link colours Link colour #005EB8 Hover link colour #7C2855 Visited link colour #330072 Active link colour #002F5C Border Border colour #D8DDE0 Form border colour #4C6272 Written Content Use plain language. Research has shown that most people prefer to read plain English, and that the more specialist a person's knowledge is, the greater their preference. Our content is factual, neutral and unambiguous. We do not use metaphors - we say what we mean. spell out abbreviations and acronyms when first used don\u2019t use jargon, rather than saying \u2018free text\u2019 say \u2018notes\u2019 use short sentences - up to 20 words, and short paragraphs - up to 3 sentences write descriptive headings and subheadings do not assume our audience will be familiar with the topic When to use Capital letters use \u201cSentence Case\u201d for headings (capital letter at the start of the sentence only, except for proper nouns e.g. names, company names) use \u201cTitle case\u201d for the names of organisations, training programmes, schemes, and specialties (Capital letters for each word in a title) Tone of voice use the active voice - \"find a pharmacy\" rather than \"a pharmacy can be found\" there\u2019s usually no need to say \"please\" or \"please note\" there\u2019s usually no need to say thank you say \"sorry\" if something serious has gone wrong - for example, the service has stopped working completely Numbers, Dates and time we use numerals for numbers (including 1 and 2) for numbers over 999, use a comma for clarity (for example, 1,000) always start with zero for values less than 1 (for example: 0.75 not .75) ensure negative values are indicated by a minus sign (for example: -65) we spell out \"one\" when it means \"a\" or to avoid repeating a word Dates always use UK format for dates, do not use American format use this format for dates: 6 August 2018 if you need to include the day of the week, use this format: Wednesday 6 August 2018 short dates should be formatted DD/MM/YYYY Time check what time format the users and Trust use, but it's likely to be 24 hour clock \"6 hours 30 minutes\", not \"6.5hrs\" Other numbers when showing the age of a patient it is important to be accurate and express the age in years and months not decimals Images Informative images do not use text in images provide alt-text when images convey meaning or information. keep alt-text to around 125 characters or 2 sentences if there's important information that you cannot fit in 125 characters (for example, you're describing a complex chart), include this information in the alt-text or consider linking to more information for screen reader users. Decorative images avoid them in data products unless they convey useful information if an image is decorative, give it a null text alternative like this: (alt=\"\") Product tiles if there is a need to add an image to a product tile, ensure that it is a copyright free image that is meaningful to users, and not a screengrab of a product page Data Visualisations every chart or other visualization must have a title. This benefits all users, and particularly those using a screen-reader. [type size medium] keep axis titles as short as possible [type size medium] category names on a chart axis or in a legend should be clear and concise [type size medium] for data from two or more time periods, put the older values before the newer values always include some written explanation for the chart and an accompanying table for those who cannot use the data visualisation include a source so that a user can track back to the original data Chart colours We recommend to stick to no more than five different variables (colours or tints) on a graph or other chart type, otherwise your visualisation will be confusing. If you need to plot more than 5 variables, you should consider alternative ways to visualise this information. For any reasons, if we have to use more than five colours in a visualisation then use the colours listed below, in this order: One colour chart #005EB8 Two colour chart #41B6E6 Three colour chart #4C6272 Four colour chart #FFB81C Five colour chart #AE2573 Six colour chart #00A499 Seven colour chart #E317AA Eight colour chart #007F3B Nine colour chart #9A6324 Ten colour chart #78BE20 Eleven colour chart #ED4F00 Twelve colour chart #880FB8 Templates and Widgets This is a sample of an annotated image of a template. There will be guiddsance here on use of widgerts and templates in Workshop, and where possible, direct links to the templates. The templates, widgets and code will be accessed in Foundry as usual Further information Accessibility W3C accessibility pages NHS Design guide accessibility pages Content design NHS Content Design guide","title":"Home"},{"location":"#build-user-centred-products-for-the-data-platform","text":"","title":"Build user centred products for the Data Platform"},{"location":"#how-to-use-this-guide","text":"By using this guide, you can ensure that the user of your product encounters a familiar and easy-to-use interface, and will find it similar to other platform products they use. It\u2019s important to ensure that all products can be used as intended and that end users understand the interface and can get the outcome they need easily. This guide contains clear and consistent guidelines on core design elements, including colour palettes, typography, and layout structures. In the final version you will also find screengrabs of templates to be used in Workshop - with annotations to explain which Workshop widgets to use.","title":"How to use this guide"},{"location":"#top-five-things-to-consider","text":"","title":"Top five things to consider"},{"location":"#1-core-colours","text":"NHS Blue #005EB8 Use this for logos, straps White #FFFFFF Use this for labels on buttons, NHS logo, headings on NHS blue Users think that when colour is used it is trying to convey information, so make sure the use of colour is intentional and consistent. Don't use colour just for decoration. see the section on Guidance on use of colour - to ensure consistent experience for users across all products a proportion of users cannot differentiate different colours. To communicate with people who cannot see well or distinguish colours, you may need to: ensure that the contrast between colours is high enough using a colour tool word things differently use more than one visual cue, for example, text and an icon as well as colour","title":"1. Core colours"},{"location":"#2-type-sizes","text":"the Workshop uses type sizes Small, Medium and Large. We believe that the \u201csmall\u201d size is unreadable for many users, therefore would recommend only using Medium and Large if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px.","title":"2.   Type sizes"},{"location":"#3-accessibility","text":"In the UK, almost 1 in 5 people have a disability of some kind. Many more have temporary or situational disabilities, like an illness or injury. When you're working on NHS internal services, think about how people with different needs might use what you're making. set up automated accessibility testing and fix issues you identify use the NHS accessibility checklist to carry out an initial WCAG evaluation","title":"3.   Accessibility"},{"location":"#4-headings","text":"make them meaningful, let readers know where they are/ what they are looking at use \u201cSentence Case\u201d for headings make proper use of the Semantic page structure used in Workshop to make it readable by screen-readers","title":"4.   Headings"},{"location":"#5-links","text":"links should open in the same window. There are 2 exceptions to this: for instructions or other help with filling in a form (for example, a date picker) if a user has logged into a secure site and the link would take them away from it make links meaningful, do not say \u201cclick here\u201d. Provide context where it will take the user when a link will open a new tab for the user, add the words \u201copens in new tab\u201d (or window) to the line","title":"5.   Links"},{"location":"#guidance-on-use-of-colour","text":"Users find colours indicative of meaning, therefore, we need to use colour intentionally and consistently Accessibility: make sure that what the colour is \"saying\" is available in other ways. To communicate with people who cannot see well or distinguish colours, you may need to: word things differently use more than one visual cue, for example, text and an icon as well as colour","title":"Guidance on use of colour"},{"location":"#core-colours","text":"NHS Blue #005EB8 Use this for logos, straps White #FFFFFF","title":"Core colours"},{"location":"#buttons","text":"Button colour #007F3B Secondary button colour #4C6272 Button labels #FFFFFF","title":"Buttons"},{"location":"#nhs-blue-grey-background","text":"Page background #F0F4F5","title":"NHS blue-grey background"},{"location":"#error-state","text":"Error state colour #D5281B","title":"Error state"},{"location":"#rag-colours-red-amber-green","text":"Red colour #DA291C Amber colour #ED8B00 Green colour #006747","title":"RAG colours (Red Amber Green)"},{"location":"#link-colours","text":"Link colour #005EB8 Hover link colour #7C2855 Visited link colour #330072 Active link colour #002F5C","title":"Link colours"},{"location":"#border","text":"Border colour #D8DDE0 Form border colour #4C6272","title":"Border"},{"location":"#written-content","text":"Use plain language. Research has shown that most people prefer to read plain English, and that the more specialist a person's knowledge is, the greater their preference. Our content is factual, neutral and unambiguous. We do not use metaphors - we say what we mean. spell out abbreviations and acronyms when first used don\u2019t use jargon, rather than saying \u2018free text\u2019 say \u2018notes\u2019 use short sentences - up to 20 words, and short paragraphs - up to 3 sentences write descriptive headings and subheadings do not assume our audience will be familiar with the topic","title":"Written Content"},{"location":"#when-to-use-capital-letters","text":"use \u201cSentence Case\u201d for headings (capital letter at the start of the sentence only, except for proper nouns e.g. names, company names) use \u201cTitle case\u201d for the names of organisations, training programmes, schemes, and specialties (Capital letters for each word in a title)","title":"When to use Capital letters"},{"location":"#tone-of-voice","text":"use the active voice - \"find a pharmacy\" rather than \"a pharmacy can be found\" there\u2019s usually no need to say \"please\" or \"please note\" there\u2019s usually no need to say thank you say \"sorry\" if something serious has gone wrong - for example, the service has stopped working completely","title":"Tone of voice"},{"location":"#numbers-dates-and-time","text":"we use numerals for numbers (including 1 and 2) for numbers over 999, use a comma for clarity (for example, 1,000) always start with zero for values less than 1 (for example: 0.75 not .75) ensure negative values are indicated by a minus sign (for example: -65) we spell out \"one\" when it means \"a\" or to avoid repeating a word","title":"Numbers, Dates and time"},{"location":"#dates","text":"always use UK format for dates, do not use American format use this format for dates: 6 August 2018 if you need to include the day of the week, use this format: Wednesday 6 August 2018 short dates should be formatted DD/MM/YYYY","title":"Dates"},{"location":"#time","text":"check what time format the users and Trust use, but it's likely to be 24 hour clock \"6 hours 30 minutes\", not \"6.5hrs\"","title":"Time"},{"location":"#other-numbers","text":"when showing the age of a patient it is important to be accurate and express the age in years and months not decimals","title":"Other numbers"},{"location":"#images","text":"","title":"Images"},{"location":"#informative-images","text":"do not use text in images provide alt-text when images convey meaning or information. keep alt-text to around 125 characters or 2 sentences if there's important information that you cannot fit in 125 characters (for example, you're describing a complex chart), include this information in the alt-text or consider linking to more information for screen reader users.","title":"Informative images"},{"location":"#decorative-images","text":"avoid them in data products unless they convey useful information if an image is decorative, give it a null text alternative like this: (alt=\"\")","title":"Decorative images"},{"location":"#product-tiles","text":"if there is a need to add an image to a product tile, ensure that it is a copyright free image that is meaningful to users, and not a screengrab of a product page","title":"Product tiles"},{"location":"#data-visualisations","text":"every chart or other visualization must have a title. This benefits all users, and particularly those using a screen-reader. [type size medium] keep axis titles as short as possible [type size medium] category names on a chart axis or in a legend should be clear and concise [type size medium] for data from two or more time periods, put the older values before the newer values always include some written explanation for the chart and an accompanying table for those who cannot use the data visualisation include a source so that a user can track back to the original data","title":"Data Visualisations"},{"location":"#chart-colours","text":"We recommend to stick to no more than five different variables (colours or tints) on a graph or other chart type, otherwise your visualisation will be confusing. If you need to plot more than 5 variables, you should consider alternative ways to visualise this information. For any reasons, if we have to use more than five colours in a visualisation then use the colours listed below, in this order: One colour chart #005EB8 Two colour chart #41B6E6 Three colour chart #4C6272 Four colour chart #FFB81C Five colour chart #AE2573 Six colour chart #00A499 Seven colour chart #E317AA Eight colour chart #007F3B Nine colour chart #9A6324 Ten colour chart #78BE20 Eleven colour chart #ED4F00 Twelve colour chart #880FB8","title":"Chart colours"},{"location":"#templates-and-widgets","text":"This is a sample of an annotated image of a template. There will be guiddsance here on use of widgerts and templates in Workshop, and where possible, direct links to the templates. The templates, widgets and code will be accessed in Foundry as usual","title":"Templates and Widgets"},{"location":"#further-information","text":"","title":"Further information"},{"location":"#accessibility","text":"W3C accessibility pages NHS Design guide accessibility pages","title":"Accessibility"},{"location":"#content-design","text":"NHS Content Design guide","title":"Content design"},{"location":"images/","text":"","title":"Images"}]}
\ No newline at end of file
diff --git a/sitemap.xml.gz b/sitemap.xml.gz
index bc6076d76159d6ed76ad5a25196bfce640108b1d..0afd1eab831f1719420712c62182acc7c865670c 100644
GIT binary patch
delta 14
VcmX@ic$kq*zMF%ie)mMSy#OKV1lIrn

delta 14
VcmX@ic$kq*zMF$%$Lfh}djTTH1poj5