Phase banner

[govuk-design-system]

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

[timpaul]

There's some evidence here from the GOV.UK Notify team that the beta banner can cause confusion and even put some people off using their service: alphagov/notifications-admin#1838

[36degrees]

Worth noting that they weren't using the beta banner, just the beta tag – as per the product page example.

A traditional beta banner might have been fine. It possibly is evidence that that the tag by itself isn't working, though.

[jbuller]

It would be useful to have clarity on whether the phase banner (and breadcrumb)s should be inside the main element or not. (I'd say outside)
The Start page pattern on the Design System has it above

However for example https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction has it inside the main element,
This means the Skip to content link only cuts out about half the points of keyboard focus it would otherwise.

[dashouse]

@jbuller @stevenaproctor Hi, you'll find this implemented in many different ways across GOV.UK sites as they were all made at different times. If you're using the GOV.UK Design System / GOV.UK Frontend then this page on the design system clarifies the structure of the page we intend people to use https://design-system.service.gov.uk/styles/layout/#page-wrappers

[jbuller]

Thanks for the pointer.
I'd say it should be clearer on the phase banner page, or link to where it is clarified.
I didn't even find the page you highlighted when I was searching.
Actually, only the 'Customised page template' section of next page has the phase banner html in the larger context, above main element https://design-system.service.gov.uk/styles/page-template/

[suryanaga]

So to request a few changes to this:

1. We should clearly state the Alpha phase banner should only be used for prototypes, not working services. Possibly a link to the service manual's page about the alpha phase would be useful here.
2. In the beta banner, we should recommend linking to both the legacy service and the support channels that are available for users struggling to use the service. (I think @soniaturcotte did something like this recently for a GOV.UK Publisher beta.) Possibly it would be good to design a few options for people to pick from, depending on the setup of their beta.

[dashouse]

Thanks @sanjaypoyzer, as this is a direct request for an update to the guidance I've moved this into an issue on the Design System itself so it can be triaged in our next session.

#869

[drewno-design]

@jbuller @stevenaproctor Frontend then this page on the design system clarifies the structure of the page we intend people to use https://design-system.service.gov.uk/styles/layout/#page-wrappers

I am not sure how to interpret the placement of phase banner. Should it be directly underneath header but before main element?

My main concern is that if the phase banner is in the main element, then it is read by screen reader at the beginning of the main content.

[jbuller]

I agree it's still not clear. The phrase "so that they sit directly underneath the header." suggests outside of the <header> element and then it says to put it in the same div wrapper as the <main> element.
So that means its not supposed to be in any landmark area?

But yes your reasoning is correct, don't put the phase banner inside the main element to avoid clutter.for assistive technology users on every page.

[terrysimpson99]

I propose a rethink of the phase banner. It doesn't satisfy a user need for the services that I'm involved with and doesn't appear to add a business benefit either. I've never understood what it's for and the guidance page doesn't say.

I asked on slack and there were two suggestions:
(1) somebody suggested it would help a user if there is more than one version of the service (such as www.moneyclaim.gov.uk
and https://www.gov.uk/make-money-claim) or one service available in two phases.

(2) somebody suggested it helps if a service is undergoing rapid change.

Scenario 1 makes sense. I can see why scenario 2 exists but for most services and most users it's a moot point. As long as the user can get from the start to the end of the journey there's no benefit in the banner.

The phase banner contains a feedback link. Here are my thoughts on that: (a) if it's important then there would be a feedback link for live services; (b) on our service in the last month, we got ~11700 instances of feedback, only 26 of those via the feedback link in the phase banner, the rest were from the post-submit feedback; (c) Of the 26 instances of the feedback some of them were requests for assistance and so the feedback link is drawing users away from our 'Get help with this page' link on the same page; (d) having a feedback link in a feedback page is too weird for me but that's what we do.

In summary, I'm raising two separate issues: the first relates to the phase banner; the second relates to in-page feedback. These two issues can be considered separately. What do others think?

[timpaul]

Thanks fo the comments @terrysimpson99 - I've fed them back to our Standards and Assurance team here at GDS.

[terrysimpson99]

Just an update on this. Some services modify the banner design. This can involve splitting the tag from the feedback link. It can also involve putting the banner below the page content. The hmrc app goes even further and has no phase banner which is what I think we should do. @timpaul has the Standards and Assurance team responded to you?

[terrysimpson99]

Somebody previously suggested a phase banner might be useful to users if there's more than one version. However, the current pattern makes no reference to this or how to switch between versions. The Coronavirus dashboard is available in two versions and allows users to switch between them. Unfortunately it's inconsistent because it used an alert for the live site (because there's no phase banner for live). I think this is another reason the phase banner needs a rethink. See:

[timpaul]

Thanks again Terry. I've fed this back to the relevant team in GDS again. I think you're right that beta banners are trying to do multiple things, and not all well. Changing them requires close co-ordination with the Standards and Assessments team here in GDS, so I'll try and arrange a chat with them.

[terrysimpson99]

There is inconsistency in how services apply the phase banner guidance. It's common for the feedback link to open in a new window. Some services warn the user by making the link text feedback (opens in a new window) others do not warn the user and the link text is merely feedback. I enclose an image of the Money Claims service which has a warning and an image of Government Gateway which has no warning.

I found guidance on the phrase '(opens in a new window)' at: https://design-system.service.gov.uk/styles/typography/ and https://design.tax.service.gov.uk/hmrc-design-patterns/open-links-in-a-new-window-or-tab/. I think it might be more error resistant to update the phase banner example to show feedback (opens in a new window). What do others think?

[frankieroberto]

@murfious congrats on passing the live assessment! Out of curiosity, can you give a rough indication of how many users (number or percentage) give feedback via the link? I've always found it to be quite low...!

[murfious]

@frankieroberto, from May 2020 to April 2021 we had just over 1.5M users.
In the same period we had just over 10K (10,345) counts of feedback, so that seems to be 0.66%.

Just under half of the instances of feedback had written comments.

Some people may visit twice to buy multiple licences but we think those numbers are low, although we can not yet tell. We are currently working on something to enable users to buy several licences in one pass.

[paulmsmith]

Adding some notes that might be helpful to others.

The service I'm working on, is currently in Alpha but has a 'live' (publicly accessible) aspect to it. The reason for this is because our service is also a 'platform' (a service to help people build other services) which necessitates it being publicly accessible to the users we're designing for and researching with, so that our team can test, try and throw-away various incarnations of it.

Currently I'm testing a hypothesis that the content of our phase banner needs to emphasise the rapidly changing functionality as well as content of the platform/service. In other words, somehow tell users that it is a risk to form a critical dependancy on it (in whatever form it currently takes for them) during Alpha/Beta phases.

Will post back when we have more.

[wilsond-gds]

Hopefully this is the best place to report this rather than the colours discussion?

We’ve had an accessibility audit on the beta version of the digital identity service and the audit picked up that the colour contrast is 5.16:1 between feedback link (#1d70b8) and background (#fff). This passes AA but fails AAA.

Please let me know if you’d like to see the full section of the report for more information.

[stevenjmesser]

Personal opinion but I think the feedback link should be removed from the phase banner. There are better moments in a journey to collect feedback, usually at the end of a transaction or set of tasks, so that we don't distract the user from achieving their outcome.

Stephen Gill wrote about it recently.

[stevenjmesser]

It'd be great to collect more evidence on how users don't understand the phase banner, especially the alpha and beta terminology. It's currently a poorly evidenced hypothesis!

[OscarJacksonCAP]

Just wondering if anything ever came of the discussion about moving the link to the end of the line.
I've seen it raised further up this discussion so just wondering if it was investigated and, if so, what was the outcome?

[andymarshall-35]

Has the placement of the Phase banner been reviewed in relation to other items that might sit in the same spot, specifically the Primary navigation component that I understand is making its way through to x-gov?
I'd been working on a page that included both, and the current guidance seems to suggest the phase banner sits between the header and primary nav [1.], but given that breaks the hierarchy of the header > nav > content, I felt more inclined to move the phase banner either above the header (contraversial) [2.], or below the primary nav (preferable) [3.] - see attached:
1.

[vickytnz]

2 things:

1. I've proposed moving the phase banner to the footer and changing it here:
   Footer govuk-design-system-backlog#96 (comment)
2. I think there's ambiguous language about the phase banner and services that are assessed to the service standard but aren't on the govuk domain - by govuk design system standards they don't need a phase banner, but by the service standard they are beta not live and should be iterating with a full-time team, so it comes down to the intent of the banner

[markjefferson-gov]

Does anyone have any insights on the effectiveness of the phase banner for generating feedback?

I have a hypothesis that a lot of services use the phase banner as a convenient place to stick a feedback link rather than from any need to indicate the development status of the service (which I think we all agree doesn't mean much to users).

A key benefit seems to be that it enables you to provide a feedback link on every page but I wonder:

• is it effective at soliciting feedback? My limited experience suggests not very
• is a feedback link needed on every page? I'd imagine we generally don't want to interrupt users during their tasks

Could a specific feedback pattern or component targeted at the right place in a user journey result in more and better feedback?

[scottywakefield]

I recommend adding attr role="status" to avoid accessibility violations. I have had a violation reported of "Ensure all page content is contained by landmarks".

[querkmachine]

@scottywakefield We have an issue where that was raised and discussed here: alphagov/govuk-frontend#1604.

The short version, however, is that the "violation" is really just a case of Axe being overzealous in how it reports things: it is not a failure of WCAG for content to be outside of a landmark and it makes very little difference to an assistive technology user whether the phase banner is in a landmark or not either, as it's not content that a user will typically be trying to navigate to.

Regardless, the status role is not appropriate to use on the phase banner. That role is intended for status messaging—elements that provide live, dynamically updating content about the current state of the page—and includes implicit behaviours for that functionality that could affect how the phase banner gets announced to users.

Assuming Axe is what flagged this to you, more recent versions of it should no longer flag this as a violation, but as a best practice instead. If you still want to have some role on the element, then the complementary role is probably the most suitable, though that also isn't a perfect fit.

[scottywakefield]

@querkmachine Thanks for your detailed answer!! Yes we are using axe. I have gone with wrapping the phase banner (and anything else we want to skip over with the skip link) in an aside element for now.

[johnwatson484]

@querkmachine Thanks for your detailed answer!! Yes we are using axe. I have gone with wrapping the phase banner (and anything else we want to skip over with the skip link) in an aside element for now.

@scottywakefield

We had the same solution.

Overzealous Axe or not, adding clearer content intent through the aside landmark isn't a bad thing.

[LydiaTeebay]

Has anyone thought of using this phase banner as a way to allow users to know that AI is driving the work? In CPS I'm trying to add in something that I think meets the same needs for adding phase banners. Thoughts?