Publish Exit this Page component

[trang-erskine]

What

Hide this page component (aka Exit this Page) was contributed to the Design System in 2020.
alphagov/govuk-design-system-backlog#213

Why

This component and pattern can be used by service to help users in exit a service quickly when in risky situations.

Epic lead(s)

Katrina & Ciandelle

Who needs to work on this

Designers, Developers, Content Designer, Technical Writer, Accessibility Specialist, Delivery Manager, Product Manager, Exit this Page steering group, Design System working group, GDS Comms team, Home Office Domestic Abuse team / GOV.UK content team

Associated stories

Scoping

Tasks

Beta Give feedback

1. https://github.com/alphagov/design-system-team-internal/issues/533
2. Initial scoping of Hide this Page contribution #1604
   contribution +1
   
3. Investigate where the hide this page button should be positioned on mobile #2117
   +0
   
4. Use Exit this page as an example for journey mapping #2057
   contribution +1
   

   

Research and assurance

Tasks

Beta Give feedback

1. Hide this Page Research Interrogation and Planning #2085
   research +1
   
2. Build the Hide This Page research and testing prototype #2144
   +0
   

   
3. Complete Hide This Page Accessibility Research Sessions #2195
   accessibility research +2
   
4. Hide This Page accessibility research analysis #2197
   accessibility analysis research +3
   
5. Complete Hide This Page research sessions with people with a lived experience of domestic violence #2198
   research +1
   
6. Hide This Page lived experience research analysis #2199
   analysis research +2
   
7. Exit this Page usability research analysis #2232
   analysis research +2
   
8. Meet with gov.scot to share Hide this Page accessibility research. #2362
   research +1
   
9. Plan a cross gov crit of Exit this Page #2501
   8 of 8
   community epic +2
   

   
10. Review feedback from Exit this Page consultation #2679
    analysis +1
    

Development

Tasks

Beta Give feedback

1. Investigate keyboard shortcut for hide this page #2116
   +0
   
2. Update screen reader announcement setup for Exit this Page govuk-frontend#3061
   +0
   
3. Implement feature progression into Exit this Page govuk-frontend#3089
   javascript +1
   
4. Content design Exit this Page screen reader announcements govuk-frontend#3062
   +0
   
5. Change the button activation combo for Exit this Page to 3 x shift govuk-frontend#3063
   +0
6. Fix hover styling for expanded Exit this Page button govuk-frontend#3246
   design 🐛 bug 🕔 hours +3
   
7. Refactor Exit This Page to ES2015 classes for 5.0 govuk-frontend#3840
   exit this page javascript +2
   

Guidance

Tasks

Beta Give feedback

1. https://github.com/alphagov/design-system-team-internal/issues/572
2. Finalise Exit this Page component guidance #2067
   12 of 13
   epic exit this page guidance +3
   
3. Publish a pattern to help users to exit a page quickly #2603
   5 of 6
   epic guidance +2
   
4. Create coded examples to be added to Exit this Page component guidance #2677
   examples +1
   
5. Finalise interruption page guidance as part of an Exit this Page pattern #2633
   guidance +1
   
6. Finalise safety guidance for Exit this Page pattern #2631
   4 of 4
   guidance +1
   

Comms

Tasks

Beta Give feedback

1. Create a comms plan for Exit this Page #2634
   internal promotion promotion +2
   

   
2. Update the steering group with publishing plans
3. Draft and publish Exit this Page user research findings on community backlog entry #2810
   community exit this page guidance +3
   
4. Create slide deck to tell the story of Exit this Page #2675
   exit this page internal promotion promotion +3
   

Shipping

Tasks

Beta Give feedback

1. Build a publishing plan for Exit this Page #2614
   process +1
   
2. Plan a team away day to celebrate shipping Exit this Page #2846
   +0
   
3. Explore how we measure adoption of Exit this Page and how we can learn from service teams to improve the component and pattern #2770
   analytics community research +3
   
4. Draft comms for v4.7.0 release govuk-frontend#3800
   community 🚀 release +2
   
5. Create stickers to celebrate publishing Exit this Page #2847
   +0
   
6. Create a GitHub Discussions space for Exit this Page #2848
   community research +2
   
7. Explore adding a button to Exit this Page component guidance for teams to inform us when they have used it #2849
   analytics design research +3
8. Release GOV.UK Frontend v4.7.0 govuk-frontend#3842
   8 of 8
   epic 🚀 release +2

Next

• Iterate Exit this Page component and pattern #2950

[owenatgov]

Proposed solutions (Feb 10)

As of February 10th, we have a fairly functional on-screen hide this page component for sighted users. It sits fixed at the bottom of the page on mobile and at the top-right of the page on desktop. It is styled as a warning button, complete with a red background.

The final decision for the on-screen functionality is the placement of the component, relative to the page body and header.

Our proposed solution as of Feb 10th:

