From 42333af9eb75dc8006df693346ac28b5daf7dab0 Mon Sep 17 00:00:00 2001
From: John-Henry Barac <johnhenrybarac@mac.com>
Date: Thu, 4 Jul 2024 13:53:38 +0000
Subject: [PATCH] removed FDP and added context for chart colours

---
 docs/index.md                 |  10 +++++++---
 mkdocs.yml                    |   2 +-
 site/index.html               |  15 +++++++--------
 site/search/search_index.json |   2 +-
 site/sitemap.xml.gz           | Bin 195 -> 195 bytes
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 9ed5917..928e96a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,4 +1,4 @@
-#Build user centred products for the NHS Federated Data Platform
+#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 FDP products they use.
 
@@ -143,10 +143,14 @@ Our content is factual, neutral and unambiguous. We do not use metaphors - we sa
 - 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 
+- 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 
-To be used in this order (if more than 12 then start again from the first colour):
+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:
 
 - <p class="inline-container">One colour chart<span class="colour-rect" style="--colour: #005EB8; --txt_clr: white">#005EB8</span></p> 	
 - <p class="inline-container">Two colour chart<span class="colour-rect" style="--colour: #41B6E6; --txt_clr: white">#41B6E6</span></p> 
diff --git a/mkdocs.yml b/mkdocs.yml
index 3f57e52..98294cb 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -1,4 +1,4 @@
-site_name: Federated Data Platform | Design guide
+site_name: Data platform | Developers design guide
 # site_url: https://example.com
 repo_url: https://github.com/baracoffice/pagetest
 repo_name: Design guide page test
diff --git a/site/index.html b/site/index.html
index 751375a..1555f97 100644
--- a/site/index.html
+++ b/site/index.html
@@ -549,12 +549,12 @@ <h3 id="1-core-colours">1. Core colours</h3>
 <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 paragraph 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>
+<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>follow the colour guidance below to ensure consistent experience for users across all products </li>
+<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>
@@ -579,7 +579,7 @@ <h3 id="5-links">5.   Links</h3>
 <li>when a link will open a new tab for the user, add the words “opens in new tab” (or window) to the line</li>
 </ul>
 <h2 id="guidance-on-use-of-colour">Guidance on use of colour</h2>
-<p>Users find colours indicative of meaning, therefore, we need to use colour intentionally, for specific actions and consistently</p>
+<p>Users find colours indicative of meaning, therefore, we need to use colour intentionally and consistently</p>
 <ul>
 <li><strong>Accessibility:</strong> 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:<ul>
 <li>word things differently </li>
@@ -649,9 +649,9 @@ <h3 id="tone-of-voice">Tone of voice</h3>
 <h2 id="numbers-dates-and-time">Numbers, Dates and time</h2>
 <ul>
 <li>we use numerals for numbers (including 1 and 2)</li>
-<li>for numbers over 999, use a comma for clarity – for example, 1,000</li>
-<li>always start with zero for values less than 1 (Example: 0.75 not .75)</li>
-<li>ensure negative values are indicated by a minus sign (Example: -65)</li>
+<li>for numbers over 999, use a comma for clarity (for example, 1,000)</li>
+<li>always start with zero for values less than 1 (for example: 0.75 not .75)</li>
+<li>ensure negative values are indicated by a minus sign (for example: -65)</li>
 <li>we spell out "one" when it means "a" or to avoid repeating a word</li>
 </ul>
 <h3 id="dates">Dates</h3>
@@ -672,7 +672,7 @@ <h2 id="images">Images</h2>
 <h3 id="informative-images">Informative images</h3>
 <ul>
 <li>do not use text in images </li>
-<li>provide alt-text when images convey meaning or information.  If decorative, use an empty alt-text tag [“”]</li>
+<li>provide alt-text when images convey meaning or information.</li>
 <li>keep alt-text to around 125 characters or 2 sentences </li>
 <li>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. </li>
 </ul>
@@ -684,7 +684,6 @@ <h3 id="decorative-images">Decorative images</h3>
 <h3 id="product-tiles">Product tiles</h3>
 <ul>
 <li>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</li>
-<li>look out for more guidance on how to ensure that product tiles are accessbile for those using screen-readers - in a future release</li>
 </ul>
 <h2 id="data-visualisations">Data Visualisations</h2>
 <ul>
diff --git a/site/search/search_index.json b/site/search/search_index.json
index 411e672..18b862b 100644
--- a/site/search/search_index.json
+++ b/site/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 NHS Federated 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 FDP 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 paragraph 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. follow the colour guidance below 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, for specific actions 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 \u2013 for example, 1,000 always start with zero for values less than 1 (Example: 0.75 not .75) ensure negative values are indicated by a minus sign (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. If decorative, use an empty alt-text tag [\u201c\u201d] 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 look out for more guidance on how to ensure that product tiles are accessbile for those using screen-readers - in a future release 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 Chart colours To be used in this order (if more than 12 then start again from the first colour): 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-nhs-federated-data-platform","text":"","title":"Build user centred products for the NHS Federated 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 FDP 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 paragraph 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. follow the colour guidance below 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, for specific actions 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 \u2013 for example, 1,000 always start with zero for values less than 1 (Example: 0.75 not .75) ensure negative values are indicated by a minus sign (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. If decorative, use an empty alt-text tag [\u201c\u201d] 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 look out for more guidance on how to ensure that product tiles are accessbile for those using screen-readers - in a future release","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","title":"Data Visualisations"},{"location":"#chart-colours","text":"To be used in this order (if more than 12 then start again from the first colour): 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 NHS Federated 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 FDP 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 Chart colours To be used in this order (if more than 12 then start again from the first colour): 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-nhs-federated-data-platform","text":"","title":"Build user centred products for the NHS Federated 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 FDP 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","title":"Data Visualisations"},{"location":"#chart-colours","text":"To be used in this order (if more than 12 then start again from the first colour): 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/site/sitemap.xml.gz b/site/sitemap.xml.gz
index 120ce5627ca23cde8c5fab91e2263187afe2b406..aa5d13a1723313328c429ff304d92c4b7a07f809 100644
GIT binary patch
delta 14
VcmX@ic$kq*zMF$%cko2Ey#OJ01gii5

delta 14
VcmX@ic$kq*zMF&NpWj5by#OMy1nB?(