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 · 12 comments

Comments

5 participants
@govuk-design-system
Collaborator

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 from Intro panel to Interruption card Jan 26, 2018

@joelanman

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Contributor

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Member

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Contributor

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

This comment has been minimized.

Collaborator

owenm6 commented May 1, 2018

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

@joelanman

This comment has been minimized.

Member

joelanman commented May 1, 2018

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

@timpaul timpaul added the pattern label May 21, 2018

@jfranciswebdesign

This comment has been minimized.

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

This comment has been minimized.

Contributor

timpaul commented Aug 16, 2018

Good to know @jfranciswebdesign - thanks for sharing

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