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.

[Tosin-Balogun]

Hi all from NHS land,

I'm hoping someone can help answer the question. Is there a reason this component is called "panel"?

[joelanman]

@Tosin-Balogun hello! I think just that its a fairly generic component. It's mainly used in two places - confirmation at the end of a journey, and to highlight 'the answer' when a page is really about one piece of information, for example:

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

I wouldnt call it a card as I think that implies using multiples where this is intended to be the main thing on the page. Did you have other name ideas?

[Tosin-Balogun]

@joelanman thanks for responding quickly. I think I understand the component when I saw the guidance, but on its own, it confused me a lot.

Bit of context, we have recently adopted this on the NHS app as well and tested it, which worked well. But in creating our guidance document for the design system, calling it panel without context felt incomplete. That's what prompted the question to see if there was a reason it was called just 'panel'.

I have no quick snap ideas of naming ideas, but prob something we would explore on the app programme. Have you guys observed primary users (service teams) being able to understand what the component is by its name?

[joelanman]

@Tosin-Balogun not sure sorry! But its a good point. Just thought, maybe 'Information panel'?

[querkmachine]

I'm not sure what would be a good, qualifying name for it.

"Answer panel" doesn't always work because it doesn't always show an answer. e.g. An application reference number.

"Confirmation panel" doesn't always work because it doesn't always come at the end of a user journey. e.g. The user has completed the online form, but something still needs to be manually approved or there are further, offline steps needed. That said, the pattern that most prominently uses it is called a "confirmation page".

"Information panel" seems too vague to me. A lot of components, both in the existing DS and in the backlog, could be described as an information panel. A Notification banner is a panel of information. An interruption card (#27) is also a panel with (usually important!) information. Inset and Warning text components could fit the bill too, though in their present appearance aren't very 'panel'-y.

"Success panel" would fit the naming convention we've used in some other places, such as the success version of the Notification banner. It feels... off still, to me, but it seems to fit the intended use better than the others.

[joelanman]

I don't think Success would fit the use on pages like VAT and Bank Holiday? And Panel is even more vague, no? I don't have a strong opinion at this stage it might be best to keep it as its what people are used to

[tomwjt-naimuri]

I have a relevant scenario to this. A user scans a reference number and is presented with an active/inactive status; both can be seen as end of journey. The action is to verify. I'm torn between using the confirmation page pattern and updating to red, if the status is inactive. Any thoughts?

Alternatively, I was looking at the notification banner. The instruction states:

"You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished the current journey, so it does not make sense to use a confirmation banner."

I'm inclined to go with option one as the form has been completed, but there are two different end states. I'd be interested to hear if others have come across a similar situation.