Panel

[govuk-design-system]

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

[AutoSponge]

The usage of .app-contact-panel on various pages uses a .govuk-link:focus link focus style #005ea5 on #ffbf47 which has a color contrast ratio of 4.07:1. I believe #0055a5 is the closest color that maintains 4.50:1.

[36degrees]

Hi Paul,

Thanks for raising that - good spot. This issue relates to the wider panel component from the Design System, so I'm going to copy your issue ot the Design System repo so we can track it there.

Ollie

[timpaul]

Ideas for future iterations of the panel component:

• make it more generic, so it can be used to create other kinds of panel

[JodiB-TPR]

Interested to know why the text on this is centred as opposed to left-aligned as with pretty much everything else in the Design System.

[lfdebrux]

Hi @JodiB-TPR, we discussed this among the team and we think the reasoning for the centre aligned text in the panel was to make it stand out more; however this design decision was made a long time so we can’t be sure there wasn’t more to it!

We might decide differently today, but if we wanted to make a change we’d want to have evidence that the centre align was causing problems for users.

I hope this helps!

[joelanman]

I think I might have been the first to use this as success confirmation in a service, on Register to vote. I took the pattern from GOV.UK Publishing - for short, 'main answer' content:

https://www.gov.uk/bank-holidays https://www.gov.uk/vat-rates

As such I think they're centred as they are short and stand out from normal content. But yeh I don't know if we reviewed it all again that we might make everything left aligned.

[vanitabarrett]

As part of the GOV.UK Frontend v3.14.0 ‘feature release’, we’ve fixed an accessibility issue where text could overflow the panel component. Thanks to @philsherry for originally reporting this issue.

[anevins12]

Out of interest, why isn't the text following the heading in a paragraph? It probably makes no difference to screen readers, but it is semantic to wrap text inside of <p> tags.

[Joe-Smart1]

Hi, I'd like to share a variation to the panel component we've been using in Borders and trade - Goods Vehicle Movement Service (GVMS).

We've used the panel to display a barcode that lorry drivers use at border locations or inspection sites that the Border Force officers can scan to see the details of the movement. On average, 110,000 of these are created every week and we have positive feedback it works well (see below)

We also have video footage of the bar code in usage and we'll be happy to share if needs be.

"The barcode is critical for maintaining flow, it is very useful for customers who are simply able to present 2 barcodes (GMR and a French barcode equivalent) and useful for us, as our staff are quickly able to perform a scan. When GMRs are introduced for GB – EU traffic we will see the benefits on the UK terminal for this too"

“Barcode is great and working well, it has made a huge difference in minimising errors and we see the positive of this at the check in, in keeping the traffic flowing. We are very pleased that HMRC introduced this”

[KulanGun]

What?

Hi, I'd like to share a variation to the panel component we've been using in the Home Office (HO).

Why did we opt for blue?

In the HO, we have previously used a green panel for a particular page, however, this page shows up when the user has completed only the first step of a task list, with the task being ‘Confirm your identity'. Users felt like they were fully done with the journey when they saw a green panel and were surprised to learn in usability testing that there was more to do.

The colour blue felt more appropriate for intermittent stages, so we felt it was suitable to test with the blue variant for this page and reserve the green panel for when users are done with their journey entirely. Blue was chosen over orange as the latter was very close in shade to the red panel, as well as blue typically being used for highlighting similar information.

For this service, users need to use an identity verification app for this first 'Confirm your identity' stage of the journey which requires the use of a mobile (N.B. this can be skipped for accessibility reasons).

Once they are done confirming their identity through the app, they come back to the page with the blue panel. This page provides reassurance to users of both the identity verification app and the web version that their identity details have been submitted.

We found that the green panel risked the "I'm done now, so I can close this" thought process when in reality there were more steps. It is just optional to log out at this stage.

We believe a new component is not being created, as it is an adaptation of an existing component and it uses the standard blue hex code that the HO ‘Alert’ component also uses.

Outcomes from usability testing + next steps

We asked 9 users to go through the process of creating an account online. Users were able to tell us there were further steps upon seeing the blue panel. Users questioned whether the data had been saved but all expected to complete additional tasks beyond the 'Confirm your identity' task. This is markedly different to the previous end-to-end testing carried out with the use of a green panel. An example quote from a user was "This is a good sign that something has been completed successfully - it has to be green to be finished". Going forward, we will consider how we communicate that the information has been saved so that users can be confident about what has happened at this stage.​ We would like to test this with more users.

Code

I added this to the HTML:

<div class="govuk-panel govuk-panel--confirmation custom-blue-panel">
   <h1 class="govuk-panel__title">
    Identity information submitted
   </h1>
  </div>

I added this to application.scss:

Note, the HEX code for the blue is the same one used in this component: https://design.homeoffice.gov.uk/components?name=Alert

.custom-blue-panel {
  background-color: #1d70b8;
  color: white;
 }

Example blue banner:

[joelanman]

@KulanGun The success page pattern is specifically for 'you are done' scenarios. If the user has to do something else, I would lead with that as the h1, and not use the panel, otherwise there is always the danger that people miss that there's more to do.

[KulanGun]

@KulanGun The success page pattern is specifically for 'you are done' scenarios. If the user has to do something else, I would lead with that as the h1, and not use the panel, otherwise there is always the danger that people miss that there's more to do.

Thank you, I'll discuss it with the rest of the team.