Split the component into two portions: a screen reader element and an on-screen element. The screen reader element would be styled and built similar to a skip link.

Proposed specifications:

• It could be placed directly after the skip link in the HTML
• It could use either the skip link yellow colour or the warning red colour (to match the hide this page on-screen element
• It could show up visually on-focus (via tabbing) just like a skip link
• It could be navigated to easily via screen reader, by returning to the top of the page and then tabbing twice

The on-screen element would be styled the same as we’ve previously proposed, but could now feasibly be positioned anywhere in the page’s HTML

Proposed specifications:

It could be positioned vertically to be in-line with the page title initially, and then become fixed at the top of the viewport once the page is scrolled past the title (more testing needed).

We will also be exploring a keyboard shortcut for desktop users, specifically keyboard navigation and screen reader users, to potentially minimise time needed to reach the button. This will require research and testing as we need to consider users with motor issues, different keyboards across multiple locales and existing keyboard shortcuts we could be interfering with.

This proposal will require further investigation. It would help us to create a tailored experience for people navigating visually and people navigating via screen reader or keyboard.

[jbuller]

What thoughts have been given to a discrete way to activate the button using voice only?

[owenatgov]

Hey @jbuller

Thanks for the prompt. This is an important group to consider. We discussed this scenario briefly during the kick off phase of this work, however we have yet to come across a satisfactorily useful solution for users navigating via voice control. Since we don’t have a suitable solution at the moment, we don’t have anything for it in the above update.

It's worth noting that voice control users (in this case using Dragon Naturally Speaking as our stand-in tech) have a number of ways to access the button other than saying "click hide this page" out loud:

• They could navigate the mouse over the hide this page element using mouse commands and then say “Mouse click”
• They could use “show links to list the links, navigate to the proper link, then say “click link”
• They could use the mouse grid system to zone in on the button and say "click link"

We're conscious that the above aren't the best or most efficient experience. We are open to ideas and suggestions at this stage, if you or anyone else has experience in developing discreet commands for voice control navigation.

[owenatgov]

WIP govuk frontend branch: https://github.com/alphagov/govuk-frontend/tree/hide-this-page-component

WIP design system branch: https://github.com/alphagov/govuk-design-system/tree/hide-this-page-component

[jbuller]

All those voice commands either take quite a bit of time or require saying "Hide" out loud.
Previously I suggested also providing a secondary innocuous command.

Nevertheless whatever you publish now will be a great step forward and of course further development can then be done.

[christopherthomasdesign]

Chatted with the designer who worked on a hide this page component for Women's Aid. It was a long time ago and they were only partly on the project so couldn't remember loads, but a couple of interesting bits:

we didn’t test with assistive tech. We were focussed on mobile due to the user group we were working with and one thing we found in UR was that the exit button became basically redundant because people have much faster ways of closing pages/apps when on mobile (like the physical buttons on the phone)

A very fair point, though I don't think this amounts to anything like an argument against showing the button on mobile.

One interesting thing the tech person implemented was that the button left the site on the original tab but also opened a new tab and went directly to that tab, this meant that someone could not hit back on the browser because it was a fresh tab.

Which sounds very similar to what we're proposing!

[owenatgov]

Hide this page component proposal - 14/03/2022

The current proposal is pending the gathering of existing research from contributors as well as a round of usability and accessibility user testing.

You can see a current draft implementation of the component here (from #2079).

Current guidance plan

We're gonna request that teams set up 2 buttons on the page, one as a hidden "skip link" variant underneath the actual skip link on the page and one one the page itself, positioned under the main and visually on the right of the content (on mobile this would float at the bottom of the viewport above everything else). We're additionally going to request folks add guidance to the page saying something along the lines of "this page includes a hide this page button. You can use it by clicking xyz or using the xyz keyboard shortcut etc etc".

The reason we've got 2 is for keyboard and screen reader users so they can more easily reach a button from anywhere in the markup they are. The guidance is so that we're communicating to the user that the button is on the page and how it works without making the button obvious to observers, an indication of the trade off between observer and user visibility (figurative term) which has been central to the development of this component.

Current component flow for users

• When a user presses the button, a new tab will be opened, currently preset to BBC weather and the previous tab will change to a different URL, currently preset to google.com
• If a user checks their history, the "risk" page will have a different title, currently preset to a covid title
• If the user goes to the previous tab (google) and clicks back, they can return to the page they were trying to hide/escape and continue their journey

Outliers

• A keyboard shortcut has yet to be implemented. We will be discussing this with key contributors before continuing investigation and potentially putting this to user research.
• We have yet to write a draft for what content we want the user to see explaining how hide this page works.
• We haven't investigated in detail the defaults for the escape pages (current BBC weather and the google homepage) and the fake page title placed in the browser history (currently the govuk coronavirus landing page title).

[kellylee-gds]

Shipped on 6 July 2023. Next epic #2950