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 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