Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Timeout warning pattern #547

Merged
merged 23 commits into from
Oct 23, 2023
Merged

Timeout warning pattern #547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
6b3aff6
Adding the timeout warning pattern
StephanieLongden Aug 11, 2023
3036af7
content changes
StephanieLongden Aug 18, 2023
a19f526
Content changes and new image of timeout
StephanieLongden Aug 18, 2023
ceff269
content and spacing changes
StephanieLongden Aug 18, 2023
42bb170
changing the side by name
StephanieLongden Aug 18, 2023
852178c
Correcting a content error
StephanieLongden Aug 18, 2023
b59b162
updating the description
StephanieLongden Aug 18, 2023
d55f5f3
3 content changes
StephanieLongden Sep 29, 2023
9ff1014
changing the content about the browser back button
StephanieLongden Sep 29, 2023
b6b2c8c
trying to update to get depoly workflow to run
StephanieLongden Sep 29, 2023
cf66dd3
Merge branch 'master' of https://github.com/UKHomeOffice/design-syste…
StephanieLongden Oct 2, 2023
ce66755
update
StephanieLongden Oct 2, 2023
4312e80
deleting pnpm lock file
StephanieLongden Oct 2, 2023
368dd01
Content updates to timeout pattern guidance
StephanieLongden Oct 6, 2023
398d5de
content updates
StephanieLongden Oct 16, 2023
78f9d59
deleting old guidance and content tweaks
StephanieLongden Oct 16, 2023
d8f7dc6
Content updates to timeouts
StephanieLongden Oct 20, 2023
1b26b88
content tweaks
StephanieLongden Oct 20, 2023
c86770c
index page update
StephanieLongden Oct 20, 2023
122329a
extra word removal
StephanieLongden Oct 20, 2023
fee9e5b
Added indent, lowercase page name and update date
tomyems Oct 23, 2023
74c3248
Reset pnpm-lock.yaml
tomyems Oct 23, 2023
76d81a6
Update whitespace and tidy
tomyems Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added apps/docs/assets/images/patterns/time-out.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions apps/docs/src/common/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ const Page: FC<PageProps> = props => (
<div className="govuk-grid-column-one-third">
<aside>
<h2>Updates</h2>
<p className="govuk-body govuk-!-font-size-16" style={{ color: '#626a6e' }}>Last updated 23 Aug 2023</p>
<p className="govuk-body govuk-!-font-size-16" style={{ color: '#626a6e' }}>Last updated 23 October 2023</p>
<ul className="govuk-!-font-size-16">
<li>Added ask users for their <A href="/patterns/ask-sex-or-gender">sex and gender</A></li>
<li>Help users to <A href="/patterns/stop-a-service-timing-out">stop a service timing out</A></li>
</ul>
</aside>
<aside>
Expand Down
209 changes: 145 additions & 64 deletions apps/docs/src/common/pages/patterns/stop-a-service-timing-out.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,170 @@
import { FC, createElement as h } from 'react';
import { Helmet } from 'react-helmet-async';
import { PageProps } from '@not-govuk/app-composer';
import { A } from '@not-govuk/components';
import { A, DateInput, Details, TextInput, Select } from '@not-govuk/components';
import { menu } from '../patterns';

export const title = 'Stop a service timing out';
const description = 'How to help users to stop a service from timing out';
const section = 'Patterns';
const subsection = 'Help users to';

const applyModalWindow = require('../../../../assets/images/patterns/timeout.svg');
const applyModalWindow = require('../../../../assets/images/patterns/time-out.png');

const Page: FC<PageProps> = ({ location }) => (
<div className="govuk-grid-row">
<Helmet>
<title>{title} - Home Office Design System</title>
<title>{subsection} {title.toLowerCase()} - Home Office Design System</title>
<meta name="description" content={description} />
<meta name="og:title" content={title} />
<meta name="og:description" content={description} />
<meta name="og:article:section" content={section} />
</Helmet>

<div className="govuk-grid-column-one-quarter">
{menu}
<div className="govuk-grid-column-one-quarter">
{menu}
</div>

<div className="govuk-grid-column-three-quarters">
<h1>
<span className="caption">{subsection}</span>
{title}
</h1>

<p className="govuk-body">Warn users that they are about to be timed out of a service and explain what happens after they are timed out.</p>
<img src={applyModalWindow} className="image-examples" alt="An example of a modal dialog which warns users the service will time out." />

<h2 className="govuk-heading-l">When to use this pattern</h2>
<p className="govuk-body">Use this pattern if your service automatically ends the user’s session after a period of inactivity.</p>
<p className="govuk-body">Investigate the most appropriate session length for your service, based on the needs of users and security requirements.</p>

<h2 className="govuk-heading-l">When not to use this pattern</h2>
<p className="govuk-body">Our research showed that modal dialogs (also known as pop-up windows) work well for timeout warnings.</p>
<p className="govuk-body">However, avoid modal dialogs other than for timeouts, as they can be difficult to make accessible. Add the content to a new page instead.</p>

<h2 className="govuk-heading-l">How it works</h2>
<p className="govuk-body">Show the timeout warning to users when they have at least 2 minutes to take action before their session time runs out. This should be shown in a modal dialog.</p>
<p className="govuk-body">The primary action button allows the user to continue with the journey. You can offer a secondary action if it is suitable for your service, such as signing out.</p>
<p className="govuk-body">If the user does not take action within the time limit, redirect them to a page which explains that a timeout has happened and gives options for how to continue.</p>

<p className="govuk-body">The timeout warning modal should:</p>
<ul className="govuk-list govuk-list--bullet">
<li>have a heading level 2</li>
<li>tell the user whether their information or progress will be saved</li>
<li>allow the user to close the modal and reset the session time by selecting the primary action button, using ‘Esc’ on the keyboard or using the browser back button</li>
</ul>

<h3 className="govuk-heading-m">If the user chooses to continue</h3>
<p className="govuk-body">When a user selects to stay signed in:</p>
<ul className="govuk-list govuk-list--bullet">
<li>close the warning and allow the user access to the page they were on</li>
<li>return the keyboard focus to where it was before the warning appeared</li>
<li>refresh the user’s session - you should not limit the number of times users can extend their session</li>
</ul>

<h3 className="govuk-heading-m">If the user runs out of time</h3>
<p className="govuk-body">When a user is timed out:</p>
<ul className="govuk-list govuk-list--bullet">
<li>redirect the user to a timeout page</li>
<li>give them the option to sign back into the service</li>
<li>if they choose to sign back in and it makes sense to do so, take them back to the home page or journey they were on</li>
</ul>

<h3 className="govuk-heading-m">If the user chooses to sign out</h3>
<p className="govuk-body">When a user decides to sign out:</p>
<ul className="govuk-list govuk-list--bullet">
<li>take the user to a confirmation page</li>
<li>give them the option to sign back in</li>
</ul>

<h3 className="govuk-heading-m">The warning countdown</h3>
<p className="govuk-body">As an example, the timeout warning could be triggered by 25 minutes of inactivity and show a 5-minute countdown.</p>
<p className="govuk-body">The time should count down in minutes until the last minute, when it should change to 20-second intervals, both on the modal and for screen reader alerts.</p>
<p className="govuk-body">Use <code>aria-live="polite"</code> for the countdown message so it will be announced as the timer is updated. For a screen reader to announce content updates, the content must be inserted into a live region element.</p>

<h3 className="govuk-heading-m">When the user is not signed into a service</h3>
<p className="govuk-body">If a user is not signed in, tell them their progress will not be saved if the time runs out.</p>
<p className="govuk-body">If the user is timed out, consider the onwards journey.</p>

<div className="app-example">
<h2 className="govuk-heading-l">Your page will time out soon</h2>

<p className="govuk-body">To protect your information, this page will time out in <strong>5 minutes.</strong></p>
<p className="govuk-body">If that happens, your progress will not be saved.</p>

<button className="govuk-button" data-module="govuk-button">
Stay on this page
</button>
</div>

<div className="govuk-grid-column-three-quarters">
<h1>
<span className="caption">{subsection}</span>
{title}
</h1>
<div style={{marginTop: "-2em"}}>
<p className="govuk-caption-m" style={{marginBottom: "2em"}}>Also known as: modal window</p>
</div>

<p className="govuk-body">Creating focus on a single interaction.</p>

<div className="example example-images confirmation" style={{marginBottom: "2em"}}>
<img src={applyModalWindow} className="image-examples" alt="An example of a modal window warning the service will time out" />
</div>

<h2 className="govuk-heading-l">When to use this pattern</h2>
<p>Modals should be avoided in most cases. They are hard to make accessible and do not
work well in mobile views.</p>
<p>Adding content to a new page instead of showing it in a modal should be the default
approach.</p>
<p>Modals can be useful when you need to draw a user's attention to something, for example
timeout warnings. Please discuss with the wider community or email <A href="mailto:[email protected]">[email protected]</A> before
using this pattern.</p>

<h2 className="govuk-heading-l">How it works</h2>
<p>If the modal is user-triggered, the content that opens the modal window (for example,
a link or button) should explain to the user what will happen.</p>
<p>A modal should:</p>
<ul className="govuk-list govuk-list--bullet">
<li>focus on a single task</li>
<li>include a heading</li>
<li>be accessible</li>
</ul>

<h2 className="govuk-heading-l">Accessibility</h2>
<p>When a time limit, like a session timeout, is set ensure a user is informed, especially if this may result in a loss of data. See the <A href="/accessibility/timeouts">timeouts guidance</A> for more information.</p>
<p>If your service uses this pattern, let us know of any insights you have on accessibility considerations.</p>

<h2 className="govuk-heading-l">Research</h2>
<p className="govuk-body">This pattern is used by:</p>
<ul className="govuk-list govuk-list--bullet">
<li>Employer checking service</li>
<li>Passport renewals</li>
</ul>
<p className="govuk-body">More research is needed. If your service uses this pattern,
get in touch to share your user research findings.</p>

<h2 className="govuk-heading-l">Help us improve this pattern</h2>
<p>This pattern needs improving. We need evidence about:</p>
<ul>
<li>how to write for this pattern</li>
</ul>

<p className="govuk-body">To contribute, add your thoughts and research findings to our <A href="https://github.com/UKHomeOffice/design-system/discussions/383">GitHub discussion</A>, or follow our <A href="/contribute">contribute guidance</A>.</p>

</div>
<h2 className="govuk-heading-l">Accessibility</h2>
<p className="govuk-body">Give users an appropriate time to react to a timeout - use the <A href="https://design.homeoffice.gov.uk/accessibility/timeouts">accessibility timeouts and time limits guidance</A>.</p>
<p className="govuk-body">Ensure screen readers announce the remaining time - use <code>aria-live="polite"</code> so the hidden countdown does not interrupt other content being read out.</p>

<p className="govuk-body">When the modal dialog opens:</p>
<ul className="govuk-list govuk-list--bullet">
<li>prevent the user from scrolling and interacting with the underlying page</li>
<li>add an overlay to the underlying page content to show users that they cannot interact with it</li>
<li>consider the keyboard accessibility of interactive elements, <A href="https://design.homeoffice.gov.uk/accessibility/forms/keyboard">more guidance on keyboard accessibility</A></li>

</ul>

<p className="govuk-body">For a screen reader:</p>
<ul className="govuk-list govuk-list--bullet">
<li>announce that a dialog has opened</li>
<li>read the modal content, including action buttons</li>
<li>periodically announce how long user has left</li>
<li>prevent screen reading software from reading out the underlying page</li>
</ul>

<p className="govuk-body">We followed the <A href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/">W3C guidance on modals</A>.</p>
<p className="govuk-body">If your service uses this pattern, let us know of any insights you have on accessibility.</p>

<h2 className="govuk-heading-l">Research</h2>
<p className="govuk-body">This pattern is used by an internal reporting service for operational Border Force officers.</p>

<h3 className="govuk-heading-m">Research findings</h3>
<p className="govuk-body">We found that:</p>
<ul className="govuk-list govuk-list--bullet">
<li>users have high awareness of timeouts and timeout warnings as they are widely used</li>
<li>users understand that timeouts are triggered by inactivity or a session time limit, and that the timeout is for security reasons</li>
<li>users know that they need to take action to extend their time and will usually quickly close the warning using the primary action button without reading the content</li>
<li>warning users in advance that the service will time them out after a period of inactivity caused confusion and anxiety – generally they misunderstood it as having a time limit to complete the task</li>
<li>even if timed out, users hoped any information they had input would be saved</li>
<li>users expected to be taken back to the page they had been timed out from when they signed back in</li>
</ul>

<h3 className="govuk-heading-m">Accessibility research findings</h3>
<p className="govuk-body">We conducted A/B research on a modal dialog and a warning page with 8 participants using assistive technology. The users were visually impaired or had dyslexia. We found that:</p>
<ul className="govuk-list govuk-list--bullet">
<li>on balance, users of assistive technology were alerted more quickly to the timeout on the modal dialog than the warning page</li>
<li>users were clear how to remain signed in and that they would be signed out if they took no action</li>
<li>on the warning page some screen readers read out the standard page elements before the timeout warning message, meaning it was not immediately clear users had received a timeout</li>
<li>when the modal dialog was triggered on mobile devices, screen readers focused on the primary action button before reading the rest of the warning content - however, this was not a blocker for users</li>
<li>counting down by minutes, and then 20 second intervals in the final minute, worked best for both sighted and non-sighted users</li>
<li>having a secondary action (sign out) did not impact users’ understanding</li>
</ul>

<h2 className="govuk-heading-l">Help us improve this pattern</h2>
<p className="govuk-body">This pattern needs improving. We need evidence about:</p>
<ul className="govuk-list govuk-list--bullet">
<li>how screen reader users experience modal dialogs on mobile devices</li>
<li>how users with lower digital literacy navigate this pattern</li>
<li>whether users expect to be able to close the modal any other way, for example clicking outside it</li>
</ul>

<p className="govuk-body">We need evidence from web analytics about how users interact with the modal, including:</p>
<ul className="govuk-list govuk-list--bullet">
<li>how often the timeout modal dialog appears and at which point in the user journey</li>
<li>how quickly it is closed</li>
<li>methods of closing the modal (using ‘Esc’ on the keyboard or primary action button)</li>
<li>what actions users take when the timeout appears (continue, sign out or do nothing)</li>
<li>how often users are timed out</li>
<li>user behaviour after timing out or signing out</li>
</ul>

<p className="govuk-body">To contribute, add your thoughts and research findings to our <A href="https://github.com/UKHomeOffice/design-system/discussions/544">GitHub discussion</A>, or follow our <A href="/contribute">contribute guidance</A>.</p>
</div>
</div>


);

export default Page;
Loading