Timeout warnings on Home Office services #383
Replies: 6 comments
-
|
My initial impressions:
Then again perhaps we just show an error on the next page load and invite them to log-in? This seems more important when you are only allowing a short log-in session. (But should you do that in the first place?) For context, it might be good to know what the time-out is on the services in question. Disclaimer: I'm a dev, not a designer! |
Beta Was this translation helpful? Give feedback.
-
|
Seems that the page structure currently deviates significantly from the way existing patterns are implemented. Would it be worth aligning it more closely to the existing pattern pages? In addition, this will need an accessibility section detailing some of the considerations. We could use the acceptance criteria from https://gist.github.com/hannalaakso/2641fc16d2158e60d551cd9da960b5da#acceptance-criteria which covers the main accessibility considerations. I haven't had a chance to try out the proposed modal, but it sounds to me that it is reliant on JavaScript. What considerations have been made in regards to progressive enhancement? How will users who have JavaScript disabled be able to extend their session, and if this is not possible without adding undue complexity, what is the workaround. A potential solution is discussed in alphagov/govuk-design-system-backlog#104 (comment) which could be included. |
Beta Was this translation helpful? Give feedback.
-
|
I've had a look at the accessibility of the jQuery accessible modal at https://a11y.nicolas-hoffmann.net/modal/. There were a couple of accessibility issues, and a couple of general suggestions. Issues
Best Practice
|
Beta Was this translation helpful? Give feedback.
-
|
The W3C now has the Alerts and Message Dialogs pattern in the ARIA Authoring Practices Guide. This could be a better, more accessible, example to base our implementation on and is implemented in JavaScript. |
Beta Was this translation helpful? Give feedback.
-
|
Met to discuss how to move this forward, with @jamesmckechnie @willrichards and @guermanc Latest idea is to split this work into two and create:
The responsible and careful use of modals needs to be clearly signposted in the content for the component. There are well-documented accessibility issues with modals but instances where teams still need to use them, so we should provide some guidance on best practice for consistency. Consider the use of an 'experimental' tag? We will need the help of a developer to create the code for the component. @willrichards said COP will be creating one soon, but there is no fixed timeline for this. The new timeout pattern likely should have a separate discussion to gather evidence and examples from HO services. |
Beta Was this translation helpful? Give feedback.
-
|
Has COP built this component yet? Would be interested in reusing if so @willrichards |
Beta Was this translation helpful? Give feedback.
-
Timeout warnings at the Home Office
This post only includes key information. Please read COP-timeouts-functionality.pdf for full design specifications and functionality details which are useful for when speaking to developers.
Background
I've been working with delivery teams across the Home Office to design, research and refine a pattern for timeout warnings. The aim was to build on what already exists on the Home Office design system and in other departments, like HMRC.
We completed rounds of design and research on:
Design
How to implement on GOV.UK prototyping kit
This pattern uses a jQuery accessible modal from https://a11y.nicolas-hoffmann.net/modal/.
💡TIP: Unzip these files before using them.
Copy code from modal-and-timer.html.zip to the html page you want the modal to display. There is a timer included to allow you to trigger the modal to open automatically and redirect the user to a message page if they don't react in time.
Copy code from modal.css.zip to an existing or new custom CSS file.
💡 TIP: Make sure to call on this .css file in the
<head>of your html page or..views/includes/head.html.../assets/javascripts/folder.💡 TIP: Make sure to call on this .js file in the
<scripts>of your html page or..views/includes/scripts.html.Add separate html pages for when the user chooses to sign out or is timed out by the service.
Route the user to these pages using the
data-modal-close-route="signed-out"and<a id="timeout-link" href="timeout"></a>parts of the html code💡 TIP: You can easily edit the content of the modal in the .html file, for changes to the design you can change the css or the jQuery in the .js file too though this can have unexpected results.
💡 TIP: Remove the timers in the html if you don't need them, they are often what causes issues.
Research
We carried out research on different services in Home Office to gather data on different types of service. We used the similar design in all rounds of research with slightly altered content for each.
A caveat to the research in all rounds is that it was hard to recreate the true to life conditions in a research session where a user would be inactive for a long period of time. Instead, we opted to trigger the modal after two minutes to gauge a natural reaction, then debriefed the user later to explain that this would not normally happen.
Apply (a public-facing UKVI service)
Status (a public-facing UKVI service)
COP (an internal Border Force service)
General understanding it wouldn't save the form [when being timed out] but mentions that save would be useful - lines up with previous research.
Future research
Gaps in research
More research could be done into:
Research with key user groups, including:
Testing the built pattern
Test the feature using assistive technologies using the built design for most accurate findings. We should test across browser types, device types and screen sizes.
Analytics and tracking
It would be useful to see how the pattern performs in the wild. Using Google Analytics or Matomo could let a team gain insight into how often timeout warnings appear and how users behave when they do.
Some ideas of things to track:
Beta Was this translation helpful? Give feedback.
All reactions