-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updates to no consent guidance and related design artifacts to include browser versions for NHS App
- Loading branch information
1 parent
15cbfe3
commit de4e130
Showing
6 changed files
with
112 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| layout: base-example.njk | ||
| title: NHS login button for NHS services that use the Design System | ||
| --- | ||
|
|
||
| <h1>You cannot continue without sharing your information</h1> | ||
|
|
||
| <p>The service provider needs your NHS login information to verify your identity.</p> | ||
|
|
||
| <p>If you need medical help, go to <a href="https://111.nhs.uk/">111.nhs.uk</a> or call <a href="tel:111">111</a> or your GP.</p> | ||
|
|
||
| <p>Call <a href="tel:999">999</a> if it's a life-threatening emergency.</p> | ||
|
|
||
| <p>Close this tab to go back to NHS App.</p> | ||
|
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,11 +9,11 @@ title: Sharing a user's NHS login information with your service | |
| --- | ||
|
|
||
| <h2 id="journey">User journey asking users to share their NHS login information</h2> | ||
| <a href="/nhslogin/images/Guidance-userjourney-consent.png" class="design-example__pop-out" target="_blank" rel="noopener noreferrer"> | ||
| <a href="/nhslogin/images/Guidance-userjourney-no-consent.png" class="design-example__pop-out" target="_blank" rel="noopener noreferrer"> | ||
| Open this user journey flow in new window | ||
| </a> | ||
| <div class="code-embed"> | ||
| <img class="nhsuk-image__img" src="/nhslogin/images/Guidance-userjourney-consent.png" alt="Diagram showing the flow that a user goes down from selecting the NHS button to being authorised by NHS login and back to the partner service."> | ||
| <img class="nhsuk-image__img" src="/nhslogin/images/Guidance-userjourney-no-consent.png" alt="Diagram showing the flow that a user goes down when they do not agree to share their NHS login information with your service"> | ||
| </div> | ||
| <br> | ||
| <p>We ask users to agree to share their NHS login information with your service when:</p> | ||
|
|
@@ -32,13 +32,13 @@ title: Sharing a user's NHS login information with your service | |
|
|
||
| <p>If a user does not agree to share their NHS login information, they can go back from the confirmation screen to amend their decision. They can then continue to your service.</p> | ||
| <p>If the user still does not agree to share their NHS login information, they are redirected to your service without passing an ID token or authorisation code.</p> | ||
| <p>Their information is not passed to your service, and you need to display a no-consent error screen.</p> | ||
| <p>Their information is not passed to your service, and you need to display a 'no-consent error screen'.</p> | ||
| <p>How the user is able to continue to your website or app depends on how you handle them. For example, you may have a guest process or alternative authentication journey.</p> | ||
|
|
||
|
|
||
| <p>The suggested content on the no-consent error screen differs, depending on the category of service that you belong to:</p> | ||
| <ul> | ||
| <li><a href="nhslogin/no-consent-guidance/#wayfinder">services that use Wayfinder</li> | ||
| <li><a href="nhslogin/no-consent-guidance/#nhsapp">services that use NHS App</li> | ||
| <li><a href="nhslogin/no-consent-guidance/#alternative">services that have alternative user verification processes</a></li> | ||
| <li><a href="nhslogin/no-consent-guidance/#other">all other services</a></li> | ||
| </ul> | ||
|
|
@@ -55,66 +55,121 @@ title: Sharing a user's NHS login information with your service | |
| <p>There are three different types of implementation of the no-consent error screen. The guidance most suitable for you will depend on what type of service you are.</p> | ||
|
|
||
| <!-- | ||
| //............................................................................................................. | ||
| //..WW....WWW....WW.....AAA....AA......YYY.............FI...IN......NN...NDDDD........DEEEEEEEE...ERRRRR....... | ||
| //.WWWW..WWWWW..WWWW...AAAAA..AAAYY...YYYYYYYFFFFFFFF.FFII.IINNN...NNNN.NNDDDDDDDD...DDEEEEEEEEE.EERRRRRRRRR... | ||
| //.WWWW..WWWWW..WWWW...AAAAA..AAAYY...YYYY.YYFFFFFFFF.FFII.IINNN...NNNN.NNDDDDDDDDD..DDEEEEEEEEE.EERRRRRRRRR... | ||
| //.WWWW..WWWWW..WWWW..AAAAAAA..AAYYY.YYYYY.YYFFFFFFFF.FFII.IINNNN..NNNN.NNDDDDDDDDD..DDEEEEEEEEE.EERRRRRRRRRR.. | ||
| //..WWWW.WWWWW.WWWW...AAAAAAA...AYYY.YYYY..YYFF.......FFII.IINNNN..NNNN.NNDD...DDDDD.DDEE........EERR...RRRRR.. | ||
| //..WWWWWWWWWWWWWWW...AAAAAAA...AYYYYYYYY..YYFF.......FFII.IINNNNN.NNNN.NNDD....DDDD.DDEEEEEEEE..EERR....RRRR.. | ||
| //..WWWWWWWWWWWWWWW..AAAAAAAAA...YYYYYYY...YYFFFFFFFF.FFII.IINNNNN.NNNN.NNDD....DDDD.DDEEEEEEEE..EERRRRRRRRRR.. | ||
| //..WWWWWWWWWWWWWWW..AAAA.AAAA...YYYYYY....YYFFFFFFFF.FFII.IINNNNNNNNNN.NNDD....DDDD.DDEEEEEEEE..EERRRRRRRRR... | ||
| //...WWWWWW.WWWWWW...AAAAAAAAAA...YYYYY....YYFFFFFFFF.FFII.IINNNNNNNNNN.NNDD....DDDD.DDEEEEEEEE..EERRRRRRRRR... | ||
| //...WWWWWW.WWWWWW..AAAAAAAAAAA...YYYY.....YYFF.......FFII.IINN.NNNNNNN.NNDD....DDDD.DDEE........EERR..RRRRR... | ||
| //...WWWWWW.WWWWWW..AAAAAAAAAAA...YYYY.....YYFF.......FFII.IINN..NNNNNN.NNDD...DDDDD.DDEE........EERR....RRRR.. | ||
| //....WWWWW.WWWWW...AAAAAAAAAAAA..YYYY.....YYFF.......FFII.IINN..NNNNNN.NNDDDDDDDDD..DDEEEEEEEEE.EERR....RRRR.. | ||
| //....WWWW...WWWW..WAAAA....AAAA..YYYY.....YYFF.......FFII.IINN...NNNNN.NNDDDDDDDDD..DDEEEEEEEEE.EERR....RRRR.. | ||
| //....WWWW...WWWW..WAAA.....AAAA..YYYY.....YYFF.......FFII.IINN...NNNNN.NNDDDDDDDD...DDEEEEEEEEE.EERR....RRRR.. | ||
| //............................................................................................................. | ||
| //..................................................................................... | ||
| //......AAA.......PPPPP.......PPPPP............WW....WWW....WW.....AAA....AA......YYY.. | ||
| //.....AAAAA.....PPPPPPPPPP..PPPPPPPPPP.......-WWW..WWWWW..WWWW...AAAAA..AAAYY...YYYY.. | ||
| //.....AAAAA.....PPPPPPPPPP..PPPPPPPPPP.......-WWW..WWWWW..WWWW...AAAAA..AAAYY...YYYY.. | ||
| //....AAAAAAA....PPPPPPPPPPP.PPPPPPPPPPP......-WWW..WWWWW..WWWW..AAAAAAA..AAYYY.YYYYY.. | ||
| //....AAAAAAA....PPPP...PPPP.PPPP...PPPP.......WWWW.WWWWW.WWWW...AAAAAAA...AYYY.YYYY... | ||
| //....AAAAAAA....PPPP...PPPP.PPPP...PPPP.......WWWWWWWWWWWWWWW...AAAAAAA...AYYYYYYYY... | ||
| //...AAAAAAAAA...PPPPPPPPPPP.PPPPPPPPPPP.......WWWWWWWWWWWWWWW..AAAAAAAAA...YYYYYYY.... | ||
| //...AAAA.AAAA...PPPPPPPPPPP.PPPPPPPPPPPP-----.WWWWWWWWWWWWWWW..AAAA.AAAA...YYYYYY..... | ||
| //...AAAAAAAAAA..PPPPPPPPPP..PPPPPPPPPP.P-----..WWWWWW.WWWWWW...AAAAAAAAAA...YYYYY..... | ||
| //..AAAAAAAAAAA..PPPPPPPPP...PPPPPPPPP..P-----..WWWWWW.WWWWWW..AAAAAAAAAAA...YYYY...... | ||
| //..AAAAAAAAAAA..PPPP........PPPP.......P-----..WWWWWW.WWWWWW..AAAAAAAAAAA...YYYY...... | ||
| //..AAAAAAAAAAAA.PPPP........PPPP................WWWWW.WWWWW...AAAAAAAAAAAA..YYYY...... | ||
| //.AAAAA....AAAA.PPPP........PPPP................WWWW...WWWW..WAAAA....AAAA..YYYY...... | ||
| //.AAAA.....AAAA.PPPP........PPPP................WWWW...WWWW..WAAA.....AAAA..YYYY...... | ||
| //..................................................................................... | ||
| NHS App and Wayfinder | ||
| --> | ||
|
|
||
| <div class="nhsuk-card nhsuk-card" id="NHSDS"> | ||
| <div class="nhsuk-card__content"> | ||
| <div class="nhsuk-grid-row"> | ||
| <div class="nhsuk-grid-column-two-thirds"> | ||
| <h2 id="wayfinder"> | ||
| Services that use Wayfinder | ||
| <h2 id="nhsapp"> | ||
| Services that use NHS App | ||
| </h2> | ||
| <p class="nhsuk-card__description">Use this version of the no-consent error screen content guidance if your website or app uses Wayfinder.</p> | ||
| <a href="/nhslogin/images/Guidance-example-wayfinder.png" target="_blank" rel="noopener noreferrer"> | ||
| <p class="nhsuk-card__description">Use this version of the no-consent error screen content guidance if your website or app uses NHS App or Wayfinder in either the browser or the mobile application.</p> | ||
| <a href="/nhslogin/images/Guidance-example-no-consent-nhs-app.png" target="_blank" rel="noopener noreferrer"> | ||
| Open this example in new window | ||
| </a> | ||
| <hr> | ||
| </div> | ||
| <div class="nhsuk-grid-column-one-third"> | ||
| <img class="nhsuk-image__img" src="/nhslogin/images/Guidance-example-wayfinder.png" alt="Example of NHS login button alongside other log in or register options"> | ||
| <img class="nhsuk-image__img" src="/nhslogin/images/Guidance-example-no-consent-nhs-app.png" alt="Examples of the mobile app and browser 'no-consent error screen' content for services that use NHS App"> | ||
| </div> | ||
| </div> | ||
| <details class="nhsuk-details nhsuk-expander--no-outline"> | ||
| <summary class="nhsuk-details__summary"> | ||
| <span class="nhsuk-details__summary-text"> | ||
| View the no-consent error screen content guidance for services that use Wayfinder | ||
| View the no-consent error screen content guidance for services that use NHS App | ||
| </span> | ||
| </summary> | ||
| <div class="nhsuk-details__text nhsuk-grid-row"> | ||
| <div class="nhsuk-grid-column-full width"> | ||
| <ul class="nhsuk-inside-box-text" style="max-width:none;"> | ||
| <li>This version of the no-consent error screen refers to your service as 'The service provider'. | ||
| This should remain unchanged. Do not use the name of your service as it may not make sense to the user in their journey.</li> | ||
| <li>To align with other services that use Wayfinder, only use the content provided and do not change it.</li> | ||
| <li>To align with other services that use NHS App, only use the content provided and do not change it.</li> | ||
| <li>To minimise clinical risk, make sure all anchor tags to emergency services are operational and implemented as suggested.</li> | ||
| <li>You can use your service font, headers, footers and styling on this page, but it must follow our styling suggestions.</li> | ||
| <li>You can use your service font, headers, footers and styling on this screen, but it must follow our styling guidelines.</li> | ||
| </ul> | ||
| <hr> | ||
| <h3>How to display content for the no-consent error screen</h3> | ||
| <p>Here is an example of the Wayfinder no-consent error page. You can copy the content and code by selecting the HTML tab below this diagram.</p> | ||
| <p>Here are two examples of the NHS App no-consent error screen. You can copy the content and code by selecting the HTML tab below each diagram.</p> | ||
| <p>You will need to apply your own CSS to the code. You should not add any other content to this screen.</p> | ||
| <p>The version of copy your service will use depends on whether your service:</p> | ||
| <ul> | ||
| <li><a href="nhslogin/no-consent-guidance/#browser">uses NHS App in the browser</a></li> | ||
| <li><a href="nhslogin/no-consent-guidance/#mobile">uses NHS App in the mobile application</a></li> | ||
| </ul> | ||
| <h4 id="browser">Services that use NHS App in the broswer</h4> | ||
| <div class="design-example"> | ||
| <a href="/nhslogin/example-no-consent-content-nhs-app-browser" class="design-example__pop-out" target="_blank" rel="noopener noreferrer"> | ||
| Open this example in new window | ||
| </a> | ||
| <div class="code-embed"> | ||
| <iframe title="default" src="/nhslogin/example-no-consent-content-nhs-app-browser" class="design-example-frame" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 156px;"></iframe> | ||
| </div> | ||
| <div class="code-snippet"> | ||
| <ul class="app-tabs" role="tablist"> | ||
| <li class="app-tabs__item app-tabs__item--current" role="presentation" data-index="ex-1"> | ||
| <a href="javascript:void(0);" role="tab" aria-controls="default-example" data-track="tab-html" aria-selected="true"> | ||
| HTML | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <div class="app-tabs__container js-tabs__container" id="default-example" role="tabpanel"> | ||
| <div class="app-tabs__item app-tabs__item--mobile" role="presentation" data-index="ex-1"> | ||
| <a href="" role="tab" aria-controls="default-example" data-track="tab-html" aria-selected="true"> | ||
| HTML | ||
| </a> | ||
| </div> | ||
| <div class="code-snippet__preformatted" data-index="ex-1"> | ||
| <div class="app-code-snippet__macro"></div> | ||
| <div class="app-code-snippet__container"> | ||
| <a class="app-link--copy" href="javascript:void(0);" aria-live="assertive">Copy code</a> | ||
| <pre><code class=""><span class="hljs-tag"><h1></span>You cannot continue without sharing your information <span class="hljs-tag"></h1></span> | ||
| <span class="hljs-tag"><p></span>The service provider needs your NHS login information to verify your identity.<span class="hljs-tag"></p></span> | ||
| <span class="hljs-tag"><p></span>If you need medical help, go to <span class="hljs-tag"><a <span class="hljs-attr">href</span>=<span class="hljs-string">"https://111.nhs.uk/"</span>></span>111.nhs.uk<span class="hljs-tag"></a></span> or call<span class="hljs-tag"><a <span class="hljs-attr">href</span>=<span class="hljs-string">"tel:111</span><span class="hljs-string">"</span>></span>111<span class="hljs-tag"></a></span> or your GP.<span class="hljs-tag"></p></span> | ||
| <span class="hljs-tag"><p></span>Call <span class="hljs-tag"><a <span class="hljs-attr">href</span>=<span class="hljs-string">"tel:999</span><span class="hljs-string">"</span>></span>999<span class="hljs-tag"></a></span> if it's a life-threatening emergency.<span class="hljs-tag"></p></span> | ||
| <span class="hljs-tag"><p></span>Close this tab to go back to NHS App.<span class="hljs-tag"></p></span> | ||
| </code></pre> | ||
| </div> | ||
| <a class="app-link--close" href="javascript:void(0);" aria-live="assertive"> | ||
| Close | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <strong>Behaviour of the back button in the browser</strong> | ||
| <p>When a user selects the back button in the browser, the preferred action for your service's no-consent error screen is to reload. </p> | ||
| <p>Current guidance instructs the user to close your service's no-consent error screen tab to return to the NHS App in the browser. | ||
| </p> | ||
| <p>Do not add your own back button to this page.</p> | ||
|
|
||
| <h4 id="mobile">Services that use NHS App in the mobile application</h4> | ||
|
|
||
| <div class="design-example"> | ||
| <a href="/nhslogin/example-no-consent-content-wayfinder" class="design-example__pop-out" target="_blank" rel="noopener noreferrer"> | ||
| Open this example in new window | ||
| </a> | ||
| <div class="code-embed"> | ||
| <iframe title="default" src="/nhslogin/example-no-consent-content-wayfinder" class="design-example-frame" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 156px;"></iframe> | ||
| <iframe title="default" src="/nhslogin/example-no-consent-content-wayfinder" class="design-example-frame" id="iFrameResizer3" scrolling="no" style="overflow: hidden; height: 156px;"></iframe> | ||
| </div> | ||
| <div class="code-snippet"> | ||
| <ul class="app-tabs" role="tablist"> | ||
|
|
@@ -148,26 +203,20 @@ This should remain unchanged. Do not use the name of your service as it may not | |
| </div> | ||
| </div> | ||
|
|
||
| <strong>Styling suggestions</strong> | ||
| <strong>Behaviour of the back navigation in the NHS App (mobile application only)</strong> | ||
| <p>A user can return to previous point in their journey in the NHS App by using the native back link. </p> | ||
| <!-- <p>At present, the point in the NHS App journey to which the user is taken is the appointment screen, regardless of where the user entered the journey from.</p> --> | ||
|
|
||
| <strong>Styling guidelines</strong> | ||
| <ul> | ||
| <li style="max-width:none;">heading font size should be no smaller than 20px.</li> | ||
| <li style="max-width:none;">body copy should be no smaller than 16px.</li> | ||
| <li style="max-width:none;">hyperlink emergency contact numbers as advised.</li> | ||
| </ul> | ||
|
|
||
| <strong>The functionality of the back navigation in the NHS App</strong> | ||
| <p>Depending on where they came from, a user can return to a previous point in their journey in the NHS App by using the native back link. </p> | ||
| <p>The two places from which the user may have entered into the journey are the: | ||
| </p> | ||
| <ul> | ||
| <li style="max-width:none;">message hub</li> | ||
| <li style="max-width:none;">appointment aggregator screen </li> | ||
| </ul> | ||
| <p>Rather than returning to the consent screen, a user will return to a point this early in the journey, because their ID token or authorisation code were not passed to your service in the no-consent flow.</p> | ||
|
|
||
| <div class="nhsuk-inset-text"> | ||
| <span class="nhsuk-u-visually-hidden">Contact information: </span> | ||
| <p>For any queries about how the back navigation in the NHS App will work with your service, email <a href="mailto:[email protected]">[email protected]</a>.</p> | ||
| <p>For any queries about how NHS App will work with your service, email <a href="mailto:[email protected]">[email protected]</a>.</p> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
@@ -272,7 +321,7 @@ This should remain unchanged. Do not use the name of your service as it may not | |
| <hr> | ||
| </div> | ||
| <div class="nhsuk-grid-column-one-third"> | ||
| <img class="nhsuk-image__img" src="/nhslogin/images/Guidance-example-other.png" alt="Example of NHS login button alongside other log in or register options"> | ||
| <img class="nhsuk-image__img" src="/nhslogin/images/Guidance-example-other.png" alt=" Example of the no-consent error screen content for all other services"> | ||
| </div> | ||
| </div> | ||
| <details class="nhsuk-details nhsuk-expander--no-outline"> | ||
|
|
@@ -287,11 +336,11 @@ This should remain unchanged. Do not use the name of your service as it may not | |
| <li>In this version we recommend that you insert the name of your service in the [Service name] placeholder.</li> | ||
| <li>The "dynamic content" placeholder text indicates variable text where you may insert your own copy.</li> | ||
| <li>To minimise clinical risk, make sure all anchor tags to emergency services are operational and implemented as suggested.</li> | ||
| <li>You can use your service font, headers, footers and styling on this page, but it must follow our styling suggestions.</li> | ||
| <li>You can use your service font, headers, footers and styling on this screen, but it must follow our styling guidelines.</li> | ||
| </ul> | ||
| <hr> | ||
| <h3>How to display content for the no-consent error screen</h3> | ||
| <p>Here is an example of the no-consent error page. You can copy the content and code by selecting the HTML tab below this diagram.</p> | ||
| <p>Here is an example of the no-consent error screen. You can copy the content and code by selecting the HTML tab below this diagram.</p> | ||
| <p>You will need to apply your own CSS to the code.</p> | ||
| <div class="design-example"> | ||
| <a href="/nhslogin/example-no-consent-content-other" class="design-example__pop-out" target="_blank" rel="noopener noreferrer"> | ||
|
|
@@ -333,19 +382,19 @@ This should remain unchanged. Do not use the name of your service as it may not | |
| </div> | ||
| </div> | ||
|
|
||
| <strong>Styling suggestions</strong> | ||
| <strong>Styling guidelines</strong> | ||
| <ul> | ||
| <li style="max-width:none;">heading font size should be no smaller than 20px.</li> | ||
| <li style="max-width:none;">body copy should be no smaller than 16px.</li> | ||
| <li style="max-width:none;">hyperlink emergency contact numbers as advised.</li> | ||
| </ul> | ||
|
|
||
| <strong>Dynamic content suggestions</strong> | ||
| <p>Only add your own content when you have information that might be of value to the user to either navigate away from the no-consent error page, or to correct any errors. For example, a contact email or number.</p> | ||
| <p>Only add your own content when you have information that might be of value to the user to either navigate away from the no-consent error screen, or to correct any errors. For example, a contact email or number.</p> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p>Contact us if you are unsure which version of the no-consent content guidance is right for your service.</p> | ||
| <p>Contact us if you are unsure which version of the no-consent error screen content guidance is right for your service.</p> | ||