Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Hide this page

The 'Hide this page' component helps users to exit a service, website or application quickly and safely.
A simplified illustration of a web page in both mobile and desktop resolutions to show the location of the 'hide this page' button on each. On the movile display the button is at the very top of the viewport; on the desktop display it is in the upper right of the content area, next to the page heading.

Sample HTML

<div class="ds_hide-page">
 <a href="http://bbc.co.uk/weather" class="ds_hide-page__button  ds_button  js-hide-page"><strong>Hide this page</strong> <span class="visually-hidden  js-enabled-text">Or press escape key to hide this page</span></a>
 <p class="ds_hide-page__text  js-enabled-text">(Or press Esc key)</p>
</div>

About this component

The hide this page component is a prominent button that closes the open service or website. Using the button hides some evidence that a user visited the page.

This can help victims of domestic abuse or other vulnerable users to look at sensitive content more safely. Abusers may try to keep tabs on what their victims do on a personal or shared device.

We designed our hide this page component so that:

  • it is clearly visible on the content page at all times
  • the red colour shows its importance and makes it easy to find in an emergency situation
  • the button text “Hide this page” states what the component does in plain English

When a user clicks on the hide this page button, it:

  1. changes the current tab to the Google homepage
  2. removes the previous page visit from the browser history
  3. opens the BBC Weather website in a new active tab

It does not remove every visit to a sensitive page from the browser history. It only removes the page on which the user clicks the button.

When to use this component

Use the component on pages where:

  • viewing that service or content could put someone in danger or at risk of harm
  • the information is sensitive and says something about a potential victim’s plans

For example, when a potential victim uses a service about leaving a domestic abuser.

You can use the component on either:

  • pages covering a whole service
  • parts of the journey where the information is sensitive and could alert an abuser

When not to use this component

Do not use this component if the service or content is unlikely to put a user at risk.

Evidence

This component has been through several iterations on mygov.scot.

Research and testing

We collaborated on the latest design, placement and language for this component with the:

  • Ministry of Justice (MoJ)
  • Department for Work and Pensions (DWP)

Usability testing in 2015 of a previous version, which took users to the site’s homepage, showed that users preferred the button to either:

  • close down the site completely
  • take them to a neutral site (such as Google)

We also did desk-based research in 2020 by reviewing other websites with similar functionality. For example we looked at charity organisations such as:

This helped us confirm the findings from the 2015 usability testing.

Performance data

Domestic abuse content received increased traffic due to COVID-19 (1 April-30 June 2020). More than one in ten domestic abuse content users clicked the ‘Hide this page’ button in this period. Mobile users clicked the button proportionally more than desktop users.

In 2017, we used a tool called ‘Mouseflow’ that allowed us to view sessions anonymously. We watched user sessions to find out if users clicked the button on purpose or by accident. During several sessions users moved the cursor at speed to the button. We took this behaviour to show deliberate action.

We plan to test with more users and to focus on behaviour and language of the button-supporting text.

Website analytics

You can track hide this page link clicks through the original page path and a data attribute describing the action.

The data attribute is added automatically by the Design System’s ‘tracking’ script.

Accessibility

We offer a keyboard shortcut using the ESC key. Research suggested speed is critical to keep users safe and avoid potential harm. It may be quicker for some users to press a keyboard button, like the ESC key, than move the mouse pointer.

Every page with the component should have a hidden warning for assistive technologies, such as screen readers. To do this, you should add the following code above the ‘Skip to main’ content element.

<div class="visually-hidden  ds_hide-page">
  <p>
    To leave the page quickly, press the escape key.
  </p>
</div>

When a user is using assistive technology, the code announces either or both:

  • the presence of the ‘Hide this page’ button
  • the use of the ESC key

Implementation

This ‘hide this page’ button code should be placed inside your main layout container (.ds_layout) for correct placement of the button in the layout.

In browsers with support for CSS grid, it will be anchored to the upper right of the layout, and uses position: sticky to keep it in view.

In older browsers, position: fixed is used as a fallback, and the button is placed in the upper right of the viewport instead.

For correct display on mobile devices, you should add the class ds_has-hide-page to the body element.

Back to top