Investigate re-adding instructions "attachment" to exit this page button

[owenatgov]

What

Investigate adding a visual attachment to the exit this page button which lets the user know they can activate the button by pressing shift 3 times. This attachment should only be visible and accessible when js is active for the user.

Why

This is a potential solution to the problem of how we communicate to users that features of the EtP button such as activating by pressing shift 3 times aren't available when js is broken or turned off. The hypothesis is that by attaching it to the component, we make it easier to manage these instructions as opposed to having to ask service teams to include a class around content in their service as part of the EtP pattern.

We included this feature in a previous prototype and would need to reassess why we remove this, if there was a specific reason. We'd additionally need to assess if this design was suitable against the EtP button in it's current state.

Part of alphagov/govuk-design-system#1755

Timebox

1 working week (5 days) from start

Who is working on this?

@owenatgov @querkmachine @calvin-lau-sig7 @Ciandelle

Spike lead:
@owenatgov

Questions to answer

• Is this solution technically possible?
• Does it successfully convey to users how to use the button?
• Does the design in it's previous state still work?

Done when

• Questions have been answered or we have a clearer idea of how to get to our goal
• Findings have been reviewed and agreed with at least one other person
• Findings have been shared, e.g: via a write-up on the ticket, at a show & tell or team meeting

[Ciandelle]

From a design point of view it seems simple and clear enough.

My only query would be can we size up to 16px for the font size or does it have to be 14px? I understand about the screen size meaning that we might have scale down but I think even on a small screen we might be able to get away with 16px due to it going across the wrong screen. If this isn't possible, just let me know.

[querkmachine]

@Ciandelle Sorry, just to confirm, the guidance text is already 16px on desktop resolutions and the text is currently hidden on narrow screens where it would normally be scaled down to 14px.

Assuming you intended the '16' size on our font-scale (which is 19px on desktop), here's a mockup of that:

Personally, I think this makes the supporting text look a little overwhelming and too prominent compared to the button; but maybe there's a way to resolve that, like changing the text to a shade of grey?

[Ciandelle]

I saw about the narrower screens after I wrote this as I looked at them in the wrong order, my bad. I think that it would be great to have them the same size but in grey. However as I've mentioned on the #3268 I think the longer text would work better. So if we need to keep the original size I completely understand.

[stevenjmesser]

Needs a @davidc-gds review.

[dav-idc]

Here are my vague thoughts so far, in no particular order:

• The primary interaction method of clicking or tapping (pointer input) is already covered by being a button. I don't think we need to see adding text here as a 'must have', but it could be viewed as an enhancement.
• If we're viewing it as an enhancement, we should really test with people to see if it truly does enhance.
• If we are able to develop a technical implementation for this that works, then the question is more about "does it add value, or clutter up the EtP button?" If we can't get a working implementation though, I'd definitely say we scrap it without a second thought.
• Could this be one of the things we bring through the community crit?
• Could this be one something we can kind of A/B test or at least test in general through any future user research?
• We probably shouldn't develop it as an optional feature for teams to add. Either we add it or we leave it off. We don't want inconsistency.
• The instructions for how to press 'shift' 3 times to use the shortcut should be on the explainer interruption page, regardless of whether we add it to the button as well. This should be an enhancement to the button, not a replacement for good instructions.
• Do we need some text on the 'skip link' style button as well? Or maybe only on the skip link button?
• If the main audience for the 'shift' keyboard shortcut is keyboard users and screen reader users, it might actually make a lot more sense to put it on the skip link styled button, instead of on the visual button. Both screen reader users and keyboard users will move focus to the skip link styled one much earlier (unless keyboard users use the real skip link to move past the EtP skip link entirely).

That last thought is my least coherent, but it might be something worth looking at: what's the value of having the instructions on the 'skip link' styled EtP button? Is it more valuable there compared to on the visual button? Less valuable? Equally valuable?

Seems there's a bit more to mull over.

[Ciandelle]

We can definitely do this as part of the community crit, if we feel this will be useful. In the past I've done some really basic A/B testing in crits to see if the thing I'm doing is useful to the vast majority of users.

[owenatgov]

@davidc-gds Thanks for the input.

Firstly, a thought on the original intent behind this. This was to solve the problem of how we provide accurate instructions to people based on the small chance they might not have js enabled. If we're saying "press shift 3 times" but the js to manage that function isn't available, the user, hypothetically, could be at risk. I'm therefore wary of the prospect of showing the instructions by default. This rings true for the skip link as well as the interruption page instructions. With the skip link there's also a risk that we're "hiding" this content until someone navigates to it.

The other side of that is that, firstly, we can serve a class to only show content if js is enabled and ask teams to add this in the pattern guidance. Although this might have content consistency issues. The content being on the skip link also makes sense as you say because the audience is keyboard users. It's not critical to the function of the button. It's difficult for me to assess if this is something that would be useful to non-keyboard only users or what the overall impact of just keeping this content by default would be.

That leads me to another broader point: it does seem like this needs more verification. The community crit will be useful but also potentially a round of user research. I don't think this should mean we delay launch as we can investigate and iterate the component after an initial publish. A/B testing I'm not sure about as we currently don't have a way to measure specific component features in services from where we are. There may be an opportunity here to work with a team who would be using the component and getting them to A/B test the feature?

[Ciandelle]

@owenatgov this definitely feels like a case for get out the MVP and then iterate it. I think as long as we make sure the guidance is clear and states that we are doing further testing on it, then we shouldn't be delaying the launch.

From a personal point of view I think that we try without. I think that because we mention it in the interruption page, and the fact that there may be more than one interruption page, we may be adding too much to the button. However we can have this as one of the questions in the crit if that would help?

[calvin-lau-sig7]

Okay, my thoughts. Trying to write this through everyone's different mental models.

Suggestions in summary:

• Interruption page to show full instructions for all 3 methods (Before you start: How you can exit this Page)
• Button as clear, simple and useable as possible — it'd be nice if we can make users aware of shift x3 but it's sounding like the instructions likely to clutter and distract
• Skip link (link to exit this page as a hidden link in tab order) as clear, simple and usable as possible too — might have more room than button area for an instruction, but also problematic

Full message:

Agree with that the button is the primary way to use Exit this page. And to prioritise keeping that clear and simple visually.

Telling the user how to use the secondary way ("Shift key x3") would be nice to have underneath the button, since it'd be visible on every page and give some nice context being nearby, but it's feeling like too complicated a message within the confines of what should be a small call-to-action. From what I'm hearing, the frontend, design and content constraints are tight and possibly butting up against one another.

Agree that the interruption page feels like the best place to put all instructions for all 3 ways to Exit this page. Appreciate the Javascript-disabled risk, but we'd ideally want to tell the user about this anyway, in case they use the same service on different devices, etc.

Open-minded about also putting "Shift key x3" instructions alongside the hidden skip link, but feeling it's too long a message to be effective. And also slightly confusing (exit this page now vs later)? Is this effectively a hidden notification banner?

[querkmachine]

It seems that the consensus is to not merge this enhancement at this time.

We still have open questions, but it sounds like we'd rather investigate those once we're sure that the core parts of EtP are working well, and may revisit this enhancement in future.

If there's no objections, I'll close this issue and the associated PR soon.