From 6b3aff6c12764f9343df9a455211cad899c11180 Mon Sep 17 00:00:00 2001 From: StephanieLongden Date: Fri, 11 Aug 2023 16:53:40 +0100 Subject: [PATCH] Adding the timeout warning pattern --- apps/docs/src/common/pages/patterns.tsx | 5 + .../stop-a-service-timing-out-new.tsx | 216 ++++++++++++++++++ 2 files changed, 221 insertions(+) create mode 100644 apps/docs/src/common/pages/patterns/stop-a-service-timing-out-new.tsx diff --git a/apps/docs/src/common/pages/patterns.tsx b/apps/docs/src/common/pages/patterns.tsx index a9019312..08340a2a 100644 --- a/apps/docs/src/common/pages/patterns.tsx +++ b/apps/docs/src/common/pages/patterns.tsx @@ -60,6 +60,11 @@ export const menu = ( href: '/patterns/stop-a-service-timing-out', text: 'Stop a service timing out' } + , + { + href: '/patterns/stop-a-service-timing-out-new', + text: 'Stop a service timing out-new' + } ]} /> Send users = ({ location }) => ( +
+ + {subsection} {title.toLowerCase()} - Home Office Design System + + + + + + +
+ {menu} +
+ +
+

+ {subsection} + {title} +

+ +

Warn users that they are about to be timed out of a service and explain what happens after they are timed out.

+ +
+

You will be signed out soon

+ + +

To protect your information, you will be signed out in 5 minutes.

+ +
+ + Sign out +
+
+ +

When to use this pattern

+

If your service has sessions and automatically ends the user’s session after a period of inactivity.

+ + +

When not to use this pattern

+

Our research showed that modal dialogs (also known as pop-up windows) work well for timeout warnings.

+

However, avoid modal dialogs other than for timeouts, as they can be difficult to make accessible. Add the content to a new page instead.

+ + + +

How it works

+ + + + + +

The timeout warning is shown to the user when they have 5 minutes left to take action before the time runs out. This should be shown in a modal dialog.

+

The primary call to action would be to continue with the journey. You can offer a secondary action if it is suitable to your service, such as signing out.

+

If the user does not take action within the time limit, send them to a timeout page that explains what has happened and gives options for how to continue.

+

Investigate the most appropriate session length for your service, based on the needs of users and security requirements.

+

You may choose to add a ‘Warning’ prefix to the title of your page once the countdown has started, to alert users who are working on a different tab.

+ +

The timeout warning modal should:

+ +
    +
  • include a heading, for example ‘You will be signed out soon'
    • +
  • explain why the countdown has started, for example ‘You have not done anything on this page for 25 minutes’
    • +
  • tell users whether their information or progress will be saved
    • +
  • allow users to close the modal using ‘Esc’ on the keyboard
    • +
  • follow accessibility best practice
    • + +
+ +

If user chooses to continue where they were:

+ +
    +
  • close the warning and allow the user access to the page they were on
    • +
  • return the keyboard focus to where it was before the warning appeared
    • +
  • refresh the user’s session - you should not limit the number of times users can extend their session
    • + +
+ +

If user runs out of time:

+ +
    +
  • redirect the user to a timeout page
    • +
  • give them the option to sign back into the service
    • +
  • 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
    • + +
+ +

If the user chooses to sign out, take them to a confirmation page which gives them the option to sign back in.

+ +

The warning countdown

+ +

As an example, the timeout warning could be triggered by 25 minutes of inactivity and show a 5-minute countdown.

+

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.

+

Use Aria live = polite for the countdown message so it will be announced as it is updated. For a screen reader to announce content update, the content must be inserted into a live region element.

+ +

When the user is not signed into a service

+

If a user is not signed in, tell them their progress will not be saved if the time runs out.

+

If the user is timed out, consider the onwards journey.

+
+

Your page will time out soon

+ + +

To protect your information, this page will time out in 5 minutes.

+

If that happens, your progress will not be saved.

+ + +
+ +

Accessibility

+
    +
  • Give users an appropriate time to react to a timeout - use the accessibility timeouts and time limits guidance.
    • +
  • Ensure screen readers announce the remaining time - use aria-live =polite so the hidden countdown does not interrupt other content being read out.
    • + +
+ +

When the modal dialog opens:

+
    +
  • prevent the user from interacting with the underlying page
    • +
  • add an overlay to the underlying page content to show users that they cannot interact with it
    • +
  • consider keyboard accessibility of interactive elements, more guidance on keyboard accessibility
    • + +
+ + +

For a screen reader:

+
    +
  • announce that a dialogue has opened
    • +
  • read the modal content, including the calls-to-action
    • +
  • periodically announce how long user has left
    • +
  • prevent screen reading software from reading out the underlying page
    • + +
+ + +

We followed the W3C guidance on modals.

+

If your service uses this pattern, let us know of any insights you have on accessibility.

+ +

Research

+

This pattern is used by:

+
    +
  • an internal reporting service used by operational Border Force officers
    • + +
+ +

Research findings

+ +
    +
  • Users have high awareness of timeouts and timeout warnings as they are widely used. Users understand that timeouts are triggered by inactivity or a session time limit, and that the timeout is for security reasons.
    • +
  • Users know that they need to take action to extend their time and will usually quickly close the warning using the primary call to action without reading the content.
    • +
  • 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.
    • +
  • Even if timed out, users hoped any information they had input would be saved.
    • +
  • Users expected to be taken back to the page they had been timed out from when they signed back in.
    • +
+ + +

Accessibility research findings

+ +

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:

+ +
    +
  • on balance, users of assistive technology were alerted more quickly to the timeout on the modal dialog than the warning page
    • +
  • users were clear how to remain signed in and that they would be signed out if they took no action
    • +
  • on the warning page some screen readers read out the standard page elements before the timeout warning message, so it was not immediately clear users had received a timeout
    • +
  • the warning page introduced distractions from the message warning users they would be timed out
    • +
  • when the modal dialog was triggered on mobile devices, screen readers focused on the CTA button before reading the rest of the warning content - however, this was not a blocker for users
    • +
  • counting down by minutes, and then 20 second intervals in the final minute, worked best for both sighted and non-sighted users
    • +
  • having a secondary action (sign out) did not impact users’ understanding
    • +
+ +

We decided to trigger the timeout warning after two minutes to gauge their reaction, then explained later that this would not normally happen.

+ + +

Help us improve this pattern

+

This pattern needs improving. We need evidence about:

+
    +
  • how screen reader users experience modal dialogs on mobile devices
    • +
  • how users with lower digital literacy navigate this pattern
    • +
  • whether users expect to be able to close the modal any other way, for example clicking outside it or using the ‘Esc’ on the keyboard
    • +
+ +

We need evidence from web analytics about how users actually interact with the modal, including:

+
    +
  • how many times the timeout modal appears and where in the user journey
    • +
  • how quickly it is closed
    • +
  • methods of closing the modal (using ‘Esc’ on the keyboard, clicking away or primary CTA)
    • +
  • what actions users take when the timeout appears (continue, sign out or do nothing)
    • +
  • how often users are timed out
    • +
  • user behaviour after timing out or signing out – do they sign back in
    • +
+ +

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.

+ + + +
+ + +
+ +); + +export default Page;