alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
https://www.gov.uk/design-system
MIT License
512 stars 232 forks source link

Exit this page component #2922

Closed rwk-moj closed 1 year ago

rwk-moj commented 4 years ago

Formerly known as 'Hide this page component'

What

What are we proposing

We are looking to implement a component, using the existing button component, that allows vulnerable users of a Government service to quickly and safely hide the page and reduce the risk of Domestic Abuse incidents.

The functionality behind the component would allow a user to quickly hide the current page and open a new, ambiguous webpage, such as BBC Weather or another such website. This would lower the risk of drawing attention to browsing habits from a perpetrator.

Why

Why are we proposing this design pattern?

Domestic abuse is physical, sexual, psychological or financial abuse that takes place within an intimate or family-type relationship and that forms a pattern of forceful and controlling behaviour. This can include forced marriage and so-called ‘honour-based crimes.” Domestic abuse may include a range of abusive behaviours, not all of which are in themselves inherently ‘violent’

The biggest risk to a victim of Domestic Abuse is homicide and serious physical assaults - this is at its greatest risk when a victim is planning to flee or escape from the perpetrator. Often, one of the first things a victim will do is to speak to someone to make a disclosure about abuse. The second thing they will do is research and find help online, often using Government services.

We need to ensure that the risk is minimised for users when using online services. Although victims and survivors can be aware of the risks, it is the Government's responsibility to protect individuals using a service. Therefore, it is crucial that there is a consistency of approach in design and functionality across Government with this component.

What evidence do you have that it's needed by multiple services across government?

From conversations between the Department for Work and Pensions, Ministry of Justice, the Cabinet Office and Scottish Government, it is already clear that other services need to ensure that this design is available.

Services are already responding to the rise in Domestic Abuse during COVID-19 by building their own minimum viable solutions to allow users to quickly hide their webpages.

There are areas of the Government site, such as “Domestic Abuse: How to get help”, that a high risk user would access for support that does not include a way to hide their browsing. This is putting those users of this service at risk.

What evidence do you have that it meets the needs of the users of those services?

Speaking with subject matter experts (SME), it is critical that we offer this feature on the GOV.UK website. It is a feature that is provided by other organisations, such as:

Each website has varied design implementations, but ultimately addresses the same user need of being able to hide browsing habits quickly.

The Ministry of Justice have carried out some initial research with an SME to establish whether the proposed solution meets the user needs.

Have you checked that it doesn't already exist in the GOV.UK Design System?

There are no outstanding issues or tickets in the Design System backlog that refer to this type of component.

Anything else

What else has been done

The MoJ have iterated twice on the design component on our live service - looking at language, design and functionality.

There are several designs that are considered minimum viable products which have been released by the DWP (Child Maintenance Service) - Cabinet Office (Coronavirus Support) and the MoJ (Legal Aid Agency). The expediency of these releases has been due to the fact that by not having something, we are putting our users at risk.

The MoJ have carried out some early rounds of testing with an SME that have looked at design, functionality and various use cases from a range of user scenarios. This has all been documented and shared with DWP and CO to share research and findings.

Designs

We looked to extend the GOV.UK Button component to act as the interactive element that a user would press to exit the website.

The Design System suggests using red for any destructive actions undertaken on a GOV.UK website - as the intention for the 'Hide this page' button was essentially closing the webpage down, it would be deemed destructive. This has been adopted by DWP and the Scottish Government.

We decided to utilise the additional space available in the 1/3 column, which is usually reserved for additional information as it allowed us to present the button within immediate view for the user.

The button would then be "sticky" in position at the top of the page on smaller devices. This prevents any conflict with the GOV.UK 'Contents' link that is positioned at the bottom of the screen. It also removes potential accidental presses by a user who doesn't need to use it.

Feedback from SME on the design

Victims of Domestic Abuse are used to using their reptilian brain and are in fight or flight mode so the red would be a trigger for them to draw their to attention to it - Comment from SME

Content

The language used in the button has recently been changed in order to create a more unified style as we continue to work with DWP, Cabinet Office and the Scottish Government. The use of 'Hide this page' presented more of a sense of immediacy, as well as being more descriptive of what the button actually does when the user interacts with it, so we have moved away from the original 'Quick Exit'.

We also use a keyboard function for the user to be able to interact with the button which is controlled by pressing the 'Esc' key.

Behaviour and Functionality

We have explored several types of behaviour for the button, however in order to provide the greatest amount of safety for users we decided to implement functionality similar to other charities and organisations.

When a user interacts with the button, they are sent to a new browser tab that opens BBC Weather. The original tab that they were on doesn't close, but redirects to Google.

This component does not prescribe which websites are to be linked to. That is best done by the individual services and their user research combined with the knowledge of their user base. Google and BBC Weather are good neutral examples pending further research.

Accessibility

The Legal Aid Agency have had an Accessibility Audit on their service and this highlighted some improvements to the component. These were:

These changes have been implemented in the latest version of the component, however we will be looking to further test the accessibility of the component as we continue to iterate on it.

MoJ Data Analytics

The 'Hide this page' button has been running as an MVP on the Check Legal Aid service since 14 April 2020. It has been used with a fair amount of frequency, however at present we are are yet to analyse the data in more detail.

The gaps in data recording were due to changes on the back-end of our service that caused GA to drop out.

Graph data since 14 April 2020

Screenshot 2020-10-29 at 14 17 21

The below graph data also shows variations in spikes and lower use through the pandemic

Screenshot 2020-10-14 at 14 43 58

Examples

MoJ DWP
Legal Aid component design Child Maintenance component design
SCOT.GOV Cabinet Office
Image to follow Scot Gov component design
JennyG303 commented 4 years ago

How should the escape button work? @htmlandbacon documented how various examples are working online.

QE-myScot QE-Govuk QE-MOJ QE-MOJ2

Women’s Aid “Exit site” https://www.womensaid.org.uk/

Position: desktop and mobile - upper right fixed position during scroll

Action: Goes to Google search in same window
 Back in browser goes back to previously viewed Women’s Aid page

Screenshot 2020-05-05 at 13 36 13
htmlandbacon commented 4 years ago

Just a couple of things:

Assumption is that if a user clicked this while in our journey we'd probably scrub the whole session before we send them off @JennyG303

abbott567 commented 4 years ago

Accessibility would be an interesting one here, particularly if using a screen reader or voice command given that 'hide this page now' would be audible.

htmlandbacon commented 4 years ago

Below is an output of the end of a couple of conversations:

Desktop

Example: hide this page button on desktop Example: hide this page button on desktop after scrolling

Mobile

Example: hide this page button on mobile Example: hide this page button on mobile after scrolling