Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interruption card #27

Open
govuk-design-system opened this issue Jan 12, 2018 · 20 comments
Open

Interruption card #27

govuk-design-system opened this issue Jan 12, 2018 · 20 comments

Comments

@govuk-design-system
Copy link
Collaborator

@govuk-design-system govuk-design-system commented Jan 12, 2018

What

An alert that interrupts the user flow with important information and must be acknowledged before continuing.

Why

Anything else

Draft guidance here below:

When to use this pattern:

  • to draw a users attention to important information specific to that point in their journey
  • allow users to acknowledge something before continuing
  • if important information is styled normally and users are missing it use this pattern - its unexpected so helps to bring attention to essential information

When not to use this pattern:

  • for form elements
  • for large amounts of content
  • the effectiveness of the pattern is based on its unexpected appearance so should be used sparingly

How to use this pattern:

Include a clear heading and use large body text at a minimum size of 24px.

Try to reduce the content down to the minimum amount the user needs. If the user needs to do more than one thing, use extra cards.

Anything else

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Agreed) Jan 12, 2018
@owenm6 owenm6 changed the title Intro panel Interruption card Jan 26, 2018
@joelanman
Copy link
Member

@joelanman joelanman commented Jan 26, 2018

We first introduced this pattern on Verify:

https://designnotes.blog.gov.uk/2015/09/21/helping-users-understand-gov-uk-verify-designing-with-data/

This post includes the iteration of the design that was in the A/B test. We then iterated to the simpler white on blue design, with fewer images.

@joelanman
Copy link
Member

@joelanman joelanman commented Jan 26, 2018

Guidance looks good, I think I'd make more of the 'unusual' aspect. So maybe move

the effectiveness of the pattern is partly based on it’s unexpected appearance so should be used sparingly

to the first section 'When to use'

Or something like 'Start with normally styled content. If you find users are not taking in important or unexpected content, try changing the content, then try this pattern.' but maybe worded better

@owenm6
Copy link

@owenm6 owenm6 commented Jan 26, 2018

@joelanman If I keep the bit in to warn people not to overuse the pattern and add this to the 'when to use' -

  • if important information is styled normally and users are missing it use this pattern - its unexpected so helps to bring attention to essential information
@timpaul
Copy link
Contributor

@timpaul timpaul commented Apr 11, 2018

In order to provide reusable coded examples for this pattern we'll need to first do the following:

  1. Create a more generic version of the panel component, which is currently designed for confirmation page panels

  2. Create inverted versions of components that are commonly used inside interruption cards. Buttons definitely, but also radios and numbered lists

@owenm6
Copy link

@owenm6 owenm6 commented Apr 11, 2018

@timpaul We don't recommend using form elements in interruption cards but we could be wrong on that. Buttons and lists etc... for sure though.

@joelanman
Copy link
Member

@joelanman joelanman commented Apr 11, 2018

Verify uses radio buttons:

image

But I think an MVP approach might be good? We might not need radio buttons for an MVP.

@owenm6
Copy link

@owenm6 owenm6 commented Apr 11, 2018

I think we recommended it for fear that people would start adding entire forms into them. MVP approach sounds good.

@timpaul
Copy link
Contributor

@timpaul timpaul commented May 1, 2018

We ran a quick naming session in our last X-Gov Design Meetup, using this pattern. Here is the full list of results. Common words to come out of the session were:

  • Attention
  • Blue
  • Call out
  • Explain
  • Focus
  • Guidance
  • Important
  • Info
  • Instruction
  • Interstitial
  • Learn
  • Pause
  • Slow
  • Stop
  • Think
@owenm6
Copy link

@owenm6 owenm6 commented May 1, 2018

@timpaul I see 'page' was popular as well. I quite like 'focus page', 'attention page' and 'interruption page'.

@joelanman
Copy link
Member

@joelanman joelanman commented May 1, 2018

'page' sounds good to me - I don't think this would work with other content outside the blue

@jfranciswebdesign
Copy link

@jfranciswebdesign jfranciswebdesign commented Aug 15, 2018

We're testing this in our 'File your CIC report and accounts' service.

Users are tending to skim read 'standard' pages that don't require any form of input - that is, any pages where the only thing they can do is read a bit of content and then click a green button to proceed. Presenting the information this way means users are taking the time to stop and read it.

