Skip to content

Exit this page component #2922

Closed
Closed

Description

@rwk-moj

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:

  • Ensuring the button text accurately describes it's purpose
  • Ensure the instruction "(Or press 'Esc' key)" is presented to all users when presented as a sticky element
  • Include visually hidden text at the top of the page to help users of assistive technology be aware of the leave page functionality
  • Differentiate betwixt mobile displays and PC displays zoomed in, so the information about using the escape key is not hidden for non-mobile narrow displays

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

Activity

  1. JennyG303 commented on Apr 28, 2020

    @JennyG303

    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

  2. htmlandbacon commented on Apr 28, 2020

    @htmlandbacon
    Contributor

    Just a couple of things:

    • I've not reviewed these so may be slightly wrong
    • I've not done any sort of a11y review ( ahem @abbott567)
    • I've not checked session behaviour

    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

  3. abbott567 commented on Apr 29, 2020

    @abbott567

    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.

  4. htmlandbacon commented on May 29, 2020

    @htmlandbacon
    Contributor

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

    • Colour choice of button
    • Placement on desktop (i.e below/above right hand content)
    • Sticky behaviour of button on desktop and mobile and location
    • Link to the BBC weather page vs some sort of session clearance

    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

  5. changed the title [-]Quick Exit design pattern[/-] [+]'Hide this page' component[/+] on Oct 29, 2020
  6. changed the title [-]'Hide this page' component[/-] [+]Hide this page component[/+] on Jan 14, 2021
  7. changed the title [-]Hide this page component[/-] [+]Exit this page component[/+] on May 24, 2023
  8. locked as resolved and limited conversation to collaborators on Jul 6, 2023
  9. unlocked this conversation on Jul 6, 2023
  10. locked and limited conversation to collaborators on Jul 6, 2023
  11. converted this issue into a discussion #2923 on Jul 6, 2023
  12. locked as resolved and limited conversation to collaborators on Jul 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions