Service timeout

experimental

This is currently experimental because more research is needed.

This pattern warns the user before we time them out of a service and tells them what has happened when we do time them out.

When to use

We time the user out when they do not do anything for 15 minutes. Warn them after 13 minutes, which gives them 2 minutes to decide to keep using the service.

How it works

You need HMRC Frontend to use this pattern – find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro into your code.

Use an accessible dialog box that appears on top of the page. This stops them using the screen with a mouse or keyboard until they select an option or press the escape key.

The user can:

  • select a button to stay in the service and not time out
  • select a link to sign out or have their answers deleted
  • press the escape key to close the warning, stay in the service and not time out
  • do nothing

When the user is signed in

The warning should:

  • say ‘For your security, we will sign you out in 2 minutes.’
  • say what will happen to their answers, if needed
  • have a ‘Stay signed in’ button
  • have a ‘Sign out’ link that signs them out as normal
              <meta name="hmrc-timeout-dialog" content="hmrc-timeout-dialog" data-language="en" data-timeout="70" data-countdown="68" data-keep-alive-url="?continue=true" data-sign-out-url="?lang=English" data-timeout-url="" data-title="" data-message="" data-message-suffix="" data-keep-alive-button-text="" data-sign-out-button-text="" />
            
                {%- from  "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}

{{ hmrcTimeoutDialog ({
  timeout: 70,
  countdown: 68,
  keepAliveUrl: "?continue=true",
  signOutUrl: "?lang=English",
  language: "en"
}) }}
              

If they do nothing, take them to a ‘We signed you out’ page that uses similar content as the warning box.

              <div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      For your security, we signed you out
    </h1>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Sign in
      </button>
    </div>

  </div>
</div>
            
                {%- from  "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}

<div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      For your security, we signed you out
    </h1>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Sign in
      </button>
    </div>

  </div>
</div>
              
              <div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      For your security, we signed you out
    </h1>

    <p class="govuk-body">
      We saved your answers.
    </p>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Sign in
      </button>
    </div>

  </div>
</div>
            
                <div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      For your security, we signed you out
    </h1>

    <p class="govuk-body">
       We saved your answers.
    </p>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Sign in
      </button>
    </div>

  </div>
</div>
              
              <div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      For your security, we signed you out
    </h1>

    <p class="govuk-body">
      We did not save your answers.
    </p>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Sign in
      </button>
    </div>

  </div>
</div>
            
                {%- from  "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}

<div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      For your security, we signed you out
    </h1>

    <p class="govuk-body">
      We did not save your answers.
    </p>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Sign in
      </button>
    </div>

  </div>
</div>
              

When the user is not signed in

The warning should:

  • say ‘For your security, we will delete your answers in 2 minutes.’
  • have a button to stay in the service
  • have a ‘Delete your answers’ link that takes them to the ‘You deleted your answers’ page
              <meta name="hmrc-timeout-dialog" content="hmrc-timeout-dialog" data-language="en" data-timeout="70" data-countdown="68" data-keep-alive-url="?continue=true" data-sign-out-url="?lang=English" data-timeout-url="" data-title="" data-message="" data-message-suffix="" data-keep-alive-button-text="Continue checking what help you can get with childcare costs" data-sign-out-button-text="Delete your answers" />
            
                {%- from  "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}

{{ hmrcTimeoutDialog ({
  timeout: 70,
  countdown: 68,
  keepAliveUrl: "?continue=true",
  signOutUrl: "?lang=English",
  keepAliveButtonText: "Continue checking what help you can get with childcare costs",
  signOutButtonText: "Delete your answers",
  language: "en"
}) }}
              
              <div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      You deleted your answers
    </h1>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Start again
      </button>
    </div>

  </div>
</div>
            
                <div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
       You deleted your answers
    </h1>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Start again
      </button>
    </div>

  </div>
</div>
              

If they do nothing, delete their answers and take them to the ‘For your security, we deleted your answers’ page.

              <div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      For your security, we deleted your answers
    </h1>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Start again
      </button>
    </div>

  </div>
</div>
            
                <div class="govuk-grid">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
       For your security, we deleted your answers
    </h1>

    <div class="govuk-form-group">
      <button id="timeout-keep-signin-btn" class="govuk-button govuk-!-margin-bottom-0">
        Start again
      </button>
    </div>

  </div>
</div>
              

Technical details

Add the hmrc-timeout-dialog meta tag and initialise the timeout dialog Javascript

<meta
  name="hmrc-timeout-dialog"
  data-timeout=""
  data-countdown=""
  data-keep-alive-url=""
  data-sign-out-url=""
  data-title=""
  data-message=""
  dat-message-suffix=""
  data-keep-alive-button-text=""
  data-sign-out-button-text=""
/>
timeoutDialog = HMRC.TimeoutDialog.init()
  • data-timeout is the number of seconds before the user times out and 900 is the platform default
  • data-countdown is the number of seconds before the service displays the warning
  • data-keep-alive-url is a call to the server that keeps them in the service without refreshing the page
  • data-sign-out-url is the same URL as your service’s sign out page
  • data-title is the text to use as a title for the dialog
  • data-message is the message displayed to the user
  • data-message-suffix is any additional text to be displayed after the timer
  • data-keep-alive-button-text is the text on the button that keeps the user signed in
  • data-sign-out-button-text is the text for the link which takes the user to a sign out page
  • timeout is the number of seconds before the user times out and 900 is the platform default
  • countdown is the number of seconds before the service displays the warning
  • keep_alive_url is a call to the server that keeps them in the service without refreshing the page
  • logout_url is the same URL as your service’s sign out page

When the warning loads:

  • set focus to the box
  • read the paragraph of content
  • set focus to the button
  • read the button label

This lets the user hear what they need to and stay in the service with a single click.

Research

The warning was tested with 5 users for a service they signed in to. One person had dyslexia and the other was 70 years old. All 5 users understood the warning and managed to stay signed in.

We want to do more usability testing, especially with users who use assistive technology and with services you do not sign in to.

We want to know if users:

  • understand what has happened
  • understand the content and if there is anything missing
  • can do what they need to do – stay signed in, continue with the service, sign out, start again, or get timed out

The warning has been tested with all recommended browsers. It has been lab tested with most assistive technology including:

  • JAWS
  • ZoomText
  • NVDA
  • VoiceOver on MacOS and iOS

It has not been tested with Dragon NaturallySpeaking.

We need more research. If you have used service timeout, get in touch to share your research findings.

Discuss service timeout on GitHub