From 398d5dea6af9ad81c8486628108f2bcae1a6fdb8 Mon Sep 17 00:00:00 2001 From: StephanieLongden Date: Mon, 16 Oct 2023 11:50:05 +0100 Subject: [PATCH] content updates --- .../patterns/stop-a-service-timing-out.tsx | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/apps/docs/src/common/pages/patterns/stop-a-service-timing-out.tsx b/apps/docs/src/common/pages/patterns/stop-a-service-timing-out.tsx index 5801e740..bb3291dd 100644 --- a/apps/docs/src/common/pages/patterns/stop-a-service-timing-out.tsx +++ b/apps/docs/src/common/pages/patterns/stop-a-service-timing-out.tsx @@ -36,7 +36,7 @@ const Page: FC = ({ location }) => (

When to use this pattern

Use if your service automatically ends the user’s session after a period of inactivity.

- +

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

When not to use this pattern

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

@@ -50,27 +50,23 @@ const Page: FC = ({ location }) => ( -

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.

-

Consider whether you should inform your users that they will be timed out of the service after a period of inactivity.

-

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.

+

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.

+

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.

+

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

+ +

The timeout warning modal should:

    -
  • include a heading level 2, 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’
    • +
  • have a heading level 2
  • tell the user whether their information or progress will be saved
    • -
  • allow the user to close the modal using ‘Esc’ on the keyboard
    • -
  • follow accessibility best practice
    • - +
  • 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

If the user chooses to continue

-

When a user selects stay signed in:

+

When a user selects to stay signed in:

  • 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
    • @@ -86,9 +82,16 @@ const Page: FC = ({ location }) => (
  • 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

+

When a user decides to sign out:

+
    +
  • take the user to a confirmation page
    • +
  • give them the option to sign back in
    • +

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

-

Remove the modal and extend the session if the user navigates using the browser back button.

+

If the user chooses to sign out

The warning countdown

@@ -119,7 +122,7 @@ const Page: FC = ({ location }) => ( -

When the modal dialog opens:

+

When the modal dialog opens:

  • prevent the user from scrolling and interacting with the underlying page
  • add an overlay to the underlying page content to show users that they cannot interact with it
    • @@ -127,7 +130,7 @@ const Page: FC = ({ location }) => (
-

For a screen reader:

+

For a screen reader:

  • announce that a dialogue has opened
  • read the modal content, including the calls-to-action
    • @@ -141,9 +144,9 @@ const Page: FC = ({ location }) => (

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

    Research

    -

    This pattern is used by:

    +

    This pattern is used by an internal reporting service used by operational Border Force officers.

      -
    • an internal reporting service used by operational Border Force officers
      • +
    @@ -167,8 +170,8 @@ const Page: FC = ({ location }) => (
    • 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, introducing distractions meaning it was not immediately clear users had received a timeout
      • -
    • 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
      • +
    • 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
      • +
    • when the modal dialog was triggered on mobile devices, screen readers focused on the main call to action 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
    @@ -191,7 +194,7 @@ const Page: FC = ({ location }) => (
  • 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
    • +
  • user behaviour after timing out or signing out

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