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

Confirmation page #40

Open
govuk-design-system opened this Issue Jan 12, 2018 · 16 comments

Comments

@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 12, 2018

Use this issue to discuss this pattern in the GOV.UK Design System.

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 12, 2018

@govuk-design-system govuk-design-system moved this from In progress to Published in GOV.UK Design System Community Backlog Jan 12, 2018

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Mar 23, 2018

Just capturing a conversation from yesterday. A proposed colour palette change would make the green panel on this page much darker, like this:

image

This may or may not be an issue. But @36degrees had a really good suggestion - why don't we use the green 'Alert' component from GOV.UK Marketplace? We're considering adopting this component for the design system anyway, and it's very close in intent to what the panel on this page is trying to achieve anyway.

So, it would look something like this:

image

@stevenaproctor

This comment has been minimized.

Copy link
Collaborator

stevenaproctor commented Mar 23, 2018

@timpaul I like the darker colour in both examples. It is AAA compliant for all text sizes, not just larger text which is awesome.

@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented Mar 23, 2018

Is the dark green the same as our buttons? I'd be worried about using button style on things that aren't buttons, without doing user research. Obviously the outline approach doesn't have that problem, but I'd still be worried about making a large change to an important element without research.

@stevenaproctor

This comment has been minimized.

Copy link
Collaborator

stevenaproctor commented Mar 23, 2018

@joelanman Excellent point. People could mistake them for buttons because of the similarity. It would be interesting to research with people who regularly use services with the current pattern to see if the new one meets the user need more, less or the same.

@ignaciaorellana

This comment has been minimized.

Copy link
Contributor

ignaciaorellana commented Apr 4, 2018

Home Office has made a variation of confirmation pages https://home-office-digital-patterns.herokuapp.com/components/confirm-pages according to this, "lighter green which does not meet accessibility requirements for some smaller text."

@stevenaproctor

This comment has been minimized.

Copy link
Collaborator

stevenaproctor commented Apr 4, 2018

@ignaciaorellana The lighter green does not meet colour contrast rules. Elements says "When using the white text on a turquoise background – ensure the minimum text size is 24px normal weight, or 19px bold. This is to meet colour contrast ratio requirements."

The Home Office colour is the green hover colour from the colour palette and is AAA compliant for any text size.

@trevorsaint

This comment has been minimized.

Copy link
Collaborator

trevorsaint commented May 8, 2018

@timpaul I really love the dark border, white background version. A massive improvement on the old style and as @stevenaproctor mentioned AAA compliance :).

@trevorsaint

This comment has been minimized.

Copy link
Collaborator

trevorsaint commented May 9, 2018

@timpaul we will require a confirmation pattern similar to this. Whereby a Judge, for example, would perform a specific case action 'make a decision'. Successfully completing a task on a case by case basis.

decision-submitted

@jeanesims

This comment has been minimized.

Copy link

jeanesims commented May 18, 2018

My comment is about the use of the heading ‘What happens next?’ and the guidance underneath it on the ‘example’ used on this page https://www.gov.uk/service-manual/design/confirmation-pages.

We’ve had feedback from an accessibility review that ‘What happens next?’ should be changed to ‘What you must do’. Typically, the next steps can be a mixture of what ‘we’ might do next and/or what ‘the user’ will need to do next.

We’ve been using the heading ‘What happens next?’ on confirmation pages. We haven’t seen users having problems with it in testing, however, if it’s not accessible we’ll need to change it.

Can the ‘example’ also be reviewed and updated? We’ve been using it as a guide.

Also do we need to have some spaces in the 'reference' numbers - like we do with telephone numbers? Sometimes they can be quite long and are harder to read when they don't have any spaces.

@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented May 18, 2018

@jeanesims Hi! Apologies, the screenshot on that page is wrong. Our recommendation is to use the statement: "What happens next", as we're not asking the user, we're telling them. You're right that 'What you must do' doesn't suit all situations.

We have some draft guidance for reference numbers here:

https://paper.dropbox.com/doc/Transaction-reference-numbers-rutTu74goUwXfKxG9NBcr

The main thing is to try to generate short, easy to remember reference numbers.

@stevenaproctor

This comment has been minimized.

Copy link
Collaborator

stevenaproctor commented May 18, 2018

@joelanman @jeanesims I think 'What happens next' as a statement only works when the stuff that happens next is stuff we will definitely do for a user. If it is something they do or we might do then it does not make sense. 'What you [can, need, must] do next' is for stuff them.

If there are things we do and things they do, I would have 2 headings to give the content more structure and meaning.

@jennifer-hodgson

This comment has been minimized.

Copy link

jennifer-hodgson commented May 18, 2018

@stevenaproctor and I had an interesting chat about this which I am recording below:

Does the discussion above raise a broader issue around content in examples, and making clear where content is a content pattern and where it is not? In the HMRC design system we've tried to do this by detailing any content the pattern should include.

Also, I suggest there are instances where "What happens next" is being used in order to adhere to what is perceived as a content pattern, when something like "What you need to do next" would be clearer. The distinction feels like a significant one to me.

@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented May 18, 2018

@jennifer-hodgson It's a great point, I'll make sure the rest of the Design System team see your comment

@timpaul timpaul added the pattern label May 21, 2018

@mschwendener

This comment has been minimized.

Copy link

mschwendener commented Jul 30, 2018

Hi

NickColley directed me here (from twitter).

As an external user, I strongly suggest that you use the darker green, to tie it together with the other steps (for example subscribing to updates for a page).

The way it looks now I got the feeling the colour of the confirmation notice was a forgotten leftover from an older design.

(Once it's changed, update http://govuk-elements.herokuapp.com/colour/#colour-sass-variables.)

@abbott567 abbott567 referenced this issue Sep 28, 2018

Open

Alerts #2

@jbuller

This comment has been minimized.

Copy link

jbuller commented Dec 12, 2018

I've just accessibility tested a confirmation page and had a warning that the Feedback link and 'What did you think of this service?' are duplicates - same target different link text.
Not a huge problem since the link text is good in both cases but worth thinking about, from both the users and future testers perspectives.
See https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=324#qr-consistent-behavior-consistent-functionality

@dashouse

This comment has been minimized.

Copy link

dashouse commented Dec 12, 2018

@jbuller Thanks for sharing your findings.

I think dependent on a service these links could be the same or different. The example in the Design System itself only contains one link because it doesn't have a visible phase banner.

I've seen a few services where the feedback link goes to a survey, where as the link in the phase banner goes to an email form or links to support channels.

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