Timeout

[flora-nhs]

Timeout pattern for iOS, Android and web

[growe-gov]

My team (Native and Design System) have had an interesting design challenge which fits into the timeout space. Whilst it is not a timeout in the traditional sense that the user is logged out due to inactivity, but actually a timeout during the biometric login process due to a necessary token expiring!

Context: when biometric users open the nhs app, they are met with an device-level biometric prompt asking them to submit face or fingerprint authentication. They are given two opportunities to provide a biometric authentication - with two unauthenticated biometric entries redirecting them to the manual login process. One of the measures employed to keep this process secure is a 90 second lifespan for the authenticated token to be returned to nhs login.

Problem: if users fail to manually trigger the second biometric scan within the 90 second window, the device-level prompt will stay on the screen indefinitely. This is a problem as it allows users to trigger and scan a biometric even though there's no way for us to use it. If a user tries to progress with biometric, even if they submit an biometric that the device authenticates, they are directed to a confusing and generic error screen that doesn't explain why this process has failed. This should not be presented as an error screen, as nothing has gone unexpectedly wrong - it is expected behaviour. This is made even more confusing because the native microinteraction can show that the device has authenticated the biometric, but the user still ends up on a unhappy pathway. It is also a challenge that the screen shows an error code and reiterates that there was a problem logging in, suggesting that something unknown has failed (where this is actually expected and intentional behaviour from the app).

Research: we have had a look at timeout patterns that already exist across the NHS and cross-gov for common language and research. Please find attached some of our findings. These led us to creating this new, more specific unhappy pathway screen which aims to reassure the user, inform them as to what has happened and remove the inference that something has failed.

Proposed solution: we updated the UI to bring it in line with the Design System pattern for error screens, but the main improvements we made are as follows -

1. Explicitly stating that something has timed out (Home Office research suggests that this is generally understood terminology) and that this is intentionally for the benefit of the user's security
2. Body copy uses simple language to spell out what has happened and how they can progress. Note: we don't use the word biometric patient-facing.
3. We opted not to include the technical section with the error code on this screen. Error codes are the standard pattern for error screens aka. when something has gone unexpectedly wrong on our side. As this isn't the case (ie the app is working exactly how it's designed), we feel it would present confusing messaging to users.

We also added in a technical step which ensures the user is taken directly to our Biometric Timeout screen as soon as the token expires (where previously users would stay on the biometric prompt indefinitely, even once the token is invalid). This will reduce confusion regarding being redirected to unexpected unhappy pathways.

Let us know if you have any thoughts!