cics-accounts-interruption-card

@timpaul
Copy link
Contributor

@timpaul timpaul commented Aug 16, 2018

Good to know @jfranciswebdesign - thanks for sharing

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Feb 6, 2019

I'm considering using this as a one-time guide for new users of my service (internal casework users). There's three key bits of information we'd like them to know, and I'm thinking of walking them through it with this style when they first sign in. Thereafter they get a dashboardy type page for the service.

@chrisadesign
Copy link

@chrisadesign chrisadesign commented Mar 6, 2019

We're using this on our service. We've got 3 cards at the beginning of the service that give key info to users that we moved off the start page where it was consistently missed.

Most users will now stop and read this during usability test. We've had comments on how useful it is, and that if they already knew it they'd just happily skip through.

image

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Mar 6, 2019

We tested a 4 card intro shown after first login.

I'd say it generally helped with comprehension. They seemed to absorb the headings, the body copy less so. I found they clicked through the first page rather quickly - so we may keep the first page as a 'hello and welcome to x' type thing, and make sure the key bits of info are on later pages.

@MartinDM
Copy link

@MartinDM MartinDM commented Apr 3, 2019

Just to re-open this one and show another use. We've recently included this in MOT and added to our Design System at the DVSA:
https://dvsa-front-end.herokuapp.com/library/mts/interrupt-panel

We decided on naming it 'interrupt panel', mostly due to its context for our service: interrupting the users' habitual flow of adding vehicle defects where they might miss important information about the defect (leading to incorrect defects being added to a vehicle).

We started calling it a 'speed bump' ;)
Screenshot 2019-04-03 at 10 57 53

So for us, the only elements we use inside are a heading, paragraph text and a button.
The content was inverted by setting the CSS colour of the whole panel to white and we took the opportunity to make a re-usable utility class --white to handle the button.

Agreed it is worth specifying among ourselves the most common elements for this pattern and including them in the same CSS partial when used inside a parent class ;)

pezholio added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Jan 8, 2020
pezholio added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Jan 8, 2020
jacksonj04 added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Jan 8, 2020
jacksonj04 added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Jan 9, 2020
@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Jan 16, 2020

I rewrote our sass for this over Christmas - using much of what the design system has, and adding stuff for some other elements we used. Can be found here.

@titlescreen
Copy link

@titlescreen titlescreen commented Jan 20, 2020

We are looking at implementing an interrupt card on the Claim service over at DfE. The idea is to show this interrupt card if you have already started a claim to get back your student loan repayments and then partway through you decide to start a claim to get a payment for teaching maths of physics.

We felt that having a button then text link for the second option could be biasing the user to do what we think they should do, rather than what they want to do. If they chose to start a new claim, we will then be deleting the claim in progress so we needed a button rather than a link. Also if possible I'd like to avoid styling buttons like links.

So radios felt like the correct decision, the only part I want to improve further is the text on the submit button. We some different options and ended up with submit.

It's also worth noting we had a slightly darker blue background to make the white text a bit easier to read.

If anyone is interested you can find the HTML here and the SCSS here.

image

@jim-laney
Copy link

@jim-laney jim-laney commented Mar 8, 2021

We are looking at implementing an interrupt card on the Claim service over at DfE. The idea is to show this interrupt card if you have already started a claim to get back your student loan repayments and then partway through you decide to start a claim to get a payment for teaching maths of physics.

We felt that having a button then text link for the second option could be biasing the user to do what we think they should do, rather than what they want to do. If they chose to start a new claim, we will then be deleting the claim in progress so we needed a button rather than a link. Also if possible I'd like to avoid styling buttons like links.

So radios felt like the correct decision, the only part I want to improve further is the text on the submit button. We some different options and ended up with submit.

It's also worth noting we had a slightly darker blue background to make the white text a bit easier to read.

If anyone is interested you can find the HTML here and the SCSS here.

image

Hi. Did you end up implementing this? If so, how did you display the error message if the user tries to continue without selecting a radio button?

Not sure how the GDS error message pattern would work within an interruption card.

@titlescreen
Copy link

@titlescreen titlescreen commented Mar 8, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants